Actionscript 3 Avoid And Catch Game Tutorial



1

Overview


Learning materials

Grab the various *.fla files from here:

http://tecfa.unige.ch/guides/flash/ex6/action-script-3-intro/



2

Manipulating objects


The principle of (simple) object manipulation is fairly simple:
change properties of a display object. The tricky thing is to know
what

you can change on a given kind of object. Some changes are easy to make, others are really hard. Typically, most objects are non-editable (its component objects maybe are). It’s easy to change size and position of a display object, i.e. operations you could do on grouped objects and symbol instances with the transform tool or the parameters panel.

Below, we show a few little examples that demonstrate how to manipulate objects with mouse events (see the ActionScript 3 event handling tuntunan for more details). All the objects on the stage (e.g. black_cat) are instances of movie clip symbols. These are a kind of interactive object and react to mouse and keyboard events. The kind of tricks will we show act on
named instances

movie clips.

Symbol instances you want to manipulate must be named

You could imagine dozens of other simple examples, but it’s not so easy to understand the technical ActionScript documentation which is made for programmers and titinada designers. If you feel more adventurous, you may have a look at the class hierarchy described in the Flash ActionScript 3 overview and in particular the Display Object and its children. Follow up a link to the Flash documentation and see if you can find other properties that are easy to manipulate…



2.1

Simple repositioning example


To understand what is going on below, you may want to look at:

actionscript3-simple-object-manipulation.html

And also load the *.fla file

actionscript3-simple-object-manipulation.fla

In titipan to reposition an object, change its
x

and
y

properties.

In the following example, when you click on the interactive object (a symbol instance that is called “black_cat”) it will move itself to position x= 200 and y=200. Note: Position is defined by the center of the display object (i.e. the little “+” sign who’s value depends on how you made it).

          
          black_cat
          .
          addEventListener
          (
          MouseEvent
          .
          CLICK
          ,
          moveCat
          );
          function
          moveCat
          (
          event
          :
          MouseEvent
          )
          :
          void
          {
          black_cat
          .
          x
          =
          200
          ;
          black_cat
          .
          y
          =
          200
          ;
          }
        

A statement like

is called an
assignment

and means: The
x

property

of the pewarna object will become “100”.

If you want to move the pewarna forth and back you’d rather use this code:

          
          black_cat
          .
          addEventListener
          (
          MouseEvent
          .
          CLICK
          ,
          moveCat
          );
          // pewarna can be in original position or not (true,false)
          var
          black_cat_ori_pos
          =
          true
          ;
          function
          moveCat
          (
          event
          :
          MouseEvent
          )
          :
          void
          {
          if
          (
          black_cat_ori_pos
          ==
          true
          )
          {
          black_cat
          .
          x
          +=
          200
          ;
          black_cat
          .
          y
          +=
          200
          ;
          black_cat_ori_pos
          =
          false
          ;
          }
          else
          {
          black_cat
          .
          x
          -=
          200
          ;
          black_cat
          .
          y
          -=
          200
          ;
          black_cat_ori_pos
          =
          true
          ;
          }
          }
        

In this function we use a so-called
if-then-else statement. The line

          
          if
          (
          black_cat_ori_pos
          ==
          true
          )
        

checks if the variable black_cat_ori_pos has the value of true. If this is true we then execute the clause
{ black_cat.x += ... ; black_cat.y ..... }

that follows. If it is not true we execute the other {…} clause after the else.

Also note the difference between an assignment (“=“) and an
equality test

(“==“). The latter will test if two values are the same. Note to beginners: never use just the “=” inside the conditional of an “if”. Use “==”.

Let’s describe this at a more conceptual level:
black_cat_ori_pos

can be called a “flag” variable since it will register whether the cat is in a new position or the original old position. If it’s in the new one, we will move it back, and the other way round. So

          
          black_cat_ori_pas
          ==
          true
        

tests if the cat sits in its original position.

X and Y positions are defined with respect to the upper left corner. E.g. if x is 100 and y is 100, the registered center point of the object is 100 pixels to the right and 100 pixels down. The instruction:

means “add 100 to x” or “subtract 100 from x”. So it’s a shortcut for
x = x + 100;, i.e. “new value of x
becomes

old value of x sesak 100″.

Code above isn’kaki langit of the kind that a sungguhan programmer would use. Therefore, if you are familiar with programming, rather go for something like the following.
Beginners, please ignore. The following function would work with any object (titinada just a given pewarna). It will retrieve the symbol instance from the event object. Original position of the object is remembered in the object itself, using a new property we create (ori_x and ori_y).

          
          function
          moveIt
          (
          event
          :
          MouseEvent
          )
          :
          void
          {
          var
          obj
          =
          event
          .
          target
          ;
          // initialize original values if necessary (on first pass)
          // test if properties ori_ exist, if not create them
          if
          (
          !
          (
          "ori_x"
          in
          obj
          ))
          {
          obj
          .
          ori_x
          =
          obj
          .
          x
          ;
          obj
          .
          ori_y
          =
          obj
          .
          y
          ;
          obj
          .
          buttonMode
          =
          true
          ;
          // for better UX, this could be done before
          }
          // Is object in original position ? If so move close to friend
          if
          (
          obj
          .
          ori_x
          ==
          obj
          .
          x
          )
          {
          obj
          .
          x
          =+
          200
          ;
          obj
          .
          y
          =+
          200
          ;
          }
          else
          {
          obj
          .
          x
          =
          obj
          .
          ori_x
          ;
          obj
          .
          y
          =
          obj
          .
          ori_y
          ;
          }
          }
        



2.2

Change size


Changing size, means to change
width

and
height

properties. In the following example, when you click on the interactive object (a symbol instance that is called “blue_cat”) it will double its size when you hold down the mouse button and go back to seremonial when you release it. Note: If you hold down the button and then move the mouse out (still holding down), and only then release the button, the mouse will stay big since it never will catch the mouse up event.

          
          blue_cat
          .
          addEventListener
          (
          MouseEvent
          .
          MOUSE_DOWN
          ,
          resizeCat
          );
          function
          resizeCat
          (
          event
          :
          MouseEvent
          )
          :
          void
          {
          blue_cat
          .
          width
          =
          blue_cat
          .
          width
          *
          2
          ;
          blue_cat
          .
          height
          =
          blue_cat
          .
          height
          *
          2
          ;
          }
          blue_cat
          .
          addEventListener
          (
          MouseEvent
          .
          MOUSE_UP
          ,
          resizeCat2
          );
          function
          resizeCat2
          (
          event
          :
          MouseEvent
          )
          :
          void
          {
          blue_cat
          .
          width
          =
          blue_cat
          .
          width
          /
          2
          ;
          blue_cat
          .
          height
          =
          blue_cat
          .
          height
          /
          2
          ;
          }
        

