Authentic voices. Remarkable stories. AOL On Originals showcase the passions that make the world a more interesting place.
Gwyneth Paltrow and Tracy Anderson spend time with women who've overcome hardship, injury, and setbacks to triumph in the face of adversity. We'll hear their inspiring stories firsthand, whether fighting back from a career-ending injury or transforming their lives and bodies through diet and exercise.
Enter the graceful but competitive world of ballet through the eyes of executive producer, Sarah Jessica Parker. This behind-the-scenes docudrama reveals what it takes to perform on the ultimate stage, the New York City Ballet. Catch NYCB on stage at Lincoln Center.
The Future Of Us is a powerful original series from television personality, futurist, filmmaker and techno-philosopher, Jason Silva. In this series, Silva shares his excitement around recent discoveries and inventions.
ACTING DISRUPTIVE takes viewers inside the businesses and passion projects of Hollywood’s top celebrities.
They say every picture tells a story and AOL On's new original series My Ink proves it. Travel along as some of the world's greatest athletes bring their tattoos to life through exclusive interviews and visits to their favorite tattoo parlors.
Explore what it means to be human as we rush head first into the future through the eyes, creativity, and mind of Tiffany Shlain, acclaimed filmmaker and speaker, founder of The Webby Awards, mother, constant pusher of boundaries and one of Newsweek’s “women shaping the 21st Century.”
Discover crowdfunded small business success stories with author, comedian, and entrepreneur Baratunde Thurston.
Go behind-the-scenes with racing's hottest, young talent, 17-year-old Dylan Kwasniewski, as he aspires to make it in the #1 motorsport in America – NASCAR
Follow Scott Schuman, the Sartorialist, from the streets of NYC to the capitals of Europe on his quest to photograph and document the best in culture and fashion.
Iconic potter, designer, author and personality Jonathan Adler shares his unique perspective on creativity. Showcasing the inspiration Jonathan finds in the most unlikely people and places, Inspiration Point will add style, craft and joy to your life.
Serving Innovation gives a fresh look into the stories and passions that motivate some of the most innovative tastemakers in America.
A documentary directed by Alex Winter exploring the Napster downloading revolution; the kids who created it, the bands and businesses that were affected and its impact on the world at large.
Nicole Richie brings her unfiltered sense of humor and unique perspective to life in a new series based on her irreverent twitter feed. The show follows the outspoken celebrity as she shares her perspective on style, parenting, relationships and her journey to adulthood.
Learn how to write object oriented drag and drop Actionscript 3 code in Adobe Flash. The video takes you through the entire ...
process from scratch, using a shopping trolley as an example. Covers external classes, event detection, drop target detection and much much more!
This is Part 1 of 3.
Tags:Drag and Drop in Flash Actionscript 3 Part 1/3,Drag and Drop in Flash Actionscript 3,Object Oriented Drag and Drop,actionscript as3 drag and drop flash oop tutoria,dndigital nils millahn
Grab video code:
Write an Object Oriented Drag and Drop in Flash Actionscript 3 Part 1/3
Hello, Neils again from dndigital.net in Charlotte, in London. This video is all about drag and drop using ActionScript3 in Flash. Previews go here—so let’s get started.
I have a folder here with almost nothing in it. Just go to your Assets folder with some t-shirt images and shopping trolley. So we’re going to use those to create our user interface. I’m going to jump into flash now and create a new ActionScript3 file and then I’ll save that alongside with my Assets folder. I’ll call this draganddrop.fla.
Next step is to create some assets on this stage. So I simply import all of my three graphics and here they are. So we’ve got two t-shirts and a shopping trolley. We’re going to use those to create initial shop with dragandrop functionality. Now, the first thing we have to do is we have to create movie clips from each of these visual assets. So I’ll start with the white t-shirt, modify, convert symbol to symbol and I’ll call this one WhiteShirt. I’m using capital letters just drop the whole thing off, because we’ll be using external ActionScript3 class files and they usually start with the capital letter. So making allies a little bit easier here so this is the WhiteShirt and then similarly for the black shirt, I’m going to convert that into movie clip as well and call it BlackShirt. And then the shopping trolley over here, I convert into a symbol and call that Trolley.
Okay, now, next step. We are going to want to drag and drop functionality for the tshirts. I’m just going to start with the white tshirt for now. So, I’m going to jump in and create a new ActionScript file which will become the external code file for our white tshirt. And let’s save that first of all, most important step.
So we’re already here in the folder ready FLA I saved. In there, I create my package structure. So it’s Net and then dndigital, then inside dndigital another folder called dragdrop. That’s the project name and then in here, I create the WhiteShirt.as file. So this is the class file for the white shirt. And here we go, package—so the package reflects the folder structure that we’re in so net.dndgital.dragdrop and then curly brackets to create the package body.
Inside here we have a public class called WhiteShirt to match the filename and it extends the MovieClip class because this is a movie clip. The white shirt inside the flash is a movie clip and because we are using the flash MovieClip class, we need to import it. So outside of the class definition but inside the package, we import flash.display.MovieClip;. If you’re not familiar with this whole set up, please have a look at our other video tutorials which cover this in much more detail.
And then thing is I’m going to create the constructive for this class which again has the same name as the class itself, public function WhiteShirt, in here I will simply put a trace WhiteShirt constructor, so that because it working when we published the file. Now that we have the class file in place, I can go back into flash and then hooked up the movie clip symbol, the WhiteShirt MovieClip symbol with its associative class file.
So I go into the library. Right click on the WhiteShirts’ MovieClip and go into the linkage properties. Here I choose to export for ActionScript and then we simply amend the package structure. So net.dndigital.dragdrop.WhiteShirt, this is the class that will provide behavior will provide code for the WhiteShirt MovieClip. And you see here, you really benefit if you name your MovieClip symbols with the class name itself, so you have to do a little bit of folder thinking because then you only to write in the package structure here and you don’t have to come up with the new class name as well.
To test this, just click this little pencil which should open my class file. Yes, that all works fine. So I hit OK and then I run this and publish project in the debug output and we get WhiteShirt constructor. So the class is correctly link to the white tshirt. Great! Moving on, we want some drag and drop action. So I will go into the class file now for the white shirt and I will implement the drag and drop code. Let’s see how that works.
Trace can disappear because we’re finished with that. We’ve tested that, it works. We don’t want traces hanging around it in our production code. So the next thing is, well, I quite the get the mouse cursor, so I am going to switch buttonMode to true to get the mouse cursor. Okay, let’s just see that in action. So I’m going to publish and let’s just see that work. Okay, so we have a mouse cursor over the white tshirt. See the black tshirt doesn’t anything. White tshirt gets the mouse cursor. That’s a good stuff.
Now onto the drag and drag, we need to add some mouse event listener in here to interact with the mouse. The first even that happens on the drag and drop is that someone presses the mouse down on top of the white tshirt. I’m going to add EvenListener and it’s MouseEvent and the MouseEvent range to them is called Mouse_Do, so this when the mouse button is pressed down on the white tshirt and this is when we want to pick the tshirt and start dragging it to around. So mouse down and select that one and the EventListener I’m going to create is called Down with letters. Just clean up the—with here and then we implement the event and the function as a protected function called down and it receives a single argument which is the mouse event that triggered the event in the first place. Because we’re using the MouseEvent, we have to import it, we have to tell flash that we’ll want to import it into this class.
So up here, alongside the MovieClip, we also import flash.events.MouseEvent, and the again the code hinting the code completion helps us to write that code. Let’s just make sure this works. So when the mouse is pressed down on the white tshirt, I am just going to put a trace in here, saying down, so that we know that this is work. So we’ll press and we get the trace thing. Perfect! This is how I like to write code, step by step. You know it’s working when any errors happened, you know exactly which code to refer because you’ve written a few line of code and it becomes easy to debug and fix any errors.
So I can remove my trace statement. Now, we don’t need anymore. I simply called the built in method called startDrag. Flash will do the rest of the work for us here. So if I run this now, and I press down and start moving it around – Fantastic! It’s starting to drag, it’s dragging – actually if I let go of mouse button it’s still dragging and it’s also unfortunately behind all the other elements on the stage. So that’s a little bit awkward but at least it’s moving. We’re moving in the right direction. Let’s fix that one.
Next standard is disappearing behind the other elements on the screen. So I go back into my code and when someone presser the mouse down, on the white tshirt, I am simply going to say parent.addChild this. That has the effect of taking the WhiteShirt off the display list and adding it again to the top of the display list, so it ends up on top of all the other graphical elements. And this simple line of code, we’ll fix the program and if I run it now, pick it up, start dragging. It’s now on top of the other elements. So that’s what ruled. Good result there.
The next problem is that actually it doesn’t let go again. So it will keep dragging forever. I can't—after I release the mouse button already but I can’t actually stop dragging this. So let’s solve that after I solve the next step.