Drag and Drop - Information

 
Index > Teachers Animation Toolkit > Drag and Drop > Information > Changing the look of the movie

This section is a little different because it deals with adapting the original template to change its appearance and to include a few extra features. Some of the 10 sections have a Flash document file associated with it and there will be a link in the text. Most are just adaptations of the template.

 

Remember to use Save As... to preserve your starting point and to save each major revision in a project folder.

 

The pdf of this page can be downloaded here.

 

Here are the 10 sections so that you can jump to them:

 

Adapting the text label text

Adapting the text label background
Changing the target boxes

Changing the movie's background

Editing the buttons

Adding extra stuff (such as logos, instructions)

Changing the score popup

Changing how the scoring works

Changing when the scoring is shown

Changing what happens when the user is wrong

Timing the activity

 

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

 

Adapting the text label text

   
  1. Open the Library window using F11 if it is not in view.

  2. Double-click on one of the text labels in the library e.g. word1.

  3. Use Ctrl and + if you need to magnify the movie clip.

  4. We will start by altering the text so, lock the background layer in the Timeline window.

  5. Click on the text (you will see the blue outline to show that it is selected).

  6. Use the Properties window to alter font, font size, font colour etc. Don't alter the type of text (it should be left as Static Text).

  7. Hold down the Ctrl key and tap E to stop editing the text and to see how the changes you have made affect how the text looks on the stage.

  8. Remember that you may have to alter the size of the backgound shape if you have changed the size of the text (see the information on Adding draggable labels instruction 12 onwards).

lock the background layer

 

selected text object

 

text properties

 
Top

Adapting the text label background

 
   

I decided that it would be most useful if all the backgrounds could be adapted together since I generally want them to be the same colour or all transparent. The backgrounds are not therefore edited inside each text label movie clip. Instead, there are two other movie clips called background and shape in the library; background is used to change transparency of the text label background and shape is used to change the colour.

   
  1. Double-click on the background movie clip in the library and magnify it if necessary.

  2. There is only one object in the centre. It should be selected (blue border) but click around until you find it if it isn't.

  3. Look down at the properties window and look for the Alpha property in the Color (Colour!) list.

  4. Use the slider to change the property e.g. 0% to make the background transparent and 100% to make it fully opaque.

  5. Use Ctrl and E to end editing and test the movie to find out the effect of changing the property.

selected object

 

color property to change alpha

   
  1. Double-click on the shape movie clip in the library and magnify it if necessary.

  2. Again, there is only one object in the centre. It looks a little different when it is selected because it is a filled shape and not a movie clip.

  3. Look down at its properties window. There are two properties, the line colour and style (this has a red line through it because this shape does not have a border) and the fill colour.

  4. Click on the fill box next to the paint pot and a colour chooser will appear. It also has some fill effects at the bottom.

  5. Use Ctrl and E to end editing and test the movie to find out the effect of changing the property.

  6. You can change the background shape altogether. Click on the shape and tap the Delete key to remove it.

  7. Use the drawing tools in the toolbar to draw a new shape. Experiment with the oval tool, using the Properties window to change fill colour and line colour and width.

  8. If you select the rectangle tool, the Options section at the bottom of the toolbar gives you a dialog to produce rounded corners.

  9. Remember that you will probably have to go back to the individual text label movie clips to change the size of the shape in the background layer so that the text neatly fits the new background shape.

selected fill

 

colour properties

 

tools

 

oval

 

options

 

rounded corners dialog

 

rounded box

 
Top

Changing the target boxes

 
   

The information page in adding target boxes (instruction 3 onwards) explains that you can alter the size of each box individually. However, all the boxes are instances of the box movie clip in the library and so any change we make to that movie clip, will be reflected in all the boxes.

   
  1. Double-click on the box movie clip in the library and then magnify the view if you need to.

  2. The box (lines and fill) are grouped together. This makes them easier to move about and resize but you can't edit each part separately. Make sure that the shape is selected (blue outline?) and then either right-click and select Break apart or hold down the Ctrl key and tap B.

  3. Something to note here is that the shape has a registration point - shown by the small cross. The drag and drop code relies on this being at X = 0 and Y = 0 so that it can calculate where to place the dropped text label in its centre. Make sure that you check this before finishing any editing, just type zeros into the boxes in the Properties window.

  4. You can now alter the line and fill using the Properties window as described in the section above. You can also get rid of the box and replace it with any shape you like but don't forget about the registration point.

grouped shape

 