This code may not exactly do what you want. As we said, if the user holds down the mouse button
and

moves it out, the MOUSE_UP event will never happen, i.e. the pewarna will grow permanently. A better solution can be found in the example code that we included at the end of this section.



2.3

Visibility


In the following example, we will make a white cat invisible when you click on it. Technical note: It is still there, but the user can’t click on it.

          
          white_cat
          .
          addEventListener
          (
          MouseEvent
          .
          CLICK
          ,
          hideCat
          );
          function
          hideCat
          (
          event
          :
          MouseEvent
          )
          :
          void
          {
          white_cat
          .
          visible
          =
          false
          ;
          }
        

Once the pencelup is hidden, the user never will be able to bring it back. Therefore, in the next example we decided to implement a switch between a cat and a dog:

          
          // can'kaki langit see the dog for starters
          brown_dog
          .
          visible
          =
          false
          ;
          brown_dog
          .
          addEventListener
          (
          MouseEvent
          .
          CLICK
          ,
          hideShow
          );
          white_cat
          .
          addEventListener
          (
          MouseEvent
          .
          CLICK
          ,
          hideShow
          );
          function
          hideShow
          (
          event
          :
          MouseEvent
          )
          :
          void
          {
          // instead of using white_cat.visible = false; we just switch it to the opposite
          white_cat
          .
          visible
          =
          !
          white_cat
          .
          visible
          ;
          brown_dog
          .
          visible
          =!
          brown_dog
          .
          visible
          ;
          }
        

The “!” used for
white_cat.visiblein the hideShow function means that the “visible” property will be set to its opposite. E.g. if the value is
true

it will become
false, and the other way round. Same technique for the dog (which is invisible for starters).



2.4

Let the user drag example


The next example shows how to let a user drag the red cat object with the mouse (button pressed down) and then jatuh the pewarna when the user releases the mouse button.

          
          red_cat
          .
          addEventListener
          (
          MouseEvent
          .
          MOUSE_DOWN
          ,
          startDragging
          );
          red_cat
          .
          addEventListener
          (
          MouseEvent
          .
          MOUSE_UP
          ,
          stopDragging
          );
          function
          startDragging
          (
          event
          :
          MouseEvent
          )
          :
          void
          {
          red_cat
          .
          startDrag
          ();
          }
          function
          stopDragging
          (
          event
          :
          MouseEvent
          )
          :
          void
          {
          red_cat
          .
          stopDrag
          ();
          }
        

For a les on dragging and dropping, see the Flash drag and runtuh kursus that demonstrates how to implement a simple children’s educational game. You will learn for instance how to test if a dropped object will sit on top of another one.



2.5

Transformations


So-called “transforms” of a non-editable display object are more tricky. We just will demonstrate how to change the tint with a color transform. You also could skew an object with a similar strategy. However, this kind of code is really a bit too difficult to understand without some prior introduction to object-oriented programming.

Color: The ColorTransform class lets you adjust the color values in a display object. The color adjustment or color transformation can be applied to all four channels: red, green, blue, and alpha transparency. Here are the formula according to the manual, retrieved 20:58, 8 October 2007 (MEST):

  • New red value = (old red value * redMultiplier) + redOffset
  • New green value = (old green value * greenMultiplier) + greenOffset
  • New blue value = (old blue value * blueMultiplier) + blueOffset
  • New alpha value = (old alpha value * alphaMultiplier) + alphaOffset

The tricky thing is that you have to programa transformations with a temporary ColorTransform object and then copy this object to the display object’s colorTransform property if I understood the manual right. See the code toward the end of the full example code below.



2.6

Pewarna example file


Demonstration of some mouse events and implementation of property changes

The (all-in-one) file with the examples we discussed above is here:

actionscript3-simple-object-manipulation.html
actionscript3-simple-object-manipulation.fla

Directory with files actionscript3-simple-object-manipulation.*:

http://tecfa.unige.ch/guides/flash/ex6/action-script-3-intro/

