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

Get Adobe Flash player


Summary:

Hit Target and Drop Zone items in Flash

    ●     There are many ways to add a Drop Target in Flash - this is just one …

    ●      However, this tutorial is long and complicated, so save a copy of your original version in case you screw it up - you've got a "clean" version to fall back on.


Learn About:

Actionscript 3.0 Color Effect Alpha vs. Transparency

  •   This is the 5th tutorial in the Drag and Drop Project.


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.

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

Get Adobe Flash player

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

Get Adobe Flash player

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

Get Adobe Flash player


Step #1: Save a Duplicate Copy of your Work ~

Before you start, save a COPY of your work as Version 2 - this tutorial is complicated and you might need a backup copy if you mess it up …

make a copy

The reason is because this tutorial will not work until you have completely finished it!

That's right! You must complete this tutorial on ALL your draggable items before ANY OF THEM WILL WORK AGAIN!

Once you begin this tutorial, there's no turning back! But don't panic, you always have your old copy to fall back on.


Step #2: Create a Drop Zone ~

Create a target area for item1_mc by finding the layer it's on and clicking on it …

select layer

Select the Brush Tool or hit the keyboard shortcut letter (B) …

brush tool

Draw a shape where the item is supposed to go, roughly similar to the item itself, any color is fine for now …

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

Get Adobe Flash player


Step #3: Turn the Shape into a Movie Clip ~

Double-Click the shape which selects both Stroke and Fill

shape select dots

Hit (F8) - covert it to Movie Clip and call it dropZone1_mc

button symbol

Make sure you copy the name PERFECTLY dropZone1_mc


Step #4: Name the Instance - AGAIN ~

Same name with the instance again:

instance name

Don't forget this step! Everybody does …


Step #5: Lower the Alpha ~

Now make your drop zone invisible. Click the shape with the Selection Tool and open Color Effect

… click Color Styles and select Alpha

… lower the Alpha to zero …

… and watch the item disappear.

drop zone disappears

Alpha is to Flash as Transparency is to Photoshop.


Step #6: Open your Actions and Labels panel ~

Open your Actions and Labels panel, scroll down a little and look for this code

this is the code

… it controls what happens when you Release the item.


Step #7: Copy and Paste the Code ~

Now, copy this code:

     
     
     
     
function item1Release(event:MouseEvent):void {
     var item:MovieClip=MovieClip(event.target);
     item.stopDrag();
       if (dropZone1_mc.hitTestPoint(item.x,item.y)) {
       item.x=dropZone1_mc.x;
       item.y=dropZone1_mc.y;
  } else {
       item.x=orig1X;
       item.y=orig1Y;
  }  
};

Highlight the old code and paste the new code over it …

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

Get Adobe Flash player

… with the final code lookin something like this:

hit test code


Step #8: Repeat ~

Repeat these steps for every draggable item. Remember: Each drop zone must be:

‣ Turned into a Movie Clip (F8) movie clip small

‣ Changed Instance Name instance name small

‣ Lower the Alpha instance name small

‣ The code needs to be copied, pasted and changed for each drop zone object, for instance, for dropZone2_mc you must change EVERY 1 to 2.


Step #9: Change the item Numbers ~

Change each code with the new item numbers like this example:

     

     
     
     
function item2Release(event:MouseEvent):void {
     var item:MovieClip=MovieClip(event.target);
     item.stopDrag();
       if (dropZone2_mc.hitTestPoint(item.x,item.y)) {
       item.x=dropZone2_mc.x;
       item.y=dropZone2_mc.y;
  } else {
       item.x=orig2X;
       item.y=orig2Y;
  }  
};
     

You will need separate code referencing each drop zone: dropZone3_mc, dropZone4_mc and so on …


Step #10: Wait, you're not done yet …

Now, go back and look for this code …

code

… and change the itemRelease code to match all your moveable items:

item release numbers


Step #11: See if it Works ~

Go to: File > Export > Export Movie or hit Cmd () + Enter and see if it works!


Don't panic!


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.


Attach your completed .fla file continue adding Sound Effects …


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