Drag and Drop Tutorial in Flash Actionscript 3 (Part 3 of 3)

[joooooo33333]

This is one of the best tutorials I've done online, you're clear and straight to the point, I couldn't ask for better tbf!

You have saved my bacon!

Thanks :)!

[DNDigital]

@joooooo33333 Thanks jooooooo, glad I could help out. Happy coding! [your comment was marked as spam, I tried to change that but not sure it worked]

[joooooo33333]

@DNDigital Ahah Thats fine! Thanks again! :D

[godofthehens]

Thak you so much!

[Choshy]

I dont generally reply to videos on YouTube, but i just wanted to thank you for the effort and time you put into making this video, this is just what i was looking for and has helped me more than you can imagine! Thank you so much!

[DNDigital]

@Choshy Hi Choshy - I'm glad you took the time, it's always great to receive feedback - especially of the positive kind. Glad it helped you and keep coding!

[GhostRyley]

OMG dude I loved your drag and drop videos amazing work

I was searching a lot of videos for something like this and yours was by far the best

[DNDigital]

@GhostRyley Hi GhostRyley - congratulations on the first comment in 2012 and Happy New Year! Thanks for the positive response and happy coding!

[swissrudiment]

1 more thing...how can I manipulate the placement of the dropped items at the bottom of the screen. My inteaction has students dropping lab report icons into a folder. Ideally, I'd like them to line up in a row along the bottom of the stage with an slight overlap (the alpha overlap adds a cool effect) or no overlap( edge to edge) would also be fine. Thanks again!!

[DNDigital]

@swissrudiment In the droptarget if-statement you can adjust the x position of the dropped clips and use width and height for relative alignment. The y-position calc does something similar already. If you wanted you could keep track of other dropped items via a protected (or public) static variable in the DraggableShirt class - this would be shared with all draggable instances and hence you could account for previously dropped items when calculating the position. The world is your oyster...

[swissrudiment]

@DNDigital So I experimented with your Math series tutorial-Positioning and Centering (another great tut)- to get a better grip on object x, y placement. However, my novice skills keep me from constructing a code for tracking of other dropped items via a protected (or public) static variable. If you have or could suggest a resource that would help I'd be happy to see it. Otherwise I'm willing to pay for the expertise. Having great fun seeing my ideas come alive! Thanks

[DNDigital]

@swissrudiment I'll try to help you along. In DraggableShirt, just above the other 'protected var', put 'protected static var dropCount:uint = 0;'. The 'static' keyword means that this variable belongs to the class, rather than an instance, so it is shared between all the white/black/whatever t-shirts you might have. In the droptarget if-statement, you can increase the dropCount (dropCount++;) and use it for positioning (ie. x = dropCount * 10;). Hope that helps, enjoy and happy coding!

[swissrudiment]

Absolutely brilliant instructions... I'm coming from novice experience with VBA and this was my first venture into a Actionscript. This tutorial was informative and my end product rewarding. My students and co-workers will love it's inteactivity! My only recommendation is to aim for better screen resolution for smaller items like brackets and parenthesis. The younger cats may have no issue...Thanks so much and I look forward to learning more from your excellent tuts in the future!

[DNDigital]

@swissrudiment Many thanks for your kind comments - I'm glad it's been useful to you! You might have tried it already but if not, switching the video quality to 720p should hopefully make even the punctuation legible. Enjoy coding and welcome to AS3!

[delacunetaporser]

thank u very much!! very helpful and detailed walkthru , cheeers!!!

[DNDigital]

@delacunetaporser Thanks for the feedback - I'm glad you've enjoyed the tutorial!

[michebbi]

For some reason the link wouldn't work.

it's kariealls(dot)com(slash)md_wor­king(dot)html

Thanks!

[DNDigital]

