Basic 'Dress-Up' Flash Game

46,001

18

18

Posted

Introduction: Basic 'Dress-Up' Flash Game

Dress-up games are one the easiest games to make with Flash. This instructable will instruct you on the ways of making your very own dress-up game.

To follow this instructable, you will need Adobe Flash of some description. I used CS6, which you can download and trial for free from the Adobe website. However, I think that previous versions of Flash should be fine too. 
You will also need some basic knowledge of how to use Flash, but it's really for beginners (like me! :D )
Finally, I suggest having a tablet, as it will make drawing a lot easier. 

I apologise for my terrible drawing skills, as well as my inability to express myself clearly. I assure you that whatever I say always makes sense in my head. 

Step 1: Base Body

Open a new document in Adobe Flash with Actionscript 2.0. Draw your body, not forgetting underwear! If it's your first time, I suggest keeping it simple. Even a stick figure is fine (Y).

(I actually drew mine in Photoshop...which is why it's not vectorised D: )

Select the whole image, right click and select Convert to Symbol. Make the type a Movie Clip.

Lock this layer and name it something easily identifiable, e.g. Body

Step 2: Drawing Clothes

In a new layer, draw clothing for the person.
Draw the clothes one at a time by drawing them right on top of the doll. Each time you finish an item of clothing, select it and turn it into a movie clip, just like the body. 
Keep the tops and bottoms on separate layers for ease of access. 

Step 3: Click and Drag

When you've finished making an item of clothing, access the actions window by right-clicking and then clicking on Actions. In the space, type in the following script:

on (press) {
startDrag("")
dragging = true }

on (release, releaseOutside) {
stopDrag()
dragging = false}

What that does is tell the program that when you click on an item, you will 'pick it up' and then you can drag and drop at will. This has to be repeated for all the clothes. 

If you want to be a bit more fancy, and you want the clothes to 'snap' to the doll/body, then you have to add a little more the script. Instead, you need to type in the following:

on (press) {
startDrag("")
dragging = true }

on (release, releaseOutside) {
stopDrag()
dragging = false
if(this._x > number here && this._x < number here && this._y > number here && this._y < number here)
{ this._x = number here
this._y = number here }
dragging = false }

To fill in the number blanks, you need to get the ruler (which can be accessed under the View menu, up the top).
Basically, you are inserting the coordinates of an invisible rectangle which if the clothes are dropped in, they will snap to their spot. 
In order, the first four numbers you need are:
1. the lowest x coordinate
2. the highest x coordinate
3. the lowest y coordinate
4. the highest y coordinate

Put these numbers into their respective places in the code. Following that, there are two more numbers. These are the x and y coordinates of the item of clothing when it is in it's snapped position. To attain these coordinates, drag the clothing into place, and the coordinates should show up in the Properties tab, under X and Y. 
Put the x value in first, then the y value. 

*TIP- keep checking that the script is correct by previewing the game. To do this, press Ctrl+Enter and test it out!

Step 4: Final Touches

To improve aesthetics, you can do lots of things. I just added a pink background and some text, but if you really want to make you game awesome, you could add music, menus, a loading bar, and a load more options. This 'ible is really only on the very basics. 

To finish up, Publish your game under the File menu. Save it as a .swf file, and dress to your hearts content :) You can either play it in Internet Explorer *shudder* or you can download GOMPlayer (or a similar media player), which is what I use to play Flash files. 

An important thing to remember when using Flash is to remain patient. You get the best results if you take time and care. Good luck if you do attempt this-I'd like to see your versions :)

6 People Made This Project!

Recommendations

  • Science of Cooking

    Science of Cooking
  • Pocket-Sized Contest

    Pocket-Sized Contest
  • Spotless Contest

    Spotless Contest
user

We have a be nice policy.
Please be positive and constructive.

Tips

Questions

7 Comments

then again, ignore me

NEW QUESTION!! I am using the new AS 3 but I can't find the "Actions" selection. Help?

never mind I have found it!

Hello and thank you for this very helpful tutorial. But one question. . . can I please be provided with the link where you downloaded the software? I have looked all over Adobe's confusing website (i'm sorry, i'm kinda stupid, honestly) and still couldn't find it. Thank you in advance! :)

How do I make it without a drag option? I want is a color palette.

Got a quick question, how do you limit the area you want to place an
object. I would like to not limit a placement so that it snaps to an
area but can be placed anywhere within a specific range.

Wow I've never known how to make a game like this before thanks alot