Flash Programming

Introduction

Script
1

Assist

Course Description

This course concentrates on the teaching of Actionscript, the programming language used primarily for the development of websites and software using the Adobe Flash Player platform.
Lecturer: Nina Bresnihan Room 3.4, 8 Wsq Nina. Bresnihan@cs.tcd.ie http://www.cs.tcd.ie/Nina.Bresnihan

Course Aim & Learning Outcome

Students will be introduced to the fundamentals of Actionscript programming. They will become familiar with its structure and syntax and how it interfaces with the Flash software.

Course Assessment

End of year Examination 75%; Assignment One 5%; Assignment Two 20%.
Marked coursework will consist of two assignments. The first will be a simple assignment using the built-in actions in the library. The second, more complex, project will test the students knowledge of Actionscript. The remainder of the course will be assessed by end-of-year examination

Topics Covered
Include: Script Assist The Actions Panel Actions and Events Variables Control Scructures Arrays Animation Functions and Methods Working with Movie Clips Multiple Levels and Timelines
5

What is Actionscript?

ActionScript lets you add interactivity to a movie.

ActionScript provides elements, such as actions, operators, and objects, that you put together in scripts that tell your movie what to do; You set up your movie so that events, such as button clicks and key presses, trigger these scripts. E.g., you can use ActionScript to create navigation buttons for your movie.

Writing ActionScript with Script Assist

For users who are new to ActionScript, or for those who want to add simple interactivity without having to learn the ActionScript language and its syntax, you can opt to use Script Assist to help you more easily add ActionScript to your Flash documents.

About Script Assist

Script Assist lets you build scripts by selecting items from the Actions toolbox, the list on the left side of the Actions panel. The Actions toolbox separates items into categories such as actions, properties, and objects, and provides an index category that lists all items alphabetically. When you click an item once, its description appears at the upper right of the panel. When you double-click an item, it adds the item to the scrolling list on the right side of the panel in the Script pane.

About Script Assist

You can add, delete, or change the order of statements in the Script pane; You can enter parameters for actions in text boxes above the Script pane. Script Assist also lets you find and replace text, and view script line numbers,

Using Script Assist to write ActionScript

To add an action to a Flash document, you must attach it to a button or movie clip, or to a frame in the Timeline. The Actions panel lets you select, drag and drop, rearrange, and delete actions.

10

Using Script Assist to write ActionScript

Select Window > Actions. The Actions panel appears.

Click the Script Assist button, The Actions panel enters Script Assist mode.

11

Viewing a Description of an Action

Do one of the following:

Click a category in the Actions toolbox to display the actions in that category, and click an action. Select a line of code in the Script pane.

The description appears at the upper left of the Actions panel, beginning with the Property or Event name.

12

Adding an Action to the Script Pane

Do one of the following:

Click a category in the Actions toolbox to display the actions in that category, and then do one of the following: double-click an action, drag it to the Script pane, or rightclick and select Add to Script. Click the Add (+) button and select an action from the pop-up menu.

13

Deleting an Action

Select a statement in the Script pane.

Click the Delete (-) button or press the Delete key.

14

Creating a startDrag/stopDrag event using Script Assist

The following example walks you through the process of creating a simple startDrag/stopDrag event using Script Assist.
When you complete this procedure, you will have a movie clip that you can drag around within a constrained rectangle using your computer's mouse in a published SWF file.

15

Creating a startDrag/stopDrag event using Script Assist

1.

Create a new Flash document, and save it as circle.fla.

Draw a circle on the Stage. Select the circle on the Stage, and convert it into a movie clip symbol (Select Modify > Convert to Symbol).

2.

3.

16

Creating a startDrag/stopDrag event using Script Assist

4.

In the Convert to Symbol dialog box, enter circle_mc for the name of the symbol and select the Movie Clip behavior. Click OK. Flash adds the symbol to the library, and the selection on the Stage becomes an instance of the symbol. With the circle_mc movie clip still selected, enter the instance name myCircle in the Instance Name text box of the Property inspector.

5.

6.

17

Creating a startDrag/stopDrag event using Script Assist

7.

Place the circle_mc move clip on the Timeline. To do this:

a. b.

Select the circle_mc movie clip on the Stage. Select Modify > Timeline > Distribute to Layers. This automatically adds a layer to the Timeline and places the circle_mc movie clip instance on the Timeline. It names the new layer according to the symbol name and places it beneath the already existing Layer 1.

18

Creating a startDrag/stopDrag event using Script Assist

8.

Rename Layer 1 by double-clicking its name in the Timeline and typing the name "Actions" in its place. Select the first frame of the Actions layers.
Select Window > Actions to display the Actions panel, and click Script Assist. The Actions panel enters Script Assist mode.

9.

10.

19

Creating a startDrag/stopDrag event using Script Assist

11.

In the Actions Toolbox, navigate to ActionScript 2.0 Classes > Movie > MovieClip > Event Handlers > onPress, and double-click onPress. The onPress method is added to the Actions panel.

20

Creating a startDrag/stopDrag event using Script Assist

12.

Click in the Object text box, and click the Target Path button.
Click the Target path button. The Target Path dialog box is displayed.

13.

21

Creating a startDrag/stopDrag event using Script Assist

14.

In the Target Path dialog box, select the MyCircle movie clip instance, and ensure that the Relative path option is selected. Click OK.

22

Creating a startDrag/stopDrag event using Script Assist

15.

Click the Add (+) button, and select Global Functions > MovieClip Control > startDrag. Enter this into the Target text box.
Select the Expression and Constrain to Rectangle check boxes.

16.

17.

23

Creating a startDrag/stopDrag event using Script Assist

18.

Enter the following values in the L, T, R, and B text boxes: L:0, T:0, R:300, B:300. These values constrain the movement of the movie clip.

24

Creating a startDrag/stopDrag event using Script Assist

19.

Click beneath the last line of the code currently inserted in the Actions panel.
In the Actions Toolbox, navigate to ActionScript 2.0 Classes > Movie > MovieClip > Event Handlers > onRelease, and double-click onRelease. The onRelease method is added to the Actions panel.

20.

25

Creating a startDrag/stopDrag event using Script Assist

26

Creating a startDrag/stopDrag event using Script Assist

21.

Click in the Object text box, and click the Target Path button. The Target Path dialog box is displayed. In the Target Path dialog box, select the MyCircle movie clip instance, and ensure that the Relative path radio button is selected. Click OK.

22.

27

Creating a startDrag/stopDrag event using Script Assist

23.

Click the Add (+) button, and select Global Functions > MovieClip Control > stopDrag.
The finished code looks like this:

this.my_mc.onPress = function() { startDrag(this, false, 0, 0, 300, 300); }; this.my_mc.onRelease = function() { stopDrag(); };

28

Creating a startDrag/stopDrag event using Script Assist

24.

Test your completed code by selecting Control > Test Movie.

In the Test Movie window, move the pointer over the circle you created, and drag it around the Text Movie window.

25.

29

Assignment

Due Date: Friday, 10th February 2006 Marks: 5% Create a button in Flash and place it in Scene 1, Frame 1. Attach an action to the button sending the user to Scene 2, Frame 1. (goto Action)
Create another button with added sound and place it in Scene 2, Frame 1. Add the getURL action to this button.

30

Assignment

Due: 12pm Wednesday, 13th February 2008 Marks: 5% Submission: Publish on your websites. Send me a mail with the URL and the .fla file

31