SIM1 - Class 10 - 2011

Subject SIM1 - Interactive Media 1
Competencies

BSBINN502A.1 - Build and Sustain and Innovative Work Environment (part 1)
CUFDIG506A.1 - Design Interaction (part 1)

Course Title ADVANCED DIPLOMA of SCREEN AND MEDIA (CUF60107)
Teacher Lisa Cianci - email: lisa.cianci@vu.edu.au
Class Website: http://lisacianci.vucreativeindustries.com/2011/SIM1
                         (username & password = student)

Flash and ActionScript

Today we will be covering the following topics:

 

Today we will look at some simple ways to use ActionScript3 to make fun interactive elements which will be suitable for your interactive children's stories. Here is a sampler showing today's exercises:

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

 

MovieClips as 3-state buttons & triggering animations

You can use button symbols for interactivity - they are very easy to implement, but most serious Flash developers will use MovieClips as buttons. This requires more code to make them work, but you can reuse your functions, and customise the buttons to a greater extent. Today we will create a couple of examples.

Create 2 movieclips in your Flash Library - one with 2 keyframes in its timeline, and one with 3 keyframes in its timeline. Place a stop(); script on frame 1 of each movieclip. Drag an instance of each movieclip onto the stage. In the sampler, the 2-frame movieclip is the tree (instance name:tree1 ), and the 3-frame movieclip is the yellow square (instance name: buttonAnim). Make sure you give these instances Instance Names in the Properties panel. *Note which MouseEvents are used to jump to different frames in the movieclips.

A simple way to create interactivity suitable for children is by using ROLL_OVER / ROLL_OUT / MOUSE_DOWN / MOUSE_UP. This is achieved with the following code (placed on frame 1 of the main timeline):

     //------------------------
     //MOUSE EVENTS
     //------------------------
     //FRAME 1 CODE     
     //------------------------
     //BUTTONMODE -  for movieclip symbols as buttons - ***do not use this for button symbols!!!
     buttonAnim.buttonMode = true;
     tree1.buttonMode = true;
     //LISTENERS
     buttonAnim.addEventListener(MouseEvent.ROLL_OUT, mouseOutHandler);
buttonAnim.addEventListener(MouseEvent.ROLL_OVER, mouseOverHandler); buttonAnim.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler); tree1.addEventListener(MouseEvent.ROLL_OUT, mouseOutHandler);
tree1.addEventListener(MouseEvent.ROLL_OVER, mouseOverHandler); //FUNCTIONS function mouseOutHandler(e:MouseEvent):void{ e.target.gotoAndStop(1); }
function mouseOverHandler(e:MouseEvent):void{ e.target.gotoAndStop(2); } function mouseDownHandler(e:MouseEvent):void{ e.target.gotoAndStop(3); }

 

Keyboard events

Keyboard events can be captured and used to create many kinds of interaction. Games make use of this functionality, but you may choose to use keyboard events to allow users to interact with content. Each key on the keyboard has a keyCode which flash can "listen" for and then use to trigger functions. The main Keyboard events are KEY_DOWN and KEY_UP. Here is an example that uses dynamic text fields to show the user which keycode and which key has been hit, and also uses the arrow keys to move objects around the stage:

The 2 movieclip instances controlled by the arrow keys are the blue square (instance name: mover1) and the stick-figure man (instance name: man1). Note that the stick-figure has 3 frames within its movieclip timeline, and frames 2 & 3 have animations of a walk cycle on those frames.

This exercise also requires 2 dynamic text fields on the stage with the instance names myKeyText and myKeyText2.

