Index > Teachers Animation Toolkit > Mask

A first idea for a starter.


You import an image into the movie and it is revealed a bit at a time, either when a student clicks on a square or automatically after a given time delay.


It could act as a trigger for the lesson or just get them thinking as they come in.


The movie is adapted by adding your own image and by setting a few variables if you want it to respond differently.


download the file (fla)

  1. Start by selecting an image appropriate to the lesson. The stage size is 800 x 600 so you need an image at least 600 x 480 so that its quality is maintained when it is stretched to screen size.

  2. Select the background layer in the movie and make sure that the current image is selected. Tap the delete key to get rid of it and then open up the library (F11) to delete the jpeg in there, otherwise the final movie will be huge.

  3. Hopefully, you have your image resized to 800 x 600 somewhere on your hard drive. Import it to the background layer and check that it completely fills the stage and that its X and Y coordinates are both 0 so that it is centred.

  4. If you save it and test the movie, it should work as above. However, there are some modifications you might want to play around with. Bring up the code in the actions window (F9) on frame 1 of the scripts layer.

  5. There are three settings that you can alter:

    game.spacing = 100; gives the size of the grid squares in pixels. Try different values but remember to make sure that it will always divide into 800 and 600 so that the grid completely covers the image.

    var gameType = "click"; tells the movie to wait until someone clicks a square before the image under it is revealed. Alternatively try var gameType = "random"; to allow the movie to randomly select squares and reveal them one by one.

    If you try the second option, you will need to set var timeInterval = 5; to the time (in seconds) the movie waits before revealing the next square.

    Finally, var revealType = 1; tells the movie to reveal a square (whether it is clicked or at random) and leave it visible. var revealType = 2; can be used to tell it to hide the square after a short pause.

  6. If you decide that having the Show and Reset buttons on screen are too tempting for the students, delete them, the movie responds to S and R to carry out the same functions.

  7. You might feel that a square movie is more useful for the sort of images you have. Alter the stage size (Modify > Document...) to a more appropriate height and width and then change the values of game.columns and game.rows in the code.