Creating a full Flash Web site

posted: 04-01-06
author: PrimeVector
website: http://www.free-webmaster-resource.com
views: 380017
comments: 118
total pages: 8
page jump: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8

Check This Amazing Traffic Generating Widgetsl 4 Webmasters!

Lets blow some life into it with Actionscript!

Select frame 1 on the code layer and press F9 to open the Actionscript editor. The code you see below will create the navigation and the movement of the navigation buttons. You can find the Actionscript code with explanation below the code without explanation.

stop();
#include "lmc_tween.as"

homeNav.navTxt.text = "home";
toolsNav.navTxt.text = "tools";
linksNav.navTxt.text = "links";
contactNav.navTxt.text = "contact";

var speed:Number = 1;
var ease_type:String = "easeInOutBack";
homeNav.tween("_x",280,speed,ease_type,0);
homeNav.tween("_y",200,speed,ease_type,0);
toolsNav.tween("_x",365,speed,ease_type,0.1);
toolsNav.tween("_y",200,speed,ease_type,0.1);
linksNav.tween("_x",280,speed,ease_type,0.2);
linksNav.tween("_y",285,speed,ease_type,0.2);
contactNav.tween("_x",365,speed,ease_type,0.3);
contactNav.tween("_y",285,speed,ease_type,0.3);

homeNav.onPress = function(){
    gotoAndStop("home");
}

toolsNav.onPress = function(){
    gotoAndStop("tools");
}

linksNav.onPress = function(){
    gotoAndStop("links");
}

contactNav.onPress = function(){
    gotoAndStop("contact");
}

Actionscript with explanations

Below you will find the Actionscript again for frame 1 on the code layer, this time its explained.

This stops the playhead.

stop();

Include the Tween code from here for all the transitions!

#include "lmc_tween.as"

Setup the text in our navigational button. With the dot-syntaxt we setup the text "home" for the "homeNav" clip. "navTxt" was the name of the textbox in that base clip. You can read it as "navTxt" that is inside "homeNav" will be filled with the text "home".

homeNav.navTxt.text = "home";

Do the same for toolsNav.

toolsNav.navTxt.text = "tools";

And for linksNav.

linksNav.navTxt.text = "links";

And finally for contactNav.

contactNav.navTxt.text = "contact";

Here i created a variable named "speed", which is the speed of the movement you will see. You could tweak this number and get different results.

var speed:Number = 1;

Here i created a variable named "ease_type", which is the ease type of the movement. There are loads of easeTypes available. Here are some others you could try:
"easeInQuad","easeOutQuad","easeInOutQuad","easeOutInQuad"
"easeInCubic","easeOutCubic","easeInOutCubic","easeOutInCubic"
"easeInSine","easeOutSine","easeInOutSine","easeOutInSine"
"easeInCirc","easeOutCirc","easeInOutCirc","easeOutInCirc"
"easeInElastic","easeOutElastic","easeInOutElastic","easeOutInElastic"
"easeInBack","easeOutBack","easeInOutBack","easeOutInBack"
"easeInBounce","easeOutBounce","easeInOutBounce","easeOutInBounce"

var ease_type:String = "easeInOutBack";

Here we use the "tween" function to call a tween on the "_x" property, which is the horizintal movement. We tell it to go 280 pixels to the left of the Stage (0 is in the Left-Upper corner). We plugin the speed and ease_type variables and finally we set a delay of 0

homeNav.tween("_x",280,speed,ease_type,0);

Here we use the "tween" function to call a tween on the "_y" property, which is the vertical movement. We tell it to go 200 pixels down (0 is in the Left-Upper corner). We plugin the speed and ease_type variables and finally we set a delay of 0

homeNav.tween("_y",200,speed,ease_type,0);

We do the same for the toolsNav _x and _y movement only it moves to a different position.

toolsNav.tween("_x",365,speed,ease_type,0.1);

toolsNav.tween("_y",200,speed,ease_type,0.1);

And we do the same for the linksNav _x and _y movement again this also moves to a different position on the stage and with a delay of 0.2

linksNav.tween("_x",280,speed,ease_type,0.2);

linksNav.tween("_y",285,speed,ease_type,0.2);

Then ofcourse the contactNav _x and _y movement too, again this also moves to a different position on the stage and with a delay of 0.3.

contactNav.tween("_x",365,speed,ease_type,0.3);

contactNav.tween("_y",285,speed,ease_type,0.3);

When we press on "homeNav", the playheader is sent to frame "home".

homeNav.onPress = function(){
    gotoAndStop("home");
}

When we press on "toolsNav", the playheader is sent to frame "tools".

toolsNav.onPress = function(){
    gotoAndStop("tools");
}

When we press on "linksNav", the playheader is sent to frame "links".

linksNav.onPress = function(){
    gotoAndStop("links");
}

When we press on "contactsNav", the playheader is sent to frame "contact".

contactNav.onPress = function(){
    gotoAndStop("contact");
}

On the next page we continue with the Actionscript for the other frames.

page jump: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8

Check This Amazing Traffic Generating Widgetsl 4 Webmasters!