Prerequisite Tutorials:

Symbol Combinations - (Intermediate) Combining Buttons and Movie Clips
Flawless Rollover Buttons (Advanced) - The first version covers alot of ground that is not covered again in this one. If you missed the first, It is highly recommended that you complete it before continuing with the second!

Follow along as we demonstrate how we made the following rollover fading buttons:

1) Begin by opening the .swf or .fla file used in the previous tutorial as a library by selecting "File>Open as Library" With this we can bring in the elements which we have already created in the other file. Drag a copy of the movie clip "GradientAni" onto the stage and then edit the symbol. This is where the majority of the editing will be done for this tutorial.

2) The first thing we will do is set up a couple new layers. Above the "Gradient" level, insert two new layers. Name the bottom most new layer "Text" and the one above it, "Button".

3) Drag an instance of the "Transparent Button" into the "Button" layer and draw a text box in the "Text" layer. It should be made into a text field by clicking the "ab|" button when the text tool is active. Make it a fixed width text field and extend it the full length of the button. Right-Click on the text field to open its properties. The only options which should be checked are "Disable Editing" and "Disable Selection". Set the text field's variable to "Label".

4) Here is another upgrade to the design. Remove the layer "AltFrame" from the "GradientAni" movie clip. We have replaced every call to "AltFrame" with a quick calculation given as follows:

_totalframes + 1 - _currentframe

This makes a quick calculation to accomplish the same result. The drawback, however is that you must have an even number of frames in the animation or it will never make it past the midpoint frame in the animation.

5) Edit the button's properties and insert the following action script into the button:

On (Roll Over, Drag Over)
  If (/:active ne "/" & _name)
  // Condition = Expr.
    Set Variable: "out" = 0
    // Variable = String, Value = Expr.
    If (start = 1)
    // Condition = Expr.
      Go to and Play (2)
    Else
      Go to and Play (_totalframes + 1 - _currentframe)
      // Frame = Expression, Expression = Expr.
    End If
  End If
End On
On (Roll Out, Drag Out)
  If (/:active ne "/" & _name)
  // Condition = Expr.
    Set Variable: "out" = 1
    // Variable = String, Value = Expr.
    Go to and Play (_totalframes + 1 - _currentframe)
      // Frame = Expression, Expression = Expr.
    If (stop = 1)
    // Condition = Expr.
      Set Variable: "stop" = 0
      // Variable = String, Value = Expr.
      Go to and Play (_totalframes + 1 - _currentframe)
      // Frame = Expression, Expression = Expr.
    End If
  End If
End On
On (Release)
  Begin Tell Target (/:active)
  // Target = Expr.
    Play
  End Tell Target
  Set Variable: "/:active" = "/" & _name
  // Variable = Expr., Value = Expr.
  Go to and Stop (20)
  Get URL (URL, window=Window)
   // URL = Expr., Window = Expr.
End On

Take a look at the differences between this and the previous button script. The basic structure is exactly the same. The change has been made to the references to the "Ani1" "Ani2" instance names. These are now generated automatically internally by the script and do not need to be edited into the button script. This makes the modification and use of multiple buttons much easier as there is no longer any need to modify each button's code to control its associated animation sequence. Notice also the change in the "GetURL" in the buttons "On(Release)" event. The URL is a variable in the main movie which stores the URL for each button. A fact which will be evident in the next step.

6) Exit from editing the "GradientAni" movie clip and insert the following into the first frame of the main timeline of the movie:

Set Variable: "active" = "/Home"
// Variable = Strign, Value = String
Begin Tell Target ("/Home")
// Target = String
  Goto and Stop (20)
End Tell Target

This will control which button will be active when the movie starts. The next segment of script is also in the first frame of the main timeline, immediately following what was listed above. These are variables that hold the information unique to each button. Unfortunately when you have a button inside a movie clip, every instance of the button behaves identically. We had to initialize each button's variables from outside of the movie clips to control each button's behavior:

Comment: The following varables need to be set for each button
Begin Tell Target ("/Home")
// Target = String
  Set Variable: "Label" = "Home"
  // Variable = String, Value = String
  Set Variable: "URL" = "frames.html"
  // Variable = String, Value = String
  Set Variable: "Window" = "_top"
  // Variable = String, Value = String
End Tell Target]

Remember that we set the text field to access the variable "Label", this is where it is set, thus the name, title or label of the button is controlled here as well as the hyperlink url and a variable for setting the "GetURL" action's window or frame setting.

7) To make multiple buttons, simply drag a new instance of the "GradientAni" symbol (you may want to rename it now to something that reflects more what it is like "RolloverButton" or something) onto the main timeline stage, give it an instance name, and set up its variables in the first frame of the movie. It's now that simple.

Before moving on to the next tutorial, check out a quick one on using Flash as navigation with frames: Frames Navigation with Flash (Intermediate)

Next Tutorial - Flawless Rollover Buttons, Version 3 - (Advanced) Further modification to the buttons and the entire site it navigates using JavaScript to update the Navigation movie to select the currently viewed page as well as updating the status bar for internal Flash hyperlinks.

"The Internet is the foundation for a new industrial order. ... If you don't believe deeply, wholly...that the Net is going to change your business, you're going to lose."  - Fortune Magazine