@michebbi Any code like that would go into the 'if( droptarget.parent.name == "trolley")' if-statement. The tricky bit is to get access to the trolley MovieClip - but here it's quite easy because it's 'droptarget.parent'! Then just replace the code that scales and positions the t-shirt with something like: x = droptarget.parent.x; y = droptarget.parent.y; width = droptarget.parent.width; etc. Experiment a little to get the best result. Hope that helps & happy coding!

[michebbi]

@DNDigital

Do you know how to get the "t-shirts" to fix to a drawn object (like the trolley) and spread out to cover the entire object? Any help would be GREATLY appreciated. Here is the site i'm working on now

Thanks in advance!

[onbepaald]

@DNDigital

Hi,

I just finished my application.

Here you can find the result:

bioscenter.be/scent/?page_id=7­59

It's an application that displays the cluster that suits you best, after dragging 5 words into the tube. So you have to drag 5 words into the tube you like the most. I'm pretty glad with it, but there are still some details that could be better.

[DNDigital]

@onbepaald Nice - great to see this applied to another project. It's good to get projects out the door and then you can either refine it or use your knowledge to make the next one even better! The link didn't work for me but there is a link 'Find Your Cluster' on the homepage. Thanks for sharing.

[talafim]

Thank you very much for so understandable tutorial !

[aleqsama]

Sir, your video very helpful, and is it possible to apply 2.0 script into 3.0? Will it work properly? Or does it will affects anything later?

[DNDigital]

@aleqsama You can write all this in AS2 but the code would be very different. See also the reply to 38330Max's comment a little further down, he asked the same question. Good luck - Nils

[38330max]

Thank You for your reply Sir. Can you please upload some more of your tutorial in flash as3. I'll be really glad 

[38330max]

Sir, is it possible to use the same codings in actionscript 2?And do I have to make packages in actionscript 2?

[DNDigital]

@38330max Hi 38330Max - it is possible to program the same functionality in AS2 but you would need to go about it in very different ways. And packages don't exist at all in AS2! AS3 is now almost 5 years old and brings many benefits, including much faster execution in Flash Player, so unless you have a really good reason I'd suggest making the transition. Some of my other tutorials go over the basics of classes, perhaps tackle them first? Good luck - Nils

[38330max]

@DNDigital Thank You for your reply Sir. Can you please upload some more of your tutorial in flash as3. I'll be really glad .

[38330max]

@DNDigital Thank You for your reply Sir. Can you please upload some more of your tutorial in flash as3. I'll be really glad

[wwwsicaprobr]

Hi Teacher, thank you for share.

Would like to know how far to include a TextArea component and to write on it the name of each object placed in the cart, each time we release the mouse button. Could you help me.

[DNDigital]

@wwwsicaprobr All code that has anything to do with things being dropped on the cart needs to go into the if-statement that checks the drop-target (if(dropped.parent.name == "trolley')). It's there that you can then add the name of the dropped shirt to the text field that you position somewhere on stage. Hope that helps - Nils

[onbepaald]

i'm trying to create a counter to count all the objects dragged into the trolley. In my previous post you can see the code that i added, but it doens't work.

Does anybody knows, which code i need to add to count the objects that are dragged into the trolley? Thx in advance!

[DNDigital]

@onbepaald Late reply, I know - maybe you have solved it since? The code you posted looks pretty close and it is definitely in the right place. Make sure that you define 'counter' as a static variable in the class, so it exists across all different types of shirt. Even better - create a separate class for the Shopping Cart and keep everything in there.

[onbepaald]

@DNDigital hey! thanks for your answer. It was really helpfull! I have just one more question left.

I'm trying to display a text when 5 objects are dragged into the trolley.

I have created the counter, and it works fine. I also created a dynamic text field. When the counter has reached 5, the textfield should show a text. So in the i wrote: instancenaam.text ="counter has reached 5";

But the textfield doesn't change. Can you help me with that?

[DNDigital]

@onbepaald Maybe you've solved this already... It's difficult to say without seeing your code but my guesses are: 1) you didn't give your text field the instance name or there's a spelling error, 2) the textfield is not on the same timeline as the code - maybe it's nested in a MovieClip?, 3) you created the TextField with code but didn't add it to the display list (addChild()). Hope it's one of those - let me know how you get on

