Extreme Motion-Photoshop to Flash Part II

Before you begin this tutorial, you should have finished part one of my tutorial, which shows you how to export transparent PNGs for animating in Flash. You should be able to end up with animations like these.


The most common of these animation is example number 3, applying a simple horizontal motion blur effect in Photoshop so that you end up with what appear to be a very fast moving version of your logo.


Here's a sample of what it should look like:












The weird thing about animating extreme motion is flash is that you rarely have to tween it. Tweening is the way most animation is achieved in Flash, you have one movie clip and you create a motion tween between two keyframes. The extreme animation look can be achieved by simply having a single frame with a blurred logo on it.

Open up your flash document with the logo that you created after part one of this tutorial.


200509050127


Open up the library (Command-L on a Mac, Control-L on a PC). You should have at least four elements in your library. A bitmap of your logo, and a movie clip symbol of it as well. You should also have a blur of your logo as well as the bitmap of the blur.


Since we're going to animate motion, the first thing you need is to add some additional frames to your animation. Flash is a time based program, and time in flash can be measured in how many frames in a second are displayed to a viewer. Normally a Flash movie starts off with 12 frames per second. If we wanted to create a movie that was 5 seconds long, you would need to add 60 frames. Let's do that.


1. On the timeline look on layer 1 click on frame 60

2. Hit F5 on your keyboard.


200509050157


Flash will add some blank frames to your document. Now that we have additional frames, we're going to need to create an additional layer. We're going to have two elements in our animation. The logo itself, and a blurred version of the logo.


1. On the layers area of the timeline, click on the add a layer button on the bottom left hand side.


200509050201


Okay, now just for clarity's sake, we're going to name the layers. We want the top layer to hold the regular version of the logo and the bottom layer to hold our special effect created in Photoshop.


1. Double click on the top layer and rename it logo

2. Double click on the bottom layer and rename it effect


We're ready to start placing our graphics. To achieve this effect, we're going to work a lot with the blur, so let's place the blur on the right layer of the timeline.


1. To place an item on a specific layer, that layer must be selected.

2. On the timeline, make sure the proper layer is selected. Click on the layer if it's not selected, it should be colored blue.

3. Now, make sure the library is opened (hit Command-L on a Mac or Control-L on a PC)

4. Drag a copy of the logo blur onto the work area.


200509050233


To simulate fast motion, we want to do two things with the logo. First, it shouldn't appear on the first keyframe...there should be a delay before the viewer sees the logo. To take care of this we're going to drag the keyframe indicator (the black circle on frame 1 of the bottom layer)


1. Click once on frame 1 of the effect layer

2. Let the mouse go and click and hold the mouse on frame 1 of the effect layer.

3. drag the black dot to frame 6 in the timeline.


200509050239


We're trying to achieve a sense of motion so we're going to need two versions of this blur...one that peeks in on one end of the screen, and one that appears to be at the other end.


1. Click on the logo in the timeline and move it to the left side of the work area.


200509050243


To achieve the motion effect, we're going to need another copy of the logo on the other side. We want to create a new keyframe right next to this keyframe that has a version of the logo on the right hand side.


1. Click on frame 7 on the effect layer.

2. Hit F6 on your keyboard.


When you do this, your work area will have a copy of the logo in exactly the same spot, so although it may not look like it, you have two copies of the logo in your animation.


200509050250


What you want to do now, is move this copy of the logo to the other side of the screen so that the logo looks like it's zooming past the screen.


200509050251


If you look at the timeline, you'll notice that after frame 7, Flash shows a darker gray area. This means that the object on this layer continues to exist until the end of all available frames.


Let's play the animation and see what's happening here.


1. Hold the command key (control on a PC), and hit the return key.


When you play the animation, you'll probably notice that the logo blur starts off on the left side of the screen, quickly moves to the right and remains there. That's no good. We need the logo to disappear right after it moves to the right side of the screen to give the illusion that it's moved accross the screen.


1. Close the preview screen

2. In Flash, place your cursor on frame 8 of the effect layer.

3. Hit F7


F7 will add a Blank Keyframe to your timeline. This will create a keyframe with no artwork in it. Now preview your animation and the logo will appear to zoom through the screen correctly.


200509050301