//KEYBOARD EVENTS
//------------------------
//LISTENERS - add listeners to the stage for keyboard events
stage.addEventListener(KeyboardEvent.KEY_DOWN, keyDownHandler);
stage.addEventListener(KeyboardEvent.KEY_UP, keyUpHandler);
//FUNCTIONS
function keyDownHandler(e:KeyboardEvent):void {
//create a variable to store the value of the keycode
//for the key that has been pressed
var theKey:int;
theKey = e.keyCode;
//set the text property of dynamic text field instance myKeyText 
//to show which key has been pressed
var theText:String = "keycode = ";
myKeyText.text = theText + theKey.toString();
//myKeyText2 will show which arrow keys have been pressed
myKeyText2.text = "";
//Switch statement to detect which arrow key has been pressed
//you could use this for any key and run different functions
var thisKey:int = e.keyCode;
switch (thisKey) {
   case 37 :
     trace("LEFT");
     myKeyText2.text = "LEFT";
     //make the man clip walk to the left
     man1.x -=5;
     //send the man clip to its 3rd frame to play the walking left animation
     man1.gotoAndStop(3);
     break;
   case 38 :
     trace("UP");
     myKeyText2.text = "UP";
     mover1.y -= 5;
     break;
   case 39 :
     trace("RIGHT");
     myKeyText2.text = "RIGHT";
     //make the man clip walk to the right
     man1.x +=5;
     //send the man clip to its 2nd frame to play the walking right animation
     man1.gotoAndStop(2);
     break;
   case 40 :
     trace("DOWN");
     myKeyText2.text = "DOWN";
     mover1.y += 5;
     break;
   default :
     trace("some other key");
     myKeyText2.text = "OTHER";
   }
 }
 function keyUpHandler(e:KeyboardEvent):void {
    //when you let go of the key, the man goes back to his standing position
    man1.gotoAndStop(1);
 }

 

EnterFrame events

The ENTER_FRAME event basically allows for a function to be run on each frame. It can be extremely useful for all kinds of functionality in Flash. It is commonly used for elements that have to keep moving all the time, or for anything that constantly needs to be tested or checked. Here we will try a simple continuous rotation using the ENTER_FRAME event:

Create a movieclip in the Library and place an instance of it on the stage. The exercise shown above uses a sun-shaped movieclip with the instance name circle1.

 

//------------------------
//ENTER_FRAME EVENT
//------------------------
circle1.addEventListener(Event.ENTER_FRAME, frameHandler);
function frameHandler(e:Event):void{
   e.target.rotation += 2;
}

HitTesting and Drag & Drop

Testing whether 2 objects have collided or intersected (hit) each other is a common functionality used in games and other interactive products. in combination with mouse events and keyboard events, you can create some really engaging interactivity in your Flash content. In this exercise we will do 2 things:

1. test when the man1 movieclip instance walks into the tree1 movieclip instance.

2. test when another movieclip instance (the pink circle:pink1) is dragged over the tree1 movieclip instance.

Drag & Drop is another functionality that is great for simple interactivity suitable for children. the code is not difficult to implement, and can be adapted to many possible interactions. For this exercise we need to create another movieclip instance to Drag & Drop.

Add some hitTest code as shown to the existing Enter Frame function frameHandler()and add the Drag & Drop code below also (new code shown in red):

//------------------------
//ENTER_FRAME EVENT
//------------------------
circle1.addEventListener(Event.ENTER_FRAME, frameHandler);
function frameHandler(e:Event):void{
   e.target.rotation += 2;
   //hit testing points
   if(tree1.hitTestPoint(man1.x-50,man1.y, true)){
      trace("HIT!!!");
      myKeyText3.text = "HIT (MAN)";
   } else {
      myKeyText3.text = "NO HIT (MAN)";
   }
   //hit testing objects
   if(tree1.hitTestObject(pink1)){
      trace("HIT!!!");
      myKeyText4.text = "HIT (PINK CIRCLE)";
   } else {
      myKeyText4.text = "NO HIT (PINK CIRCLE)";
   } 
} 
pink1.buttonMode = true;
pink1.addEventListener(MouseEvent.MOUSE_DOWN, dragHandler); pink1.addEventListener(MouseEvent.MOUSE_UP, dropHandler);

//DRAG & DROP FUNCTIONS
function dragHandler(e:MouseEvent):void{ //define the draggable area with a rectangle object
//so it stays in the stage area

var myRectangle:Rectangle = new Rectangle(e.target.width/2, e.target.height/2, stage.stageWidth-e.target.width, stage.stageHeight-e.target.height);
e.target.startDrag(false, myRectangle); } function dropHandler(e:MouseEvent):void{ e.target.stopDrag(); }

 

As you can see, there are 2 kinds of hit test you can do in AS3. the easiest method is hitTestObject() which just tests whether 2 objects intersect. This sometimes doesn't work is you have irregular objects like the tree and the man, so you have to use hitTestPoint() which tests the X,Y coordinates of one object colliding with another, or even tests if the mouse touches part of an object. There are other much more complex ways of testing collision which involve a lot of code - mostly used for games. you can search for examples of these online.

Get the sample files here.

Challenge: see if you can create a simple character (can be a stick figure - but better than my awful one) with a walk cycle, and use the keyboard events to get it walking left and right. For an extra challenge, create a few hit tests for the character to collide with.