[onbepaald]

i'm trying to create a counter to count all the objects dragged into the trolley. In my previous post you can see the code that i added, but it doens't work.

Does anybody knows, which code i need to add to count the objects that are dragged into the trolley? Thx in advance!

[onbepaald]

here's the code, i added to the if(dropped.parent.name ==trolley) statement: if (this.name=="domeina" || this.name=="kak"){ ++counter; trace(counter);

[BushyRoyal]

Excellent tutorial, really clear and concise. Could you tell me the code for playing a sound clip when a particular item has been dragged into the correct place?

[DNDigital]

@BushyRoyal You have two options. If you need to load in an external MP3, you would need code like this:

var snd:Sound = new Sound();

snd.load(new URLRequest("my.mp3"));

snd.play();

but this won't be very immediate. Instead, export the MP3 from your library using a linkage ID. You can then instantiate it as a new class directly and it will play straight away!

var snd:SoundLInkageID = new SoundLInkageID();

snd.play();

Replace 'SoundLinkageID' with the actual linkage id your using.

[BushyRoyal]

@DNDigital Thanks, I'll try that out. And thanks for the speedy reply, appreciate it!

[mrbuffneff]

Put this code in the down() function to create duplicate White/Black shirt.  var className:String = getQualifiedClassName( this ); var objectClass:Class = getDefinitionByName( className ) as Class; parent.addChild(new objectClass()); // Then Tutorial Code parent.addChild(this); startDrag(); stage.addEvent(MouseEvent.MOUS­E_UP, MouseRelease);

You still need to set the starting x & y locations in the subclasses.

[fernandesfran]

Wow! I have been trying to get my head around AS3 and OOP. May I say, this is one of the best tutorials I have come across so far that makes it so simple for me to understand concepts like Package, Class, Inheritance etc. Thanks so much!

I know this tutorial is for beginners, but just like to add that in most cases the 'T-shirts' would be dynamically generated, so probably a person might have to dynamically plug in the class to create drag and drop functionality. Thanks, anyways!

[m33gzz]

I need some help. When I drag my movie clip on to the other movie clip i want it to stop on, it still snaps back to the original spot

[DNDigital]

@m33gzz I would suggest checking the instance name that you gave the Movie Clip that you want to drop things on to - it needs to be the same that you are using in your code when you check the droptarget property... Hope that helps!

[m33gzz]

@DNDigital Nope didn't work still...that wasnt the prob and i'm stumped

[srigovic]

It was a pleasure working with you ,thank you

[september231992]

Thank You very much! :D 

[roozbeh12]

Hi mate, could you please tell me how I can duplicate the drag and drop?

[roozbeh12]

Hi mate, could you please tell me how I can duplicate the drag and drop?

[DNDigital]

@roozbeh12 I'm not sure what you mean by 'duplicate' - but Part 1 of the tutorial shows you how to create the classes for each T-Shirt. If you need more T-Shirts, you can use the same technique.

If you want to put the T-Shirt back even after it's been dropped into the shopping basket, experiment with putting something like this:

parent.addChild( new BlackShirt() )

and

parent.addChild( new WhiteShirt() );

in the stageUp() mouse event handler.

[roozbeh12]

@DNDigital nice, Thanks for the reply. do you have any advanced Flex tutorials as well? I am even willing to pay something to learn Flex 3 or Flash builder 4 in advance levels.

[DNDigital]

@roozbeh12 There are a couple of more advanced tutorials here, to do with integrating Flash & FlashBuilder. And we will soon have something very interesting to offer along the same lines - it's still under wraps but we're preparing to release it in the next month.