Drag and Drop - Information

 
Index > Teachers Animation Toolkit > Drag and Drop > Information > Adding draggable labels to the movie

Here is what we are aiming for by the end of this section.

 

If you would rather work from paper - download a pdf of this page from here.

 
 

This section of the tutorial deals with creating a set of text labels that can be dragged by the user and dropped where they belong. Each label is just a text box with a background and a small amount of code attached to it so that it behaves correctly when the user clicks on it or releases the mouse button. There is also a bit of code in the movie to help organise these objects (movie clips).

 

The template already has two labels (word1 and word2) to show you the ropes. All you have to do is create as many extra copies as you need, repeating the instructions below as many times as is necessary.

 

Assuming that you are working your way through the tutorial and have coastal_features_1.fla loaded, save it as coastal_features_2.fla. Saving major revisions with a different name is good policy, it allows you to go back to an earlier version when things go pear-shaped.

 

This section is quite complicated so save regularly and don't be afraid to reload a previous version and try a step again.

   
  1. To start, you need to work with the library. This is where Flash puts all the objects in the movie. You are going to duplicate the object called word1 in the library and then edit each duplicate before putting them on the stage so that they will appear in the movie. Open the library by pressing the F11 key.

  2. You can tidy the screen a bit by docking the new window rather than have it floating about in front of things. Take the mouse pointer over to the five little dots on the top left of the library window and drag it over to the right of the stage. A dark outline shows a place where it will happily dock with the editor.

  3. Right-click on the Movie Clip called word1 and select Duplicate from the menu that appears.

  4. When the Duplicate Symbol dialog appears, change the name to word3 (this being the next label's name) and check that the Movie Clip option is selected. Then click on OK and the symbol will appear in the library.

  5. We will need five labels for the activity so repeat this to create word4 and word5.
the library
   

So, you now have five labels that can be dragged around the screen. The trouble is that they don't contain the text that makes sense for the activity so they need to be edited.

 
  1. Double-click on word1 in the library. The normal stage will disappear and the movie clip takes its place ready to be edited.

  2. Hold down the Ctrl key and tap the + key to magnify the object, making it easier to edit it accurately.
  1. Select the text tool in the toolbar (usually to be seen on the left of the screen - if it is not visible, select Window > Tools).
text tool
  1. Use the tool to click into the text and place the cursor. You can then backspace to remove word1 and replace it by typing wave cut platform (or your own label for your own activity). The text will wrap inside the box but don't worry, you can resize the box to get it to fit properly.
place cursor
  1. Go back over to the toolbar and select the Arrow Tool. Take the arrow cursor over to the text box, to the square handle in the top right corner. Use the handle to drag the text box out until it resizes to allow the text to fit on one or two lines. The choice is up to you, it probably depends on how much room you have on the stage.

  2. You should now lock the text layer so that the rest of the editing will leave it unaltered.
resize text box
  1. Click onto the background layer to select the shape behind the text. This gives it a background for the cursor to hold on to when it is being dragged.

  2. Select the Free Transform Tool in the toolbar.

  3. The background shape will show resize handles. Use them to drag the shape out so that it provides a background behind all the letters in the text box. The shape is resized around its centre and so you may need to change to the Arrow tool to drag it correctly over the text. The aim is to get the shape to occupy the same space as the text.

background box

 

free transform tool

 

resize background

  1. An alternative to fiddling around with the Free Transform Tool is to select the text (unlock its layer first) and then check its width and height in the properties window. The properties window should be at the bottom or side of the screen, if not, you can open it from the Window menu.

    Lock the text layer and then select the background shape.

    Type the same width into the Properties window (W:) to quickly make it the same width as the text. Repeat this for its height (H:).

  2. You can nudge the shape around a bit using the arrow keys as long as it is selected.

  3. A word of caution here. You can edit the background size and position but don't delete it and add your own shape. There is a way to do this and instructions can be found later in the tutorial. The background shape is a separate movie clip and it contains the code that allows the whole text label to be dragged and dropped.

  4. Finally, hold down the Ctrl key and tap E to stop editing the word1 movie clip and to return to the stage.
properties window
   

You will notice that the word1 movie clip already on the stage has changed to reflect the editing you did to its description in the library. The object on the stage is called an instance of the library item.

 

If you have found all of this very tricky, don't worry because you now need to repeat the procedure for the other text labels. You will get plenty of practice!

 

Edit word2 to contain arch, word3 to contain stack, make word4 cliff and word5 cave. Don't forget to resize each of the background shapes so that each text label can be picked up by the mouse.

 

When you have added the correct labels to each of the text movie clips, drag and drop word3, word4, and word5 onto the stage and drag them to a suitable starting point.

   

So, you now have a set of text labels to match up with the features on the diagram. However, Flash needs a name for each one so that you can refer to them.


  1. Select the label containing the word stack and then look at the Properties window. You will see that it is waiting for an instance name.

  2. Click into the box and type in word3. You don't have to give it the same name as the movie clip it is created from in the library but the code assumes that all the text labels are named "word" followed by a number, so stick with this convention.

  3. Repeat this to name word4 and word5.

instance name

 

instance name

   

The end is now in sight (he lied). You have the labels and the code can find and refer to them to make them do clever things like go back to their start position if the user gets them wrong. When you test your movie (Control > Test Movie), they should allow themselves to be dragged and dropped.

   

Although the template takes care of the code needed so far automatically, I have included the actions attached to the background of each word movie clip so that you can see what is going on.

 

on(press){
_parent.startDrag(false);
}

 

on(release){
stopDrag();
_root.overBox(_parent);
}

 

The code gives each label two behaviours.

 

A mouse click is detected with the first function and the parent clip (the label) is dragged around so long as the user doesn't let go of the mouse button.

 

If the user does let go, the second function responds by stopping the drag operation and by calling a function on the main timeline to check if it is over a target box.

 

Back to the menu page