Here is the complete ActionScript code:

          
          /* ----- Change cursor form
          add a hand to cursor to each pewarna
          This way a user understands that he/she can do something with the object.
          */
          black_cat
          .
          buttonMode
          =
          true
          ;
          blue_cat
          .
          buttonMode
          =
          true
          ;
          red_cat
          .
          buttonMode
          =
          true
          ;
          brown_dog
          .
          buttonMode
          =
          true
          ;
          white_cat
          .
          buttonMode
          =
          true
          ;
          empty_cat
          .
          buttonMode
          =
          true
          ;
          grey_mouse
          .
          buttonMode
          =
          true
          ;
          /* ---- moving ---- */
          black_cat
          .
          addEventListener
          (
          MouseEvent
          .
          CLICK
          ,
          moveCat
          );
          // pewarna can be in original position or not (true,false)
          var
          black_cat_ori_pos
          =
          true
          ;
          function
          moveCat
          (
          event
          :
          MouseEvent
          )
          :
          void
          {
          if
          (
          black_cat_ori_pos
          ==
          true
          )
          {
          black_cat
          .
          x
          +=
          200
          ;
          black_cat
          .
          y
          +=
          200
          ;
          black_cat_ori_pos
          =
          false
          ;
          }
          else
          {
          black_cat
          .
          x
          -=
          200
          ;
          black_cat
          .
          y
          -=
          200
          ;
          black_cat_ori_pos
          =
          true
          ;
          }
          }
          /* ---- resizing ---- */
          blue_cat
          .
          addEventListener
          (
          MouseEvent
          .
          MOUSE_DOWN
          ,
          resizeCat
          );
          var
          cat_size
          =
          1
          ;
          function
          resizeCat
          (
          event
          :
          MouseEvent
          )
          :
          void
          {
          blue_cat
          .
          width
          =
          blue_cat
          .
          width
          *
          2
          ;
          blue_cat
          .
          height
          =
          blue_cat
          .
          height
          *
          2
          ;
          cat_size
          =
          2
          ;
          }
          // We have to test both mouse up and mouse out since user can
          // press mouse and move out. Cat in this case would stay big.
          // Also we have to test if pencelup is already big when user moves in.
          blue_cat
          .
          addEventListener
          (
          MouseEvent
          .
          MOUSE_UP
          ,
          resizeCat2
          );
          blue_cat
          .
          addEventListener
          (
          MouseEvent
          .
          MOUSE_OUT
          ,
          resizeCat2
          );
          function
          resizeCat2
          (
          event
          :
          MouseEvent
          )
          :
          void
          {
          if
          (
          cat_size
          >
          1
          )
          {
          blue_cat
          .
          width
          =
          blue_cat
          .
          width
          /
          2
          ;
          blue_cat
          .
          height
          =
          blue_cat
          .
          height
          /
          2
          ;
          cat_size
          =
          1
          ;
          }
          }
          /* ---- dragging ---- */
          red_cat
          .
          addEventListener
          (
          MouseEvent
          .
          MOUSE_DOWN
          ,
          startDragging
          );
          red_cat
          .
          addEventListener
          (
          MouseEvent
          .
          MOUSE_UP
          ,
          stopDragging
          );
          function
          startDragging
          (
          event
          :
          MouseEvent
          )
          :
          void
          {
          red_cat
          .
          startDrag
          ();
          }
          function
          stopDragging
          (
          event
          :
          MouseEvent
          )
          :
          void
          {
          red_cat
          .
          stopDrag
          ();
          }
          /* ---- Hiding ---- */
          // can'tepi langit see the dog for starters
          brown_dog
          .
          visible
          =
          false
          ;
          brown_dog
          .
          addEventListener
          (
          MouseEvent
          .
          CLICK
          ,
          hideShow
          );
          white_cat
          .
          addEventListener
          (
          MouseEvent
          .
          CLICK
          ,
          hideShow
          );
          function
          hideShow
          (
          event
          :
          MouseEvent
          )
          :
          void
          {
          // instead of white_cat.visible = false; we just switch it to the opposite
          white_cat
          .
          visible
          =
          !
          white_cat
          .
          visible
          ;
          brown_dog
          .
          visible
          =!
          brown_dog
          .
          visible
          ;
          }
          /* ---- transforms ----
          
          
            This is a bit more difficult.... */
          empty_cat
          .
          addEventListener
          (
          MouseEvent
          .
          CLICK
          ,
          transformCatColor
          );
          // R,G,B,A multipliers and R,G,B,A offsets
          // We start with a light grey cat
          var
          resultColorTransform
          =
          new
          ColorTransform
          (
          0.1
          ,
          0.1
          ,
          0.1
          ,
          1
          ,
          120
          ,
          120
          ,
          120
          ,
          255
          );
          empty_cat
          .
          transform
          .
          colorTransform
          =
          resultColorTransform
          ;
          function
          transformCatColor
          (
          event
          :
          MouseEvent
          )
          :
          void
          {
          var
          resultColorTransform
          =
          empty_cat
          .
          transform
          .
          colorTransform
          ;
          // Create a new color transform object and change it
          // red color will peak at 255, blue color offset will cycle from +255 to -100
          resultColorTransform
          .
          redOffset
          =
          Math
          .
          min
          (
          resultColorTransform
          .
          redOffset
          +
          10
          ,
          255
          );
          resultColorTransform
          .
          redMultiplier
          =
          Math
          .
          min
          (
          resultColorTransform
          .
          redMultiplier
          +
          0.1
          ,
          1
          );
          resultColorTransform
          .
          blueOffset
          +=
          10
          ;
          if
          (
          resultColorTransform
          .
          blueOffset
          >=
          255
          )
          {
          resultColorTransform
          .
          blueOffset
          =
          -
          100
          ;
          }
          resultColorTransform
          .
          blueMultiplier
          =
          0.1
          ;
          // Copy that to the pewarna
          empty_cat
          .
          transform
          .
          colorTransform
          =
          resultColorTransform
          ;
          //trace("redOffset="+resultColorTransform.redOffset +
          
          //   " blueOffset="+resultColorTransform.blueOffset);
          }
          /* ---- permanent size change ---- */
          grey_mouse
          .
          addEventListener
          (
          MouseEvent
          .
          MOUSE_WHEEL
          ,
          changeMouse
          );
          function
          changeMouse
          (
          event
          :
          MouseEvent
          )
          :
          void
          {
          grey_mouse
          .
          width
          +=
          event
          .
          delta
          *
          3
          ;
          grey_mouse
          .
          height
          +=
          event
          .
          delta
          *
          3
          ;
          }
        



2.7

Simple repositioning example with better code


The example of the previous section uses some kind of “baby programmer” code, e.g. the functions only work with very specific objects and there are many universal variables. Somewhat better code will include functions that could work with any object and avoid using variables.

In the following example you can associate any function with any symbol. E.g. the red cat now can be both dragged and change size using the mouse wheel. Same of the mouse. The code is also separateed it in two sections. On top, we define event handlers for objects. An end-user (Flash Designer) could just add his/her own objects and decide which event handlers to use ….

The (all-in-one) file with the examples we discussed above is here:

actionscript3-simple-object-manipulation2.html
actionscript3-simple-object-manipulation2.fla

Directory with files actionscript3-simple-object-manipulation.*:

