Create a Simple Flash Site using AS3 in Flash CS3

| Posted in Flash, Tutorials |


Ever just need that starting foundation?  Here's a quick one to jump-start some flash developing.  This tutorial will show you how to create a simple flash site using AS3.  Many products can developed from this simple flash site "engine".  A full flash site, or a simple slideshow, are a couple of examples.

Setting up the .fla file

First, create a new ActionScript 3.0 file. Then add a several MovieClips to the stage - I created a rectangle and converted it to a MovieClip, then held CTRL while clicking and dragging the new symbol, creating 4 instances on the stage. I named these instances page1_mc ... page4_mc...

MovieClip instanced added to stage

Creating Pages

Next, I created 4 pages to go with each slide.  So for a sample page I just drew a shape and added a number to the top left hand corner.  Each time I created a page, the linkage should be "Export for ActionScript" under the advanced tab when converting to a symbol.  If you haven't already turned this message off, this is what pops up.

Class not found

It's ok. Just press OK and move along. Create as many pages as need be.

The Actionscript

import fl.transitions.Tween;
import fl.transitions.TweenEvent;
import fl.transitions.easing.*;

const PAGE1:int = 0;
const PAGE2:int = 1;
const PAGE3:int = 2;
const PAGE4:int = 3;

var currentSlide:int = 0;
var pageArray:Array = new Array();
pageArray[PAGE1] = new Page1();
pageArray[PAGE2] = new Page2();
pageArray[PAGE3] = new Page3();
pageArray[PAGE4] = new Page4();

for each(var mc:MovieClip in pageArray) {
	if(mc) {
		mc.visible = false;
		mc.enabled = false;

pageArray[PAGE1].visible = true;
pageArray[PAGE1].enabled = true;

//It isn't best practice to have an inline function but it gets the job done.
setButton(page1_mc, PAGE1);
setButton(page2_mc, PAGE2);
setButton(page3_mc, PAGE3);
setButton(page4_mc, PAGE4); 

function setButton(mc:MovieClip, slide:int):void {
	mc.addEventListener(MouseEvent.CLICK, function() { showSlide(slide); } );
	mc.buttonMode = true;

var tweenAlphaOut:Tween, tweenAlphaIn:Tween;
var tweenXOut:Tween, tweenXIn:Tween;

function showSlide(slide:int):void {
	if(slide != currentSlide)
		tweenAlphaOut = new Tween(pageArray[currentSlide], "alpha", Regular.easeOut,1,0,.25,true);
		tweenAlphaOut.addEventListener(TweenEvent.MOTION_FINISH, hideMC);

		tweenXOut = new Tween(pageArray[currentSlide], "x", Regular.easeOut,0,-400,.5,true);
		//pageArray[currentSlide].visible = false;
		pageArray[currentSlide].enabled = false;

		trace("Transition in:\t" + slide);
		tweenAlphaIn = new Tween(pageArray[slide], "alpha", Regular.easeOut, 0, 1, .25, true);
		tweenAlphaOut.addEventListener(TweenEvent.MOTION_FINISH, showMC);

		tweenXIn = new Tween(pageArray[slide], "x", Regular.easeOut,400,0,.5,true);
		pageArray[slide].visible = true;
		pageArray[slide].enabled = true;

		currentSlide = slide;

function hideMC(e:TweenEvent):void {
	e.currentTarget.obj.visible = false;

function showMC(e:TweenEvent):void {
	e.currentTarget.obj.visible = true;

Now, we’re done!

Test your Movie and enjoy!

Download Source File: flashsite.fla

Random Plugin created by Best Accountants Services