Design a Sliding Content Design in Flash..

Learn how to create a sliding content that uses the Tweener engine. This example could be a great start to build a cool site and make you inspired.

The following tutorial uses the Tweener engine (http://code.google.com/p/tweener/).
The images included in the files are wallpapers taken from interfacelift.com
1. Create a new ActionScript 3.0 Flash file and save it as slidingContent.fla. Set the size of the document to 800 x 450 pixels and the frame rate to 30.
We need 3 layers named “content”, “menu” and “actions”. Lock the actions layer.

2. Select the “content” layer and import the images to the stage.
Place the images side by side aligned to the top. Select all and convert it to a movie clip with registration point to the top left. Give the movie clip an instance name of content_mc.
Place the movie clip in order that one of the image is centered on the stage.

3. In brief, the movie clip is 450 pixels height x 3200 pixels width (4 images of 800 pixels width each).
For each image, we need to determinate the x coordinate for which the image is centered on the stage. The x coordinate for each image are the following :
- 1st image (Hong Kong ) : 0px;
- 2nd image (London) : -800px;
- 3rd image (Paris) : -1600px;
- 4th image (New-York) : -2400px;
4. Select the “menu” layer. Create four buttons elements and convert them into movie clip which instance name are hongkong_btn, london_btn, paris_btn and newyork_btn.
5. Select the “actions” layer and open the actions panel.
To begin import the classes needed to use the Tweener engine. Next declare number variables that hold the X coordinate to move to.
Then, store each button in an array , loop through this array to add a click event listener to each one and set their buttonMode to true.

01	import caurina.transitions.*;

02

03	var hongkongX : Number = 0;

04	var londonX : Number = -800;

05	var parisX : Number = -1600;

06	var newyorkX : Number = -2400;

07

08	var buttons : Array = [hongkong_btn,london_btn,paris_btn,newyork_btn];

09

10	for (var i:int = 0; i< buttons.length ; i++){

11	buttons[i].addEventListener(MouseEvent.CLICK,navigate);

12	buttons[i].buttonMode = true;

13

}

6. The navigate function set the X coordinate to move to and give it as a parameter for the setTween function that simply call the addTween method of the Tweener engine :

01	function navigate(event:MouseEvent):void{

02	switch (event.target){

03	case (hongkong_btn) : setTween(hongkongX);

04

break;

05

06	case (london_btn) : setTween(londonX);

07

break;

08

09	case (paris_btn)  : setTween(parisX);

10

break;

11

12	case (newyork_btn) : setTween(newyorkX);

13

break;

14

}

15

}

16

17	function setTween(tweenX:Number):void{

18	Tweener.addTween(content_mc, {x:tweenX, time:1, transition:"easeInOutCubic"});

19

}

7. The whole code is :

01	import caurina.transitions.*;

02

03	var hongkongX : Number = 0;

04	var londonX : Number = -800;

05	var parisX : Number = -1600;

06	var newyorkX : Number = -2400;

07

08	var buttons : Array = [hongkong_btn,london_btn,paris_btn,newyork_btn];

09

10	for (var i:int = 0; i< buttons.length ; i++){

11	buttons[i].addEventListener(MouseEvent.CLICK,navigate);

12	buttons[i].buttonMode = true;

13

}

14

15	function navigate(event:MouseEvent):void{

16	switch (event.target){

17	case (hongkong_btn) : setTween(hongkongX);

18

break;

19

20	case (london_btn) : setTween(londonX);

21

break;

22

23	case (paris_btn)  : setTween(parisX);

24

break;

25

26	case (newyork_btn) : setTween(newyorkX);

27

break;

28

}

29

}

30

31	function setTween(tweenX:Number):void{

32	Tweener.addTween(content_mc, {x:tweenX, time:1, transition:"easeInOutCubic"});

33

}

(See http://hosted.zeh.com.br/tweener/docs/en-us/ for documentation of the Tweener engine).
8. Test your movie to see it in action.