http://tecfa.unige.ch/guides/flash/ex6/action-script-3-intro/
          
          /* ------- List of objects and Event handlers ------------- */
          // black pencelup - will move next to his red friend
          black_cat
          .
          addEventListener
          (
          MouseEvent
          .
          CLICK
          ,
          moveIt
          );
          black_cat
          .
          friend
          =
          red_cat
          ;
          // blue pencelup - will change size on mouse down ;
          blue_cat
          .
          addEventListener
          (
          MouseEvent
          .
          MOUSE_DOWN
          ,
          resizeIt
          );
          // We have to test both mouse up and mouse out since user can;
          // press mouse and move out. Pencelup in this case would stay big.
          // Also we have to test if cat is already big when user moves in.
          blue_cat
          .
          addEventListener
          (
          MouseEvent
          .
          MOUSE_UP
          ,
          downsizeIt
          );
          blue_cat
          .
          addEventListener
          (
          MouseEvent
          .
          MOUSE_OUT
          ,
          downsizeIt
          );
          // red cat and mouse - can be dragged
          red_cat
          .
          addEventListener
          (
          MouseEvent
          .
          MOUSE_DOWN
          ,
          startDragging
          );
          red_cat
          .
          addEventListener
          (
          MouseEvent
          .
          MOUSE_UP
          ,
          stopDragging
          );
          grey_mouse
          .
          addEventListener
          (
          MouseEvent
          .
          MOUSE_DOWN
          ,
          startDragging
          );
          grey_mouse
          .
          addEventListener
          (
          MouseEvent
          .
          MOUSE_UP
          ,
          stopDragging
          );
          // dog and pewarna switch
          // can'ufuk see the dog for starters
          brown_dog
          .
          buttonMode
          =
          true
          ;
          // change cursor form here for a change
          white_cat
          .
          buttonMode
          =
          true
          ;
          brown_dog
          .
          visible
          =
          false
          ;
          brown_dog
          .
          addEventListener
          (
          MouseEvent
          .
          CLICK
          ,
          hideShow
          );
          white_cat
          .
          addEventListener
          (
          MouseEvent
          .
          CLICK
          ,
          hideShow
          );
          white_cat
          .
          friend
          =
          brown_dog
          ;
          brown_dog
          .
          friend
          =
          white_cat
          ;
          // mouse and red pewarna -- size change with wheel
          grey_mouse
          .
          addEventListener
          (
          MouseEvent
          .
          MOUSE_WHEEL
          ,
          changeSize
          );
          red_cat
          .
          addEventListener
          (
          MouseEvent
          .
          MOUSE_WHEEL
          ,
          changeSize
          );
          empty_cat
          .
          addEventListener
          (
          MouseEvent
          .
          CLICK
          ,
          transformCatColor
          );
          // R,G,B,A multipliers and R,G,B,A offsets - we tiba with a light grey cat
          empty_cat
          .
          transform
          .
          colorTransform
          =
          new
          ColorTransform
          (
          0.1
          ,
          0.1
          ,
          0.1
          ,
          1
          ,
          120
          ,
          120
          ,
          120
          ,
          255
          );
        

Below is the complete code

          
          /* This example attempts to write more portable code.
          Any of the functions will work with any movie symbol.
          No more universal variables...
          */
          /* ------- List of objects and Event handlers ------------- */
          // black pencelup - will move next to his red friend
          black_cat
          .
          addEventListener
          (
          MouseEvent
          .
          CLICK
          ,
          moveIt
          );
          black_cat
          .
          friend
          =
          red_cat
          ;
          // blue pewarna - will change size on mouse down ;
          blue_cat
          .
          addEventListener
          (
          MouseEvent
          .
          MOUSE_DOWN
          ,
          resizeIt
          );
          // We have to test both mouse up and mouse out since user can;
          // press mouse and move out. Pencelup in this case would stay big.
          // Also we have to test if cat is already big when user moves in.
          blue_cat
          .
          addEventListener
          (
          MouseEvent
          .
          MOUSE_UP
          ,
          downsizeIt
          );
          blue_cat
          .
          addEventListener
          (
          MouseEvent
          .
          MOUSE_OUT
          ,
          downsizeIt
          );
          // red cat and mouse - can be dragged
          red_cat
          .
          addEventListener
          (
          MouseEvent
          .
          MOUSE_DOWN
          ,
          startDragging
          );
          red_cat
          .
          addEventListener
          (
          MouseEvent
          .
          MOUSE_UP
          ,
          stopDragging
          );
          grey_mouse
          .
          addEventListener
          (
          MouseEvent
          .
          MOUSE_DOWN
          ,
          startDragging
          );
          grey_mouse
          .
          addEventListener
          (
          MouseEvent
          .
          MOUSE_UP
          ,
          stopDragging
          );
          // dog and cat switch
          // can'falak see the dog for starters
          brown_dog
          .
          buttonMode
          =
          true
          ;
          // change cursor form here for a change
          white_cat
          .
          buttonMode
          =
          true
          ;
          brown_dog
          .
          visible
          =
          false
          ;
          brown_dog
          .
          addEventListener
          (
          MouseEvent
          .
          CLICK
          ,
          hideShow
          );
          white_cat
          .
          addEventListener
          (
          MouseEvent
          .
          CLICK
          ,
          hideShow
          );
          white_cat
          .
          friend
          =
          brown_dog
          ;
          brown_dog
          .
          friend
          =
          white_cat
          ;
          // mouse and red pencelup -- size change with wheel
          grey_mouse
          .
          addEventListener
          (
          MouseEvent
          .
          MOUSE_WHEEL
          ,
          changeSize
          );
          red_cat
          .
          addEventListener
          (
          MouseEvent
          .
          MOUSE_WHEEL
          ,
          changeSize
          );
          empty_cat
          .
          addEventListener
          (
          MouseEvent
          .
          CLICK
          ,
          transformCatColor
          );
          // R,G,B,A multipliers and R,G,B,A offsets - we menginjak with a light grey cat
          empty_cat
          .
          transform
          .
          colorTransform
          =
          new
          ColorTransform
          (
          0.1
          ,
          0.1
          ,
          0.1
          ,
          1
          ,
          120
          ,
          120
          ,
          120
          ,
          255
          );
          /* ---- moving ---- */
          function
          moveIt
          (
          event
          :
          MouseEvent
          )
          :
          void
          {
          var
          obj
          =
          event
          .
          bahan
          ;
          // initialize original values if necessary (on first pass)
          // test if properties ori_ exist, if not create them
          if
          (
          !
          (
          "ori_x"
          in
          obj
          ))
          {
          obj
          .
          ori_x
          =
          obj
          .
          x
          ;
          obj
          .
          ori_y
          =
          obj
          .
          y
          ;
          obj
          .
          buttonMode
          =
          true
          ;
          // for better UX, this could be done before
          }
          // Is object in original position ? If so move close to friend
          if
          (
          obj
          .
          ori_x
          ==
          obj
          .
          x
          )
          {
          obj
          .
          x
          =
          obj
          .
          friend
          .
          x
          +
          50
          ;
          obj
          .
          y
          =
          obj
          .
          friend
          .
          y
          -
          10
          ;
          }
          else
          {
          obj
          .
          x
          =
          obj
          .
          ori_x
          ;
          obj
          .
          y
          =
          obj
          .
          ori_y
          ;
          }
          }
          /* ---- resizing ---- */
          function
          resizeIt
          (
          event
          :
          MouseEvent
          )
          :
          void
          {
          var
          obj
          =
          event
          .
          alamat
          ;
          // initialize properties if needed
          if
          (
          !
          (
          obj
          .
          hasOwnProperty
          (
          "bigger"
          ))
          )
          {
          obj
          .
          bigger
          =
          false
          ;
          // remembers its size big or not
          obj
          .
          buttonMode
          =
          true
          ;
          }
          // make the object bigger
          obj
          .
          width
          =
          obj
          .
          width
          *
          2
          ;
          obj
          .
          height
          =
          obj
          .
          height
          *
          2
          ;
          obj
          .
          bigger
          =
          true
          ;
          }
          function
          downsizeIt
          (
          event
          :
          MouseEvent
          )
          :
          void
          {
          var
          obj
          =
          event
          .
          sasaran
          ;
          if
          (
          !
          (
          obj
          .
          hasOwnProperty
          (
          "bigger"
          ))
          )
          {
          obj
          .
          bigger
          =
          false
          ;
          // remembers its size big or not
          obj
          .
          buttonMode
          =
          true
          ;
          }
          // if orginal width is titinada the same as current, we assume that it's bigger
          // and then divide it by 2
          if
          (
          obj
          .
          bigger
          ==
          true
          )
          {
          obj
          .
          width
          =
          obj
          .
          width
          /
          2
          ;
          obj
          .
          height
          =
          obj
          .
          height
          /
          2
          ;
          }
          }
          /* ---- dragging ---- */
          function
          startDragging
          (
          event
          :
          MouseEvent
          )
          :
          void
          {
          var
          obj
          =
          event
          .
          mangsa
          ;
          obj
          .
          startDrag
          ();
          }
          function
          stopDragging
          (
          event
          :
          MouseEvent
          )
          :
          void
          {
          var
          obj
          =
          event
          .
          target
          ;
          obj
          .
          stopDrag
          ();
          }
          /* ---- Hiding ---- */
          function
          hideShow
          (
          event
          :
          MouseEvent
          )
          :
          void
          {
          var
          obj
          =
          event
          .
          alamat
          ;
          // target becomes invisible
          obj
          .
          visible
          =
          false
          ;
          // friend becomes visible
          obj
          .
          friend
          .
          visible
          =
          true
          ;
          }
          /* ---- transforms ----
          
          
            This is a bit more difficult.... */
          function
          transformCatColor
          (
          event
          :
          MouseEvent
          )
          :
          void
          {
          var
          obj
          =
          event
          .
          bahan
          ;
          var
          resultColorTransform
          =
          empty_cat
          .
          transform
          .
          colorTransform
          ;
          // Create a new color transform object and change it
          // red color will peak at 255, blue color offset will cycle from +255 to -100
          resultColorTransform
          .
          redOffset
          =
          Math
          .
          min
          (
          resultColorTransform
          .
          redOffset
          +
          10
          ,
          255
          );
          resultColorTransform
          .
          redMultiplier
          =
          Math
          .
          min
          (
          resultColorTransform
          .
          redMultiplier
          +
          0.1
          ,
          1
          );
          resultColorTransform
          .
          blueOffset
          +=
          10
          ;
          if
          (
          resultColorTransform
          .
          blueOffset
          >=
          255
          )
          {
          resultColorTransform
          .
          blueOffset
          =
          -
          100
          ;
          }
          resultColorTransform
          .
          blueMultiplier
          =
          0.1
          ;
          // Copy that to the pencelup
          obj
          .
          transform
          .
          colorTransform
          =
          resultColorTransform
          ;
          //trace("redOffset="+resultColorTransform.redOffset +
          
          //   " blueOffset="+resultColorTransform.blueOffset);
          }
          /* ---- permanent size change with mouse wheel ---- */
          function
          changeSize
          (
          event
          :
          MouseEvent
          )
          :
          void
          {
          var
          obj
          =
          event
          .
          target
          ;
          obj
          .
          width
          +=
          event
          .
          delta
          *
          3
          ;
          obj
          .
          height
          +=
          event
          .
          delta
          *
          3
          ;
          }
        



