TeamPhotoshop
 
Making draggable objects



Draggable Objects:
A lot of Flash sites and interfaces these days use draggable objects (like our example to the left), it's fun to be able have a part of an interface or page that you can pick up and move around. But how do you do that? It's actually a lot easier than you might think. This lesson will cover the basic steps for creating a draggable object, and if there's interest we'll follow it up with a more advanced look at creating drag-and-drop objects with some interactivity. So here we go... You can download the .fla here that we used in this example.

1.
-Start by creating a new Flash movie.

-Hit ctrl-F8 to create a new symbol and create a movie clip named "draggable object".

 2.
-Drag out a rectangular box in the edit window of your symbol, this will become what we're actually dragging around the screen.

-Hit ctrl-k to bring up the Align dialogue box and pick the options shown to the left to center your box on the stage.

 3.
-Create a new layer and drag out another box of a different color; we'll make this box stretch most of the way across our existing box but not nearly as tall (see the image to the left). This is going to become the clickable area for us to drag the box from.

-Select the new box and hit F8 to turn it into a symbol. Name it "drag button" and make sure it's behavior is selected as "Button".

 4.
-Here's where the magic happens. Right-click on your button and go to Properties, then click the Actions tab and give the button drag actions as shown to the left. These commands tell the Flash movie two things:
 -to drag the movie clip when
the button is pressed
 -to stop dragging when it's released
 5.
-Now click above and to the left of your timeline on Scene 1 to return to your main stage. It's blank because even though we've created a symbol we haven't put it on the stage yet.

-Hit ctrl-L to bring up your symbol library (if it's not up already), click on the draggable object movie clip and drag it onto your stage. Now hit F10 to publish your Flash movie and that's it, you've got a draggable object.
Suppose you want to make the entire area of the object clickable though? Not much more difficult, just create a new button symbol that has nothing in the Up, Over, or Down states. In the Hit state make a box the same size as your draggable symbol (or you might just go into edit mode of the draggable symbol, copy the box then paste it into the Hit state). Now drag that button onto the draggable symbol (in edit mode) from your library window and apply the same actions we used on the button above.

So that's it, you can now create a draggable object. Try playing with some of the other properties in its actions and see what else you can come up with...

If you have any questions or comments regarding this tutorial please post it in this thread
http://forum.teamphotoshop.com/showthread.php?t=24781
Print Article




Login / Register
... Or Register


From The Forums...
Grayscale Printing
This may or may not be a Photoshop issue - kind of...
Want to be a reseller in MIDDLE EAST for call shop solution
Hi, We are offering different types of VoIP ser...
Faintheart Movie
official website: [url]http://www.myspace.com/fai...
Putting an image behind glass !
hi, I am not very good with photoshop..... but t...
Animal Crossing Wild World - Nintendo DS
My bf just bought me this , but I have no idea wha...
... Go to Forum


Tutorial Image

Retouching a photo. Step 3: Color balancing techniques.
Part 3 in our photo retouching series. This section covers some color balancing techniques...

Tutorial Image

Using the lasso and magnetic lasso to make your selections.
Using the handy ol' lasso. Essential reading for the beginner...



© Web Media Network Limited. All rights reserved. No part of this website may be reproduced without written permission. Photoshop is a registered trademark of Adobe Inc.. TeamPhotoshop.com is not associated in any way with Adobe, nor is an offical Photoshop website.