Our Flash tutorials provide you with step-by-step instructions on how to create beautiful Flash animations and integrate them into your website.  Home Flash & Swish Flash Tutorials Animate a Logo in Flash
Your Ad Here

Animate a Logo in Flash


With web and multimedia design there is the opportunity to add a little fun and creativity to your logo by creating a simple animation effect. Obviously this process isn't limited to just your logo; animating an element can help draw attention to a particular object or area of a webpage or digital presentation.

This tutorial covers the process of animating the lemon to fall into place with a characteristic thud using squash and stretch techniques, then pulsating at an increasing rate until suddenly popping. The animation then begins again with the lemon falling into place.

To start, open up your vector logo design in Adobe Illustrator.

Animate a Logo in Flash image 1

Export the vector logo file as a Macromedia SWF file and select the Preserve Editability checkbox.

Animate a Logo in Flash image 2

Open Macromedia Flash and create a new document with your desired dimensions, and ensure the Frame Rate is set to 24fps for a smooth animation.

File > Import > Import to Stage and navigate to your logo SWF file. This will place the logo in vector format on the Flash artboard.

Animate a Logo in Flash image 3

Select all the objects that make up the lemon shape and group them (Ctrl/CMD + G), then Cut the lemon and Paste on a new layer. Remember to name your layers accordingly for future reference.

Animate a Logo in Flash image 4

Highlight frame 50 on both layers and Insert a Keyframe (Right Click > Insert Keyframe), this gives use some space on the timeline to work with.

Animate a Logo in Flash image 5

On frame one, Copy the lemon then drag it off the stage vertically. Insert a Keyframe at frame 5 and Edit > Paste In Place the lemon, delete the top version of the lemon on this frame.

Animate a Logo in Flash image 6

Right Click between these two Keyframes and select Create Motion Tween. You will see the blue tint and arrow symbolising the tween between these frames.

Animate a Logo in Flash image 7

Insert a Keyframe at frame 7, then back on frame 5 squash the lemon down slightly with the Free Transform Tool, hold ALT to move just one axis.
Create a Motion Tween between frames 5 and 7.

Animate a Logo in Flash image 8

Create a new layer under the lemon named Shadow. On this layer draw an oval with a grey to white gradient fro the center. Use the Gradient Transform Tool to edit the shape of the gradient to give perspective.

Animate a Logo in Flash image 9

Insert a Keyframe at frame 5 on this layer and scale down the shadow to give the impression that the lemon is far away. Create a Motion Tween between these frames.

Animate a Logo in Flash image 10

To begin with the pulsation of the lemon up to the explosion, insert Keyframes at frames 53 and 56. Scale up the lemon slightly on frame 53. Create a Motion Tween between frames 50-56.

Animate a Logo in Flash image 11

Copy these frames and Paste them in at frame 65 for the pulse to repeat.

Animate a Logo in Flash image 12

Animate a Logo in Flash image 13

To create a faster pulsation insert a Keyframe at 75, then Copy frame 68 and Paste in at frame 77.

Animate a Logo in Flash image 14

Copy the frames between 75-77 and paste in at frames 79, 82, 85 and 91 to repeat the pulsation at the slightly quicker pace.

Animate a Logo in Flash image 15

Animate a Logo in Flash image 16

Create an even quicker pulsation by Copying frame 77 and Pasting in at frame 94, Copy frame 77 and Paste in at 95, then Copy frames 94-95. Paste these in at 96, 98, 100, 102, 104, 106, 108 and 110.

Animate a Logo in Flash image 17

To finally make the lemon pop and disappear insert a Keyframe at 112 and scale up the lemon. In the properties panel change the Color to Alpha and set at 50%.

Animate a Logo in Flash image 18

Insert a Blank Keyframe (Right Click > Insert Blank Keyframe) at frame 114.

Bring the Shadow and Logo layers up to present on the timeline by inserting frames (F5) at frame 150.

Animate a Logo in Flash image 19

If you play this animation (Enter) you will see how all the Motion Tweens give the lemon it's animation, however the same must be done to the shadow to mimic the shape of the lemon.
On the Shadow layer insert Keyframes to match the Lemon layer above and scale the shadow up appropriately on frame 53. Create Motion Tweens between 50-55.

Animate a Logo in Flash image 20

Copy frames 50-55 and paste at frame 65.
Repeat this process as you did with the lemon originally, until the shadow takes the same pulsation movement as the lemon.
Insert a Blank Keyframe at frame 113.

Animate a Logo in Flash image 21

Animate a Logo in Flash image 22

One final tweek is to fix the white overlap of the shadow on the logo text. Simply drage the Text layer above the Shadow layer.

Animate a Logo in Flash image 23

Animate a Logo in Flash image 24

Press Ctrl/CMD + Enter to publish the animation as an SWF.



Author's URL: Blog.SpoonGraphics
Thank you for voting.
Rate this Materials:
Bad 
1 2 3 4 5 Excellent
print this page subscribe to newsletter subscribe to rss

Internet & computing Flash is a vector-based moving graphics format created by Macromedia for the publication of animations on the World Wide Web. More Flash & Swish: Most Popular Materials | Fresh Materials | More Flash Tutorials at FlashPerfection.com

Add comments to "Animate a Logo in Flash"

Only registered users can write comment

Reader's comments