Logo Contests
Logo Contests Ultimate Logo Contest List Logo Design Tutorials Online Logo Contest
Bad Logos Logo Competition Tips Logo Designer Programs Logo History
Graphic Designer Needed Graphic Charts Small Business Startup Checklist Logo Design 2011
Logo Design 2010 Logo Design 2009 Logo Design 2008 Logo Design 2007
Crazy Logo Customers Business Logo Tutorial Flash Logo Tutorial Logo Design Ideas

Flash Logo Tutorial

Flash Logo Tutorial


Flash Logo Tutorial - Use ActionScript 3.0 To Create A Flash Logo Design

In this Flash logo tutorial you will learn how to create the animation below in Flash using ActionScript 3.0. Flash logo animation is not as difficult as it may seem. ActionScript 3.0 is what makes Flash run. This Flash programming language is very different from its predecessor ActionScript 2.0. Basically you create your logo design in Adobe Illustrator and then bring the editable AI file into Flash. Once you have the design in Flash you can edit it and make the logo animated. Flash logo animation is a great skill to have because it will open up new logo contests for you. Some business owners require Flash logos. This tutorial will show you how to do this successfully inside Flash CS4.

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

Step 1 - Prepare Your Logo Design in Adobe Illustrator

Adobe Illustrator Screen Shot

Your life will be made easier if you have a properly made file to bring into Flash. Open the logo design you wish to animate and outline the text. By outlining the text you are converting the font to a graphic. I want to keep this Flash logo tutorial as simple as possible. Not having to worry about fonts could save us a lot of time. Save the logo design in a new folder specifically made for this project.. Make sure to that you saved the file with the file extension .ai. This folder is where we will be keeping all of the source files we will create to animate your logo in flash. You are now ready to import the AI file into Flash.

Step 2 - Create a New ActionScript 3.0 Document in Flash

ActionScript 3.0 New Document Flash CS4 Screenshot

Creating a new ActionScript 3.0 document is very straightforward. Click "File" in top menu bar and a drop down menu will appear. Then click "New" from that menu and a new window should appear. Highlight Flash File ActionScript 3.0 under "General" and "Type" and click "OK". This will create an untitled Flash document and the preset Flash layout will be on your screen. Click "File" in top menu bar and then scroll down and click "Save As". When the new window pops up save your document as "flash-logo-animation.fla". The .fla should already be preloaded into the save as text box so there is now need to reenter it. Make sure to save the document in the folder you previously made specifically for this project. Organization is very important to the success of any Flash project. You have now created an ActionScript 3.0 document!

Step 3 - Change the Built-In Flash Layout to Animator

Screenshot of the Animator Layout in Flash CS4

Creating a new ActionScript 3.0 document is very straightforward. Click "File" in top menu bar and a drop down menu will appear. Then click "New" from that menu and a new window should appear. Highlight Flash File ActionScript 3.0 under "General" and "Type" and click "OK". This will create an untitled Flash document and the preset Flash layout will be on your screen. Click "File" in top menu bar and then scroll down and click "Save As". When the new window pops up save your document as "flash-logo-animation.fla". The .fla should already be preloaded into the save as text box so there is now need to reenter it. Make sure to save the document in the folder you previously made specifically for this project. Organization is very important to the success of any Flash project. You have now created an ActionScript 3.0 document!

Step 4 - Import Your Logo Design Into Flash

Importing a logo design into Flash Screenshot

Optimal working conditions lead to optimal performance. Flash CS4 comes with a number of built-in Flash layouts. The Animator layout is the perfect format to animate a logo in Flash. Click "File" in top menu bar and a drop down menu will appear. Then rollover "Import" from that menu and click "Import to Library". Select the file of the logo you wish to animate and click the highlighted "Import to Library" button. You should be able to leave the presets selected and then click "OK". This will import your logo design into Flash. Make sure to import the different layers of the your logo as you want to keep the design as editable as possible. The screen shot above provides you with an example of what importing a logo design from Illustrator will look like in Flash CS4. We can now begin work on the Flash logo animation.

Step 5 - Create New Layers and Rename The Existing Layer

Screenshot of the new layers we created and the existing layer we renamed in Flash

This Flash logo tutorial require three layers to complete the animation. We already have any existing layer which needs to be renamed and we will also have to add two more for the total of three. The bottom layer should be called logo. This "logo" layer will house our logo design graphic. The middle layer will be named animation. This "animation" layer will host our animation graphic. It will also be where we will create the classic tween in order to animate our logo in Flash. The top layer will be named actions. This "actions" layer will be the home to all of our ActionScript 3.0 code. You should start all of your future flash logo projects by creating an actions layer. Yes, this is a tutorial so I should show you how to create and rename a layer. Go to your timeline. There you will see an existing layer named "Layer 1". Double click on the text "Layer 1" and rename it "logo". Next, you will control click on the "logo" layer and a menu will appear. Click "Insert Layer" and your new layer will appear directly above the "logo" layer. Name this new layer "animation". Repeat the steps again and create your third layer which will be renamed "actions".

Step 6 - Drag the Logo Design onto the Flash Stage

Screenshot of the logo design on the Flash CS4 stage.

