Free Flash Tutorials

Home • Members Tutorials Forum iSnapChat Contact Us 

 


Flash Tutorials

   

Flash Tutorial - Single Frame ActionScripting

124 Intermediate
Flash Compatibility:
MX 2004 (Principles and ActionScript are the same in Flash MX)

Written by: Joseph Levin   Web Designer:   http://portal2web.biz   email Joe

Sub Editor: Stella Udu

Length: 900 words

Assumed Knowledge : Nested Movie Clips, Target Paths, basic ActionScript (arrays, for-next loops, event catching, etc).

Level: Medium / Hard

 

Access: Free Tutorial

 

The aim of the tutorial is to learn how to place all your code in a single frame of the Timeline (i.e., frame based AS) as opposed to attaching code to an object (i.e., object based AS).

 

Benefits of using a code saving technique such as this include: modular code, ease-of-editing code, reduction in file size when compared to using object based AS, and eliminating some human error when compared to using object based AS.

 

Example: Download the Flash file Int 124a

 


The example Movie used in this tutorial.

Note: This tutorial uses some methods that may be found in the webwasp tutorial: Tsunami Menu. It is the Tsunami Menu that makes the buttons change size and the animation play as the mouse cursor gets close to the buttons.

Cross Ref: To learn how to create a Menu similar to the one above, see the tutorial: Tsunami Menu

The methods involved in this tutorial apply to any sort of code that applies to a series of Instances of Movie Clips. The creation of the Movie Clips and their placement on the stage is not detailed here. What is important here, is the method pertaining to the use of Actionscript as it relates to the eval() function and variable scope.

You need to understand that Movie Clips have been placed on the stage, to be used as Menu buttons, with names such as dotX, (where X is 0, 1, 2, 3, etc. and on a Layer called DOTS). The event code causes another Movie clip (on a Layer called Explanation) to become visible and to gotoAndPlay() at the frame name specified. Just pay attention to the formation of the event code, and the use of the eval() function and you'll understand what is going on. The code below has been placed on Frame 1 of the main timeline in a Layer called "Actions". Lines of code deemed especially important have been commented here.


Note Layer Names. The Property Inspector is displaying information on the first button: dot1

The Code begins, now...

stop(); //always important to have a nice stop() statement!

var url_array = new Array(); //array holds url's that get sent to browser with onRelease/onReleaseOutside event. Keep in mind that there are other ways to populate and use an array. The array.Push method is used here.
url_array.push( { url: "http://www.yahoo.com", name:"Go to\nYahoo!" } );
url_array.push( { url: "http://www.google.com", name:"Go to\nGoogle!" } );
url_array.push( { url: "http://www.msn.com", name:"Go to\nMSN!" } );
url_array.push( { url: "http://www.askjeeves.com", name:"Go to\nAskJeeves!" } );
url_array.push( { url: "http://www.altavista.com", name:"Go to\nAltavista!" } );
url_array.push( { url: "http://www.netscape.com", name:"Go to\nNetscape!" } );
url_array.push( { url: "http://www.lycos.com", name:"Go to\nLycos!" } );
url_array.push( { url: "http://www.aesop.com", name:"Go to\nAesop!" } );
url_array.push( { url: "http://portal2web.biz", name:"Go to\nPortal!" } ); //some shameless plugging here :)

//Note that you do not have to use an array, but it helps to hold information unique to each individual Movie Clip referenced by the foosh statements.

//next 3 lines for tsunami menu variables
menutriggerdist=250;
menumaxscale=200;
menumultiplier=1.5;
explanation._
visible=false; //sets initial state of explanation MC

for (i=1;i<url_array.length+1;i++) {

//You can create Movie Clips, or attach Movie Clips instead of placing them on the stage. Just put the code you need (that creates/attaches and names them) before the first use of the foosh variable. I.e. the next line would be a good place!

foosh=eval("dot"+i); //foosh, or any silly name, becomes a dummy variable evaluated to become dot0, dot1, dot2, etc.
foosh.number=i;
//lets each dot know which number it is. This comes in handy if you only want to have an action occur when you've not selected the same menu dot twice in a row.
foosh.hitArea=foosh.dothit; //dothit is just a Movie clip within each dot MC that defines the hit area of the dot MC. You do not have to do this, I do so because it works for my menu MCs.
foosh.url=url_array[i-1].url; //puts url from url_array into the dot MC
foosh.name=url_array[i-1].name; //puts name from url_array into the dot MC

// Note on the following events: the phrase "this" must be used instead of "foosh" on every line of the event except for the first line of each event, or what you will be referring to is "DOT9" (i.e., the last instantiated value of "foosh") as opposed to "DOT1", "DOT2" or "DOT3", etc.

foosh.
onMouseMove=function() { //everything in this event is from the tsunami menu. Keep in mind the results of the events may be anything you want. The format the event takes is what is important.

// (i.e., foosh.eventType=function() {})
this.dist=Math.sqrt(Math.pow(Math.abs(_xmouse-this._x),2)+Math.pow(Math.abs(_ymouse-this._y),2));
if (this.dist<=_root.menutriggerdist) {
  
this.currscale = (1-(this.dist/
     (
_root.menumultiplier*_root.menutriggerdist))) *
     (
_root.menumaxscale-100);//all 1 line form this.currscale to menumaxscale-100
   this._xscale=this.currscale;
   this._yscale=this.currscale;
}
else {
    this._xscale=50;
    this._yscale=50;
}

}

foosh.
onPress=function() { //any sort of thing can go in this event
    this.flare.play(3);
    mySound=
new Sound();
    mySound.
attachSound("SYNTHRI");
    mySound.
start(0,1);
}

foosh.
onRelease=foosh.onReleaseOutside=function() { //anything can go in this event
    getURL(this.url,"_blank"); //put any action here, like gotoAndPlay()
}

foosh.
onRollOver=function() { //any sort of thing can go in this event
    this.dot.tesla.gotoAndPlay(2);
    this.dot.ring.gotoAndPlay("open");
    explanation.
_visible=true;
    explanation.dots.
gotoAndPlay("dot"+this.number);
    explanation.dots.
name=this.name;
}

foosh.
onRollOut=function() { //any sort of thing can go in this event
    this.dot.ring.gotoAndPlay("close");
    explanation.
_visible=false;
    explanation.dots.
gotoAndStop(1);
}

}

Code ends.

Enjoy! If you have questions... feel free to ask the author of this tutorial! Email Joe

 

Please indicate what you thought of this tutorial 
10 is the best: 
10 9 8 7 6 5 4 3 2 1


40644 visitors to this page since Jan 04 •

Phil Schulz's Facebook Profile
Webwasp is Phil Schulz's baby. You are welcome to contact me or become my Facebook friend: Click here

 Top of Page HomeMembers Tutorials Forum iSnapChat Contact Us 
 All material on this site is protected under international copyright © law. DO NOT reproduce any material from this site without written permission. Please ask as permission is often granted.