The final step before programming any interaction is to go ahead and add some introductory animation to the assets we’ve created. We’ll keep it short and simple, as the focus for this piece will be the interactive animation which occurs once this small bit completes.
- [Narrator] The final step before programming any interaction is to go ahead and add some introductory animation to the assets we've created. We'll keep it short and simple, as the focus for this piece will be the interactive animation, which occurs once this small bit completes. The first thing we'll do is go out to 75 frames, click and drag across all the different layers on that frame to select them all, and then choose Insert, Timeline, Frame. This expands the frame span for each of those layers from one to 75.
The first thing we'll animate is our title. Since this is a movie clip symbol, we can right-click on that frame span and choose to Create Motion Tween. I'm gonna have the title itself come in on about frame 28. So I'll just click and drag that key frame across, so it doesn't actually appear until there. And what we wanna have happen is we want it to start off kind of down here and with the alpha transparency under Color Effect set to zero.
So it's invisible and it's down here. Moving over to around frame 41, we want to change the alpha transparency back to 100%, and shift this back up into the very spot that it actually existed in before. So if we preview this, we can see that it just kind of nicely appears and moves up into place. Let's lock that down and move on to both the hill and the foreground.
Now the foreground, remember, we created as a move clip symbol, so I can once again right-click and choose Create Motion Tween. For the foreground, make sure you're starting at frame one, and then simply move the foreground bushes down a little bit with your arrow keys until it looks pretty good. Again it doesn't have to be precise. Moving to about frame 25, let's go ahead and move those back up to something like that.
We'll do a similar thing to our hill. Now the hill's a bit different because the hill is a basic shape. It's a drawing object. So what we need to do before we create a shape tween is select frame 25 and choose Insert, Timeline, Keyframe. With that done, we can click anywhere between those two key frames for the hill, right-click and choose Create Shape Tween. Our shape tween is created, and then we can go back to frame one and just shift the hill down a little bit.
We can see that sort of just rises up. Pretty nice. Similarly between frame one and frame 25, we want the bushes to sort of rise up as well. So to do that, we'll select across both of those frame spans on each layer and then right-click and choose Create Motion Tween. That'll create a motion tween on both bushes one and bushes two. Going out to your frame 25, we'll select the bushes and then just lower them a bit until it looks really nice.
We can also make adjustments on frame one. Something like that. And then if we go ahead and preview, we can see how that looks. So it's very subtle. The last thing we need to do is adjust our happy bug. So initially, let's have him actually way below here, so something like that. And then we'll want to of course create a motion tween for him so that we can animate him.
Starting around frame 52, we're going to go ahead and just click on the bug itself, and then just move the arrow key up and then down. That's going to create a positioning key frame for us there. So everything's gonna be the same from here to there. And then over on frame 70, we want him to actually come and peek up out from behind the bushes, just so you can see his eyes.
There we go. Let's preview this. Alright, this wraps up the primary design phase. Now we have to go ahead and make it all interactive.
- Implementing desktop and mobile interactions
- Designing an animated web banner
- Creating titles
- Programming the banner
- Publishing the banner
- Designing, programming, and publishing an interactive animation
- Importing visuals and audio
- Integrating Animate animations into a responsive HTML website