In
Animate CC and actionscript 3.0. You can also make items on your stage drag and drop a ball
Which means you can create games?
Where users have to drag and drop different items to do a matching game?
Or if you just want people to be able to move or rearrange things around on stage
This is the most basic version of the drag-and-drop
Script. It's just gonna. Be only drag and drop script
There's other things that you can do such as working with X&Y coordinates like if you wanted to build a puzzle
Or it have pieces where people can build a virtual puzzle, and then they would kind of snap to their different areas
But that involves much more complicated
ActionScript, and that's not what this video covers
This is just basic turning objects into drag and droppable objects
So let's take a look at to this project that we have so far we have
the name of the game come in we have audio playing in the background and then we have a
button that says start and
When it a person clicks start it jumps them to this frame where they can enter their name
And then they can click instructions, which jumps them to this frame, and you can't see it, but here
We have some text where it puts the name
They gave us in the previous screen
tells them they need to rearrange the planets and the labels and try to put them in the correct order on the next screen and
Then when they click play now
it's gonna jump them over here to where they can actually start dragging and dropping these planets and their labels so as
I'm looking at this this screen should look a lot more jumbled up
It should kind of have all these planets scattered and all these labels scattered so that people can start
Reorganizing them, but what I like to do is I always make this part of my game or project
Organized so that once I have it all organized I can copy that
frame and have the answers
Frame or the answer screen which is going to be a hundred on the one hundred and ninety fifth frame
I can have that all organized for me, so what we have here is each of these are movie clips
And you should know by now if you're watching this video and working on ActionScript
Then it's it's a little bit more advanced than basic animate CC
and
If you know basically animate CC you should know how to make movie clips if you don't know how to I have some videos on
My youtube channel so search for animate CC tutorials, but basically I had a circle align and text
I highlighted all three went up to modify chose convert to symbol, and then if you look in my library
I have them all named
MC for a movie clip and then whatever
The symbol is so this is MC Jupiter and then down here I have
MC label Jupiter so that it's easy for me to see
Based on the names they're not generic. I can easily see what's what so each one of these has their own
They're all movie clips, and they are all properly named over here
okay, so
We also have this answers button and it has an instance name of answers underscore BTN
And now we just need to make all these drag and drop a ball
But because these are all organized the way we want them to be for the answer screen
We're gonna go ahead and copy everything so we're gonna go to the
195th frame on the actions layer and choose insert blank keyframe, and that's gonna allow us to add some actions for that answers
Page and then or answer screen and then for the planets and labels we want to actually copy what was on here
So we're gonna right-click and choose
Insert keyframes so not a blank keyframe
Because a key frame is gonna
Copy whatever was on the keyframe before so all of these ones don't actually need artwork on there
they're never even people are never even gonna see these but you could right here right click and then go down to clear frames if
You wanted to so that they were totally empty?
And the jumbled ones are gonna be here and all the answers are gonna be over here
okay, so
Dynamic texts and instructions, and then we have the Sun
That's what we're missing or missing the Sun in the line so right-click over here insert keyframe
Same thing we can
Shift click all of these and do
Clear frames, and then we just need a label here so that this play button
Back or this answers button can jump us over to the answer screen
so the answer screen doesn't need an answers button and
Let's go ahead and put this as
answers
Screen so there is our faint frame label, so now we can jump this answers button to that frame label
Okay, so now that we have all of these on here
And they're perfectly organized we want to differentiate
This version of Neptune versus this version of a Neptune where this one's going to be the dragon droppable
So this one I'm gonna call
answers Neptune
And
I'm gonna keep that same theme going so I'll copy and
Paste it for each of these
and
Just change each one of them, so I don't think I changed this one
So this might take a little bit too long and you're probably you probably don't want to see that but
What is this Jupiter okay so then each one of these need to have their own unique instance name as well
So I'm gonna call this answers
label Neptune
so I can just
Put
L4 label
So as you can see each one of these are different and by the way
this
Movie clip is called, MC
Uranus and it should not be the exact same name for instance instance name should always be different
Than its actual symbol name so make sure you're you're doing something unique there
So let's do this one
answers L Saturn and
This is answer Saturn answers Jupiter answer L Jupiter.
I can't remember if I'm putting answers yes, okay, so this is a good reason why you want to copy and paste
Because if you get one wrong and you put answer instead of answers it could affect your code
We don't really need code on this answers page
we just need to make sure that these don't have the same instance name of what came before it because it could mess up the
code on the previous screen so
Everything needs to be unique, and I messed that up a little bit, okay, so pretend we did all this because I'm sure
You don't want to watch all of this stuff
So let's go back over here and get back to the actual drag and drop so what we're gonna do is again
we need to have a
Specific instance names for these so this one's gonna. Be called move
Saturn and then I'm gonna copy that and again
these each should be
unique so
Move Uranus move
Neptune and
Then click on this one
And this one's gonna be moved Saturn or move L Saturn move label Saturn
And then this is gonna be move L
Uranus that's such an unfortunate name
Okay
All right so pretend we did that for all of them so once all of these have instance names
And they are unique and they're different than the instance names of the answer screens
You can start jumbling all these around if you want to you don't have to do it right yet because now we need to add
our drag-and-drop script, so we're gonna go ahead and go to
window actions to bring it up and my actions is always right here and
In order to make this drag-and-droppable you're gonna click on the object so right here
I'm going to click on Neptune, and I'm gonna go to the code snippets
ActionScript and
Let's see I can't remember I always forget
It's actions
So here's your drag and drop so it has to have an instance name because it's gonna add that instance name here
So if you already have the instance name when you click on the object and then double-click to add the script it's gonna
Save you a lot of time so in here
It's gonna say move Neptune so anything with that instance name, which we know we gave it to this object here
It's gonna listen for a mouse down so when a mouse clicks and holds down on that particular object
It's gonna perform
This click to drag underscore four and this underscore four just means that I have used three
Three other versions of this particular function and it needs to have a unique number
So that it doesn't confuse it with the ones I used previously
It doesn't look like I used it, but that's just because before I made this tutorial video
I had created three already just to test it out and see if it would in fact work so um
Ignore that fact. I can even get rid of that if I want to but it
Remembers internally how many you created so the next one?
I create it's probably gonna make it underscore five anyway
So that doesn't matter you just want to make sure that it says underscore four underscore four and that you know these are all
Like paired up, and they're the exact same name
so it's gonna listen for that Mouse down and when it does it's gonna perform this function and here's where we define what happens when
That function is performed what that's going to do is it's going to take that object called move neptune
And it's going to allow you to start a drag
Then it's gonna say okay
stage when it feels a mouse up its going to
Release and that means it's going to take that object with the move neptune name and it's gonna stop the drag now if for some
Reason it gets sticky like you release the button and neptune is still hanging on to your mouse
It shouldn't be doing that it's fine to leave this as stage
But if for some reason it does you can put this as move
Neptune just to make it really specific so you can do that as well so every single one of these objects is gonna have this
Script, and the only thing that's really gonna
Change is probably these numbers because they're all going to be the same function so they have to have a unique numerical
Indicator at the end and then these instance names will change, so if I hit enter/return
And I click on the planet uranus
I can go to code snippets
Drag and drop see how it puts the instance name in here
It's gonna say underscore five again
So this needs to match this everything does so that's great that it adds all that script for us
And then we just have to basically do move
Uranus and
Same thing here so this can go pretty fast and you can even if you wanted to you know just copy and
paste
so if for some reason you get errors
You need to check and see if your instance names are right or wrong because if you didn't capitalize
Saturn when you when you made that object, but you capitalized it here then you're gonna have a problem
if for some reason this has 6 and this says 5 or
Something's wrong here. That's going to cause a problem
So it's usually when you have an error with this type of a project or drag and drop. It's usually
paying attention to that detail and making sure that all of those instance names line up so as
We move through these three. I can come in here and let's start doing the labels and
double click again drag and drop and
Copy and paste this
All right
So once you have all of that stuff done for this particular game
Screen where we don't want them to be in order because we're basically telling them
You know you should put all these in order so we're gonna put those all jumbled up
And I'm not going to move the ones. I'm not gonna move the ones
I haven't done yet
But I just wanted to show you so if I kind of move those around I would jumble them all around here
And then have people put them in order
So if I go and test this out I'm going to click command S
Or ctrl s to save and then do command return or ctrl enter to play
It's so loud okay, so we're gonna enter user name
See if it comes back, and it did so now when we go to play
I should be able to drag and drop and when I let go it
Should release those items and then when I click answers oops see there's a problem
So we're gonna go back in and this is where on this particular ActionScript. We need to go to answers code snippets
go to timeline navigation click to go to frame and stop and
We're gonna have it go to this frame and remember
We made a label here called answer screen so back here on that ActionScript instead of having it
Go to frame 5. We're gonna have it go to answers
screen
Ok so then
It's just a matter of testing that out and seeing if it works and it will and then those four items are drag-and-droppable
So it's just a matter of me
Adding all of that code and making sure those instance names work here if for some reason it gives you an output error those are
Usually clues as to where something's going wrong in the code
So if it tells you something and it gives you the hint of Mars
Then look through your Mars script and look at your instance names, and see what is not matching up