What is Software? | What is Education? | What is Technology? | What is Research? | What is Wi-Fi? | What is Communication? | What is Customer Service?

Free SEO Tutorials & Help

Tutorials:   Adobe Flash   Adobe Photoshop   CorelDRAW   SEO  

Site Map

Website Development | Cable & Broadband Magazine | Solutions for Higher Education | Auction Anything Online

Adobe Flash Help & Tutorials

 Back to Topics

 

    Using ActionScript: Process of Adding Interactivity in Flash

ActionScript: Add Interactivity

Set up your workspace

Name button instances

Add a scene

Move between scenes

Control the document with a stop() action

Link a button to a scene

Add navigation to return to Scene 1

Play a movie clip

Use the attachMovie() method to play a movie clip

Specify movie clip Stage coordinates

Unload the movie clip

Use a behavior to play an MP3 file

Test your document

Summary

 

ActionScript: Add Interactivity

TOP

Macromedia Flash Basic 8 and Macromedia Flash Professional 8 offer numerous ways to engage users with interactivity. When you incorporate interactivity, you're not limited to playing each frame in a timeline sequentially; however, sequential playing offers greater design and development options. This tutorial will show you some of the ways to implement interactivity in Flash.
 

Set up your workspace

#TOP

First, you'll open the start file for the lesson and set up your workspace to use an optimal layout for taking lessons.

  1. To open your start file, in Flash select File > Open and navigate to the file:

    • In Windows, browse to boot drive\Program Files\Macromedia\Flash 8\Samples and Tutorials\Tutorial Assets\ActionScript\Add Interactivity and double-click interactivity_start.fla.

    • On the Macintosh, browse to Macintosh HD/Applications/Macromedia Flash 8/Samples and Tutorials/Tutorial Assets/ActionScript/Add Interactivity and double-click interactivity_start.fla.

    The document opens in the Flash authoring environment.

    NOTE The Add Interactivity folder contains completed versions of the tutorial FLA files for your reference.

  2. Select File > Save As and save the document with a new name, in the same folder, to preserve the original start file.

    As you complete this lesson, remember to save your work frequently.

  3. Select Window > Workspace Layout > Default to configure your workspace.

  4. In the Stage View pop-up menu, in the upper-right side of the Timeline, select Show Frame to view both the Stage and the workspace.

  5. Click in the workspace, away from objects on the Stage, so that no objects are selected.

 

Name button instances

TOP

You'll provide instance names for the buttons on the Stage so that you can refer to the instance names in ActionScript.

  1. On the lower-right side of the Stage, select the button at the left.

    In the Property inspector (Window > Properties), type goScene_btn in the Instance Name text box to name the instance of the symbol.

  2. Select the middle button and use the Property inspector to give the button an instance name of attachMovie_btn.

  3. Select the far-right button and use the Property inspector to give the button an instance name of playSound_btn.

 

Add a scene

TOP

You can use scenes in Flash to organize your document into discrete sections that can contain content exclusive of other scenes. You'll create and add content to a new scene.

  1. Select Insert > Scene.

    You can no longer see Scene 1, and Scene 2 now appears above the Stage. The Stage is empty.

  2. From the Library panel (Window > Library), drag the Animation movie clip to the Stage.

    With the movie clip selected, use the Property inspector to give the instance an x coordinate of 200 and a y coordinate of 15. Press Enter (Windows) or Return (Macintosh).

    The movie clip moves to the designated Stage coordinates.

  3. Use the Property inspector to give the Animation movie clip an instance name of animation_mc.

  4. Rename Layer 1 Animation.

    Create a new layer and name it Buttons. Drag an instance of the BTNback symbol to the Stage, and place it anywhere to the right of the movie clip.

  5. Use the Property inspector to give the button an instance name of back_btn.

 

Move between scenes

TOP

You can move between scenes in the authoring environment by selecting a scene in the Scene panel.

  1. To open the Scene panel, select Window > Other Panels > Scene.

  2. Select Scene 1.

 

Control the document with a stop() action

TOP

When you test or publish a Flash document that contains more than one scene, by default the scenes play linearly, in the order in which they appear in the Scenes panel. You'll use a stop() action for Scene 1 so that the playhead in the Timeline stops at Frame 1 of Scene 1.

  1. In the main Timeline for Scene 1, add a new layer and name it Actions.

  2. Click Frame 1 of the Actions layer.

    In the Script pane of the Actions panel (Window > Actions), type the following comment followed by the script that stops the playhead on the frame:

    // Stops the playhead at Frame 1.

    stop();

     

Link a button to a scene

TOP

Now that the playhead stops at Frame 1, you'll add ActionScript that takes the user to Scene 2 upon releasing the goScene_btn instance.

  • Press Enter (Windows) or Return (Macintosh) twice and type the following comment. Then write the function that takes users to Scene 2 upon release of the goScene_btn instance:

    // This script takes the user to Scene 2 when goScene_btn

    // is released.

    goScene_btn.onRelease = function (){

    gotoAndStop("Scene 2", 1);

    };

    In the script that you just typed, you used the onRelease() method for the button object. The gotoAndStop() function is a timeline control function that lets you specify the scene and frame number. In this case, you specified Frame 1.

     

