Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Design > Adobe Creative Suite

  • Print
  • + Share This
This chapter is from the book

Adding Motion to Logotypes

Logotypes are probably the single most important branding tool for corporate identities. While rules for using corporate identities in print, television, and outdoor advertising are well established, rules for how to use a logo effectively on the Web are not. Before we jump into to animating a logo, it's a good idea to consider why you want to animate a logo in the first place.

Virtually everyone loves eye candy. Nothing jazzes executives like seeing their logo come to life on the screen. However, the way that animation is used frequently makes the difference between a customer experience that is satisfying and entertaining and one that ends (prematurely, need I say) in frustration and boredom. Several factors can sway the visitor experience one way or the other. A popular way to wow first-time visitors is to animate the company logo, using it as a "splash" screen. Unfortunately, even though splash screens look cool, they can add to visitor frustration because they inevitably delay visitors when they want to get to the main part of your site.

So how do you provide a quality eye-candy experience for visitors without alienating them? The answer lies not only in how you animate the logo technically, but also in the way you integrate the logo into the rest of the site. I favor using the animated logo within the site itself, so it coexists with the navigation system (buttons) you develop for the site. Whether you use frames or a frameless design, it's a relatively simple thing to pop up the menu buttons first, and then display the animated logo.

So now that we've discussed how to use the logo, let's move on to actually animating one. We'll start with the logotype that we created in Freehand for The Electron Conservancy, and use it as our source graphic for animation.

Figure 2

  1. In FreeHand, select File > Open. Change the directory to your CD drive, then find and open Lesson02\Start\TEC-logo.FH10.

    This file is the same as what you worked on in Lesson 1.

  2. Open the Library panel by selecting Window > Library or pressing F11.

    Figure 3

    You are going to cut down on file space and resources by making the round objects in this logo into reusable symbols in the Library panel.


    The Library panel brings the functionality and utility of the Flash library into FreeHand, largely to make it easier for FreeHand users to pre-configure drawings as Flash symbols. The key to making your designs play well on the Web is to keep file sizes down. And making objects into reusable symbols saves massive amounts of space. This feature is worth using any time you are taking artwork from FreeHand into Flash, especially if you plan to use an object more than once within the same Flash movie.

  3. Select the nucleus (center circle). Now select Modify > Symbol > Convert to Symbol or press the F8 key.

    Figure 4

    You'll see a new icon and a generic name for a new symbol (usually Graphic-01) appear in the Library name window.

    Figure 5

  4. Double-click on the generic name, and rename it Dot.

    Figure 6

    If you look at this new symbol in the Library list, you'll see it indicates that there is one instance of it in your document. (An instance is a copy of the symbol that is in use on your page.) In order to take advantage of the power of Library symbols, we'll add more instances onto the page.


    You may need to widen the Library panel or change the width of the columns to see more than just the Name column.


    Once you start using instances of symbols, you must either edit the master object

  5. Replace the three electrons in the logo with instances of the Dot library symbol.

    The easiest way to do this is to use the Object panel to get the exact size and position of the original object, and then modify the instance of the symbol and move it to the position of the original.

    Figure 7

    This part is a little tedious, but it's necessary to make things as efficient as possible when you get to Flash. It would be nice if you could use the Find and Replace function in FreeHand, but it does not work on symbols (although you can search and replace based on virtually anything else).


    It pays to plan ahead. If you know you will be using a design in Flash that has multiple instances of what can be a symbol, do yourself a favor and create the object as a symbol in the first place, then use symbols throughout. This will save you the trouble of replacing objects with symbols later on.

  6. Select the entire logo and convert it to a symbol. In the Library panel, rename the symbol TEC-logo.

    Figure 8

  7. Save the logo file as TEC-logo1.FH10.

    Figure 9

    Now you're ready to move all your work into Flash.

  • + Share This
  • 🔖 Save To Your Account