Join Anastasia McCune for an in-depth discussion in this video Tweening from the collapsed state to the expanded state, part of Best Practices for Flash-based Banner Ads.
- View Offline
The collapse state of our ad is ready and we're ready to build the tween between the collapse and the expanded states. Let's have our tween last 10 frames. So select Frame 10 on the Actions layer, hold down the Shift key to multiple select, and select Frame 10 on the bottom layer, and hit F5 to expand her timeline out to Frame 10. Now our invisible button doesn't need to be present across all 10 frames. It is only there to make the collapse state clickable. So let's right-click and insert a blank keyframe on Frame 2 of the invisClick layer. The image of the biker in her final resting spot after she's cycled across the screen should tween from the top of the screen to the bottom. Since this is a nested movie clip which has the cyclist moving in it, we need a clip with no motion to tween from the top to the bottom.
So let's do two things. Let's add a blink Keyframe to the collapse state where the biker exists and now let's add another layer underneath our mask layer. We'll call it expandTween and we'll add a blank keyframe on Frame 2 to add our content to. I am going to turn off the visibility of our mask so the tween isn't in the way. In the library, in the animation parts folder drag-and-drop an instance of biker_animEndFrame movie clip to the stage on the expandTween layer. We can use the Property Inspector to line this up so let's give it an X of 367.5 and a Y of 45.25. So let's go ahead and add our motion tween.
So this goes from the top of the screen to the bottom. So we'll right-click in our expand biker layer and Create Motion Tween and we'll move our playhead to Frame 10, and then making sure that the movie clip's selected and then in the Property Inspector we're going to leave the X where it is but change the Y to 250.5. Let's also tween our mask. Right now we can only see 728x90 of the entire movie, because the mask is only at that dimension. We need to have it end up at 728x315 by Frame 10 so let's right-click and choose Create Motion Tween.
Flash asks us, if we want to change the shape into a symbol. Since we want to tween it we have to so let's say yes. So Flash creates the tween and a movie clip. We can find that movie clip in the library and rename it to mask so we know which one it is. So let's complete our tween for the mask. So let's move our playhead to Frame 10 and in the property Inspector click on the mask movie clip and in the Property Inspector change the height to 315. So let's go ahead and scrub our playhead and we'll see both of our motion tweens are working well, so we can go ahead and lock both of these layers and let's go ahead and test our movie.
Okay so our tweens are working but as you can see it's going a little bit crazy and we need some timeline control. We need to put a stop on frame one so the ad doesn't expand without the user clicking. Then we also need a stop on Frame 10 so it stops at the point where it's fully expanded. So let's go ahead and do this. In our Actions panel for Frame 1, we'll go ahead and add a stop above the clickMe function and then we'll just copy that stop, add a blank keyframe to Frame 10 on the Actions layer, and paste in the stop there as well.
Finally back on Frame 1, let's get rid of the Hello in the click handler function for the button and replace it with code so that the ad actually expands when someone clicks. So we'll just replace this line of code with a goToAndPlay Frame 2. Let's test our movie and indeed it stays at the closed state until we click on it. And then it expands. So let's go one step further now and write code to load in the first panel. So above our goToAndPlay line in our clickExpand function we are going to add three more lines of code.
This line of code is telling Flash which SWF we're going to want to load in. You will also notice that Flash adds in another import statement for us here for the URLRequest class. This line of code hooks mRequest up to the loader object we created. And this final line of code actually mLoader to the display list. Essentially it adds it to the screen so we can see it. So we click to expand and our panel one SWF is loaded in. But you can see it looks a little bit bad because of static biker image and are loaded in panel and SWF movie are on top of each other and they don't line up.
Rather than worrying about lining these up, that let's get rid of the static biker image. We don't need it here; what we want to display is panel1. So close our Actions panel and on the static biker image layer, let's drag between over by one so it's only 9 frames long. Let's go ahead and test one more time and that's much better. panel1.SWF is loaded in and we'll look at FLA files for both panel1 and panel2 in just a bit, but you can see that panel1 fits perfectly when it's loaded in.
It's got the dimensions of 728x315 and it's being loaded in at the point of the 00, the upper left corner. This is the default when you use the loader class to load something in. Notice also that the buttons for panel1 work. You can click the DVD button, you can click the Facebook button, all of the buttons work. The ActionScript that controls those is all within the panel1 SWF and it still works even though panel1 SWF is being loaded into our main movie.
So the tween part is complete and if we click on the stage and open the Property Inspector back in our FLA, we can see that our file size is currently 27.4 K, well under the file size limit of 40 K for this file.
- Understanding terminology
- Gathering requirements
- Understanding whether to use Flash or HTML5
- Setting up an ad and using guide layers
- Adding clickability
- Optimizing images and text
- Publishing final files and images
- Creating input text fields
- Creating a print job
- Handling print errors
- Tweening between collapsed and expanded states
- Adding timeline control
- Addressing security issues