IT Computer Training Articles Tutorials - Submit Your Article - Articles Submission Directory. - http://www.articles.webtechvision.com
Basic Flash ActionScript for Designers
http://www.articles.webtechvision.com/articles/25/1/Basic-Flash-ActionScript-for-Designers/Page1.html
Lyli mee
 
By Lyli mee
Published on 01/3/2007
 
If you already know the basics of Flash, using tools and creating animations, you may want to add some interactivity to your work. ActionScript, an object oriented programming language built into Flash, is the key to this.

Basic Flash ActionScript for Designers

I'll be using Flash MX 2004, and I'll assume that you're already familiar with working on the Timeline and creating animations with keyframes. You should also know how to create buttons and movie clips, as well as being able to publish a movie.

Controlling movie clips

To control movies with ActionScript, you should name movie clip instances, which will uniquely identify them as objects. As objects, ActionScript can controlled them. When you give a movie clip instance an instance name, the instance name identifies it as an object of the MovieClip class.

You can use global ActionScript functions or the methods of the MovieClip class to perform tasks on movie clips. To use a method, you need to invoke it by using the target path of the instance name and then the method name and parameters, as shown in the following examples:

// Plays the movie clip with instance name “anim_mc”
anim_mc.play();
// Sends the playhead to frame 3 in the movie clip with instance name
// “subanim_mc” and plays it, which is inside “anim_mc”
anim_mc.subanim_mc.gotoAndPlay(3);

Note that using suffix _mc is a good practice while naming movie clip instance names.

You can use the following methods and properties to control movie clips:

// Stops the movie clip “anim_mc”
anim_mc.stop();
// Sends the playhead to frame 10 in the movie clip with instance name
// “anim_mc” and stops it
anim_mc.gotoAndStop(10);

// Sends the playhead to the next frame of the movie clip
anim_mc.nextFrame();

// Sends the playhead to the previous frame of the movie clip
anim_mc.prevFrame();

Besides the methods of the movie clip class, you can also use its properties to control behaviour and appreance.

// Sets the transparency value of a movie clip instance
anim_mc._alpha = 60;

// Sets the height of a movie clip instance, in pixels
anim_mc._height = 400;

// Sets the width of a movie clip instance, in pixels
anim_mc._width = 300;

// Sets the degree of rotation of a movie clip instance
anim_mc._rotation = 15;

// Value that determines whether a movie clip instance is
// visible or hidden (true or false)
anim_mc._visible = false;

// Sets the xcoordinate of a movie clip instance
anim_mc._x = 25;

// Sets the ycoordinate of a movie clip instance
anim_mc._y = 125;


Basic Flash ActionScript for Designers - Buttons, Movie Clips, and Making them Draggable

Buttons and Movie Clips

Buttons can be used to control movies. To accomplish this, you could directly attach actions to the button or movie clip with the on() function. Alternatively, you could write actions in the Timeline using event handler functions with instance names of button or movie clips. This second method is a better practice becuause it handles all your code at one common place instead of spreading it out over all buttons and clips.

See the example below:

// Event handler function for button with instance name
// “button1_btn” which executes the code inside the
// function when the button is pressed
button1_btn.onPress = function(){
          anim_mc.gotoAndPlay(5);
}

You can use other events in this way as well, such as onRelease, onRollOver, onDragOver, onKeyUp, etc. They also work on movie clips and their instance names.

Dragging Movie Clips

You can use the global startDrag()function or the MovieClip.startDrag()method to make a movie clip draggable. This would work with games, customizable interfaces, scroll bars, etc. A movie clip remains draggable until explicitly stopped by stopDrag() method or until another movie clip is targeted with startDrag() method. Only one movie clip at a time can be dragged in a movie.

Let us see an eample below:

// Starts dragging when “anim_mc” is pressed
anim_mc.onPress = function() {
            anim_mc.startDrag();
};
// Stops dragging when “anim_mc” is released
anim _mc.onRelease = function() {
            anim_mc.stopDrag();
};

startDrag() has two optional set of parameters that allow you to control the dragging functionality. The first is a boolean true or false parameter, which allows you to lock the dragging to the centre of the movie clip. Using "false" doesn’t lock the dragging to center, and "true" locks it to centre. The default is false.

anim_mc.startDrag(false);

The second set of parameters allows you to control the dragging to a specific area of your movie. You should specify 4 values (left, top, right, bottom) based on your movie size.

anim_mc.startDrag(false, 0, 0, 200, 400);


Basic Flash ActionScript for Designers - Navigating, URLs, and Loading Images

Navigate between scenes

Scenes in Flash can be used to organize your document into discrete sections. You can control the navigation between scenes through AcrionScript using the scene name and usinggotoAndStop() or gotoAndPlay() methods. Here are a couple examples:

// Sends the playhead to the first frame of “Scene 2”
// and stops
gotoAndStop("Scene 2", 1);

// Sends the playhead to the first frame of “Scene 1”
// and plays
gotoAndPlay ("Scene 1", 1);

Opening a URL from Flash

You can open a URL from a button or on a movie clip using getURL() method. It accepts three parameters: URL, window, and variables sending type.

URL is a valid path to a specific page or web site.

Window is an optional parameter specifying the window or HTML frame into which the document should load. You can enter the name of a specific window or select from the following reserved target names:

_self
specifies the current frame in the current window

_blank
specifies a new window

_parent
specifies the parent of the current frame

_top
specifies the top-level frame in the current window

Variables sending type is the GET or POST method for sending variables. Omit this parameter if there are none. The GET method appends the small numbers or variables to the end of the URL. The POST method sends long strings of variables in a separate HTTP header.

// Opens the site devarticles.com in a new window and sends the variables
// from flash using POST method.

getURL(“http://www.devarticles.com”, “_blank”, “POST”);

Loading an external JPEG/SWF into a movie

You can load JPEG and SWF files into your flash movie at runtime instead of importing them into flash while authoring. There are a couple of ways to do this but the easiest is using the loadMovie() method of the movie clip class. That allows you to control the movie clip to perform actions on the loaded file.

// Loads ani.swf file into anim_mc Movieclip.
anim_mc.loadMovie(“ani.swf”);

// Loads a JPG file.
anim_mc.loadMovie(“ani.jpg”);


Basic Flash ActionScript for Designers - Loading External MP3 Files

As far as audio files, Flash player supports only the MP3 file format. To load MP3 files at runtime, you need to use the loadSound() method of the Sound class. First, you need to create a Sound object, as shown in the following sample where "song1" is the instance of the sound object:

var song1:Sound = new Sound();

Then you need to use the loadSound() method of the sound object to load an event or a streaming sound. Event sounds are loaded completely before being played; streaming sounds play as they are downloaded. The isStreaming parameter of loadSound() can specify a sound as an event sound or a streaming sound.

After you load an event sound, you must call the start() method of the Sound class to make the sound play. Streaming sounds begin playing automatically, so you don't need start().

song1.loadSound("lastchristmas_wham.mp3", false);song1.start();

In the above sample, the first parameter is the mp3 file path and the send parameter is the isStreaming value, either true or false.

I recommended setting the isStreaming parameter to true, especially when you are loading large sound files so that the file starts playing as soon as possible.

To determine when a sound has completely downloaded, use the Sound.onLoad event handler. This event handler automatically receives a boolean value that indicates whether the file downloaded successfully.

song1.onLoad = function(success){
};

“Success” is the parameter which returns either true or false.

This article has covered most of the basics for adding interactivity to Flash movies for designers who don’t have any previous ActionScript knowledge. However there are a lot more features available for designers to learn, given enough ambition and patience.