Introduction: Basic 'Dress-Up' Flash Game

Picture of 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

Picture of 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

Picture of 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

Picture of 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

Picture of 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 :)

Comments

1SureJan1 made it! (author)2016-01-25

Thanks! Works really well, made mine with some other tutorials as well ʕ•ᴥ•ʔ

mashix_ (author)1SureJan12017-09-04

Did you made the dessings in fash as well?

CaitlinF made it! (author)2014-12-07

Thank you very much for this! Everything was clear, concise, and easy to understand~

frenchlazzy made it! (author)CaitlinF2015-10-08

this doesn't work for me, like the cut an paste of the simple code provided, didn't make anything move kept giving me an error that it needs a semi colon before the left brace???


also i made my images on photoshop, how am i suppose to import them to Flash . it doesn't let me open it on flash?

HELPPP?! :,(

LoulabeIIe (author)frenchlazzy2016-08-12

Try adding a semi-colon just before the last }

not much of a coding expert myself, but I'd suggest giving it a shot just in case.

DOOMhyzer2 (author)CaitlinF2015-11-04

WOW awsome drawing!!!

LoulabeIIe made it! (author)2016-08-12

Since this was the first time I've followed a tutorial like this and succeeded, I want to thank you so so sooooo much! :) I created a fanbased dress up game since I wanted to test this out and such, this was definitely helpful and I've reccommended it to friends.

LoulabeIIe made it! (author)2016-08-12

Since this was the first time I've followed a tutorial like this and succeeded, I want to thank you so so sooooo much! :) I created a fanbased dress up game since I wanted to test this out and such, this was definitely helpful and I've reccommended it to friends.

meeble246 (author)2016-01-05

then again, ignore me

meeble246 (author)2016-01-05

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

meeble246 (author)2016-01-05

never mind I have found it!

meeble246 (author)2016-01-05

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! :)

frenchlazzy made it! (author)2015-10-08

this doesn't work for me, like the cut an paste of the simple code provided, didn't make anything move kept giving me an error that it needs a semi colon before the left brace???

also i made my images on photoshop, how am i suppose to import them to Flash . it doesn't let me open it on flash?

HELPPP?! :,(

ErinO1 (author)2015-07-15

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

ShaneS5 (author)2015-01-18

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.

coolsista9 (author)2013-07-15

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

About This Instructable

43,830views

18favorites

License:

Bio: O.o
More by piggleliggle:Easy No-sew Infinity Wrap Knock-OffOld book upcycle: disguised pursePants to Overalls
Add instructable to: