g
Printer Friendly Version

editor  
BellaOnline's Flash and Animation Editor
 

Flash Thanksgiving Animation

In this tutorial, we will create a simple text effect Tween using FlashR Motion Presets for a Thanksgiving project. If you have been following along with the Digital Art tutorials, you will have already created the background image for this project. If not, use the link at the bottom of the page to read that tutorial.

The first step is to merge all the layers in our PhotoshopR image. As mentioned in the tutorial, we needed each leaf on it's own layer when we created the background image. However, now that we are ready to use it as a background image for our Flash animation, we can merge all the layers into that one background layer.

  1. Open your background image into Photoshop. From the Menubar, click Layer Flatten Image. Now, we can save this version of our image in the default psd format. In order to keep the layered version intact, we need to save this flatten version with a new name. Let's call it ThanksgivingFlattened.psd.

  2. Start a new project in Flash CS4. Rename Layer 1 to "Background".

  3. We can import our flattened image into our Flash project. Click File Import Import to Stage. Browse to your ThanksgivingFlattened.psd and choose that as your import image. It should appear on the Flash stage.

    Because we made the background image the same width and height as the default Flash stage, it will automatically be centered in position on the stage and ready to go.

  4. Add a new layer to the Timeline and name it "Happy Thanksgiving". This will hold the preset motion tween for our "Happy Thanksgiving" text.

  5. Click on the stage with the Text tool and add our text in the text box. In the Properties panel, you can change the font, style, size and color of the text. In the example, I kept the Times New Roman text but set the size to 35pt. I also set the Anti-alias for animation and changed the color to a dark red (#BD2226).

  6. With the text still selected, click Window Motion Presets to open that panel. In this panel we have several presets in the Default Presets folder. Experiment with each preset to see which one you wish to use in your animation. In the example, I used the "Multiple-bounce" preset.

    There is one important thing to remember when working with Motion Presets. The preset will be applied to the object (our text) as it appears in the first frame of the preset animation. At this point, our text is centered on the stage. In the Multiple-bounce preset, the text will drop a little and bounce a few times. But, if I apply the preset to the text at the current position, the text will not be visible when it drops. It will drop off the bottom of the stage and we will not be able to see it bounce. Therefore, I need to place the text at the top or above the stage. This way, it will drop down and bounce at the center of the stage. This is the effect we want. If you are using a different preset, you will want to decide where the text should be at the start of your animation.

  7. Select the text and drag it to just above the stage. To apply a preset to your text, select the preset of your choice and click the Apply button.

    Each preset is a motion tween with a set number of frames that will be added to the Happy Thanksgiving layer.

  8. Before we test our animation, we need to extend the Background layer to the end of the preset tween. In the example, that is Frame 75. Right click on this frame on the Background layer and Insert a Frame. Now we can click Control Test Movie to preview our animation so far.

In the next tutorial, we will refine this animation and add a second preset to finish our project. At this point, save your project in the default .fla format.

Next →


Join us in the Flash forum.




Flash and Animation Site @ BellaOnline
View This Article in Regular Layout

Content copyright © 2013 by Diane Cipollo. All rights reserved.
This content was written by Diane Cipollo. If you wish to use this content in any manner, you need written permission. Contact Diane Cipollo for details.



| About BellaOnline | Privacy Policy | Advertising | Become an Editor |
Website copyright © 2013 Minerva WebWorks LLC. All rights reserved.


BellaOnline Editor