Flash Quick Tip - Seamless Looping Tween

Have you ever wanted to make an object rotate continuously in Flash? It sounds simple enough:

1) Convert your object to a Symbol such as a Movie Clip
2) Create a second keyframe a ways out from your first one
3) Tween the two key frames
4) Set the rotation in the Frame Properties of the first keyframe to either Clockwise or Counterclockwise.

This does work and as long as the second keyframe is the last frame in the timeline, the animation will loop continuously when you play or preview your Flash movie. Of course there's one small problem: The animation pauses briefly every time it loops back to the beginning. This is because the first and last frames (the keyframes) are the exact same thing while the rest of the frames all show the object in a slightly different position.

To remedy this, all you have to do is add a couple extra step to the list above. After you've set the rotation (or any other property):

5) Right-Click on the frame just before the last keyframe and select "Insert Keyframe"
6) Right-Click the last keyframe and select "Clear Keyframe"

Now when you play or preview your Flash movie it will loop seamlessly. The one thing you need to keep in mind is that if you need to change the length of the tween (the amount of frames in between the keyframes) you will need to redo all the steps otherwise you'll again see a slight stutter.

Flash Quick Tip - Scale and Rotate

Here's something simple that took me a while to discover about Flash. Normally when scaling and rotating objects I would use the Free Transform tool which works similar to similar tools in other graphics programs. To get more exact I also would use the Transform Panel. Flash actually offers a third way to transform object though and using it can really speed up development time. With any object selected press the <<Ctrl>> <<Alt>> and <<S>> keys at the same time and a little box titled "Scale and Rotate" will pop up. Enter whatever values you want and press the <<Enter>> key. The time saving trick will be evident when you use this command again as it will save your last values. This means that if you have 50 objects that all need to be rotated or scaled to the same dimension, you set values to the desired number for the first object then just keep clicking objects, pressing <<Ctrl>> <<Alt>> <<S>> and then <<Enter>> and you will be through all your objects in about a minute. To do the same thing with the Transform Panel would probably take twice as long and a lot more clicks and typing.

Controlling the Timeline with simple script in Flash

Timelines really only become useful when you learn how to control them with action script. Otherwise they will just continuously play, looping to the beginning once the end is reached. To stop a timeline at a certain frame all you have to do is place the a stop(); action in a keyframe. It’s a good idea to designate an empty layer as a script layer so you can easily find your script later. Then insert a keyframe at the place you want it to stop and be sure you have the keyframe selected. Then open the Actions Panel (hit F9 to toggle) and add the action script:

stop();

So now you can stop your timeline which will keep it from looping. What if you want to start it playing again though? The script for this is really just as simple but you will also need something to trigger it like a button.

Buttons are pretty easy to make. Simply select an object on the stage (or just draw a box) then right click it and select <<Convert to Symbol>>. This opens a little window in which you need to set the Behavior to Button and click Ok. You now have a button. To add the play(); script to your button be sure you have the button selected and open the Actions Panel and add the action script:

on (release) {
play();
}

You’ll notice that this starts with what is called an event handler. This is what will trigger the action which is contained in the {} brackets. All button handlers start with “on” followed by in this case (release) which tells flash to run the script play(); when the user releases the mouse (basically right after the mouse clicks the button). You won’t see any of this script functioning till you test your movie so give it a try by selecting <<Control>> <<Test Movie>>. Congratulations! You now can control your timeline.

Movie Clips and Timelines in Flash

One of the most difficult concepts for me to grasp when I started learning how to use Flash was the idea of using multiple timelines. It made sense to me to have the main timeline but I just couldn’t wrap my brain around what the advantage of more timelines would be. Why not just animate everything on the one timeline to make it less confusing, I figured. Then one day the light bulb came on in my head and all at once I realized all the advantages this concept offered.

The idea is that you have a base timeline referred to as the main or _root timeline. This is the main timeline in a flash file. In the frames of this timeline you can place a variety of objects including shapes, text, video, music, pictures, buttons and movie clips. Movie Clips are special because they are basically another Flash movie complete with its own independent timeline and objects. The difference is that you can then animate the position, scale, transparency and other attributes of the entire movie clip from the _root timeline allowing you to easily create some very complex animations.

Think about it like the windshield wipers on a car. In essence they are part of the car and if the car moves a few feet forward in a parking lot, the wipers will move along with it. Now if these wipers are turned on they would not only be moving forward with the rest of the car but they would also be move up and down relative to where the car is in the lot. In this metaphor of the parking lot is your _root timeline and the car as a movie clip. The windshield wipers don’t exist directly on the _root timeline but rather are an object inside the car movie clip. This way we can animate the car on the main timeline without having to worry about whether the wipers are moving or not. Of course you could animate every moving part of the car on the _root timeline but if you did that you would have to be very careful that the car didn’t start moving ahead of the wipers as that wouldn’t look realistic at all. And then if you needed to change the animation it would be a ton of work updating the cars position as well as the wipers. Fortunately using the movie clip method we can stop the care and keep the wipers moving or move both at the same time very easily and the car will always take the wipers with it.

This whole concept is really very similar to how real live objects work so once you get use to it, the whole thing is quite natural. Think about it: I can move my fingers but their position changes will also change when I move my hand. My hand will move relative to my arm, my arm to my body and so on. My body, even if it’s sitting still, is still moving in our solar system relative to Earth’s movement…gets pretty complicated. But everything is connected and is a “child” of something else and that’s the way Flash works as well. Movie clips with their timelines just make up one huge family tree.

“Best” Image Quality in Flash

A while back I was having a problem with animating a raster picture in Flash. I had a JPG image and wanted to animate its position and scale so it would move across the stage while growing bigger. This seemed simple enough, so I converted the JPG to a movie clip and set up a tween adjusting the keyframes and it previewed perfectly on the stage. I was less then impressed however when viewing the published SWF. For some reason my animated picture had very jagged edges and didn’t look smooth at all. Interestingly enough if I didn’t animate the clip or just scaled the image directly on the main timeline it looked fine when published. After much frustration and doing some investigating, I found the answer to my problem.

The Flash Player has an image quality setting with three selectable settings (Low, Medium or High) from the contextual menu when viewing a published flash file. You can see these settings by right clicking the screen in a running Flash SWF file and selecting <>. I always left this set at the default <> setting but what I didn’t realize is that there is a fourth setting called <> which solved my problem with poor quality images when animated. You can only set the quality to <> through action script but it’s a very simple line of code that can simply be pasted into the first frame of your Flash movie. The code is:

_quality = "BEST";

I found very little documentation on this but it’s so useful that I’ve gotten in the habit of putting it in most of my flash projects. Basically what it does is it applies an anti-aliasing filter to pictures in the Flash movie which smoothes out the scaled images. About the only time when you might not want to use this is if your movie has a lot of complex animations working at the same time. In a case like this using the <> setting may slow down the animation or make it look choppy so it may be better to use a lower setting. Most of the time though, this will be a great and easy way to get better looking animations.