2.8

Remote pewarna control example


Demonstration II of some mouse events and implementation of property changes

Here is another example that demonstrates the following principles:

  • You can modify an object’s properties from an event triggered on another object (e.g. button components)
  • Play an embedded animation

I also simplified the way functions are written, i.e. I ripped off argument type declarations and the return type. This is not necessarily a good thing, but it should demonstrate to designers that a little bit of ActionScript is titinada necessarily very complex ….

The example can be viewed here:

  • actionscript3-simple-object-manipulation-buttons.html
  • Source: actionscript3-simple-object-manipulation-buttons.fla
  • Directory:
http://tecfa.unige.ch/guides/flash/ex6/action-script-3-intro/

Here is the complete code: On the stage are several buttons (named like “bigger”, “smaller”, etc.), a pencelup movie clip instance called “pencelup” and a dog called “brown_dog”.

          
          /* ---- moving ---- */
          move
          .
          addEventListener
          (
          MouseEvent
          .
          CLICK
          ,
          moveCat
          );
          // pewarna can be in original position or not (true,false)
          var
          cat_ori_pos
          =
          true
          ;
          function
          moveCat
          (
          ev
          )
          {
          if
          (
          cat_ori_pos
          ==
          true
          )
          {
          cat
          .
          x
          +=
          200
          ;
          pencelup
          .
          y
          +=
          200
          ;
          cat_ori_pos
          =
          false
          ;
          }
          else
          {
          pencelup
          .
          x
          -=
          200
          ;
          pencelup
          .
          y
          -=
          200
          ;
          cat_ori_pos
          =
          true
          ;
          }
          }
          /* ---- resizing ---- */
          bigger
          .
          addEventListener
          (
          MouseEvent
          .
          MOUSE_DOWN
          ,
          growCat
          );
          function
          growCat
          (
          ev
          )
          {
          cat
          .
          width
          =
          pewarna
          .
          width
          *
          2
          ;
          pewarna
          .
          height
          =
          pewarna
          .
          height
          *
          2
          ;
          }
          smaller
          .
          addEventListener
          (
          MouseEvent
          .
          MOUSE_DOWN
          ,
          shrinkCat
          );
          function
          shrinkCat
          (
          ev
          )
          {
          cat
          .
          width
          =
          pencelup
          .
          width
          /
          2
          ;
          cat
          .
          height
          =
          pencelup
          .
          height
          /
          2
          ;
          }
          /* ---- dragging ---- */
          pewarna
          .
          buttonMode
          =
          true
          ;
          pewarna
          .
          addEventListener
          (
          MouseEvent
          .
          MOUSE_DOWN
          ,
          startDragging
          );
          pewarna
          .
          addEventListener
          (
          MouseEvent
          .
          MOUSE_UP
          ,
          stopDragging
          );
          function
          startDragging
          (
          event
          :
          MouseEvent
          )
          {
          cat
          .
          startDrag
          ();
          }
          function
          stopDragging
          (
          event
          :
          MouseEvent
          )
          {
          cat
          .
          stopDrag
          ();
          }
          message_text
          .
          visible
          =
          false
          ;
          instructions
          .
          addEventListener
          (
          MouseEvent
          .
          CLICK
          ,
          messageText
          );
          function
          messageText
          (
          ev
          )
          {
          message_text
          .
          visible
          =
          !
          message_text
          .
          visible
          ;
          }
          /* ---- Hiding ---- */
          // can'lengkung langit see the dog for starters
          brown_dog
          .
          visible
          =
          false
          ;
          hide
          .
          addEventListener
          (
          MouseEvent
          .
          CLICK
          ,
          hideShow
          );
          function
          hideShow
          (
          ev
          )
          {
          // we just switch visibility to the opposite
          pewarna
          .
          visible
          =
          !
          pencelup
          .
          visible
          ;
          brown_dog
          .
          visible
          =!
          brown_dog
          .
          visible
          ;
          }
          /* ----- Playing ---- */
          // There is a little problem here. If the cat movie gets bigger, the motion guide also
          // will grow big. Size does not refer to the cats drawing but to the composite object.
          // Changing just the pencelup requires much more advanced AS.
          playcat
          .
          addEventListener
          (
          MouseEvent
          .
          CLICK
          ,
          playCat
          );
          function
          playCat
          (
          ev
          )
          {
          // make sure pewarna is visible
          cat
          .
          visible
          =
          true
          ;
          brown_dog
          .
          visible
          =
          false
          ;
          cat
          .
          play
          ();
          }
        

