Flex | Flash | Air | AS3
Create a sliding content in flash
April 15th, 2009 in FlashLearn 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.
import caurina.transitions.*;
var hongkongX : Number = 0;
var londonX : Number = -800;
var parisX : Number = -1600;
var newyorkX : Number = -2400;
var buttons : Array = [hongkong_btn,london_btn,paris_btn,newyork_btn];
for (var i:int = 0; i< buttons.length ; i++){
buttons[i].addEventListener(MouseEvent.CLICK,navigate);
buttons[i].buttonMode = true;
}
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 :
function navigate(event:MouseEvent):void{
switch (event.target){
case (hongkong_btn) : setTween(hongkongX);
break;
case (london_btn) : setTween(londonX);
break;
case (paris_btn) : setTween(parisX);
break;
case (newyork_btn) : setTween(newyorkX);
break;
}
}
function setTween(tweenX:Number):void{
Tweener.addTween(content_mc, {x:tweenX, time:1, transition:"easeInOutCubic"});
}
7. The whole code is :
import caurina.transitions.*;
var hongkongX : Number = 0;
var londonX : Number = -800;
var parisX : Number = -1600;
var newyorkX : Number = -2400;
var buttons : Array = [hongkong_btn,london_btn,paris_btn,newyork_btn];
for (var i:int = 0; i< buttons.length ; i++){
buttons[i].addEventListener(MouseEvent.CLICK,navigate);
buttons[i].buttonMode = true;
}
function navigate(event:MouseEvent):void{
switch (event.target){
case (hongkong_btn) : setTween(hongkongX);
break;
case (london_btn) : setTween(londonX);
break;
case (paris_btn) : setTween(parisX);
break;
case (newyork_btn) : setTween(newyorkX);
break;
}
}
function setTween(tweenX:Number):void{
Tweener.addTween(content_mc, {x:tweenX, time:1, transition:"easeInOutCubic"});
}
(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.
Apr 16th, 2009
Exactly what I need. Dope Tut.
Jun 3rd, 2009
Thank u so much for this tutorial.I like it so much.
Jun 8th, 2009
[...] Create a Sliding Content in Flash [...]
Jun 8th, 2009
Nice effect my friend, added to the homepage of http://www.tutorialsroom.com
Jun 8th, 2009
GOOOOD GOD. finally, i can understand every step. Very good Tut man, thnx.
Jun 9th, 2009
ok i have to examine this tutorial closely ! surely great ty for this share great to you !
Jun 22nd, 2009
Great tut! added to http://tutorialbrowser.com
Jun 27th, 2009
Thanks so much, that was a great help.
Jul 9th, 2009
where i need to add caurina transitions folder because when i check script he dont show any errors but when i play the movie i have a error 1172: Definition caurina.transitions could not be found.
Jul 10th, 2009
Hi,
you have to put the caurina folder at the same level of the fla file
Jul 21st, 2009
[...] Read tutorial [...]
Aug 2nd, 2009
Hi guys, i love ur tuts. but today i have a real beginner question.. can i use the code in as2? just tried it for a small private project… but it is not working. class and interface can not be loaded!
Aug 3rd, 2009
ow this is fantastic
Aug 4th, 2009
i cant get the buttons to load ive redone it all but i can only get one button to work
i get no error message but it just seem olnly load the first step.
please help somone.
Aug 13th, 2009
Hey.
Does anyone know how to convert this to auto-play, say every 5 seconds or so, instead of having to use buttons to navigate? Obviously with the same easing technique and transition speed. : )
Aug 23rd, 2009
Thank u so much. That’s great :X
Aug 28th, 2009
yeah, i second that autoplay request… or atleast some back/forward buttons that advance set pixels.. like 800.
great tutorial though, very satisfied with the explanation.
Sep 12th, 2009
Hello!
Very great tutorial ! I tried to use it as a “complete website” (every picture of the city contains some text, pictures, links,…) but i have a problem.
I tried to add a scrolling text box. If i add this text box on another layer, it works fine (but not slide with de background), but if I add it on the “content” movie clip, it is impossible to click on the arrows to scroll the text, and impossible to select it.
Can someone help me to get it working? Thank you !
Sep 21st, 2009
Can someone help please?
I want this same awesome effect, but I want only TWO buttons that move right and left through this content
thoughts?
Sep 22nd, 2009
Great Tutorial…… I have to ask, what if you wanted to place a ‘x’ and a ‘y’ coordinate on an image? For example, I take the Paris and NY images and set them under the Hong Kong and London images with coordinates of x-000 and y-450 for Paris and x-800 and y-450 for NY….
Sep 23rd, 2009
excellent. thank you very much.
Oct 7th, 2009
ok so i was going thru the tutorial and i added five images to scroll by. after setting up the file as described above i get an Reference error: #1056: Cannont create property buttonMode on flash.display.simpleButton. at slidingContent_fla: :Maintimeline/frame1
any help would be great….ive been searching for some input to this error for a while now thanks
The clip loads up and trhe only button that works is the first one. after that it is unresponsize.
My code:
import caurina.transitions.*;
var oneX : Number = 0;
var twoX : Number = -800;
var threeX : Number = -1600;
var fourX : Number = -2400;
var fiveX : Number = -3200;
var buttons :Array = [One_btn,Two_btn,Three_btn,Four_btn,Five_btn];
for (var i:int = 0; i< buttons.length ; i++){
buttons[i].addEventListener(MouseEvent.CLICK,navigate);
buttons[i].buttonMode = true;
}
function navigate(event:MouseEvent):void{
switch (event.target){
case(One_btn) : setTween(oneX);
break;
case(Two_btn) : setTween(twoX);
break;
case(Three_btn) : setTween(threeX);
break;
case(Four_btn) : setTween(fourX);
break;
case(Five_btn) : setTween(fiveX);
break;
}
}
function setTween(tweenX:Number):void{
Tweener.addTween(content_mc, {x:tweenX, time:1, transition:"easeInOutCubic"});
}
Oct 10th, 2009
I dont know how u got these tutotial worked i had to remove the code buttonMode = true;
then it worked maybe usefull for people who dont get it to work …
Oct 14th, 2009
salut ton tuto il cartonne
j’ai essayé de le faire mon il m’annonce 2 messages d’erreur
ligne 1 1172: la definition caurina.transitions est introuvable
ligne 32 1120 : Accès à la propriété non deinie Tweener
pourrais tu m’aider stp à faire mon tuto
en te remerciant d’avance
Oct 15th, 2009
Awsome tutorial! It was just what i needed. It is easy to follow and understand.
Oct 16th, 2009
Ace tut, if only i could get it to work. Is anyone having problems with this line? my computer no like…
Tweener.addTween(content_mc, {x:tweenX, time:1, transition:”easeInOutCubic”});
Thanks
Oct 17th, 2009
thx, this is really awesome effect, also I need something like DENA wanted, two buttons that move right and left
Oct 29th, 2009
I don’t know if anyone can use this but I have implemented back and forward. This is the actionscript.
import caurina.transitions.*;
var position:Number = 0;
var b1X : Number = 0;
var b2X : Number = -550;
var b3X : Number = -1100;
var b4X : Number = -1650;
var b5X : Number = -2200;
var locset:Array = [0,-550,-1100,-1650,-2200];
var buttons : Array = [b1_btn,b2_btn,b3_btn,b4_btn,b5_btn];
// pile funktion
back_btn.addEventListener(MouseEvent.CLICK, back);
function back(e):void {
position–;
trace(position);
var locsetlength:Number = locset.length-1;
if (position locsetlength) {
position = 0;
setTween(0);
} else {
setTween(locset[position]);
}
}
for (var i:int = 0; i< buttons.length; i++) {
buttons[i].addEventListener(MouseEvent.CLICK,navigate);
//buttons[i].buttonMode = true;
}
function navigate(event:MouseEvent):void {
switch (event.target) {
case (b1_btn) :
setTween(b1X);
position = 0;
break;
case (b2_btn) :
setTween(b2X);
position = 1;
break;
case (b3_btn) :
setTween(b3X);
position = 2;
break;
case (b4_btn) :
setTween(b4X);
position = 3;
break;
case (b5_btn) :
setTween(b5X);
position = 4;
break;
}
trace(position);
}
function setTween(tweenX:Number):void {
Tweener.addTween(content_mc, {x:tweenX, time:1, transition:"easeInOutCubic"});
}
Nov 1st, 2009
@ DAMOND F & WICKEDHAYO :
The tutorial wasn’t very clear. The buttons are in our case movie clips and then in the code we set their buttonMode property to true.
Both of you have created buttons instead of movieclip and in that case they don’t have a buttonMode property so indeed you need to delete this line of code : buttons[i].buttonMode = true;
Dec 15th, 2009
I think loader seen in the demo page is not included in the source
?
Feb 5th, 2010
i used dat for making a small gallery, very usefull. THX!