Putting your artwork in the correct places makes all the difference. Click on the logo layer so that it is highlighted. Then click on your logo design file inside of the library that you imported in a previous step and hold it. The library of graphics, movie clips, and symbols is on the bottom right hand side of your screen. Drag the logo design file to the center of the Flash stage. Use the align panel if you need to center the graphic accurately. The key frame on the logo layer should turn gray. See the above screenshot for reference.

Step 7 - Create the Animation Graphic Needed to Animate Your Logo

Screenshot of the animation graphic on the Flash CS4 stage.

We need to create a graphic that we can move in order to animate the logo. Select the animation layer. This will ensure that the animation graphic will be locate on the animation layer. Go to the "Tools" menu bar and click and hold on the rectangle tool. This should be the eighth object from the left. A Flash menu will fly out. Select the oval tool from this menu. Bring your cursor to the stage. Press and hold the shift key down. Draw a circle on the stage like the one I did in the example above. Holding the shift key down will make Flash draw a perfect circle.

Step 8 - Create the Flash Logo Animation Effect

Screenshot of creating a flash animation effect.

We are in the middle of the animation part to this flash logo tutorial. If we have the graphic rollover are logo now it would be solid white. We need to feather the design. To do this we need to create an effect. You can not create an effect on this graphic until we convert it to a Movie Clip. Go to the top menu bar and rollover where it says "Insert". Then click "New Symbol". Name your symbol animation and click OK. Now that we have created our symbol we can add the effect. With the symbol selected go to the filters section in the symbol properties section on the middle right hand side of your screen. You may need to move the library panel out of your way for the time being as it may be blocking the filters area. Directly below the text "filters" all the way at the bottom of your screen is a menu. Click the first icon. When you rollover this it should say "Add filter". Choose the blur filter. You will see two blur filters appear in the properties section. Move the sliders both to 30px.

Step 9 - Expand the Animation Graphic

Screenshot of using the Flash transform tool.

This might be the easiest step in the Flash logo tutorial. Go to the Tools menu bar and click the transform tool which is the third object from the left. Select the animation graphic and stretch the design the width of the logo.

Step 10 - New Frames

Screenshot of making new frames for the animation.

This is the setup to our monumental classic tween step coming up. We need to get the animation graphic to the bottom of the logo design on the last frame. Copy the frame on the animation layer. Go to the frame you think the animation should end and paste the frame. Then on that frame drag the animation graphic to the bottom. Please see my screen above for a reference.

Step 11 - Create the Flash Logo Animation using a Classic Tween

Screenshot of making new frames for the animation.

This is the "animate your logo" step. We will be using a classic tween. Click on any frame between the first frame to the end. Control click the frame to see the drop down menu. Click on the "classic tween". Your logo is now animated!

Step 11 - Add ActionScript 3.0 Timer Code

ActionScript 3.0 source code for a timer feature.

ActionScript 3.0 is the Flash code that will enhance our logo animation. If you test your flash logo animation currently you will see that the animation repeats itself rapidly. We want to add a timer feature in order to have the animation occur sparingly. Click the first frame on the actions layer. Then open up your actions panel found under "Window" in the top menu bar. This should open up a panel labeled "Actions - Frame". Copy the code below and paste it into the panel. You have completed the first part.

stop();
var millis:Number = 3000;
var Tim:Timer = new Timer (millis, 1);
Tim.addEventListener(TimerEvent.TIMER, playit);

function playit(e:TimerEvent):void
{
play();
}
Tim.start();

Step 12 - Add ActionScript 3.0 Stop Code

ActionScript 3.0 stop code.

Next we add the ActionScript 3.0 stop code. This will finish the timer code. Click the actions layer and add a blank key frame to the last frame of the sequence. Select this key frame Then add the ActionScript 3 stop code below into your actions panel. You now have added all the ActionScript code you need for this Flash logo tutorial.

stop();
millis = 3000;
Tim.start();

Step 13 - Flash Logo Speed

Screenshot of the Flash logo animation screenshot we created

Your screen should look very similar to the one above if you have followed all of the tutorial steps correctly. The last thing we want to do is get the speed of our flash logo animation correct. FPS stands for frames per second. This is usually set to 24 FPS automatically. You can see how this frame rate looks in conjunction with your animation by testing your movie. Click "Control" in the top menu bar and then scroll down the fly out menu until you see "Test Movie". Click "Test Movie" and you will see the speed at which the current FPS setting moves your Flash logo animation. Click the FPS number to adjust the speed. I am using 80.00 FPS.

Step 14 - Publish

Publish Flash logo animation screenshot.

The last step in this Flash logo tutorial is to publish our work. Click File from the top menu and then click "Publish Settings". This will open a new window like the example graphic above. Make sure you have ActionScript 3.0 selected as well as Flash player 10. Use the other settings at your own discretion. Click Publish and your SWF file will be made in the same folder as your FLA source file. The preset setting will have also will have made an html file. You can load these two files in the same folder onto your server and see your Flash logo animation on the web. Congratulations! You have created your very Flash logo. Please let me know if you liked this tutorial.




Logo Contests | Site Map | Contact | About Logo Contests | Site Design Group | Privacy Policy | Terms of Use

© Copyright 2017 Logo Contests