broken apart

 

x and y properties

Top

Changing the movie's background

 
   

You have already seen how to replace the background with an image in the information page on adding an image to the background.

 

These instructions deal with changing the background and border colours.

   
  1. Click onto frame 1 of the background layer. The background already has a border and a fill and they will both be selected.

  2. Single click somewhere off the stage and then back on to the fill so that it is not selected but the border is selected (see image right).

  3. Use the Properties window to change the border properties (line colour, thickness and style).

  4. When you are happy with the appearance of the border, use Ctrl G to group the 4 lines. This will help separate them from the fill so that it can be dealt with separately. However, if you want to edit them again, you will have to use Ctrl B to break them apart first.

  5. Now click once on the background so that the fill is selected and use its properties to alter its appearance.

  6. Again you can tidy up by using Ctrl G to group the background (and separate it from the border) and then use Ctrl B whenever you want to edit it. If this places the fill group in front of the border group use Modify > Arrange... > Send backward to sort it out.
selected border
Top

Editing the buttons

 

Buttons are special movie clips with a different timeline that reflects the way they work. The aim here is to change the look of the buttons but leave their function the same.

 

However, there is nothing to stop you deleting a button that you don't want the user to operate (e.g. the show button). Simply click on it on the stage and use the Delete key to remove it. The button's symbol movie clip will still be in the library if you change your mind.

 
  1. Double-click on the reset button in the library. When it appears in the editing window, you will see that it has two parts, a text box (selected in the image right) and its bounding box. Each of these elements are in their own layer in the timeline.
button
   
  1. The timeline has four frames. This particular button only used two of them. The frames contain the state of the button when the mouse is not over it (up), when the mouse is over the button (over), when the mouse button is clicked (down) and finally an opportunity to create an invisible area which the button responds to if you don't want it to be whole button (hit).
button timeline
   
  1. Edit the button by clicking into the particular frame for the particular layer you want to alter and then use the normal toolbar tools and properties window to make your changes. The best way to learn is to play about, changing colours and fonts. You can do the same sort of things that you have learnt about for the background, targets and text labels.

    A top tip if you want to alter the font is to work in the up frame for the text layer and then copy that frame (right-click > copy frames). Paste it into the Over frame so that the text is identical and then alter it's colour etc.
   
  1. To add a Down state to the button where the text shifts position slightly, right-click on the Down frame in the text layer.

  2. Select Insert Keyframe from the menu. A keyframe is a frame that can contain different objects to other keyframes.

  3. Now click onto the text box in the edit area and then use the keyboard arrows to nudge it down and to the right. One tap right and one down should do it.

  4. Create a keyframe in the Down frame of the box layer as above so that the button has a background when it is clicked. Notice that the contents of the Over frame are copied by default.

  5. If you test the movie, the button should now have its extra state to give the user a signal that they have clicked.
add a down state
 
Top

Adding extra stuff

 
   

It is likely that you might want to add some other things to help the user or just decorate the movie. This section involves creating another layer (because it keeps things organised) and gives you the chance to try adding something new to it.

   
  1. Select the background layer (because you want a new layer above it) and then click on the new layer button bottom left in the layers list (or select Insert > layer).

  2. The new layer will be named by default. Double-click onto its name and rename it decoration.

  3. Click on frame 1 of the new layer decoration to ensure that any new items end up on the right layer. Another way to achieve this is to click on the little padlock above the list to lock all the layers and then click on the padlock in the decoration layer to unlock it.

  4. Select the Text tool in the toolbar and use the crosshair cursor to draw a text box out on the stage.

  5. Type some text into the box (do it now, an empty box disappears) and then alter the style of the text to suit its purpose.

  6. If you want to get the box to wrap, select the Text tool again, click into the text box and then use the cursor to grab the square resize handle (top right) and move it left to force the text to wrap.

layers window

 

new text box

 

selected text box

 

   

The decoration layer is a good place to put other things such as a jpeg school logo. Use the instructions given in the earlier section - adding an image to the background to import the image.

 

If the activity is a matching exercise where you want a set of images, each with a target box beside it and a text label to match with it, put the images on the decoration layer so that they sit over the background but behind the objects being dragged around.

 
Top

Changing the score popup

 
   

If you have made it through this far, you have already used the tools needed to change the way that the score popup looks.

 

