Storyboard – Animations Part 1

Storyboard – Animations Part 1


in this video we’ll take a look at working with animations what I’d like to do is set up an animation that creates a glow when I hit the temperature up in temperature down buttons I’ve already added an animation here to this plus button so on temp up you know I’ve got this little red glow that happens behind the button and we’re going to do the same thing for the minus button right now it is using a up down naming convention that creates a little glow on the outside when you hit it but I’d also like to include an animation when I hit that button so let’s take a look at how we set that up here I’ve got the minus button and on top we have that image that we see and then the image below we don’t see it’s called – underscore glow and the reason we don’t see it is when I imported it from Photoshop the transparency was set to zero and so when it comes in the Alpha Channel is at zero if I turn it up all the way then we see that we’ve got that sort of blue glow that exists around it and what I’d like to do is hide this behind the minus button which is currently what’s happening over here with that red glow so the blue glow will take – glow and instead of having the image be the full sort of size of this control which is 180 pixels wide what I’m going to do is I’m going to scale it and I’m going to say don’t match the control width instead we’re going to divide this by to make it habit size so that’s 90 pixels wide and then here I’ll do the same thing I’ll change this to be 90 pixels high now you can see that blue glows hanging out at the top left of this control and that’s because be alignment so it’s in the center and middle then it’s behind that minus button but one from the top left you know we see in that top corner so now we’re ready to kind of create that animation that makes it sort of grow out and in fade out all at once so up here at the top I’ve got this green icon to toggle recording animation so when I click that you see we’ve got this red key line it sort of appears around our application view and this is just to let you know that we’re recording an animation and what that means is that any change that you make in the UI is going to get recorded as an animation step so what I can do is I can start making all the changes that I want to have happen in the animation I’ll take that – globe and we’re going to take that width and if I multiply it by two you know it grows out two hundred and eighty pixels wide and I want to do the same thing with the height so it goes out in size completely and I also want to take that alpha and I want to go from full visibility down to nothing so now you don’t see it anymore and those are three steps to just got recorded into the animation now at this point what I want to do is put everything back to where it was because you know you might run this animation several times so to the right of that some recording animation icon is the animation snapshot icon and when I click that we’re going to move into a new frame you can see down here where it says recording frame 1 when I click this says recording frame 2 and basically this is a way to work with sequences within your animation so we have the first stuff that we wanted to have happen recorded now I’m in frame 2 and I will take the glow on that blue glow and I want to put it back to being fully visible and I also want to hide it back behind that control so this can go back to 90 pixels wide and 90 pixels high and that’s where I want it to be when the animation is done so that’s ready to run the next time we run that animation so I’m going to toggle recording the animation off and I’m given this dialogue here so I can animation I’ll call it temp underscore down 60 frames-per-second hit okay and now we’re taken into the animation timeline view so these are six animation steps that make up that animation here this is the steps that have everything to do with the Alpha there and then this one in the middle controls the height and one at the bottom is controlling the width of that glow so these are the values where it goes from fully visible alpha 255 down to zero and then for here the height goes from 90 to 180 and so on and you have those numbers kind of in these bars in the animation timeline view and you can you know click around in here to sort of grow it in size and also these same steps and you know you can see everything in the properties view so what I’d like for me now are these icons along the top of the animation timeline view yeah you work with your animation here the one on the right here though if I hover over it says preview animation and if I click that I’m taken into a little window it kind of demonstrates what that animation is going to look like now it’s not exactly how I want it to run if I go back and beginning and see it sort of grows out in sides and it starts fading and then the second half of the animation you can see that it’s shrinking and it fades back in so instead what I would like is for us to not see that second half and I can do that by changing the duration here of this step say and when you’re done in zero milliseconds go back to being fully visible and I’ll do the same thing with these steps that take it back to 90 pixels in width and height so for those step durations it’s going to take 0 milliseconds and now I’ve got this animation if we preview it again here it starts growing out in size as we expect and fades out I find that it’s fading out a little too early so I’d like to do is maybe is shorten this a little bit and you can grab these little bars and kind of drag their width in the timeline it will change how long it lasts so for these I’m going to delay it to start at 150 milliseconds and I want to finish at the same time as the other steps which were half a second long 500 milliseconds and if I subtract that 150 milliseconds you know we’ve got 350 now everything’s kind of lined up so also with these they’re growing in the width and the height I’m going to work with the easing rate here and instead from from linear I’m going to have it ease out so it kind of starts out quickly and then sort of finishes slowly and if I preview that again that’s what we’ve got as our animation so now all I have to do is add an action on this – control to run that animations over I click say add action and say okay on press run an animation and then here I can select you know temp down and we already have an animation for temp up when I hit finish mag and see that actions been added to this – control so here I’ll hit simulate to simulate the project I’ll be asked to save my changes which I will do and now in our app when I hit the minus key we run that animation now when I hit the plus key see it’s running the temperature up animation now they’re a little different from one another and I think I prefer the one that we just did and that’s because they’re using different timing animation rates so here if I go back in the animation timeline view and select temp you can see that the width and the height those use that linear rate so I’m going to switch those to be these out as well and for the Alpha we will change that around the start at 150 milliseconds and have that be 350 milliseconds so if I simulate and save and now if I run my – animation or temp down animation and temp up animation that’s looking the ways that I’d like them to do so that is getting started with working with animations in storyboard [Music]

Leave a Reply

Your email address will not be published. Required fields are marked *