Craig Campbell’s School of Flash

To be honest, I haven’t had time yet to check out the new Beta release of Flash Player 10, but there are a lot of exciting new features that every Flash programmer should be excited about. Foremost among the new features is the native support for new 3D Classes within ActionScript. Flash Player 10 still uses ActionScript 3.0, but it also supports a number of new classes and methods that will make working with 3D a walk in the park.

Since I haven’t had time to check out these new features, I’ll have to point you elsewhere for tutorials. On the FlashAndMath.com website, there is a great tutorial to help you get started playing around with 3D for Flash Player 10.

Link

In this tutorial, we’re going to create a menu with a bar underneath it that moves left and right based on which button the user is hovering over. This tutorial is created with Flash CS3 and ActionScript 3. Here’s what it will look like when you’re done:

Notice that as you hover over each button, the red bar under the menu moves to the button your mouse cursor is hovering over. Let’s get started:

1. Create your graphics. For the background of the menu, I simply created a rectangle that was the same width as the stage and gave it a black-to-dark-gray gradient fill. Leave this on a layer by itself.

Create a new layer and type in the text for all your buttons in separate static text fields. Name this layer Buttons. Select each of your text fields and hit F8 to convert them to symbols. Choose Movie Clip and set the registration point of each of these movie clips to the center, as shown below:

The registration must be set to the center, otherwise this effect won’t work. When we move the red bar around with ActionScript, we want it to end up centered underneath the appropriate button. This will work best if we set all of our buttons’ registration points to center, as well as the registration point of the red bar.

Give each of your movie clip buttons an instance name. The instance names I used are home_mc, about_mc, products_mc, and contact_mc. We will point to our movie clip buttons in our ActionScript using these instance names.

Create a new layer above the Buttons layer and call it Reflection. In this layer, I drew another rectangle that covered up the top half of the background rectangle. For this new rectangle, I used a linear gradient that faded from white at 70% opacity to white at 0% opacity (check the source file for details).

Create another layer that contains a small, red rectangle. The one I created was 80 pixels wide and 3 pixels tall. Place this rectangle directly under the menu. Then select it, hit F8 to convert it to a symbol, and (as mentioned before) set its registration point to the center. Give this rectangle an instance name of bar_mc. Place this bar under the home button by default.

2. Create your ActionScript layer. Create a new layer on your timeline, lock it, and name it Actions. We will attach all ActionScript to this layer.

3. Enter your code. Click on frame 1 of the Actions layer, hit Opt+F9 (or just F9 on PC) to open up your Actions Panel, and enter the following code:

import fl.transitions.Tween;
import fl.transitions.easing.*;

home_mc.buttonMode = true;
about_mc.buttonMode = true;
products_mc.buttonMode = true;
contact_mc.buttonMode = true;

home_mc.addEventListener(MouseEvent.ROLL_OVER, hover);
about_mc.addEventListener(MouseEvent.ROLL_OVER, hover);
products_mc.addEventListener(MouseEvent.ROLL_OVER, hover);
contact_mc.addEventListener(MouseEvent.ROLL_OVER, hover);

function hover(e:MouseEvent):void
{
     new Tween(bar_mc,"x",Strong.easeOut,bar_mc.x,e.currentTarget.x,1,true);
}

In lines 1 and 2, we’re importing the classes we need in order to use the Tween class. The Tween class and the associated easing classes will allow us to animate our sliding bar.

Lines 4-7 are simply turning on buttonMode for all of our movie clip buttons. Since our buttons are actually movie clips, we need this code in order to make sure that the mouse cursor turns into a hand cursor when hovering over the buttons.

In lines 9-12, we’re adding the usual ROLL_OVER event listeners to each of our buttons. When we hover over our buttons, we’re going to call on the hover function, which we created in lines 14-17. On line 16, we’re creating a Tween that causes the bar_mc movie clip to animate from its current position (wherever it may be at the time) to the same x coordinate as the movie clip that triggered the hover function (indicated by e.currentTarget).

Hope this made sense! ENJOY!

Source file: menubar.zip

One of the many things that have changed in ActionScript 3 has been the way that Flash handles depths, or the stacking order of objects on the stage. In ActionScript 2, there was a practically unlimited number of depths into which you could place an object. These depths determine what objects appear in front of other objects. An object with a depth of 100, for example, would cover up an object with a depth of 50. But in ActionScript 2, these depths didn’t have to be consecutive. In other words, if you only had 2 objects on the stage, you could very well set one of them to a depth of zero and set the other one to a depth of 1000.

Well, in ActionScript 3, things are a little different. The stacking order is still determined by the index of the depth (higher numbers cover up lower numbers), but in AS 3, the available depths are limited by the number of objects on the stage. In other words, if there are only two objects on the stage, there are only two available depths–0 and 1.

Let’s take a look at a quick exercise to illustrate how depths are handled in ActionScript 3:

1. Draw a few shapes and convert them to movie clips. In this example, I’ve created a red square, a green circle, a blue triangle, and a yellow pentagon. These movie clips have instance names of red_mc, green_mc, blue_mc, and yellow_mc respectively. Once you put your movie clips on the stage, place them in such a way that they overlap each other, like so:

In this example, we can tell just by looking at the shapes what the stacking index is for each of the shapes. The red square is at the bottom of the stacking order, so its index is 0. The green circle–just above the red square–has an index of 1, the blue triangle has an index of 2, and the yellow pentagon has an index of 3. So, there are 4 shapes on the stage, and the highest index number is 3, because the indexes start at 0.

So, how can we change the stacking order? In this example, we’re going to use the setChildIndex method in order to swap the depths around. But first, we need to detect how many objects are on the stage so we’ll know how many depths are available. Well, we can do this very easily using the numChildren property. Create another layer for your Actions, click on frame one of the Actions layer, and hit Opt+F9 (or just F9 if you’re using a PC) and type the following line of code into your Actions:

trace(this.numChildren);

If you test your movie now (Cmd+Enter or Ctrl+Enter on PC), you’ll get a pop up window displaying the number of objects on the stage. If you subtract one from this number, you’ll have the highest possible stacking index. So let’s ditch this line of code and create some functionality to allow the user to click on each of the movie clips. When each movie clip is clicked, it will be brought to the top of the stacking order. Replace the above line of code with the following:

On line 1, we’re subtracting 1 from the total number of objects on the stage in order to calculate the highest possible stacking index, and we’re storing this value in a variable called maxIndex.

On lines 3-6, we’re adding event listeners to all of our movie clips so that when we click on each of these buttons, Flash will call on the function called sendToTop.

Inside the sendToTop function, we’re pointing to the main timeline with the keyword this and using the setChildIndex method in order to change the stacking index of the movie clip that was clicked on. Inside the parentheses for the setChildIndex method, we need two things: the movie clip we’re set the index for and the index number that we’re changing it to. For the movie clip, we’re pointing to e.currentTarget. The “e” refers to the event variable being sent from the event listener, and the “currentTarget” refers to the object that triggered the event. So, if the red movie clip was clicked, then “e.currentTarget” refers to this red movie clip. However, the “currentTarget” property is stored with a data type of Object. The problem with this is that the setChildIndex method is looking for a data type of DisplayObject. So, we need to use “as MovieClip” in order to essentially convert it from an Object reference to a MovieClip reference. (A MovieClip is a type of DisplayObject.) And then, after the comma, we’re pointing to the maxIndex variable that we created in line 1. This will move the clicked movie clip to the top of the stacking order, resulting in the following effect.

Download the project file here: setChildIndex.zip