The only new idea is why the score does not appear at the start of the movie but magically appears when the user clicks on the score button. If you look at the score layer, you will see that the keyframe that contains the score popup is all the way over to the right. Click on that keyframe and there is is. Without going into it in too much detail, when the user clicks on the score button, the code that is triggered by this event instructs the movie to jump to the frame labelled score. This reveals the score. When the user then clicks on the popup's OK button, another bit of code is triggered which instructs the movie to jump back to the frame labelled start.

   
  1. To edit the way the popup looks, double-click on the movie click called scoreboard in the library.

  2. It is made up of four objects, all on their own layer in its timeline.

  3. Most of them are objects that you are probably getting to be familiar with. The background is a rectangle, you will need to break it apart to edit the line and fill. There is a text box (You scored) and a button. You can edit all these using the instructions given earlier in this instruction sheet.

  4. However, the middle (empty) box is new. It is a text box but all the ones we have used so far are static (i.e. you put text in and it stays the same as the movie runs). This one is dynamic. It doesn't have any text inside it (yet) but it does have a code variable called _root.scorePercent attached to it. The code in the movie changes the value of this variable and the box shows whatever value it has at that moment in time.

    So, even though it looks empty, you can still alter the text properties and whatever value is displayed will use them.

score popup symbol

 

dynamic text box

 
Top

Changing how the scoring works

 
   

It might not always be appropriate to have the score as a percentage. It might make more sense to show it as a simple mark out of the total possible. This involves a tiny bit of code editing (since the code for this is already in the original template file).

   
  1. Click onto frame 1 of the scripts layer and press F9 to bring up the code window.

  2. Scroll down until you find the code below. It is near the bottom of the editable region.

// this variable sets how the score is displayed
// 1 = percentage (50%), 2 = score out of total (5/10)
var scoreType = 1;

  1. Alter the value (in red) to display the score as is most appropriate.
 
Top

Changing when the scoring is shown

 
   

The default setting is for the score to be shown when the user clicks on the score button. You might decide that it is better if the score is shown all the time and so the user gets instant feedback. There are other ways this can be done - a message that pops up saying "Well done" or a big green tick appears for a few seconds.

   
  1. Click onto frame 1 of the scripts layer and press F9 to bring up the code window.

  2. Scroll down until you find the code below. It is near the bottom of the editable region.

// this variable sets if the score is shown in a dialog or all the time
// 1 = dialog, 2 = continuously
var scoreDialog = 1;

  1. Alter the value (in red) to display the score differently.
 
Top

Changing what happens when the user is wrong

 
   

Finally, there are a number of other options that you might want to consider.

 

The first is a setting already in the template that counts how many times the user tries a particular label and then can be instructed to only credit the score if the label was used correctly the first time.

 

Bring up the code window for frame 1 of the scripts layer. Scroll down until you find the code below and then change the value of the attempts variable (in red).

 

// this variable sets if you allow the user to have multiple attempts for each word
// 1 = yes, 2 = no (only scores first time)
var attempts = 2;

 

The variable is set to only allow one attempt by default.

   

The second idea is to indicate which answers are wrong when the user clicks on the score button. The incorrect answers return to their starting point so that the user can try again. Try the three different values for the sendWordBack variable to see how this works.

 

// this variable sets if a wrong answer goes back to its starting position
// 1 = go back, 2 = stay, 3 = stay until select score
var sendWordBack = 3;

 

Another option is to have a confirmation tick or cross appear each time a label is dropped. If you hunt around you will find an apparently empty movie clip on the stage called message. Have a look at its symbol in the library. The text layer is the one to edit if you would prefer a different message.

 

The option is editied in code in the same way as the other examples above.

 

// this variable sets if you want the tick or cross to appear
// 1 = yes, 2 = no
var tick = 2;

 
Finally, you might want the movie to shuffle the text labels each time it is played or reset. The option to select this is given in the text code shown below.
 

// this variable sets if the text labels are randomised
// 1 = yes, 2 = no
var randomWords = 2;

 

There is one other option. The information on that one can be found in the section on adapting the template for different types of activities.

 

Timing the activity

 

The template contains the code to time the activity by default. All you have to do is choose if the user sees the stopwatch control.

 

Bring up the code window for frame 1 of the scripts layer. Scroll down until you find the code below and then change the value of the displayWatch variable (in red).

 
// this variable sets if the stopwatch will be used
var displayWatch = true;
 

The function runs the stopwatch until it calculates that all the answers are correct. This means that if you have set the scoreDialog variable to 1, the user has to click on the score button before it checks it and turns off the stopwatch (if the score is 100%).

 

Back to the menu page