Radar Jammers and Speeding Tickets (Drop and Drag Flash Game - Practice 2)

Hello again, I'm back with another go at making a basic bare-bones drop and drag flash game, which this one is a little more in depth.

Practice 2

After have a go with my first practice, I decide I wanted to have another go with a drag and drop function, except with one that has a hit test feature. So I took a look around on the Web and I found this:

This is the kind of thing I’ve been looking for and could be the very thing I could use to create my game with. The way this is played is by dragging the smaller shapes into the larger shapes. This will give the larger shapes colour fills. Also, when you click on the smaller shapes, where it says “ITEM name,” it will change into the name of the shape. For example, when you click the green square, the “ITEM name” will change to “square.” Not only that, you also have another text box below the ITEM name box; this box basically tells you whether you have put the shapes if you have put it in the right place or not. In this instance: “WRONG!” if you have put it in the wrong place and “CORRECT!!” if you have put it in the right place.

Below that window is a small tutorial on how to make it. I had two attempts at it: The first attempt I did kind of ended in a ‘fail.’ I think what I did wrong is I didn’t put in four separate layers (I know there are four layers because you can download this) so I had second attempt and now it works fine. Following the tutorial this is how I did it:

I opened up a new doc in Adobe Flash.

Next, create four layers:

It’s usually better to have everything separate.

Okay, let’s create our small shapes, then convert them into symbols, (Movie Clips) and give them Instance names. (item1, item2 and item3 in descending order) (the Instance name feature is in the properties window and will only appear if you have a converted symbol selected

Now that you have created your symbols, you now need to make the bigger shapes. When I did this I found it a bit confusing at first but now it should be okay. Before drawing the shapes, you need to create blank symbols first:

Your canvas should now look like this (below)

Once you have drawn your shape within the blank symbol, DO NOT put anything else inside it. Go back to Scene 1, where you left your smaller shapes. After that, go into your Library and drag onto the stage. (make sure that it is in a separate layer, called bigShapes of something like that)

Now that your large shape is on the canvas, double click it so that you are now inside the symbol. Once there, convert the shape into a symbol (Movie Clip) and give it an Instance Name of "shape." Now, create a second layer and draw another shape, exactly the same size and colour, but with no fill, then place it over the colour-filled shape. After that, go back to scene 1.

You need two more large shapes that resemble the smaller shapes. Do this by repeating the same process as the first large shape.

Now, we need to create some text boxes that will feature the item info and whether they are in the right place. (This is basically a Hit Test) To do this, create a blank Symbol and draw two Dynamic text boxes.

Once you have created your new Movie Clip, draw a text box somewhere in the middle of the canvas (make sure it's big enough and the text/typeface is the right size) and write in it "Item name." Since the text box was created inside a blank symbol, there no need to convert it. In the Instance name box, type "itemName_txt." Now, add a second layer and draw another text box, (roughly the same as the first one) inside it, just type three full stops (...) and give it the Instance name of "info_txt."

Go back to scene 1 and drag your new Movie Clip onto the stage. Once you have done that, give it an Instance name of "ilabel" You should now have something like this (below). You are nearly finished, now you need to add the code:

Select the frame you haven't used yet and type this coding in the Actions tab. (if you have not opened it yet, press F9)

 

 

 

Now, run your "game," it should work. (you may need to change the "objNames" (text written in green) to the name of the shapes that you have placed.

Here is the tutorial and source code I found for this game (though I changed it around to make it a little more understanding)

Link:  http://www.flashuser.net/flash-tricks/tips-tricks-10-using-drag-drop-in-actionscript-3-0.html

And that is my (well, not mine...) second tutorial in Drop and Drag Flash games. Until next time...