Add navigation to return to Scene 1

TOP

The function that you'll add to the button in Scene 2, to return the user to Scene 1, is similar to the function that you wrote to take the user to Scene 2.

  1. In the Scene panel, select Scene 2.

    In the Timeline, create a new layer and name it Actions.

  2. Select Frame 1 of the Actions layer.

    In the Actions panel, enter the following in the Script pane:

    // function takes user to Scene 1 when back_btn instance

    // is released

    back_btn.onRelease = function (){

    gotoAndStop("Scene 1", 1);

    };

    The only differences between this function and the function in Scene 1 are the name of the button and the name of the scene.

  3. In the Scene panel, select Scene 1.

 

Play a movie clip

TOP

You can configure your document to play a movie clip at runtime. Using the attachMovie() method, you can attach an instance of a movie clip in the Library panel to the Stage even though you have not placed an instance on the Stage.


With the attachMovie() method, you must export the symbol for ActionScript and assign it a unique linkage identifier, which is different from the instance name.

  1. In the Library panel, right-click the MCTrio symbol and select Linkage from the context menu.

  2. In the Linkage Properties dialog box, select Export for ActionScript.

  3. In the Identifier text box, verify that MCTrio appears as the linkage name.

  4. Verify that Export in First Frame is selected, and then click OK.

    Movie clips that are exported for use with ActionScript load, by default, before the first frame of the SWF file that contains them. This can create a delay before the first frame plays. When you assign a linkage identifier to an element, you can specify that the movie clip loads on the first frame to avoid playback delays.

 

Use the attachMovie() method to play a movie clip

TOP

You'll now use the attachMovie() method to load the movie clip and provide the symbol with an instance name. Since the instance of the symbol does not exist on the Stage, you'll create the instance name programmatically.

  1. In the Timeline, select Frame 1 of the Actions layer for Scene 1.

  2. In the Script pane of the Actions panel, place the insertion point at the end of your last line of code.

    Press Enter (Windows) or Return (Macintosh), and then type the following to add a comment and create a new function:

    // function plays trio_mc when attachMovie_btn instance

    // is released

    attachMovie_btn.onRelease = function(){

    Next, you'll specify what the function does: it plays the movie clip on the root Timeline, which is the main timeline. In your script, you'll refer to the movie clip by the linkage identifier name in the Linkage Properties dialog box (MCTrio).

    Additionally, even though you didn't place an instance of the MCTrio symbol on the Stage, you'll use ActionScript to create an instance name for the symbol. The instance name that you'll specify is trio_mc.

  3. With the insertion point at the end of the last line of script, press Enter or Return. Then type the following:

    this._parent.attachMovie("MCTrio", "trio_mc", 1);

    The number 1 in the script that you just typed refers to the depth on the layer in which to play the movie clip.

    Every movie clip instance has its own z axis (depth) that determines the stacking order of a movie clip within its parent SWF file or movie clip. When you use the attachMovie() method to create a new movie clip at runtime, you always specify a depth for the new clip as a method parameter.

 

Specify movie clip Stage coordinates

TOP

In addition to the z axis for the movie clip, you must specify the x and y coordinates to place the movie clip within the Stage area at runtime.

  • Press Enter (Windows) or Return (Macintosh) after the last line in the Script pane and type the following:

  • trio_mc._x = 275;

  • trio_mc._y = 200;

  • };

 

Unload the movie clip

TOP

After the movie clip plays, you need a way to remove the movie clip from the Stage when the user goes to Scene 2. You can modify your script for the goScene_btn to "unload" the movie clip.

  1. In the Timeline, select Frame 1 of the Actions layer.

  2. Then click at the end of the following line of script in the Script pane, within the function that takes the user to Scene 2, to place the insertion point:

  3. gotoAndStop("Scene 2", 1);

  4. Press Enter (Windows) or Return (Macintosh) and type the following script, which unloads the movie clip when the function runs, so that the movie clip does not continue to play when the user goes to Scene 2:

  5. unloadMovie("trio_mc");

Your entire function for the goScene_btn should appear as follows:

// This script takes user to Scene 2 when goScene_btn

// instance is released.

goScene_btn.onRelease = function() {

gotoAndStop("Scene 2", 1);

unloadMovie("trio_mc");

};

Your entire script should appears as follows:
// Stops the playhead at Frame 1.
stop();

// This script takes user to Scene 2 when goScene_btn
// instance is released.
goScene_btn.onRelease = function (){
gotoAndStop("Scene 2", 1);
unloadMovie("trio_mc");
};

