Accessing objects in different Timeline

Flash Course

Timeline is the panel with Layers and Frames in each layer. The main Timeline is the Stage Timeline, but there are elements that have their own Timeline and frames, such as the Movie Clip and Button Symbols. For example, a MovieClip can have its own animation (with multiple frames) added in a single Frame in the main Timeline, so, the elements from that Movie Clip are in a Different Timeline.

- In this tutorial you will see how to access an object that is inside a Movie Clip symbol.
Objects that are in a different Timeline than the main one cannot be accessed directly, they can be accessed through the object in which they are included, using the hierachic model parent-child.
The main object (on the stage) in which they are included is the "parent" and the elements inside it are its "children". Each one must have assigned an instance name.

So to access a child element, use the syntax:

parent_instance.child_instance

Here's a practical example. We create a "star" element inside a Movie Clip instance (an image with a fir tree). The "star" will change its color when a button on the stage is clicked, and the third click it will delete it. As you can test in the following presentation.
Here's how to do this Flash presentation:

1. First, copy in your computer the picture below (right-click on it, and choose "Save image As"):
   
   - Then open a new Flash document and import this picture (from File -> Import -> Import to stage).
2. Convert the image into Movie Clip (from Modify - Convert to Symbol - this conversion is necessary to can assign it an instance name).
   Make sure the image is selected, open the "Properties panel" and give the name "fir" to this Movie Clip instance (write it in the box with "<Insance Name>").
3. Create a geometric figure on the Stage (a rectangle, or circle), and convert it into a Button Symbol (from Modify -> Convert to Symbol, and chose the Button Type option).
   Make sure this button on the stage is selected, open "Properties panel", and give it the name buton for instance name.
4. Right-click on the image on the Stage and choose Edit (or double-click on it). In this way you enter the editing page of this Movie Clip, which has its own Timeline.
   Draw a little star on the image (with "PolyStar Tool"), convert it into a Movie Clip Symbol, and then give it the instance name star (in Plroperties panel).
   The page should look like in the image below:
   
   - The name "bradMC", next to the "Scene 1" in the title bar, is the name of the Image converted into Movie Clip, given when this Symbol was created. This name indicates that you are in its editing page mode. The elements created here belong to this Symbol, and are cildren of this Movie Clip instance.
5. Return to the main stage (by clicking on "Scene 1"). Right-click on Frame 1 in the Timeline, choose Actions, and add the the following code in "Actions panel".:

   var colors:Array = [0xfe0809, 0xfefe08];        // The Array variable with colors
   
   // define a variable that will store the number of clicks on a button
   // Depending on this number, the color is chosen then the object is deleted
   var nr_click:int = 0;
   
   // Register a MouseEvent.CLICK event to the "buton" instance on the Stage
   buton.addEventListener(MouseEvent.CLICK, onClick);
   
   // Function called by the CLICK event
   function onClick(evt:MouseEvent):void
   {
     // define an object that will be used to change the color
     var set_color:ColorTransform = new ColorTransform();
   
     // If 'nr_click' is smaller than the number of colors from 'colors', add the color
     // Or else, delete the "star" object and removes the CLICK event
     if(nr_click<colors.length)
     {
       set_color.color = colors[nr_click];         // Setup the color, from 'colors' depending on 'nr_click'
   
       // Adds color to the 'star' instance, in the 'fir' instance
       fir.star.transform.colorTransform = set_color;
       nr_click++;          // Increments by one unit to each Click
     }
     else
     {
       fir.removeChild(fir.star);         // Delete the 'star' element in the 'fir' object
       buton.removeEventListener(MouseEvent.CLICK, onClick);       // Delete the CLICK event
     }
   }
   

   - See the comments in code.
   - When the "star" instance is deleted, the CLICK event listener is also deleted, because it is no longer needed. It would cause an error if another click event will call the function with instructions for the "star" instance (because this instance was deleted).
   - Notice how the properties are applied to the "star" object, through its parent (fir.star.color).
   - But when the "star" is deleted, the method "removeChild()" is applied to the parent, and the complete hierarchical path is added to argument (fir.removeChild(fir.star);).

- To download the FLA file with the example presented in this tutorial, click: Accessing object - Different Timeline.

First line ...<br>
Other line...

#id {
  letter-spacing: 2px;
}

var elm = document.getElementById("theID");
var content = elm.innerHTML;
alert(content);

echo "Address URL: http://CoursesWeb.net";