Great...we've achieved our first zoom. Now let's make it come back. We need to add another keyframe. a keyframe in flash is a frame that has a change of artwork. It's a frame where something different happens. We can create a keyframe in flash by hitting F6. When we do that, flash looks to the left of the cursor to see if there is an object there. If there is, it will make a duplicate of that object at the new position.


1. Click on frame 15 of the effects layer

2. Hit F6


200509050311


You should have a new keyframe at frame 15, but no new artwork there because there was a blank keyframe to the left of this new keyframe. We could drag another copy of the logo from the timeline, but since we want the logo to be placed at the same vertical position of the previous blur (we want the illusion that the same logo is coming back the other way). The easiest way to get artwork in the same place where it was in some other frame is to copy it from that frame and paste it on the new one.


1. Click on frame 7

2. In the work area, click on the picture of the logo blur

3. Copy the logo to the clipboard (hit command-C mac, control-C on a PC)

4. Click back on frame 15

5. Go to the EDIT menu and select PASTE IN PLACE (Command-Shift-V mac, Command-Shift-V on PC).


200509050312


You'll want to add a keyframe on frame 16 and move the logo to the other side of the screen.


1. Click on frame 16 of the effect layer

2. Hit F6 on the keyboard

3. Move the copy of the logo to the right side of the screen (hint: hold down the shift key while draggin to constrain the movement of your artwork).


200509050314


4. Move your cursor to frame 17

5. Push F7 on your keyboard to create a blank keyframe there.


We're going to create some frames where two copies of the blur seem to come together to create the final version of the logo.


1. Click on frame 28

2. Push F6

3. Click on frame 16

4. Copy the logo there

5. Click back on frame 28

6. Go to the EDIT menu and select PASTE IN PLACE


200509050318


This time we're going to want a second copy of the logo on the same keyframe on the other side of the screen.


1. Hold down the option key on a Mac (alt on a PC)

2. Click on the logo and drag it to the right hand side of the screen. (hint: hold down the shift key while draggin to constrain the movement of your artwork)

3. Flash will place a copy of the artwork on the right hand side of the work area.


200509050321


On the next keyframe, we want another copy of two logos, but closer together.


1. Click on the next keyframe on the effect layer.

2. Hit F6

3. Move the logos closer together.


200509050322


Now it's time to bring in a regular version of the logo. We're going to place a normal copy of the logo on frame 30 on the logo layer.


1. Click on frame 30 on the logo layer

2. Hit F6

3. Drag a copy of the logo onto the work area

4. Position the logo so it looks like it's in between the two blurs.


200509050326


We need to get rid of the blurs, but we dont' want to do it on frame 30, but on frame 31. so that all three copies of the logo (two blurred and one regular) stay on screen for one frame.


1. Click on frame 31 of the effect layer.

2. Hit F7


Try playing previewing your animation...it looks good, but it's missing a bit of oomph. We'll accomplish that by playing around with the animation of the logo. First we want to make the logo appear to pop to a larger size, then slowly zoom back to it's normal size.


1. Click on frame 31 of the logo layer

2. Hit F6

3. Click on frame 35 of the logo layer

4. Hit F6


This will create two duplicates of the logo on each of these keyframes.


200509050331


We want frame 31 to have a version of the logo that is somewhat bigger.


1. Click on frame 31 of the logo layer

2. Press the Q key on your keyboard or choose the Free Transform tool in the toolbox

3. Click and drag to make the logo bigger (hold down the shift key to make the transformation proportional).


200509050337


Now we need to animate the logo so that it shrinks to it's normal size.


1. Right click anywhere between frame 31-35

2. Select Create Motion Tween


200509050339


Now play the animation. It looks pretty good, but I think it could be a little more dramatic. To do that, I'm going to change the color of the logo so that it is animated as well. Flash provides and advanced option to a symbol to change it's color parameters.


1. Click on frame 31 of the logo frame

2. Click on the logo (this is critical or you won't see the properties palette give you the right option)

3. On the properties palette choose the color option and select ADVANCED.


200509050344


4. To the right of the advanced option, a button called settings appear

5. Click on the settings button. You can play around with the settings there. here's the settings I used to give the logo a yellow tint.


200509050347


Preview your animation and pat yourself in the back...You're all done.

blog comments powered by Disqus