// This function plays trio_mc when attachMovie_btn
// instance is released.
attachMovie_btn.onRelease = function(){
this._parent.attachMovie("MCTrio", "trio_mc", 1);
trio_mc._x = 275;
trio_mc._y = 200;

 

Use a behavior to play an MP3 file

TOP

When you want to add interactivity to your document with ActionScript, you can often rely on behaviors to add the ActionScript for you. You'll use a sound behavior to play an MP3 file from the library.

  1. In the Library panel, right-click (Windows) or Control-click (Macintosh) ping.mp3 and select Linkage from the context menu.

  2. In the Linkage Properties dialog box, select Export for ActionScript and verify that Export in First Frame is selected.

  3. Verify that ping.mp3 appears in the Identifier text box, and click OK.

  4. On the Stage, select the playSound_btn instance.

  5. In the Behaviors panel (Window > Behaviors), click Add (+) and select Sound > Load Sound from Library.

  6. In the linkage ID text box, enter ping.mp3, and in the Name text box below, enter ping.

    Then click OK.

 

Test your document

TOP

Test your document to verify that the interactivity works as expected.

  1. Select Control > Test Movie.

  2. In the SWF file, click the left button to play Scene 2.

    When you finish viewing Scene 2, click Back.

  3. Click the middle button in Scene 1 to see the movie clip play.

  4. Click the right button to play the MP3 sound.

  5. Click the left button again to verify that the movie clip unloads

 

Summary

TOP

Congratulations on learning how to create an interactive document. In a few minutes, you learned how to accomplish the following tasks:

  • Create a new scene.

  • Write ActionScript to navigate between scenes.

  • Write ActionScript to play an animated movie clip at runtime.

  • Use a behavior to play an MP3 file.

To learn more about ActionScript, take another lesson in the Basic ActionScript series.

 

Copyright ADOBE - All Rights Reserved Worldwide

 

 

More Topics:

Working with Flash Documents

How to work in Flash WorkSpace

Working with Projects in Flash

Process to Build your First Application in Flash

Using Symbols, Instances and Library Assets in Flash

How to Build Video Player in Flash

How to Work with Color, Strokes and Fills in Flash

How to Create Document in Flash

What is Vector and Bitmap Graphics in Flash

How to Create a Banner in Flash, Part 1

How to Work with Text in Flash

How to Create a Banner in Flash, Part 2

How to Use Imported Artwork in Flash

How to Create a Banner in Flash, Part 3

How to Work with Graphic Objects in Flash

How to Work with Layers in Flash

How to Use Filters and Blends

Working with Graphics in Flash

What is Accessibility Features in Flash

How to Create Motion (Shape Tween & Motion Tween) in Flash

How to Create an Application in Flash

What is Masking in Flash

How to Work with Video in Flash

How to Use Layout Tools in Flash

What are Behaviors in Flash

How to Work with Sound in Flash

How to Create Symbols and Instances in Flash

What is ActionScript in Flash

How to Write ActionScript With Script Assist in Flash

How to Add Button Animation and Navigation in Flash

What is Data Integration in Flash

How to Work with Screens

How to Create a Presentation with Screens

What is Extending Flash

How to Create Multilanguage Text in Flash

How to Create Graphics: Draw in Flash

What is Flash Lite

Ways of Data Integration

How to Create Graphics: Create a Timeline Animation in Flash

Getting Started with Flash Lite in Flash

How to Publish Flash Documents

How to Create Graphics: Making Animations with Easing

Learning Flash Lite 1.X ActionScript in Flash

How to Export Flash Content and Images from Flash

How to Create Graphics: Applying Gradients in Flash

Process of Writing and Editing ActionScript 2.0 in Flash

How to Create Accessible Content in Flash

How to Create Graphics: Apply Graphic Filters and Blends

What is Data and Data Types in Flash

Process of Printing from SWF Files in Flash

Using ActionScript: How to Use Script Assist mode in Flash

Learn Syntax and Language Fundamentals in Flash

How to Create E-learning Content in Flash

Using ActionScript: How to Write Scripts in Flash

Working with Functions and Methods in Flash

Process of Using Templates in Flash

Using ActionScript: Process of Adding Interactivity in Flash

What are Classes in Flash

Control Tag Summary of XML to UI in Flash

Using ActionScript: How to Create a Form with Conditional Logic and Send Data in Flash

What is Inheritance in Flash

What is Data Integration: Overview

Using ActionScript: How to Work with Objects and Classes in Flash

Overview on Interfaces in Flash

What is Data Integration: Using XML for a Timesheet

How to Work with Text and Strings in Flash

How to use Handling Events in Flash

What is Data Integration: Using XUpdate to Update the Timesheet

Learning Animation, Filters and Drawings in Flash

How to Work with Movie Clips in Flash

How to Create Interaction with ActionScript in Flash

How to Work with Images, Sound, and Video in Flash

How to Work with External Data in Flash

What is Security in Flash

How to Debug Applications in Flash

List of Error Messages in Flash

Using Object-Oriented Programming with ActionScript 1.0 in Flash

How to Write Scripts for Earlier Versions of Flash Player in Flash

List of all Keyboard Keys and Key Code Values for using in Flash

Terminology

Introduction to Components in Flash

What are Components in Flash

How to Create an Application with Components

How to Work with Components in Flash

How to Handle Component Events in Flash

How to Customize Components in Flash

How to Create Components in Flash

What is Collection Properties in Flash