How to Change the Stacking Order of Movie Clips in Action Script 3

Overview:

This tutorial will show you how you can change the depths or stacking order of movie clips using Action Script 3. This tutorial shows a stack of photos. The photos on the bottom of the stack are being covered up by the photos on the top. The user will be able to click on a photo on the bottom of the stack and it will come to the top of the stack.

What’s Needed:

For this tutorial you will need 4 photos, graphics or shapes. This tutorial should take less than 10 minutes.

Steps:

1. Pull in a few photos, graphics, or draw a few shapes and convert them to movie clips. In this example, I’ve pulled in four different photos.

2. Give these movie clips instance names. I’ve given the photos instance names of cows_mc, venice_mc, yellowstone_mc, and matterhorn_mc.

3. One you put your movie clips on the stage, arrange them in such a way that they overlap each other, like so:

4. Here is the action script code that we will use:

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

6. On lines 3-6 we are adding event listeners to all of the movie clips so that when clicked, Flash will call on the function called sendToTop.

7. 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 cows_mc was clicked, then "e.currentTarget" refers to this movie clip. The "currentTarget" property is stored with a data type of Object. We need to use "as MovieClip" in order to convert it from an Object reference to a MovieClip reference. 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.

View in Action:

Click the link to see it in action: EXAMPLE

Conclusion/Summary

This tutorial has show you how you can change the depths or stacking order of movie clips using Action Script 3. The user will be able to click on a movie clip on the bottom of a stack of move clips and that movie clip will come to the top of the stack. This can be implemented into a variety of projects and applications.

Contact Information:

This tutorial is by Blake Barton. If you have any questions you may email him at bahoon1@hotmail.com

Footprints Flash Website

Our second assignment was to create either an ecommerce site or a micro site that focuses on one product. I knew that I wanted to do something original, but I wasn't sure what.

My first idea was to make a website for a fictional store that caters to men with large feet. If you know me, then you know that I have large feet. I wear size 14 shoes and I often have a hard time finding shoes in stores that fit. Often I will find a style of shoes that I like only to find out that they only go up to size 13. I thought that it was be a good idea to have a store that only sales large sized shoes. I soon realized though, that I would need to either take pictures of a bunch of shoes or pull pictures of shoes off the internet for the project so I abandoned that idea.

That led to me to come up with something else. I decided to make a site called Footprints shoes. I bought a pair of white shoes, took a bunch of pictures of it from every angle and then I warped illustrations and prints from some of my past art assignments onto the shoe using Photoshop. Hence the name foot prints. I got kind of carried away. I have 8 different shoes and I made 5 different views of each shoe for a total of 40 different views in Photoshop. I spent hours and hours on the shoes and then I kind of panicked at the end getting my website together.

Anyway here is a couple of layouts I did in photoshop of what I wanted my site to look like. The logo is still a work in progress. In fact, I am still not done with it.

Here is the link to the actual site: Shoeprints

Volley Animation

It has been a little while since my last post as you can see. I am now well into Spring semester and I already have a couple of assignments under my belt. The first assignment we did this semester was an animation volley. We paired up with a partner in class. I worked on the first 5 seconds of animation, my partner did the next 5 seconds, I do the next and she does the final 5 seconds.

Here is a screen shot of our animation in Flash:

I enjoyed this project and it was a good way to get back into using flash after the break. My parter and I had a fun time coming up with ideas and getting this animation to work. The topic assigned was the USU Art Department.

Enjoy: