DIGI 260 - Lab 04 Home


Controlling Timelines
Nested Animation
As little code as possible

You can use your work from the previous lab as a starting point here, or create a new animation. Just be sure you have some nested animation so you can take advantage of scripting possibilities.

  1. Create three Button Symbols which will be used to start, stop, and rewind your animation. Try to design them so they fit visually with other content.

    start button

    Buttons should have four states, up, over, down, and hit. The hit state is particularly important, as it determines the hot or (inter)active area of the button. For full credit, each button should include some animation. There's some inspiration here.

  2. Make a Buttons layer on the main timeline, and put an instance of each button on that layer. Give each instance a name. It doesn't really matter what the names are, as long as you use the same ones to name your buttons as you do later in your Javascript. Instance names are added in the Properties panel:

  3. Create a new layer for Actions on the main timeilne. Select the first frame of the Actions layer, and then add the following code to the Actions panel:

    this.stop_btn.addEventListener("click", stop_function.bind(this));
    function stop_function(){
    	this.stop();
    }
    

    To review, this is what those bits of code mean:

    this
    refers to the main timeline
    stop_btn
    exactly the same as the instance name of the stop button on the stage
    addEventListener
    tells the button to pay attention to user input
    "click"
    the input to listen for
    stop_function
    the code which will run when the event happens, could be any name
    this.stop()
    tells the main timeline to stop playing; stop() is a method of the Movieclip object

    Note the small a in the frame where the code is. As you work, make sure all your code goes on this single frame.

  4. Hopefully the main timeline will stop well at this point! But any nested timelines will continue to play. You will need to name your character as well, anywhere it is used on the main timeline:

    instance name in properties panel

    Then you can refer to the character by name, and stop it when you stop your main timeline. The new code for the stop button would look like this:

    this.stop_btn.addEventListener("click", stop_function.bind(this));
    function stop_function(){
    	this.stop();
    	this.bot.stop();
    }
    
  5. Add code for the other two buttons. The code for the other buttons will be similar, though names of buttons and functions will need to change. Also, you'll need two other methods in your code:

    play()
    starts the timeline of a Movieclip object
    gotoAndStop(6)
    sets the Movieclip to a specific frame and stops playback

    Test everything thoroughly to make sure the buttons always function as expected!

Place copies of any required files (particularly .fla, .html, .js) in a folder named with your first and last names, and the number of the lab. .zip this folder and upload it using the D2L page for the labs. Don't forget to have fun!

This lab is worth five marks. This lab is due at the beginning of next class.

If you're finding this small bit of Javascripting in Animate fun, there's a good tutorial here which goes a little further into some of the possibilities.