Flex | Flash | Air | AS3
Create a “Where’s Wally” 2-Dimensional Sliding Content
September 25th, 2009 in FlashIn this tutorial, we will create a two-dimensional sliding content that allows the user to navigate through the scene to find Wally.
This tutorial will use actionsript 3 as usual and the Tweenlite engine.
1. Create a new flash file (Actionscript 3.0) and save it as 2dSlidingContent.fla. Set the size of the document to 600 x 400 pixels.
2. Rename “layer 1″ to “content”. On this layer import an image of “Where is Wally ?”.
The image is a size of 1200×800 pixels, twice the size of the stage. Convert it to a movie clip with registration point at the top left and give it an instance name of “content_mc”. Set its x and y coordinates to 0.
3. We split the content into 4 spots. We have to determine for each one its x and y coordinate in order that it is centered on the stage.
The image below recaps it :
4. Create a new “buttons” layer. On this layer, create four buttons and give them instance name of “spot1_mc”, “spot2_mc”, “spot3_mc”, “spot4_mc”.
5. We’ll use the Tweenlite engine so first go to http://blog.greensock.com/tweenliteas3/ to download it.
Extract the zip file and get the gs directory. Place this directory at the same level of your flash file.
6. Create a new “actions” layer and open the actions panel.
In order to use the TweenLite engine write the following statement:
import gs.*;
7. Next declare two arrays. In the first one store the buttons’ instance names.
The other is used to store the x and the y coordinate of each spot as we have determined previously.
Declare a currentIndex variable and set its value to 0.
Loop through the buttons array to add a click event listener to each one and set its buttonMode to true.
var buttons : Array = [spot1_mc,spot2_mc,spot3_mc,spot4_mc];
var arrayCoord:Array = [{coordX: 0 , coordY: 0}, {coordX: -600 , coordY: 0},
{coordX:0 , coordY: -400},{coordX: -600 , coordY: -400}];
var currentIndex : Number = 0;
for (var i:int = 0; i< buttons.length ; i++){
buttons[i].addEventListener(MouseEvent.CLICK,navigate);
buttons[i].buttonMode = true;
}
8. In the navigate function, we set the value of currentIndex to the index of the button clicked.
Then we use Tweenlite to set the x and the y properties of “content_mc” to their new values.
function navigate(e:MouseEvent):void{
currentIndex = buttons.indexOf(e.currentTarget);
TweenLite.to(content_mc,.5 ,{x:arrayCoord[currentIndex].coordX, y:arrayCoord[currentIndex].coordY});
}
9. Here’s the final code, test your movie to see it in action. By the way, have you found Wally?
import gs.*;
var buttons : Array = [spot1_mc,spot2_mc,spot3_mc,spot4_mc];
var arrayCoord:Array = [{coordX: 0 , coordY: 0}, {coordX: -600 , coordY: 0},
{coordX:0 , coordY: -400},{coordX: -600 , coordY: -400}];
var currentIndex : Number = 0;
for (var i:int = 0; i< buttons.length ; i++){
buttons[i].addEventListener(MouseEvent.CLICK,navigate);
buttons[i].buttonMode = true;
}
function navigate(e:MouseEvent):void{
currentIndex = buttons.indexOf(e.currentTarget);
TweenLite.to(content_mc,.5 ,{x:arrayCoord[currentIndex].coordX, y:arrayCoord[currentIndex].coordY});
}
Sep 25th, 2009
great
Sep 26th, 2009
Really nice
Thanks
Sep 29th, 2009
I can’t get this to work, the buttons won’t do anything. Do I need to put extra code in the buttons layer as well? So far all my code is in the “actions” layer.
= {
Oct 1st, 2009
Toby,
See step number 4 to solve your problem.
Oct 3rd, 2009
[...] Create a “Where’s Wally” 2-Dimensional Sliding Content [...]
Oct 7th, 2009
[...] Create a “Where’s Wally” 2-Dimensional Sliding Content [...]
Oct 7th, 2009
All your previews look great , you should make photoshop tuts too lol
Oct 29th, 2009
I’m getting reports of some Tweenlite errors everytime I try to publish, so it doesn’t work for me either…