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

Get Adobe Flash player


Summary:

Begin Coding your Drag and Drop Game in Flash

    ●   Learn some Actionscript and learn a little about coding.


Learn About:

Actionscript 3 Movie Clips Keyframes Actions Panel

 

  •   This is the 1st tutorial of the Drag and Drop Project.


This is part of a series of tutorials:

1 - Beginning Code    2 - Draggable Items    3 - Origin Code  4 - Reset Button    5 - Target Dropzone     6 - Sound  


Other People's Work:

Here are examples of work inspired by this tutorial.

By the end of this tutorial you will be able to
click an object and drag it around, like the example(s):
Try it!

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

Get Adobe Flash player


Step #1: Open your Project in Flash ~

Pick your first draggable item … Which one?

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

Get Adobe Flash player

Click the Layer your item is on to select EVERYTHING on that layer - just to be sure …


Step #2: Movie Clip ~

Hit F8 (or Right-Click and select: ) and make a Movie Clip out of your draggable item.

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

Get Adobe Flash player

Call it item1_mc - be sure to spell the name EXACTLY: item1_mc

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

Get Adobe Flash player

Also, it's probably a good idea to set the Registration point to center - not critical, just good practice.

Make sure you've spelled the name EXACTLY: item1_mc and hit ok


Step #3: Name the Instance - AGAIN ~

Do it twice - Name it item1_mc again in the Properties menu by hitting Cmd(⌘)+F3 (if necessary - it may already be open). Look for: instance name small

Make sure you've spelled the name EXACTLY: item1_mc


Step #4: Action Script ~

Create a New Layer by clicking on the layer icon icon at the bottom of the Timeline

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

Get Adobe Flash player

Name it Actions and Labels

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

Get Adobe Flash player

… click Frame 1 …

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

Get Adobe Flash player

… then hit Alt (⌥)alt option key F9 f9 - and open the Actions Panel …

actions

… copy the Code below and paste it into the Actions Panel.

item1_mc.addEventListener(MouseEvent.MOUSE_DOWN, dragTheObject); 
item1_mc.addEventListener (MouseEvent.MOUSE_UP, itemRelease);

function dragTheObject(event:MouseEvent):void {
var item:MovieClip=MovieClip(event.target);
item.startDrag();
var topPos:uint=this.numChildren-1;
this.setChildIndex(item, topPos);
}

function itemRelease(event:MouseEvent):void {
var thisItem:MovieClip=MovieClip(event.target);
thisItem.stopDrag();
};

The final code looks like this …

actions drag and drop


Step #5: See if it Works!

Hit Cmd (⌘) + Enter cmd enter keys and move your object!

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

Get Adobe Flash player


Last Step: Save and View your work ~

View your work by hitting the keyboard shortcut: Cmd(⌘)+Enter cmd enter

Save your work as - FIRST_NAME_LAST_NAME_PROJECT_NAME.fla]

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

Get Adobe Flash player

 

•   ALWAYS save your projects using the following naming convention:
FIRST_NAME_LAST_NAME_PROJECT_NAME


  •   DO NOT name your project any other way - Improperly named projects will not receive credit and you will be sad.


  •   NEVER leave your work on the desktop or depend on a flash drive - instead, save your work in a folder you can find later - preferably on a virtual drive where it can be backed up.


Other Resources: http://www.danfergusdesign.com/classfiles/oldClasses/VCB324-richMedia2/exercises/matchingGame.php