DIGI 260 - Lab 05 Home


Controlling Timelines
Custom Page Transitions
No new Code

One nice thing about building your interface animation prototype in Animate is that you get to decide exactly how the content will move on screen to illustrate transitions, as opposed to picking from any predefined animations. Look here for an example of how this lab will work. You can also view the source files. Have a read through the whole lab, as there are a number of interconnected parts!

  1. Create a new Animate Document - HTML5 Canvas - and save it in a sensible location on your computer. Modify the Document Properties. Change the Background colour and the Stage Dimensions to something other than the default. You may wish to experiment with an aspect ratio similar to that of a mobile phone in portrait orientation.

  2. Before you begin work on your timeline animation, sketch out how all the different parts of the interface will move, so you'll have a sense of how complex the timeline needs to be. Think about how the user will travel to each piece of content, and how they'll get back to home afterwards.

  3. Create new Symbols in the Library for all interface elements. Anything which is going to be animated and/or reused needs to be a Symbol. Anything which is going to be clickable should be built as a Button Symbol. Buttons can be animated just like MovieClips. Don't worry about building animated buttons in this lab.

    symbols for anything which will move or be clicked

  4. When you're adding clickable content to the Stage, use the Properties panel to give the instances names so they can later be connected with code. Each time the content appears, it needs a name. (Note that if you duplicate a keyframe containing a named instance, the name is part of what's duplicated, which means it's easier to name things right away.)

    each button needs an instance name which can be added in the Properties panel

  5. Begin with the "intro" sequence. This animation will play when the site first loads, and anytime the user returns to the home/main menu. How will the interface come together? Give each animated instance a layer of its own; name your layers. Create a layer for actions right at the top of your timeline.

    the opening animation;  note a layer for actions

  6. Design transitions to/from at least three pages of content. Don't worry too much about what the content is; Lorem Ipsum and Lorem Pixel type content will be fine.

    many ux animation principles in action

    Other Examples...

  7. If you play through your timeline within Animate, you'll see all the different interface transitions one after another, with content appearing and then disappearing. We need to add a little script to control how this timeline plays.

    Use the actions layer for all script.

    Anywhere where the timeline should stop and wait for user input - such as the intro menu, and any content area - use this.stop(); like this:

    JS to stop the timeline appears on a number of frames;  always use the actions layer

    If you use Test Movie the site should play the intro and then stop. You'll now have a number of frames on the actions layer containing an a.

    Note all this animation happens on the main timeline, though some content could certainly be made with nested animation.

  8. Next we need code which detects presses of each button on the home screen and moves the timeline to the corresponding piece of content. Code on the waiting frame at the end of the intro sequence will now look something like this:

    this.stop();
    
    this.b3.addEventListener("click", b3_page.bind(this));
    function b3_page(){
    	this.gotoAndPlay(43);
    }
    
    this.b8.addEventListener("click", b8_page.bind(this));
    function b8_page(){
    	this.gotoAndPlay(13);
    }
    

    Your code may look a little different, depending on the instance names you have for your buttons - b3, b8 in this case - the names you choose for your functions - b3_page, b8_page - and the frames where your content animations begin - 43 and 13.

    code on the home frame and the timeline which contains the animations

    Test that your intro menu leads to individual pieces of content.

  9. When the user stops on a piece of content, they'll need a way to proceed back to the menu. Include a home/back button as part of the interface in each of these spots. In this example the home button is invisible and covers the whole stage.

    an instance of an invisible button, though its hit frame needs to contain some content

    Clicking this button needs to play the animation which shows the return to the home screen. In this case the Home button tells the timeline to continue where it left off, though you may have a this.gotoAndPlay(); directing the timeline to another location. Regardless, the script for this button should be placed on the intro waiting frame with all the other button-related code:

    this.bHome.addEventListener("click", home.bind(this));
    function home(){
    	this.play();
    }
    
  10. In this example, at the end of each content-out sequence a this.gotoAndPlay(1); is used to return to the beginning of the intro animation.

    when the content-out animation is finished the timeline script directs back to the intro

  11. Test your work thoroughly in the browser to make sure all the buttons always work, and all the content plays as expected.

  12. You may wish to look at some of the Basic options in the JavaScript/HTML area of the Publish Settings (under the File menu) to customize exactly how your work appears in the browser.

When you choose Test Movie from the Control Menu, you produce a number of files which are stored, by default, in the same place as your .fla file. Place copies of your .fla and other files 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.