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...
cheap sale Ed hardy shoes coach shoes, coogi shoes, gucci shoes , prada shoes
We can supply the shoes with perfect quality .incl...
Efect Urgent!!!!!!!
Hello. How can I get this effect in Photoshop CS3...
Gradiants?
Could some explain what a gradient does in terms I...
cheap wholesale air jordans,Jordan six (6)Rings,Jordans
We can supply the shoes with perfect quality .incl...
cheap wholesale Ed Hardy hoodie,coogi hoodie,Lrg Hoodie,
We can supply the shoes with perfect quality .incl...
... Go to Forum


Tutorial Image

Get familiar with the power of the curves adjustment tools.
The Image: Adjust: Curves... and all the good things you can do with it!...

Tutorial Image

Blending edges when you are making a composite photo.
Tutorial covering blending edges...



© 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.
..