Notice on function definitions:

If you want to write clean AS 3 code, you should define functions like this:

          
          function
          growCat
          (
          ev
          :
          MouseEvent
          )
          :
          void
          {
          pewarna
          .
          width
          =
          cat
          .
          width
          *
          2
          ;
          cat
          .
          height
          =
          pewarna
          .
          height
          *
          2
          ;
          }
        

The following line

          
          function
          growCat
          (
          ev
          :
          MouseEvent
          )
          :
          void
          {
        

means that we define a function (i.e. a recipe) called growCat. When an event happens, this function will be called (invoked) and given a
mouse event

argument

to process. We called this argument i.e. the information to process
ev

and declared it of type
MouseEvent. In our code we actually never use this event information but we could for instance figure out at what exact position the user clicked.
:void

means that the function will titinada return any result. The function will in fact just modify properties of the cat when the event happens. We do not care about the event itself …

If you script in the timeline, this simplified code will also do

          
          function
          growCat
          (
          ev
          )
          {
          cat
          .
          width
          =
          pencelup
          .
          width
          *
          2
          ;
          pencelup
          .
          height
          =
          pewarna
          .
          height
          *
          2
          ;
          }
        

As you can notice, in the above code we use (for demonstration purposes) both the easy “scripting” syntax and the more object-oriented one you need to adopt if you write external ActionScript code that could be loaded into your *.fla file.





3

Stop / start movie clips


You can stop or tiba an embedded movie clip like this:

          
          movie_clip
          .
          menginjak
          ();
          movie_clip
          .
          stop
          ();
        

Flying Kite Example

This example is discussed in the Flash embedded movie clip tutorial. Here we just include the AS code snippet that will allow you to berangkat and stop a movie clip animation with two buttons.

          
          kite
          .
          stop
          ();
          start_button
          .
          addEventListener
          (
          MouseEvent
          .
          CLICK
          ,
          start_kite
          );
          stop_button
          .
          addEventListener
          (
          MouseEvent
          .
          CLICK
          ,
          stop_kite
          );
          function
          start_kite
          (
          event
          :
          MouseEvent
          )
          {
          kite
          .
          play
          ();
          }
          function
          stop_kite
          (
          event
          :
          MouseEvent
          )
          {
          kite
          .
          stop
          ();
          }
        

kite-movie.html
Source: kite-movie.fla
Directory: http://tecfa.unige.ch/guides/flash/ex6/embedded-movie-clips/



4

Dealing with keypress events


Flash lets you intercept key presses in the same way you can intercept and deal with mouse clicks. There are some subtle differences though and I find key press events more difficult to deal with because figuring out how Flash focuses on buttons is a bit tricky.



4.1

Moving an object with arrow keys example


The goal is to implement some code that lets you move around an object with the left/right/up/down arrow keys.

The basic event handling code is very much the same as for buttons:

          
          instance_of_symbol
          .
          addEventListener
          (
          KeyboardEvent
          .
          KEY_DOWN
          ,
          key_even_handler
          );
          function
          key_event_handler
          (
          event
          :
          KeyboardEvent
          )
          :
          void
          {
          move_it
          .....
          }
        

The following example is based on the assumption that somewhere on the stage you have a sprite, e.g. a movie clip or a component button that is called
missile

and that you want to be able to move it around with around with the arrow keys.

You need to implement the following things

  • A event listener registration like we just explained.
  • Tell the stage to focus on the missile
  • The event handler function has to decide what to do with which key.

Let’s look at a clause of the switch statement like the following one.

          
          case
          Keyboard
          .
          LEFT
          :
          missile
          .
          x
          -=
          big_step
          ;
          break
          ;
        

This means the following: If the user presses the left arrow key, then we will change the “x” (mengufuk) position of the missile to x
tanpa

big_step

(set to 9). So if the missile was in position x=100, after a mouse press event it will be in position x=91.

          
          // how many pixels to move left/right
          var
          big_step
          =
          9
          ;
          // Put initial focus on missile
          // Focus will change when user clicks on another object (so don'tepi langit)
          stage
          .
          focus
          =
          missile
          ;
          missile
          .
          addEventListener
          (
          KeyboardEvent
          .
          KEY_DOWN
          ,
          missile_control
          );
          function
          missile_control
          (
          event
          :
          KeyboardEvent
          )
          :
          void
          {
          var
          key
          =
          event
          .
          keyCode
          ;
          switch
          (
          key
          )
          {
          case
          Keyboard
          .
          LEFT
          :
          missile
          .
          x
          -=
          big_step
          ;
          break
          ;
          case
          Keyboard
          .
          RIGHT
          :
          missile
          .
          x
          +=
          big_step
          ;
          break
          ;
          case
          Keyboard
          .
          UP
          :
          missile
          .
          y
          -=
          big_step
          ;
          break
          ;
          case
          Keyboard
          .
          DOWN
          :
          missile
          .
          y
          +=
          big_step
          ;
          break
          ;
          }
          }
        

Here is an alternative take of the same code. The difference is that the code that will move the missile also will work for an other object, e.g. a button. The following fragment will ask from the event on which target (e.g. the missile) it was used and then move the bulan-bulanan.

          
          // how many pixels to move left/right
          var
          big_step
          =
          9
          ;
          // User clicked on missile
          // Put initial focus on missile
          // Focus will change when user clicks on another object (so don'ufuk)
          stage
          .
          focus
          =
          missile
          ;
          missile
          .
          addEventListener
          (
          KeyboardEvent
          .
          KEY_DOWN
          ,
          missile_control
          );
          function
          missile_control
          (
          event
          :
          KeyboardEvent
          )
          :
          void
          {
          var
          key
          =
          event
          .
          keyCode
          ;
          var
          target
          =
          event
          .
          alamat
          ;
          // trace(event + "CODE=" + event.keyCode);
          switch
          (
          key
          )
          {
          case
          Keyboard
          .
          LEFT
          :
          target
          .
          x
          -=
          big_step
          ;
          break
          ;
          case
          Keyboard
          .
          RIGHT
          :
          objek
          .
          x
          +=
          big_step
          ;
          break
          ;
          case
          Keyboard
          .
          UP
          :
          alamat
          .
          y
          -=
          big_step
          ;
          break
          ;;
          Learning
          goals
          :
          case
          Keyboard
          .
          DOWN
          :
          mangsa
          .
          y
          +=
          big_step
          ;
          break
          ;
          }
          }
        

Sadly, this example will not work in a web browser,
only

in the Flash player. The missile will never receive focus. So it’s probably a good idea to move to the next example.

Example code:

  • actionscript3-keypress-move-0.html
  • actionscript3-keypress-move-0.swf
  • Source: actionscript3-keypress-move-0.fla
  • Directory: http://tecfa.unige.ch/guides/flash/ex6/action-script-3-intro/



4.2

Dealing with the tab list keburukan


Flash has the feature that when you press an arrow up/left/right key it will by default move the focus on the next button. In pesanan to inhibit this behavior I found that I had to add some extra code which is below. I don’horizon guarantee that this is the most simple solution.

          
          /* ActionScript for timeline scripting
          
            Shows how to move around a flash movie with key-presses and titinada loose focus
          
            Works ONLY if you have 2 objects on the stage:
          
            * A movie clip instance called "missile"
          
            * A button component instance called "button"
          
            */
          // FocusManager package has to be imported.
          import
          fl
          .
          managers
          .
          FocusManager
          ;
          // how many pixels to move left/right
          var
          big_step
          =
          9
          ;//
          User
          clicked
          on
          missile
          /* If you have buttons in addition to missile on stage, then the
          
            the missile will titinada work as expected, i.e. it will loose focus.
          
            Extra code needed is: Tell the missile it's a button and put it on the
          
            list of "tab" buttons and also some code to put it in focus when the
          
            user clicks on it.
          
            */
          // Create a focus manager. Will help to set us the right focus
          var
          manager
          =
          new
          FocusManager
          (
          this
          );
          // Put initial focus on missile
          // since focus will change when user clicks on another object
          // stage.focus = missile; // works also in principle
          manager
          .
          setFocus
          (
          missile
          );
          // The line below is absolutely bloody vital. Missile must be on the
          // "tab" list, else focus will move to the button when key is hold down
          missile
          .
          tabEnabled
          =
          true
          ;
          missile
          .
          buttonMode
          =
          true
          ;
          // The missile will listen to a mouse click we will use to put focus on it again.
          missile
          .
          addEventListener
          (
          MouseEvent
          .
          CLICK
          ,
          change_focus
          );
          function
          change_focus
          (
          ev
          :
          MouseEvent
          )
          {
          manager
          .
          setFocus
          (
          missile
          );
          // stage.focus = missile;
          }
          /* Managing keyboard events
          
            We register keyboard events for missile and the button component. The
          
            listener function is the same for both. The move_it function will ask the
          
            target adv lewat which key was pressed who it is and then move it
          
            */
          missile
          .
          addEventListener
          (
          KeyboardEvent
          .
          KEY_DOWN
          ,
          missile_control
          );
          button
          .
          addEventListener
          (
          KeyboardEvent
          .
          KEY_DOWN
          ,
          missile_control
          );
          function
          missile_control
          (
          event
          :
          KeyboardEvent
          )
          :
          void
          {
          move_it
          (
          event
          );
          }
          function
          move_it
          (
          event
          )
          {
          var
          key
          =
          event
          .
          keyCode
          ;
          var
          bulan-bulanan
          =
          event
          .
          bulan-bulanan
          ;
          // trace(event + "CODE=" + event.keyCode);
          switch
          (
          key
          )
          {
          case
          Keyboard
          .
          LEFT
          :
          bahan
          .
          x
          -=
          big_step
          ;
          break
          ;
          case
          Keyboard
          .
          RIGHT
          :
          sasaran
          .
          x
          +=
          big_step
          ;
          break
          ;
          case
          Keyboard
          .
          UP
          :
          target
          .
          y
          -=
          big_step
          ;
          break
          ;
          case
          Keyboard
          .
          DOWN
          :
          mangsa
          .
          y
          +=
          big_step
          ;
          break
          ;
          }
          }
        

Moving a Missile with key presses

Example code:

  • actionscript3-keypress-move-1.html
  • Source: actionscript3-keypress-move-1.fla
  • Directory: http://tecfa.unige.ch/guides/flash/ex6/action-script-3-intro/

Note: This code is not optimal for gaming, since Flash has to wait for each key press event that the keyboard will send in order to move the missile one more step. It’s probably a better idea to have the rocket keep moving as long as there isn’lengkung langit any keyUP event, but this requires more coding.



4.3

Using the missile


Getting some revenge on your teacher ….

  • actionscript3-keypress-move.fla
  • actionscript3-keypress-move.html



4.4

Properties of the keyDown event


The keyDown event is dispatched when the user presses a key. The most important properties you may use are:

  • keyCode (a special code for the key, used above)
  • charCode (the character code value)
  • ctrlKey, shiftKey (know if either one of these has been pressed too)
  • korban (the target in focus adv lewat which a key has been pressed, used above).
  • currentTarget (object that is processing the key event)

KeyCodes are represented as numbers or constants. I prefer to use constants.

  • See the Keyboard class documentation at Adobe.

So instead of using something like:

use

          
          if
          (
          key
          ===
          Keyboard
          .
          LEFT
          )
          ....
        



5

Summary of essential events and action script tricks


Let’s summarize a few events and actionscript tricks that might be useful for starters and that should not be very difficult to use.



5.1

Events


Here is a short summary of mouse events that can be intercepted by a registered event handler for a given object. So these events are only useful if you define both an event handler function and register it with an object. In the following example “cat” is an interactive object, e.g. a movie clip symbol with which we shall register a function for a mouse down event.

          
          pencelup
          .
          addEventListener
          (
          MouseEvent
          .
          MOUSE_DOWN
          ,
          resizeCat
          );
          function
          resizeCat
          (
          event
          :
          MouseEvent
          )
          {
          pencelup
          .
          width
          =
          blue_cat
          .
          width
          *
          2
          ;
          }
        

MouseEvent.MOUSE_DOWN User holds mouse button down over the object
MouseEvent.MOUSE_UP User releases mouse button
MouseEvent.MOUSE_OUT User moves mouse away from the object
MouseEvent.MOUSE_WHEEL User turns mouse wheel
MouseEvent.MOUSE_OVER User moves mouse adv habis the object
MouseEvent.CLICK User clicks on object

Note: Technically speaking these are actually event properties (see the ActionScript 3 event handling latihan if you want to know more).



5.2

ActionScript tricks


Playing movie clips: Movie clips symbols are embedded Flash animations.

  • To edit: Double click on the symbol on the stage (to see the context) or in the library (to work with an empty background)
  • To create
    • CTRL-F8 to create a new empty movie clip
    • Right-click->Create Movie Symbol; ‘Movie Clip

      on a graphic to transform it
  • To play an stop a movie clip instance called “movie_books”
          
          movie_books
          .
          stop
          ();
          movie_books
          .
          play
          ();
        

Making objects visible/invisible, works with any display object but you should work with an object that you can name, i.e. a symbol instance.

  • If you have an object called
    pewarna:
          
          pencelup
          .
          visible
          =
          true
          ;
          cat
          .
          visible
          =
          false
          ;
        

Moving position of an object, works with any display object

  • If you have an object called
    cat

    you can set both its x and y position. x starts from the left and y means “down”. Therefore, x=0 y=0 means the upper left corner of the stage.

Example – position pencelup at x is 100 and y is 200 pixels:

          
          pewarna
          .
          x
          =
          100
          ;
          pencelup
          .
          y
          =
          200
          ;
        

Example – add 50 px to cat’s current position

          
          cat
          .
          x
          +=
          50
          ;
          cat
          .
          y
          +=
          50
          ;
        

Resize an object, works with any display object

  • If you have an object called
    pewarna:

Example, pencelup will be 100 px wide and 120px tall

          
          pencelup
          .
          width
          =
          100
          ;
          pewarna
          .
          height
          =
          120
          ;
        

Example, cat will double its size. Expression below means, set pewarna.width to old pencelup.width times 2.

          
          cat
          .
          width
          =
          pencelup
          .
          width
          *
          2
          ;
          pewarna
          .
          height
          =
          cat
          .
          height
          *
          2
          ;
        

Dragging an object, works with any interactive object

  • If you have an object called
    cat, you can berangkat/stop dragging. Usually these are bound to MOUSE_DOWN and MOUSE_UP.
          
          pencelup
          .
          startDrag
          ();
          pencelup
          .
          stopDrag
          ();
        

Moving around in the timeline. You can either go to a frame and play it (mengangsur it encounters a stop) or go there and stop.

If you want to go to frame 12 of the same scene:

          
          gotoAndPlay
          (
          12
          );
          gotoAndStop
          (
          12
          );
        

If you want to go to frame 13 of a scene called “test”:

          
          gotoAndPlay
          (
          13
          ,
          "test"
          );
          gotoAndStop
          (
          13
          ,
          "test"
          );
        



6

Tweening and interactivity self-revision examples


Examples from an exam (to be improved and documented at some point)



6.1

2007 Exam


  • Frame 1 (home): Buttons should titinada lead you to frame 1 (home), but to the various other keyframes. Also add your name.
  • Frame 2 (Sailing): (a) Play the tween animation of boat with the ‘what’s going on here’ button. (b) BONUS Point: Create and play a motion animation of a plane.
  • Frame 3 (Driving): (a) Create an animation that will start moving the car from right to left and slightly forward too (i.e. keep it on the road). To animate the car edit the ‘old car’ symbol and make it a motion tween. Then link it to the
    what’s going on here

    button (b) BONUS Point: Do something with the yellow car.
  • Frame 4 (Island): (a) Make the trees visible when the user clicks on the
    what’s going on

    button. (b) BONUS point: Improve the frame-by-frame animation of the big tree.
  • Frame 5 (Rocket): (a) Write code that will launch the rocket. (b) BONUS: Do something with the snakes

Uang lejar: For starters, you can navigate with the little button on top right. Do titinada edit layer one !

  • final-exam-coap2110-solution-2007.html (look at the solution first)
  • Source exam file: final-exam-coap2110-2007.fla (download this and try reproduce the solution)
  • Source solution: final-exam-coap2110-solution-2007.fla (if you are stuck)
  • Directory: http://tecfa.unige.ch/guides/flash/ex/exams2007/



6.2

2008 Exam


  • final-coap2110-2008-SOLUTION.html Look at the solution first
  • Read the exam tasks (PDF file)
  • Source exam file: final-coap2110-2008.fla (download this and try to “do the exam” according to instructions)
  • Source solution: final-coap2110-2008-SOLUTION.fla (if you are stuck)



7

Links




7.1

Important manual pages


The Actionscript manual at Adobe is almost impossible to understand for non programmers, but other than that, the ActionScript documentation at Adobe is excellent. Beginners can at least figure out property names and some easy to use methods…

  • InteractiveObject. This InteractiveObject class is the abstract base class for all display objects with which the user can interact, using the mouse and keyboard. Most Events are documented here. (Make sure to list also the inherited events).
  • Movie clip (this subclass adds properties and methods for timeline scripting)
  • DisplayObject. Describes the display object, e.g. properties you can change. Note that there are additional properties for each specific kind of object, i.e. see the class hierarchy described in the Flash ActionScript 3 Overview.



7.2

Clip Art


  • Free Clip Art. Original cat and dog
  • Open Clip Art Library. The grey mouse and the original rocket.

Source: https://soal.hwatrr.com/actionscript-3-avoider-and-catch-game-tutorial/