Adobe Photoshop Flash Dress-Up Tutorial

Written by joy campbell
  • Share
  • Tweet
  • Share
  • Pin
  • Email
Adobe Photoshop Flash Dress-Up Tutorial
Online paper figures aren't limited to dolls; try a gingerbread dress-up for fun. (a kids toy doll image by Ramona smiers from Fotolia.com)

The popular dress-up paper doll of the past is now online, and creating an interactive Flash dress-up game is as simple as creating a Flash "drag and drop" application. Like the original paper doll, the online version exceeds cultural boundaries. Young girls all over the world love dress-up, and the creativity in designing these dolls with their clothing is limited only by the imagination. You can create paper dolls in stick figures form, artist texture and designs, or as realistic as a photograph.

Skill level:
Easy

Other People Are Reading

Things you need

  • Flash CS3 or up

Show MoreHide

Instructions

  1. 1

    Create your character along with some clothes in Photoshop.

  2. 2

    Open Flash and click "File," then "New," and then click "Flash File (ActionScript 3.0)" from the pullout menu. Import your character's artwork from Photoshop by clicking on "File," "Import," and then "Import to Stage" from the pullout menu.

  3. 3

    Click on your character to highlight it, and then from the main menu click "Modify," then "Convert to New Symbol" from the pullout menu. Click on the "Movie Clip" radial box and type in a name for your character such as "characterMC."

  4. 4

    Click on one of your clothes items to highlight it. From the main menu click "Modify," then "Convert to New Symbol" from the pullout menu. Click on the "Movie Clip" radial box and type in a name for your character's clothes such as "clothes1." Convert the rest of your character's clothes to "Movie Clip" symbols.

     

  5. 5

    Give each symbol a unique name by clicking "Window" from the main menu. Click "Properties" and then "Properties" again from the pullout menu. With your symbol highlighted type in a unique name such as "character_mc" and "clothe1_mc" for the instance names in the "Property" panel.

  6. 6

    Click on "New Layer" from the timeline toolbar and name it "Action." Right-click on frame "1" of your "Action" layer and then click "Action" from the pullout menu. Type in the following code:

     

    clothe1_mc.addEventListener(MouseEvent.MOUSE_DOWN, drag);

    clothe1_mc.addEventListener(MouseEvent.MOUSE_UP, drop);

    clothe2_mc.addEventListener(MouseEvent.MOUSE_DOWN, drag);

    clothe2_mc.addEventListener(MouseEvent.MOUSE_UP, drop);

     

     

     

    function drag(event:MouseEvent):void {

    event.target.startDrag();

    }

     

    function drop(event:MouseEvent):void {

    event.target.stopDrag();

    }

     

     

  7. 7

    Test your button by pressing "Ctrl + Enter" on your keyboard.

Tips and warnings

  • Create "drag and drop" scenery to go along with your character, such as a kitchen scene or a street scene.

Don't Miss

Filter:
  • All types
  • Articles
  • Slideshows
  • Videos
Sort:
  • Most relevant
  • Most popular
  • Most recent

No articles available

No slideshows available

No videos available

By using the eHow.co.uk site, you consent to the use of cookies. For more information, please see our Cookie policy.