• Looking for a Top Flight Web Development Team?
  • Professional & Affordable Web Design Services
  • Shaping Imaginations using Cutting-Edge Technologies
  • Dynamic Solutions for Dynamic Businesses
  • Analysis.. then Solutions with a High Tech Flair
  • Satisfied Customers In Over 30 Countries
  • National Association of
    Accredited Internet Professionals
  • (561)948-6074
Custom Website Designs
 
Personal Logo Symbol Part-I

Using the Personal Logo as the Button Symbol 1

The button that leads the user into the Web portfolio should be something that has some meaning — not just a red circle. To make our identity visible again, we will use the personal logo we created in Freehand to be our interactive button. We can lower the opacity of the logo on the up state and fade the logo in on the over state.

 

To do this we have to embed a movieclip in the over state. We also can add some text to the over state, something like “Enjoy the portfolio”. For the down state, we can leave this state blank. We can always edit the button and add something into the down state later. Let’s move forward and get into the button symbol editor. Flash can import a wide variety of file formats into the library. Eventually, each file is converted into a symbol and used in the Flash movie. Flash can import vector, raster, audio, and video files.

 

The major bitmap file formats that are most commonly used are PNG files (native Fireworks,) JPEG images (JPG), and bitmap graphics (BMP). Vector graphics are Freehand (FT and FH) and all PostScript files (AI, PDF, EPS). Audio file formats include MP3 sound (MPG), WAV, and AIF. Video formats include QuickTime (MOV), Video for Windows (AVI), MPEG Movie (MPG), and Digital Video (DV, DVI). To make our button we need to import or drag and drop the personal logo into the library.

 

On the graphical side, there is tight integration between Freehand, Fireworks, and Flash. What’s nice is that you can drag and drop artwork directly from Freehand or Fireworks right into Flash. Or, you can export your Freehand Files and Fireworks files and then import the files into Flash. I love the quick and easy production shortcut so I will open Fireworks and Flash simultaneously. Then, I will drag my personal logo into Flash on to the stage. Immediately, Flash converts the item to a movieclip symbol and places the symbol in the library.

 

This is terrific functionality for getting graphics into Flash. Now that the personal logo is a movieclip symbol, you can scale, position, and tween it. We will animate the logo with a fade in effect on the over state and add the phrase enjoy the portfolio.

 

1.After dragging the personal logo to the stage from Freehand or Fireworks, delete it from the stage and rename it (from Symbol One to logoart) in the library. We need to make a movieclip symbol that fades the personal logo. Insert>Symbol>Movieclip. Name it logo_mc. The movieclip logo_mc will act as the container for our animated personal logo. Once the animated logo is complete, we can embed it into the button symbol.

 

2.In logo_mc,  name the first layer actions. Add a second layer and name it logo. Now click into the first frame of the logo layer and drag the logoart symbol on to the stage. Use the align panel to position it centered to the stage.

 

3.On the layer with the logoart, layer two, click on frame five and insert a keyframe (F6). The logoart symbol will be automatically inserted in the frame by Flash. To indicate the keyframe, Flash adds a dot to the timeline. With that done, lets click back to Frame one to set the alpha.

 

4. Alpha is transparency. Transparency refers to the ability to see through an image. For this effect, we want to lower the alpha at frame one and then make it 100 percent opaque in frame 10.

 

When we embed the movieclip into the button, the result will be a fade in when the user mouses over the button. Click on frame one and select the button. Using the Properties Inspector, click the Color drop down, choose Alpha. Set the alpha to 40 percent.

 

5.Now we must tween the logo. Tweening allows the designer to set the keyframes in the timeline and then Flash will create the motion or shape tweens “in-between”. To create a motion tween, simply click between two keyframes and the go to the properties inspector to Tween.

 

Drop the arrow down and choose Motion. You will see several options appear on the properties inspector. Ease allows easing the motion in or out. This means that if a minus value is set, ease in is selected, the animation will move slower at the beginning and then becomes faster at the end. The opposite is true for ease out. With a positive ease out value selected on the slider, the animation starts quickly and slows as it nears the end. For now, let’s leave this at -100. This value will give us a nice subtle ease in.

 

Our animation is short (5 frames) so the ease will not be very strong anyway.

 

6.Drag the play head back to frame one and press ENTER. The logo should fade in.

 

7.Lastly, we must place a stop action on layer on at frame five. This will make the animation happen only once. Go to Frame five on the actions layer and add a keyframe. Open the ActionScript panel and type: stop();. Keep in mind that we worked entirely in the symbol editor to create this movieclip. Now, we must assemble the button. Get back to the main timeline by going up to the top of the timeline to the Scene Path. You will see Scene one, logo_mc open when you are in the symbol editor.

 

The Scene indicates the main movie timeline. There can be multiple scenes in a Flash movie. Each scene has a specific stacking order in the movie and has a main timeline. Click on Scene One. Here’s a quick shortcut for jumping to the symbol editor without searching for the symbol in the library. Simply double click the symbol on the stage and Flash will immediately take you to the symbol editor where the symbol was created. The symbol can be edited and its updated version will be automatically replaced on the stage in each of its specific instances. Here is a brief summary of what we just did. We dragged our personal logo from Fireworks directly on to the stage in Flash.

 

All objects dragged in to Flash from Fireworks are immediately converted to movieclip symbols. We renamed the personal logo to logoart. We created a movieclip named logo_mc that would act as a container for the faded logo animation. We created the faded logo animation. Next we will create the button. To make the button, we need to Insert>New Symbol, button. Name the button logo_btn. The button symbol editor will open. You should recognize the up, over, down, and hit frame states that populate only the button symbol editor.

 

1.Click on to frame one of the up state and drag the logoart movieclip from the library on to the symbol editor. Align it center to the stage with the align panel using the set to stage icon. This is the static movieclip that we dragged over from Fireworks. We will use it as the up state graphic. We need to lower the opacity to 40 percent to match the logo_mc movieclip. Logo_mc contains the fade animation and will occupy the over state.

 

2.In the second frame of the over state, drag the logo_mc movieclip from the library to the symbol editor. Align it center to the stage. This movieclip should be set in the exact same position as the logoart movieclip.

 

3.Click into the over state and press F6 to add a keyframe. Now delete the item in the overstate. We are doing this because we need to add the logoart movieclip in this state (align it) because we do not want the animation to run twice in two frames. It will give a jumpy look. Using the type tool, we want to add the text, “Enjoy the portfolio”, right below the logo. Make sure that the type is not too large. You do not want it to overwhelm the personal logo.

 

Back
to Top