Questions about making dress-up games in Flash

October 14, 2008 11:44 AM

I draw paper dolls, and I would like to be able to make a dress-up game in Flash out of them. I can find tutorials about making simple dress-up games easily enough, but I have two questions that none of the tutorials seem to answer: one about linked layers and one about "snapping" the outfit in place.

Is there a way to link two layers together such that they can be dragged together, but one layer goes over the doll layer and one layer goes under the doll? For example, look at this image's headdress. The fabric goes both in front of the face and behind the head, so ideally that'd be two different layers stuck together.

Is there a way to "snap" the clothes to the doll? (I hate trying to get them just right, myself.) If so, is there a way to control how close you can be before it snaps?

Thank you very much!

posted by shirobara to Technology (11 answers total)

Best answer: You need some code there.

If (the difference between center of part's X coord and destination's X coord) is less than (tolerance) AND (the difference between center of part's Y coord and destination's Y coord) is less than (tolerance), then set the location of part to destination.

Like that, but sub in your own values and wrap it in Actionscript. :)
posted by rokusan at 12:09 PM on October 14, 2008

Have you tried using the Kisake System Set (KISS) instead? It was pre-major uses of flash, but was made for this.
posted by Weighted Companion Cube at 12:32 PM on October 14, 2008

Response by poster: It turns out that I was looking at the student price for Flash ($250) and not the price I'd be paying ($700), so I think that this plan is out after all. Thanks though rokusan, I clearly see what I'd be trying to do, should I have the chance to do it in the future!

I thought about using KISS, Weighted Companion Cube, but I have a web site for my paper dolls, and I'd like to try to keep the flash game on it and not have it be a stand alone thing. Thanks though!
posted by shirobara at 12:57 PM on October 14, 2008

Best answer: If I take you literally when you say "layers," as in Flash layers, the answer is no. Because you need Actionscript code for interactivity and Actionscript doesn't know anything about layers. In face, layers don't really exist under-the-hood. They're just a convenient way to display things in the application.

This is a big or small question, depending on how much Actionscript you know. From the point-of-view of a AS coder, what you want to do is trivial. Of course, if you don't know AS -- or if you're a beginner -- it won't seem trivial. So note that if the following seems confusing, it means you need to learn some more Actionscript.

The main organizational units for graphics in Flash are Movieclips (or you can use Sprites in AS3). You can think of a Movieclip as a layer. It can contain as many images as you want. If Movieclip A contains images 1, 2 and 3 and Movieclip B contains images 4, 5 and 6, you can arrange the images from top-to-bottom like this -- 4, 5, 6, 1, 2, 3 -- by playing Movieclip B on top of Movieclip A. Also, within a Movieclip, you can stack internal images any way you'd like.

If I were you, I'd put the doll and ALL its clothing into a single Movieclip. That will make it easy to eventually move the entire doll around -- clothes and all -- as one unit. Lets say that Movieclip is called doll. Within that Movieclip, you might want to nest some other Movieclips. Maybe this organization would work for you:

doll contains (from top to bottom)
=====================
frontClothes
nakedDoll
backClothes

Then, within frontClothes and backClothes, you could place the actual clothes graphics that go in front of and behing the doll.

Okay, let's say that you have a hat that needs to partly be in front and partly behind the doll. You divide the hat into two graphics, hatFront and hatBack.

You now have this hierarchy:

doll.frontClothes.hatFront
doll.backClothes.hatBack

Now, you should make a structure (I'd use a class) that lets you combine these into one item of clothing.

class Clothes
{
private _items : Array;
private _id : Number; //used for a setInterval id
private _draggedItem : MovieClip;

public function addItem(item : MovieClip):Void
{
_items.push(item);
item.onPress = mx.utils.Delegate.create(item,onItemPressed);
item.onRelease = mx.utils.Delegate.create(item,onItemReleased);
item.onReleasedOutside = mx.utils.Delegate.create(item,onItemReleased);
}
}

You'll need to add those three onItemPressed (etc.) methods inside the class:

function onItemPressed(item : MovieClip) : Void
{
item.startDrag();
_draggedItem = item;
_id = setInterval(onDrag,100);
}

function onItemReleased(item : MovieClip) : Void
{
item.stopDrag();
clearInterval(_id);
}

Finally, you'll need to add the onDrag method. It updates all the items's _x and _y coordinates:

function onDrag():Void
{
for (var i : Number = 0; i <> {
if (item[i] != _draggedItem)
{
item[i]._x = _draggedItem._x;
item[i]._y = _draggedItem._y;
}
}
}
posted by grumblebee at 1:10 PM on October 14, 2008

Response by poster: Just about breaks my heart that you wrote all that out around the same time I posted that it's not going to happen! Thank you very much though.
posted by shirobara at 1:11 PM on October 14, 2008

Best answer: Re the price: there's a free solution!

Adobe has released a command-line compiler. All you need is that and a text editor and you can make AS-based Flash movies. Of course, you have to be willing to do everything via code. But you can't beat the price.
posted by grumblebee at 1:14 PM on October 14, 2008

Response by poster: That may be beyond my abilities, but I will definitely check it out!

I've also been looking at doll maker script - most of the example pages are hideously unwieldy, but what I would have in mind wouldn't be that sort of "here's a base doll and ten thousand tousled blonde hairdos" doll maker. Either way, I'll fix up something...
posted by shirobara at 1:21 PM on October 14, 2008

If you're looking for fellow travelers:

Cartoon Doll Emporium
All for Girls
posted by Class Goat at 1:47 PM on October 14, 2008

As an experiment to learn ActionScript 3 (and because I no longer have Flash), I tried the wonderful FlashDevelop IDE for Windows, which is free. It took me a few hours to make a "magnetic poetry" Flash game in pure code. I had done something similar in Flash MX 2004 years ago, and found doing the drag-and-drop and over-under-layers thing you're talking about to be more straightforward this way than using Flash itself. I am already a programmer though, so this might not be something you want to tackle. But ... it sounds like a fun project, and similar to something I just did, so MeMail me if you'd like a hand.
posted by bwanabetty at 7:04 PM on October 14, 2008

Oh and to clarify, FlashDevelop uses the free compiler that grumblebee mentions, but adds all the typical IDE features like text editor, syntax highlighting, code completion, projects, etc.
posted by bwanabetty at 7:19 PM on October 14, 2008

I'm just adding this for completeness:

I've used pretty much every Flash editor/IDE out there (including Flex and FlashDevelop), and in my opinion (and I'm far from alone), the only mature IDE for Actionscript is Eclipse with FDT.

For this sort of hobby project, I don't recommend it, because it's not free. (In fact, it's a bit expensive), but if you get seriously into AS, it's the way to go. It cut my development time in half.
posted by grumblebee at 8:23 AM on October 15, 2008