Create a "Where's Wally" 2-Dimensional Sliding Content

Create a “Where’s Wally” 2-Dimensional Sliding Content

In 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.

View DemoDownload Source

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 :

Screenshot

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});
}

12 thoughts on “Create a “Where’s Wally” 2-Dimensional Sliding Content

  1. Toby

    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.

    = {

  2. Pingback: Adobe Flash: 35+ Animated Trainings | oOrch Blog

  3. Pingback: 10 Great Animation Tutorials For Adobe Flash You Should Know - Ntt.cc

  4. Zebratan

    I’m getting reports of some Tweenlite errors everytime I try to publish, so it doesn’t work for me either…

  5. Carlos

    Hi, you wrote in step number 5 that we’ll use the Tweenlite engine so first go to http://blog.greensock.com/tweenliteas3/ to download it. But, when i download this zip file, i can’t find “bg” directory. There are only “badges, com, demo_swf and docs” directory. Thx for help

  6. Pingback: 35 Beautiful Animated Trainings from Adobe Flash | ExceptionHandle.com

  7. Pingback: Professional Trainings of Animations in Adobe Flash « CSS Tips

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>