Measure your computer screen or obtain its dimensions in pixels or inches. On a piece of paper, draw a rectangle equal to the size of the viewing area on your computer screen. Divide the paper into two columns so that one column is 25 per cent of the width of the paper and the other column is 75 percent of the width of the paper.
Draw or obtain graphics for a human figure and for each of the pieces of clothing in your game. Photocopy the graphics and save the resultant graphics files as either gif or jpeg files. Use other graphic file formats if you want, but check first to see if they are Flash compatible and how well they work with the Flash software.
Place the human figure cut out on the left-hand side of the paper. Place your clothes cut outs on the right-hand side of the paper. Arrange the clothes cut outs in an organized fashion so that it will be easy for the player to click and drag different pieces of clothing onto the human figure. Use this drawing as the layout guide for the initial screen layout in the flash program.
Launch the Flash Professional program. Click the "Window" menu and select "Properties" to display the properties panel. Click the "Edit" button in the properties panel. Set the width and height dimensions in the properties panel to the width and height dimensions you measured in step 1. Click the "OK" button
Click "Import" on the File menu. Click "Import to Stage," and then click the graphic file you want to import from the file list box that appears. Click "OK." Continue with the importing procedure until all of the graphics have been imported into the stage.
Click the "Transform Tool" on the drawing toolbar, then click one of the "graphics" on the Flash stage. Position your mouse cursor over one of the "handles" on the graphic to re-size the graphics and scaled them to the same proportion as the other graphics. Repeat this procedure for all the graphics. Make adjustments such that each of the clothes graphics will fit well onto the human graphic.
Click the "Selection Tool" in the drawing tool bar. Click one of the clothes graphics. Now click "Convert to Symbol" from the Modify menu to allow animation commands to be assigned to the graphic. Assign a symbol name of your choosing in the "Name" text box within the "Convert to Symbol" dialog box. Type a symbol name that reflects the garment or accessory such as pants, shirt, skirt or hat. Repeat the procedure for each of the clothes graphics you have already imported into Flash.
Click the "Selection Tool" in the drawing tool bar again. Click one of the "clothes graphics" on the stage and then type in an instance name in the "instance name" text box in the "properties" panel. Use a unique instance name for each graphic selected. Use, for example, "pantsblue," for a blue pair of pants. Write down the instance names. Use these names in the ActionScript click-and-drag animation commands.
Click the "Action" option in the "Windows" menu. Type in the click-and-drag animation commands in the "Actions" editor that appears. Use commands, which will include the "addEventListener," "removeEventListener," "function," "startDrag" and "stopDrag" commands according to the syntax defined in the Adobe flash help menu. Structure the order of the commands according to ActionScript command rules and programming guidelines set forth in the Flash Help menu.
Use one "addEventListener" command for each graphic that the player will be able to move with command syntax like "pantsblue.addEventListener(MouseEvent.CLICK, drag_fn)." Use the instance name of a specific clothes graphic to assign click interactivity for each clothes graphic used.