Flash Programming

1
Flash Programming

• Introduction
• Script Assist

2
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_at_cs.tcd.ie
• http//www.cs.tcd.ie/Nina.Bresnihan

3
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.

4
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

5
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

6
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.

7
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.

8
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.

9
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,

10
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.

11
Using Script Assist to write ActionScript

• Select Window gt Actions. The Actions panel
  appears.
• Click the Script Assist button, The Actions panel
  enters Script Assist mode.

12
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.

13
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 right-click and
  select Add to Script.
• Click the Add () button and select an action
  from the pop-up menu.

14
Deleting an Action

• Select a statement in the Script pane.
• Click the Delete (-) button or press the Delete
  key.

15
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.

16
Creating a startDrag/stopDrag event using Script
Assist

• 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 gt
  Convert to Symbol).

17
Creating a startDrag/stopDrag event using Script
Assist

• 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.

18
Creating a startDrag/stopDrag event using Script
Assist

• Place the circle_mc move clip on the Timeline. To
  do this
• Select the circle_mc movie clip on the Stage.
• Select Modify gt Timeline gt 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.

19
Creating a startDrag/stopDrag event using Script
Assist

• 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 gt Actions to display the Actions
  panel, and click Script Assist. The Actions panel
  enters Script Assist mode.

20
Creating a startDrag/stopDrag event using Script
Assist

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

21
Creating a startDrag/stopDrag event using Script
Assist

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

22
Creating a startDrag/stopDrag event using Script
Assist

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

23
Creating a startDrag/stopDrag event using Script
Assist

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

24
Creating a startDrag/stopDrag event using Script
Assist

• Enter the following values in the L, T, R, and B
  text boxes L0, T0, R300, B300. These values
  constrain the movement of the movie clip.

25
Creating a startDrag/stopDrag event using Script
Assist

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

26
Creating a startDrag/stopDrag event using Script
Assist
27
Creating a startDrag/stopDrag event using Script
Assist

• 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.

28
Creating a startDrag/stopDrag event using Script
Assist

• Click the Add () button, and select Global
  Functions gt MovieClip Control gt 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()

29
Creating a startDrag/stopDrag event using Script
Assist

• Test your completed code by selecting Control gt
  Test Movie.
• In the Test Movie window, move the pointer over
  the circle you created, and drag it around the
  Text Movie window.

30
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.

31
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