The great beauty of the World Wide Web is that it’s interactive. Unlike a static newspaper or magazine, with a mouse click or a finger swipe, you can make something happen. Perhaps you’re flicking your way to the next photo in a slideshow. Or maybe you’re jumping to view a new segment of an animation or movie. When you’re building websites, the best way to hold your audience’s attention is to put them in control of their experience. Let them turn features on and off. Let them quickly access the content that’s most important to them. Let them control the speed of the slideshow, viewing each image just as long as they want.
This chapter shows you how to give your audience interactive control over their web experience. As a developer, Animate gives you tools called triggers and actions. You get to choose which events act as triggers. It might be a mouse click, or it might be the playhead reaching the end of the timeline. Then you can specify the actions that take place. For example, you can change the size, color, or transparency of a clicked element, or you can jump to a new point in the timeline. As always, Animate translates your project into JavaScript/jQuery code, but it makes development easy for you. In some cases, adding a trigger and an action is as easy as choosing items from a menu. In other cases, you’ll need to tweak the code a bit to make it work according to your needs. This chapter walks you through the process. You’ll learn how to use triggers and actions to do things like showing and hiding elements on the stage. You’ll see that the timeline has some special features when it comes to triggers. Near the end of the chapter, you’ll revisit the slideshow project from Chapter 2, learning how to make it interactive.
If you’re building interactive web pages, you’ll love triggers and actions. The very words “trigger” and “action” describe how they work. Some event takes place (the trigger), and that makes something happen (the action). Triggers are attached to elements like the stage, the timeline, a rounded rectangle, a car graphic, or a box of text. That means you have different triggers for different elements, as shown in Figure 5-1. A mouse click, for example, is an obvious trigger for an element on the stage. However, you can also create a trigger in the timeline. For example, when the playhead reaches the end of the timeline (complete), you can specify an action like going to another point in the timeline to start playing again (“Play from”).
Figure 5-1. As you can see here, different elements have different types of triggers. The timeline (left) has triggers like play, complete, and stop. A graphic like a rectangle (right) has triggers like click, mouseover, and touchmove.
Building this Animate-style interaction or automation involves three major steps:
Choose an element.
Set the trigger.
Specify the action.
Notice the icons that look like curly brackets in Properties, Elements, and the timeline (Figure 5-2). Animate calls these Open Actions buttons, and by design, they are already attached to specific elements. See how each element in the Elements panel has Open Actions buttons? The timeline, even though it’s not included in the Elements panel, has its own Open Actions button. Click one of those buttons, and a panel opens with the name of the element in the panel’s title bar. You’re immediately prompted to choose a trigger, like click or dblclick. Once you’ve done that, you’re two-thirds of the way home. The last thing you need to do is specify the action, which you can do by choosing from the buttons on the right side of the Actions panel. These pre-built actions pop the necessary code into your project and display it in the panel, where you can fine-tune it when necessary.
Tip
At a glance you can tell whether an element has any triggers and actions attached. If the element has none, the brackets are empty and appear grayed out. If there are triggers and actions attached to an element, the brackets are bright white and there’s a dot filling the inside.
Figure 5-2. The first step in creating a trigger/action combo is to click an Open Actions button next to an element that’s in your animation. Open Actions buttons look like small brackets.
Note
When Animate adds triggers and actions to your animation, it’s actually writing JavaScript/jQuery code. You view this code from the comfort of a panel with buttons. This arrangement shields you from some of the nitty-gritty details, but if you want to roll up your sleeves and make changes to the code, you can do that, too. Wondering why Animate uses curly brackets for the Open Actions icons? It’s appropriate because JavaScript uses curly brackets to enclose the methods and functions that provide action.
The easiest way to understand how to use triggers and actions is to put them to work. Here’s a bare-bones exercise that shows how to attach a trigger and an action to an element on the stage.
Go to File→New to create a new Animate project. With the stage selected, in the Properties panel’s Title box, enter the name Action Packed.
You don’t have to name the stage element for your animation to work; however, the stage title is displayed as the page title in web browsers. If you don’t specify a title, you see Untitled in the tab for the page.
Choose File→Save and save your project as Action Packed in an empty folder.
Now you can save the file quickly with a simple Ctrl+S (⌘-S).
With the Rounded Rectangle Tool (R), create a rectangular object and give it the ID Box.
Size, color, and other properties don’t matter much for this quick exercise.
Right-click (or Control-click) on Box and choose Open Actions for “Box” as shown in Figure 5-3.
The Actions panel for Box opens with the triggers menu displayed, as shown in Figure 5-4.
From the Triggers menu, choose click.
The click trigger is the first option on the triggers menu. If the triggers list closes before you select a trigger, click the + button to show the list again, as shown in Figure 5-6. After you choose click, the menu disappears, and some text is automatically added to the Box actions. It reads:
// insert code for mouse clicks here
This text is Animate’s way of prompting you, explaining what you should do next. It’s actually a comment. Comments in JavaScript code don’t make anything happen; they’re used to provide information. Edge Animate comments are a different color from the actual code, making it easy to tell them apart. For more details, see the box on Many Ways to Comment.
Tip
If you’d rather not see Animate’s comments, you can turn them off by clicking the button in the upper-right corner of the Actions panel and turning off “Include Snippet Comments.” The other options in that menu let you change the size of the text used in the Actions panel and show or hide line numbers. (The line numbers to the left of the code give you a handy reference if you’re working and communicating with a team of developers.)
On the right side of the Actions panel, click Hide Element.
The JavaScript/jQuery code to hide an element is displayed in the Actions panel. As explained in the box on Many Ways to Comment, comments are displayed in a different shade of text. That means the only line of active code in the panel is the line that reads:
sym.$("Text1").hide();The word “Text1” is automatically selected, because you need to change this word for your code to work. You need to tell Animate exactly which element you want to hide.
Replace “Text1” with “Box”.
Make sure that the word Box remains inside the quotes, like so:
sym.$("Box").hide();When you’re finished, the Actions window looks like Figure 5-4.
In the upper-right corner of the Actions panel, click the X button.
The Actions panel for Box closes.
Press Ctrl+S (⌘-S) to save your work. Then press Ctrl+Enter (⌘-Return) to preview your project in a browser.
To test your triggers and actions, you need to preview the project in a browser. Animate’s workspace doesn’t respond to clicks and other triggers.
Figure 5-4. When you’ve finished tweaking the code for the Box element, the Actions window looks like this. You use the buttons along the right side of the Actions window to add actions (JavaScript/jQuery code) to your project.
When you test this first trigger and action project, you see your web page called Action Packed. Your rectangle is displayed on the page, and when you click it, the rectangle disappears from view. If your version isn’t working as advertised, go back and double-check that single line of code (step 7). Make sure the spelling and capitalization are correct. JavaScript and jQuery pay attention to capitalization.
Even when it works properly, the project at this stage is a little underwhelming, but it does hold promise for the future. In the next section, you’ll add another element and more triggers. You’ll see how a trigger in one element can affect another element.
Note
At this point, don’t worry too much about parsing the JavaScript/jQuery code. Chapter 8 provides more complete details.
The exercise on Trigger Your First Action provided a bare-bones example for attaching a trigger to an element and then specifying an action that changed that element. In that case, the click trigger was attached to a rectangle named Box. Then the action code made the box hide, so Box was no longer visible on the stage. Fine as far as it goes, but that leaves the audience with an empty stage and nothing left to do. For a next step, you can add another element to the stage—a text box that appears when the box disappears. With a little trigger/action magic, the text can make the hidden Box element reappear. The obvious difference in this example is that the trigger in one element makes a change to a different element.
This exercise continues the Action Packed project started on Trigger Your First Action.
If necessary, go to File→Open to open the Action Packed project.
The elements in this project are the stage (named Action Packed) and a rectangle (named Box). A click trigger and Hide action are already defined for Box.
With the text tool (T), create a text box and type Bring it back! Name the text box BringBack.
Like the rectangle, the text box is an element. It’s listed in the Elements panel and has a number of properties. You can create triggers and actions for a text box.
Right-click the text box named BringBack and choose Open Actions for “Bring-Back.”
The Actions panel for BringBack appears, and you’re prompted to choose a trigger, as shown in Figure 5-5.
Choose the click trigger.
The triggers menu disappears, and you see the actions listed on the right side of the Actions panel.
Click the Show button.
Comments and code appear in the Actions box. Again, the word “Text1” is preselected. This is Animate’s subtle hint that you need to edit the code at this spot. You need to tell Animate what you want to show.
Replace Text1 with Box.
You want the hidden Box to reappear when someone clicks “Bring it back!” Remember that “Box” needs to remain inside the quotes like this:
sym.$("Box").show();Go to File→Save. Then press Ctrl+Enter (⌘-Return) to preview your progress.
If all goes according to plan when you test Action Packed in your browser, Box disappears when you click it. Then when you click on the Bring it back! text, the Box graphic reappears.
Now, at least, there’s a way to bring Box back after it disappears. The example also proves that a trigger in one element (the text box BringBack) can make changes to a different element (the rectangle Box). The technique followed the same development process: Choose an element, set the trigger, and specify the action. Still, there’s something a little odd about this animation, as simple as it is. It’s strange to have the text saying, “Bring it Back!” while the box is visible. It would be better if the text was hidden when the box was visible and vice versa. That’s the task for the next section, where you’ll also learn how to use the timeline and stage to trigger actions.
The two earlier examples showed how to attach triggers and actions to elements on the stage. Even though they’re different types of elements, the rectangle and the text box used very similar triggers and actions. Not so with the two objects next up for discussion: the stage and the timeline. The stage shows up in the Elements panel, but because it is a container for the other elements, it has different properties from a graphic or text box. The same is true when it comes to triggers for the stage. You open the stage’s actions by clicking the bracket-shaped Open Timeline Actions button next to the stage in Elements, Properties, or the timeline. You’ll see a list of triggers, including some that weren’t displayed for the rectangle and text box.
The timeline also has its own unique triggers. Technically, the timeline isn’t even an element. It’s not listed in the Elements panel. On the other hand, the timeline does generate events, and those events can be used to trigger actions. To review the triggers for the timeline, click the bracket-shaped Open Timeline Actions button next to the word “Actions” in the timeline. You’ll find these triggers:
In the case of the Action Packed project, you want Box to be visible at the start, but not the “Bring it Back!” text. Reviewing the stage and timeline actions, there seem to be two likely candidates for hiding something at the start. The stage’s compositionReady trigger runs at the start of an animation. Likewise, the timeline’s play trigger runs when an animation begins to play.
Spoiler alert! compositionReady is the better choice; however, you can see why if you try the timeline’s play trigger first. Not only that, but you’ll also learn how to remove an unwanted trigger from your project. Follow these steps to test the timeline’s play trigger. With the Action Packed project open in Animate, follow these steps:
In the timeline, next to Actions, click the Open Actions button.
The Default timeline Actions panel opens, and the menu shows four triggers: “update,” “play,” “complete,” and “stop.”
Choose the play trigger from the list.
If the list disappears before you make your choice, click the + button in the upper-left corner.
From the list of actions on the right, click Hide Element.
The generic code to hide an element is displayed in the Actions panel. The word “Text1” is preselected, because you need to change this text to indicate the element that is to be hidden.
Replace “Text1” with BringBack.
BringBack is the ID or name for the text box that says, “Bring it Back!”
Click the X button in the upper-right corner of the Actions panel.
The Default Timeline Actions panel closes.
Press Ctrl+S (⌘-S) to save your project. Then press Ctrl+Enter (⌘-Return) to preview it.
When you preview your animation, you may see a little flicker at the beginning where the BringBack text appears briefly on the stage before it’s hidden. This is one of the reasons why it’s not the best option for this job. The other reason is that play trigger goes into action whenever the timeline begins to play—not just at the beginning of the timeline. The compositionReady trigger works differently. It triggers when the Animate project is first loaded into a browser. That means it triggers once at the start. As an added benefit for this job, the text is less likely to be displayed and then hidden.
Removing a trigger or action from your project is as easy as clicking a button. In the case of the Action Packed project, you want to remove the play trigger and its related action from the timeline. Here are the steps:
In the timeline next to Actions, click the Open Actions button.
The Default Timeline Actions panel opens. The title bar of the Actions panel names the element. In this case, it says Default Timeline. Tabs near the top of the panel show triggers that are attached to the element. In this case, there’s only one trigger in use: “play.”
With the Play tab selected, click the minus button (–) in the upper-left corner (Figure 5-6).
Unless you have more than one trigger attached to the timeline, the Play tab is already selected. When you click the minus button (–), the entire tab is removed and the Actions panel is empty.
Click the X button in the upper-right corner.
The Actions panel closes.
Animate doesn’t give you a warning or an alert when you delete a trigger and its accompanying actions. Just whoosh and everything’s gone. However, if you make a mistake, you can bring the trigger and actions back as long as you do it right away. Just use your good old friend Edit→Undo (Ctrl+Z in Windows or ⌘-Z on a Mac).
Having tried and removed a timeline trigger to hide the BringBack text box, it’s time to try the stage’s compositionReady trigger. compositionReady runs once when the HTML code is read by a web browser. It sounds like the perfect tool to hide an element at the start. Then you can use another trigger to show the element at the right moment. By now you probably know the drill for adding a trigger and the Hide action; however, here are the steps as a reminder:
In the Elements panel, click the Open Actions button next to the stage.
The many triggers for stage appear in the open menu. Fortunately, compositionReady is at the top of the list.
Click compositionReady.
The compositionReady trigger tab is created in the Actions panel, and you’re ready to code.
On the right, click the Hide Element button.
The code for the generic Hide Element action appears in the panel.
Replace “Text1” with “BringBack”.
BringBack is the ID for the text box. Remember to leave the quotes around “BringBack.”
In the upper-right corner, click the X button.
The Actions panel closes.
Press Ctrl+S (⌘-S) and then press Ctrl+Enter (⌘-Return).
The first command saves your project. The second previews the project in your browser.
Now the text box is hidden at the beginning of your animation. However, when you click Box, the box disappears and there’s no way to bring it back. You need to tell Animate exactly when you want the text box to show up.
It just so happens, you’ve already created the proper trigger to make the BringBack text appear. It’s Box’s click trigger, the same trigger that makes Box disappear. All you need to do is add code to show the BringBack text box. You can tell that Box already has at least one trigger and action, because the bracket-shaped button is next to it in Elements and the timeline is bright white and not grayed out. Here are the steps to open the actions and make some changes:
In Elements, click the Open Actions button next to Box.
The Box Actions panel opens. In this case, you’re not prompted to choose a trigger because Box already has a trigger: click.
In the click actions code, click to put the editing cursor on an empty line at the bottom.
The actions code pane is a workplace. You can add more actions using the buttons on the right, or if you’re comfortable speaking jQuery, you can add your own code.
On the right, click the Show Element button.
As usual, the generic Show code appears, and you need to specify what element is to be shown.
Replace “Text1” with “BringBack”.
“Text1” is placeholder text. BringBack is the ID of the text box that says, “Bring it Back!”
In the upper-right corner, click the X button.
The Actions panel closes.
Press Ctrl+S (⌘-S) and then press Ctrl+Enter (⌘-Return).
The first command saves your project. The second previews the project in your browser.
Now, when you preview the animation, it’s behaving better. When it begins, the BringBack text is hidden. A click on Box performs two actions. It hides Box and displays BringBack. It’s clear to the viewer what must be done. Click on the text, and the box comes back. Just one issue: The text should hide when Box shows. Time for another quick edit.
Right-click (Control-click) the text box BringBack and choose Open Actions for “BringBack.”
With the Click tab selected, place the editing cursor at the bottom of the code.
Click the Hide Element actions button.
Replace “Text1” with “BringBack”.
Save and preview your project.
It may not be as complex as Google Docs or Netflix’s movie queue, but this time, your project works well. Elements are showing up and disappearing as they should. It’s a pretty simple trick, but you’d be surprised how many interesting web pages are based on making elements show and hide. What’s more, as you’ll learn on More Showing and Hiding Tricks, it’s easy to substitute those show and hide methods with something a little more interesting, like fade in and fade out or other effects.
Note
Want to compare your project to a completed version of this exercise? Download 05-1_ShowHide_Triggers_done from the Missing CD at www.missingmanuals.com/cds/animatemm.
Just to recap, here are some of the trigger/action concepts discussed in the exercise that began back on Trigger Your First Action:
There are three main steps to interactivity: Choose an element. Attach a trigger. Specify an action.
A trigger is an event, like a mouse click, that’s attached to an element.
Actions can affect elements other than the one with the trigger.
A single trigger can lead to more than one action.
The stage and the timeline have triggers unique to their role in an HTML document.
You can add, remove, and edit triggers from the Actions panel for each element (Figure 5-7).
You need to preview your project in a browser to test triggers and actions.
Figure 5-7. In Animate, Actions panels share the same features whether they’re attached to elements on the stage or the timeline. Use the + and – buttons to add and remove triggers. Use the buttons on the right to add prebuilt code for specific actions. Your editable code appears in the main part of the box.
When you work in Animate, you’ve always got that timeline down there at the bottom of the screen. It’s keeping track of the elements, their positions on the stage, and any visual changes that you want. In some projects, the timeline is less relevant. For example, consider the previous exercise, where the playhead never leaves the 0:00 mark. In that case, changes are entirely controlled by triggers and actions. It’s also worth noting that it means change and timing are, for the most part, controlled by the audience. Earlier projects like the slideshow (The Sliding Show) and the filmstrip (Animating a Filmstrip) used the timeline to control changes and timing. There were no triggers and actions. Naturally, you’re not forced to choose one method or the other. You can create masterpieces when you combine the strengths of timeline animation with triggers and actions.
As gatekeeper to your animation’s timing, the timeline has special triggers like “play,” which fires when the animation starts playing. One of the most-used timeline triggers is “complete,” which fires when the playhead reaches the end of the timeline. So if you want to make an animation loop back to the beginning, you use the complete trigger and add code to send the playhead back to 0:00. Want to give it a try? Roll up your sleeves and grab the files and folders in 05-2_Timeline_Trigger.
Open the web page, 05-2_Timeline_Trigger.html, in a browser, and you see that it’s a simple counter. Every half-second, a new number appears on the stage. If you dig into the Animate project, you see that the appearance and disappearance of the numbers are controlled by keyframes that toggle the opacity properties of each number. In other words, it’s a simple animation, and at this point there’s no trigger/action magic involved. That’s about to change. Here are the steps to add a timeline trigger that makes the animation loop continuously:
Open 05-2_Timeline_Trigger.edge in Animate.
There are five elements placed on the stage. They are named num_1 through num_5.
On the timeline, next to the word “Actions,” click the Open Timeline Actions button and choose the complete trigger.
The complete tab appears in the Actions panel, and a comment prompts you to “Insert code to be run at the end of the timeline.”
On the right, from the list of actions, choose “Play from.”
Animate inserts a comment and a line of code:
// play the timeline from the given position (ms or label) sym.play(1000);
The code isn’t too hard to parse here: “sym” is short for symbol. In Animate, the initial stage and timeline are considered a symbol. In Chapter 6, you’ll learn all about symbols and how one symbol can be nested in another. For this example, it’s enough to know that “sym” refers to the timeline itself; “play” is a method that tells the timeline to run or play. The number inside of the parentheses tells the timeline where it should start playing. Animate pops the “1000” in there simply as a placeholder. The unit of time measurement is one one-thousandth of a second. So 1000 is equivalent to the 1-second mark. If you preview your animation at this point, after playing once, the animation jumps to the 1-second mark and displays the number 3. Then it continues looping by always jumping back to the 1-second mark.
Change the 1000 inside the parentheses to 0, as shown in Figure 5-8.
This command sends the playhead back to the 0:00 mark on the timeline:
sym.play(0);
Press Ctrl+S (⌘-S) to save and Ctrl+Enter (⌘-Return) to play.
Your animation loops continuously.
Figure 5-8. The code shown here in the Actions panel was inserted using the “Play from” button. Originally, the placeholder text “1000” was in the parentheses. By changing that to 0, the code sends the playhead to the beginning of the timeline.
By using the complete trigger on the timeline and adding the simple line of code shown in step 4, you can make any of your Animate animations loop. As you saw at the start, you can send the playhead to any point on the timeline using the thousandth-of-a-second unit of measurement. Want the playhead to go to the 6-second mark? Just pop 6000 in between those parentheses.
You’re not limited to specifying timeline locations by thousandths of a second. A far easier way to identify a point on the timeline is to use a label, as described back on Adding Labels to the Timeline. A label is a word that appears on the timeline ruler, and for most human beings, labels are more descriptive and easier to remember than numbers representing fractions of a second. Suppose you want to add labels to the counters’ timeline for each spot where the number changes. Start by moving the playhead to 0:00, and then press Ctrl+L (⌘-L) to insert a label. Type a name, perhaps the word one. For the next number, move the playhead half a second down the timeline where the number on the stage changes and repeat the process. Once you’re done with all five labels, the timeline looks like Figure 5-9.
Now, using the same timeline trigger (“complete”) and action (“Play from”), you can send the playhead back to any of the labels. For example, to send the playhead to the label “two,” edit the action so it looks like this:
sym.play("two");Notice that the label is inside the quotation marks. When you reference a label, it must always be inside quotes. When you’re developing larger and more complex Animate projects, you’ll find plenty of opportunities to use timeline labels as destinations for actions.
You can add triggers to a specific point along the timeline and then specify an action for that point in time. Suppose you want to briefly display a caption in the middle of your animation. You can place a trigger in the timeline that “shows” the caption, and then a moment later, you place another trigger that hides the text box with the caption. If you want to try this experiment, you can use the Timeline Trigger exercise beginning on Adding a Trigger to Loop Your Animation. Here are the steps to display a caption for half a second in the middle of the counter. Suppose you’re overly fond of the number 4, and you want to display the message “Great Number” while the 4 is displayed. Here are the steps:
With your Timeline Trigger project open, use the text tool (T) to create a text box that says, “Great Number.” Name the text box Great.
Format the text so that it looks good with your counter numbers. For text formatting details, see Changing Text-Specific Properties.
Make sure that Auto-Keyframe Mode and Auto-Transition Mode are toggled off. Drag the playhead to 0:00.
At this point in the animation, you want the text box hidden.
Go to Timeline→Insert Trigger.
An Actions panel titled “Trigger” opens. You see a panel like this each time you add a timeline trigger, but each trigger has its own panel.
Click the Hide Element action button. Then, in the Hide Element code, replace “Text1” with “Great”. Close the actions box.
As shown in the earlier exercises, this code hides the text box named Great. The action should read:
sym.$("Great").hide();When you close the actions, check the timeline under the “one” label, and you see a trigger icon (Figure 5-10). This particular trigger is only half visible because it’s positioned at the start of the timeline.
Drag the playhead to the “four” label and press Ctrl+T (⌘-T).
Another trigger actions box opens. Ctrl+T (⌘-T) is the shortcut key to create timeline actions.
Click the Show button, and after you see the new code, replace “Text1” with “Great”. Close the actions box.
This trigger shows the caption “Great Number.” Another action keyframe appears in the timeline.
Move the playhead to 0:02, the point with the “five” label. Press Ctrl+T (⌘-T) to create a timeline trigger. Add hide code just like the code in step 4.
At the three points in the timeline triggers, you see triggers ready to perform their accompanying actions.
Press Ctrl+S (⌘-S) to save and Ctrl+Enter (⌘-Return) to play.
Your animation plays. While the number 4 is displayed, the caption also shows with the words “Great Number.”
Keep in mind that you need to preview and test your work in a browser when you’re using triggers and actions. Even something as simple as Show and Hide actions require a browser to read and interpret the JavaScript/jQuery code. The finished project can be found with the Missing CD files. It is named 05-3_Timeline_Trigger_done.
The exercise back on The Sliding Show showed how to create a slideshow that automatically swapped images using transitions that included changes in locations and transparency. Each slide faded away and actually slid off the stage. Using the same images, you can create a different type of slideshow. Suppose you want the viewer to be in control. Each time she clicks the mouse, the slide changes instantly, moving to the next slide. If she’s on the last image in the show, a mouse click takes her back to the beginning. You can find the files for this project on the Missing CD at www.missingmanuals.com/cds/animatemm. Find 05-4_Click_Show for the folders and files for this exercise. If you want to see the finished project, check out 05-5_Click_Show_done.
Follow these steps to create a clickable slideshow:
In Animate, go to File→Open and then select 05-4_Click_Show.edge.
The Elements panel for this project shows a stage and three images: squirrel, house, and bike. All three images are already positioned on the stage. Each image is 600 x 400 px, the same size as the stage.
Tip
You can examine each of the images by toggling the show/hide buttons for the elements, as explained on Showing and Hiding Elements.
Turn off Auto-Transition Mode (Timeline→Auto-Transition Mode).
The button in the timeline appears pushed in when this feature is turned on.
In Elements, select the squirrel, house, and bike elements. Then in the Position and Size subpanel in Properties, click the Add Keyframe button next to X and Y.
This adds Top and Left property keyframes to the beginning of the timeline to lock in the initial position for all the photos.
With the playhead at 0:00, press Ctrl+L (⌘-L) to create a label named squirrel. At 0:01, create a label named house. At 0:02, create a label named bike.
When you’re done, the timeline should look like Figure 5-11.
Move the playhead to 0:00. Then click the Insert Trigger button shown in Figure 5-10, and choose Stop from the available actions.
When you click the Insert Trigger button, a panel opens where you can add and edit the JavaScript/jQuery code that controls your animation. The button on the Actions row opens the code window for the timeline trigger, shown in Figure 5-12.
Right-click (Control-click) the squirrel photo on the stage, and then choose Open Actions for “squirrel.”
The actions panel labeled “squirrel” opens, where you can write or insert JavaScript/jQuery code. Initially, several trigger options, like click, dblclick, and mouseover, are displayed. If you move the box, the list may disappear. You can always bring it back by clicking the + button in the upper-left corner.
Choose “click” from the triggers list.
The panel changes, displaying the actions that can be associated with the click trigger, as shown in Figure 5-13.
Choose “Stop at.”
The code for the “Stop at” method is added to the squirrel actions panel. It reads:
// stop the timeline at the given position (ms or label) sym.stop(1000);
The first line is a comment describing the “Stop at” method. The second is the code that sends the playhead to a particular point in the timeline and stops playback. The 1000 inside the parentheses is a numerical reference to a point on the timeline. In the next step, you’ll replace that reference with a reference to one of the labels you created earlier.
Replace “1000” in the code with house. When you’re done, click the X button in the upper-right corner of the box to close it.
Don’t forget to include the quote marks (") as shown in Figure 5-13. When you reference a label, you must put the label in quotes.
In Elements, click the show/hide button (eyeball) next to squirrel.
The squirrel picture is hidden from the stage, and the house picture is visible.
Repeat steps 5–8 for the house image, creating a click trigger and a “Stop at” action. In step 8, instead of replacing “1000” with the house label, use the bike label.
Hide the house photo. Then repeat steps 5–8 for the bike photo. In the “Stop at” method, use the squirrel label.
The method now sends the playhead back to the first label on the timeline: squirrel. Next, you’ll set up the timeline to display the proper image at each label.
In Elements, click the show/hide buttons to make the squirrel and farmhouse visible.
Keep in mind that the show/hide buttons affect the elements only during design time. They have no effect on what your audience sees when they view your project in a browser. You’ll fix that in the next few steps.
Move the playhead to the house label. Then drag the squirrel photo off the stage completely.
It doesn’t matter where you drag the photo. The audience won’t see its movement because there’s no transition. The playhead just jumps from label to label. At this point in the animation, the audience will see the house photo.
Move the playhead to the bike label. Then drag the house photo off the stage completely.
At this point in the animation, the audience will see the bike photo.
In Elements, select the stage. Then, in Properties, make sure the Overflow property is set to hidden.
If Overflow is set to “visible,” your audience will see the photos that are offstage.
Choose File→Preview In Browser to see your slideshow in action.
You need to view the slideshow in a browser to check the clicking action. If you press Play to view the slideshow within Animate, you won’t get the benefit of the JavaScript code that controls the playhead.
At this point, you’re probably thinking of different ways you can create a slideshow for your own photo library. You can tackle the project in a number of ways, and the example above is just one solution. For example, using timeline labels, triggers, and actions, you can create a button interface for your slideshow. Buttons could advance the show forward and backward. Other buttons could jump to the beginning, end, or special sections of your slideshow. You could combine timeline animation effects with timeline trigger controls, creating a slideshow that has animated effects and gives the audience control over the experience.
Up to now, most of the projects in this book have been fairly linear, moving along the timeline in a natural left-to-right fashion. When you start using labels, timeline triggers, and the other tools covered in this chapter, you aren’t limited to a simple linear timeline. Suppose you’re developing a graphic novel for the Web. The novel has three alternate endings, and at some point you let your audience choose one of the endings. See Figure 5-14. All you need to do is stop the timeline at a certain point. Create three buttons or some other type of widget representing the three different endings. Then connect triggers and actions to the buttons that lead to different labeled points on the timeline. Want to get more elaborate? You could develop an entire adventure-style game, where the player’s decisions lead to different challenges. In that case, the action could branch out in all different directions. Certain user actions could make the game loop back to a previous point.
For these kinds of projects, you need to think of the timeline as a kind of random access storage device, like a computer hard drive. Using triggers and actions, you access the parts of the storage that you need at a given moment. One portion of the timeline might hold a single text box, like the answer to a quiz question. Or it might contain an entire animated sequence for a graphic novel. After you’ve used (or read) that portion of the timeline, use timeline triggers to send the playhead back to another point in the timeline.
As mentioned at the beginning of this chapter, the best way to keep your audience engaged is to put them in control. Take the example from the previous chapter: A filmstrip with images of different flowers was animated using the timeline and smooth transitions (Animating a Filmstrip). You, the creator, arbitrarily set the timing. But you can give power to the audience by adding buttons that let them control the playback: play, stop, and play in reverse.
From this book’s Missing CD (www.missingmanuals.com/cds/animatemm), open the project 05-6_Film_Strip_Click.
The project looks very much like the filmstrip project from Chapter 4, except three buttons appear at the bottom of the stage. They sport the universal symbols for play, stop, and reverse. If you preview the project at this point, you see that it shows the five flower photos, with sliding animation between each. When it reaches the end of the film strip, it appears to rewind back to the beginning. As you may recall from the earlier filmstrip project, that rewind animation is at the end of the timeline. This filmstrip is a great candidate for some looping action, so that’s the first task.
Under the stage where the time is shown, type 7.5 and press Enter (Return).
The playhead quickly moves to 0:07.500—the seven-and-a-half second mark—which is the end of the animation.
Press Ctrl+T (⌘-T), the command to insert a Timeline Trigger.
The Trigger actions panel opens. At the top, it displays the point in time when the trigger will fire: 7500 ms.
On the right of the actions panel, click “Play from.”
This code is inserted into the actions panel:
sym.play(1000);
As you may recall from Adding a Trigger to Loop Your Animation, that moves the playhead to the 1000 ms (1 second) mark and then starts playing the timeline from there.
Change the 1000 to 0.
When you’re done, the command looks like this:
sym.play(0);
This code, when placed at the end of the timeline, will loop any animation. If you test your animation now, you see that at the end, the filmstrip rewinds and then the animation begins playing again from the first picture. Now, it’s time to add audience controls.
At the bottom of the stage, right-click the left button and choose Open Actions for “btnReverse.”
The actions panel for btnReverse appears, and the trigger menu is displayed. If you don’t see the trigger menu, click the + button in the upper-left corner.
Choose the “click” trigger.
The actions panel opens displaying a click tab. Action buttons are shown on the right.
Click the Play Reverse button.
As shown in Figure 5-15, this code appears in the actions panel:
sym.playReverse();
That’s the complete code to make the animation play backward. You don’t have to add anything.
Tip
In the playReverse example shown here, there is nothing inside of the parentheses, so the animation reverses from the current playhead position. As an alternative, you could place a number or a label inside the parentheses to move the playhead to a new position before it reverses. For numbers, use milliseconds where 1000=1 second. If you use a label, don’t forget to place it in quotes.
Hit Esc to close the actions panel.
You can also close the panel by clicking the X button in the upper-right corner.
At the bottom of the stage, right-click the middle button and choose “Open Actions for btnStop.”
The action panel for btnStop appears.
Choose the “click” trigger.
The tab for click is displayed in the actions panel.
On the right side of the panel, click Stop. After examining the code, close the actions panel.
The code to stop the timeline from playing is inserted into the panel. You don’t need to make any changes to it.
sym.stop();
Open the actions panel for btnPlay and choose the “click” trigger.
The drill is the same for all three buttons.
When the click tab appears, click the Play button.
You can probably guess what the code for play looks like:
sym.play();
Congratulations! You programmed three buttons—reverse, stop, and play—without writing a bit of code. Animate did almost all the heavy lifting.
When you test your animation, you should be in complete control, able to stop the film strip and play it in either direction. If your project isn’t working as expected, compare it to 05-7_Film_Strip_Click_done.
So far, the activities in this chapter have focused on just a few common triggers and actions. When you get into developing your own projects, you’re likely to do the same. The simple click is probably the most used trigger on the planet, because it’s the simplest form of interaction. Showing and hiding elements and jumping to spots on the timeline are all natural actions for a development system like Animate. However, time marches on, and we all browse the Web using iPhones, Androids, and tablets of all kinds. One of the great benefits of HTML5 is that it’s been designed with the handheld revolution in mind. That’s true of Animate, too.
When you open the triggers menu for an element like a rectangle, you might notice that they are divided into groups (Figure 5-16). At the top, you have standard desktop, mouse-like triggers, like click and dblclick. As a developer, you’ll be glad to hear that these commands work on touchscreens as well as mouse-operated computers. As you might guess, the mouse commands like mouseover and mouseout are exclusive to mice, because there aren’t any related touchscreen triggers. Next, you have three triggers that are used with touchscreens: touchstart, touchmove, and touchend. At the bottom, there are special triggers that respond to mouse events and cursor focus.
If you want to reach the widest audience, you may as well go ahead and start thinking about developing apps that work equally well for mobile devices and traditional computers. These days you never know whether someone will be viewing your work on a 30-inch widescreen monitor or a 4.5-inch iPhone.
