ActionScript 3 Gaming basics

Techniques to Create Flash Games

• You can used this technique to fulfill the ActionScript Requirements in Project 3
• If you are providing the user with the ability to do something with an element on the movie screen, be sure you give them some written directions about what the element can do and how to interact with it

Drag a movieclip around the stage

1. Create a new Flash document and save it as dragMovieclip.fla
2. Insert a new movieclip symbol and name it dragMC
   1. import a graphic into dragMC
3. Click Scene 1 to edit the movie
4. Rename Layer 1 dragMC
5. Click in keyframe 1 of dragMC layer
6. drag the movieclip dragMC onto the stage in keyframe 1 of the dragMC layer
7. Save the movie
8. Create the Actionscript to control the movieclip
9. Insert a new layer in the timeline called Actions
10. Open the Actions panel (F11) and group it with the property inspector
11. Type this ActionScript into the Actions panel
    1. The ActionScript updates the x, y coordinates of the movieclip as it is moved around the stage.
    2. This ActionScript is based on that of ActionScript 3.0 Game Programming University, available through Safari Books Online.
12. Save the movie
13. Click Control>Test movie to see if it works
14. Add a new layer called text, and type in instructions for interaction with the movieclip
15. Select the flash document, open the Accessibility panel, and Add a title and description (disable make child objects accessible)
16. save the movie
17. File>Publish Preview> default HTML.
18. Modify script to make HTML XHTML valid, style page with external CSS

// set listeners for user input
drag_MC.addEventListener(MouseEvent.MOUSE_DOWN, startdrag_MCDrag);
stage.addEventListener(MouseEvent.MOUSE_UP, stopdrag_MCDrag);
drag_MC.addEventListener(Event.ENTER_FRAME, dragdrag_MC);

// offset between movieclip location and click
var clickOffset:Point = null;

// user clicked the movieclip
function startdrag_MCDrag(event:MouseEvent) {
clickOffset = new Point(event.localX, event.localY);
}

// user released the movieclip
function stopdrag_MCDrag(event:MouseEvent) {
clickOffset = null;
}

// run every frame
function dragdrag_MC(event:Event) {
if (clickOffset != null) { // must be dragging
drag_MC.x = mouseX - clickOffset.x;
drag_MC.y = mouseY - clickOffset.y;
}
}

Notice that you can drag the movieclip off the stage and lose it because its movement is not constrained

top

Constrain the Drag and Drop action

To constrain the drag and drop to an area within the movie stage, try this ActionScript, which sets up a rectangle that puts a boundary around its movement.

This code is based on ActionScript in How to Cheat in Adobe Flash CS3, by Chris Georgenes, Focal Press, 2008. He allows his code to be reused for educational puirposes.

function startDragHandler(evt:MouseEvent):void {
bird_MC.startDrag(false, new Rectangle(50, 50, 250, 250));
stage.addEventListener(MouseEvent.MOUSE_UP, stopDragHandler);
}
function stopDragHandler(evt:MouseEvent):void {
bird_MC.stopDrag();
stage.removeEventListener(MouseEvent.MOUSE_UP, stopDragHandler);
}
bird_MC.buttonMode = true;
bird_MC.addEventListener(MouseEvent.MOUSE_DOWN, startDragHandler);

Check if cursor collides with movieclip:

1. Create a new Flash document and save it as collision.fla
2. Use the movieclip from the last movie to create the cursor object, bird
3. Create another movieclip symbol or use an old one that will be the collision object (the bird cursor object moves, the collision object is staionary).
4. Click on the stage
5. change the name of layer 1 to text to hold the dynamic text
   1. Click in keyframe 1 of the text layer.
   2. select the text tool
   3. type this text and select the text type, dynamic text, in the property inspector
   4. My test is: Did the bird get the fruit? or Collision?
   5. this text is a placeholder, because the actionscript will write the text in the SWF file
   6. dynamic text has a variable name and can change during the movie
   7. Select the dynamic text box and give it an instance name in the property inspector: messageText1
6. Create a new layer called bird
   1. Click in keyframe 1 of the bird layer
   2. Drag the bird movieclip on the stage
   3. Give it an instance name of bird in the property inspector
7. Create a new layer for the movieclip, stationary,l that will be the element with which the bird can collide (any point of the bird hits any point on the stationary object)
   1. Drag the stationary movieclip onto the stage in the first frame of the stationary layer
   2. Give it an instance name -- mine is fruit
8. Create a new layer, actions
   1. Click in keyframe 1 of the actions layer and add this actionscript
   2. This actionscript checks whether the x and y axis of the cursor (the bird) are over the stationary object (the fruit bowl).
   3. If they are., then hitTestPoint will be true
   4. If the two are merely touching but the cursor is not over the fruit then the hitTestPoint will be false.
   5. The hitTestObject code tests whether the edge of the bird touches the edge of the bowl, even if the x, y axis do not

addEventListener(Event.ENTER_FRAME, checkCollision);

function checkCollision(event:Event) {

// check the cursor location against the fruit bowl
if (fruit.hitTestPoint(mouseX, mouseY, true)) {
messageText1.text = "Is the cursor x, y axis over the fruit? YES";
} else {
messageText1.text = "Is the cursor x, y axis over the fruit? NO";
}

// move bird with mouse
bird.x = mouseX;
bird.y = mouseY;

// test bird versus fruit bowl -- did the edges touch?
if (bird.hitTestObject(fruit)) {
messageText2.text = "did the edge of the bird touch the fruit: YES";
} else {
messageText2.text = "did the edge of the bird touch the fruit: NO";
}
}

Source:

 

top

Resources

• Downloads for Flash Exercises
• Learning ActionScript 3.0: A Beginner's Guide, by Rich Shupe with Zevan Rosser (2007)
  • Code examples from book
• Web sites from the past
• Safari Electronic books on Web design, CSS, Adobe CS3 applications, available on-line through the Cal Poly Library
• Flash Examples

top