NewCoder
05-14-2008, 12:55 AM
Hi guys,
So I'm semi new to AS3 and I am having some problem putting together a little website interface. I'll try to explain as clear as I can.
On bottom of the homepage are 4 buttons. Each button links to a different section. When I click on one button I want the current page that is up to tween off the screen to the right and then the information for the button that is clicked scrolls on from the left.
I need to figure out how to tell flash. Go and play frames 82-91 (the wipe off of the current information) then jump to frame 208 (the location of the time line where the new information with come in from left).
So go and play this section then jump to the appropriate frame for the button that was clickd. So the buttons on 208 would say go and play the wipe for this section on frame 220 to 240. Then jump to 300.
Sorry it's confusing but that's the best I could expalin. If anyone has a clue how to do this please let me know :D.
Thanks in advance!
Totsugeki
05-14-2008, 01:59 AM
Hi,
I think I saw a tutorial from lynda.com that shows a little website interface with the exact same concept ahah. Well I suggest you don't do it with the timeline, but with actual coding. It's pretty simple in fact, here's the example, I added comments to help you (well hope it helps):
The three sections of the website are in the same movieclip, called main_mc. The buttons are not moving, they simply stay on the stage where they are, so it's only the content that moves.
//import the stuff that you need
import fl.transitions.Tween;
import fl.transitions.easing.*;
import fl.transitions.TweenEvent;
//variables that set the positions of the different sections of the website, that are in a whole and same Movie Clip, so you simply enter the coordonates of the good x and y positions here
var homeX:Number = -301;
var homeY:Number = 110;
var newsX:Number = -17;
var newsY:Number = -777;
var aboutX:Number = -1354;
var aboutY:Number = -445;
//set your variables for the different Tweens
var xTween:Tween;
var yTween:Tween;
var inTween:Tween;
var outTween:Tween;
//create the tweens and settings for the tweens
xTween = new Tween(main_mc,"x",Strong.easeInOut,main_mc.x,homeX,2,true);
yTween = new Tween(main_mc,"y",Strong.easeInOut,main_mc.y,homeY,2,true);
inTween = new Tween(main_mc.home_mc,"alpha",None.easeNone,0,1,.5,true);
outTween = new Tween(main_mc.home_mc,"alpha",None.easeNone,1,0,.5,true);
xTween.addEventListener(TweenEvent.MOTION_FINISH,f adeIn);
xTween.addEventListener(TweenEvent.MOTION_START,fa deOut);
//each of the buttons on your page as an EventListener, linked to the navigate function when you Click on them
home_btn.addEventListener(MouseEvent.CLICK, navigate);
news_btn.addEventListener(MouseEvent.CLICK, navigate);
about_btn.addEventListener(MouseEvent.CLICK, navigate);
//actual function to navigate, with if statements -> each of them refer to the setTween function, that set the tweenX, Y and MovieClip
function navigate(event:MouseEvent):void
{
if(event.target == home_btn)
{
setTween(homeX,homeY,main_mc.home_mc);
}
else if(event.target == news_btn)
{
setTween(newsX,newsY,main_mc.news_mc);
}
else
{
setTween(aboutX,aboutY,main_mc.about_mc);
}
}
function setTween(tweenX:Number,tweenY:Number,tweenMC:Movie Clip):void
{
//set the beginning and the end of the Tween, so the images fit on the scene
xTween.begin = main_mc.x;
yTween.begin = main_mc.y;
xTween.finish = tweenX;
yTween.finish = tweenY;
tweenMC.alpha = 0;
inTween.obj = tweenMC;
xTween.start();
yTween.start();
}
//some functions to create a little window that appears in a fade in.. don't think you'll need this
function fadeIn(event:TweenEvent):void
{
inTween.start();
outTween.obj = inTween.obj;
}
function fadeOut(event:TweenEvent):void
{
outTween.start();
}
//don't forget to stop all your tweens =D
xTween.stop();
yTween.stop();
inTween.stop();
outTween.stop();
vBulletin® v3.8.5, Copyright ©2000-2012, Jelsoft Enterprises Ltd.