Adding visual feedback
Most interactive elements on the Web feature visual feedback, which is important to provide clues to the reader that the particular item is interactive. For example, a simple hyperlink on a Web page often will change color when you move your mouse over it. A button will highlight when you move your mouse over it, and may appear depressed when you click on it.
You can create these interactions with a combination of events and actions in Edge Animate. You’ll add these events and actions to the thumbnails for visual feedback next.
Adding the mouseover thumbnails
The first question you should ask is, what visual effect do you want to see when a user moves their mouse over the thumbnail images? For this project, you’ll make the grayscale thumbnails become colorized and a highlight appear around the borders. The first step is to bring colorized versions of the thumbnails on to the Stage.
- In the images folder in the Assets folder of the Library panel, you’ll find color versions of each of the five thumbnail images, indicated by the _color appended to the file name.
- Drag button1_color.jpg from the Library on to the Stage.
- Use the Smart Guides to position the button1_color element at the upper-left corner, exactly on top of its grayscale version. Its location should be at X=0, Y=0.
- Drag all four of the other colorized versions of the thumbnails to the Stage, positioning them exactly on top of their grayscale partners. All the colored thumbnails should be at the top of the Element panel stack.
)
)
)
The grayscale and colorized versions of the thumbnails are exactly the same dimensions.
Hiding the mouseover thumbnails
Since you want to show the colorized version only when the mouse cursor moves over the thumbnail, you must first hide the colorized thumbnails. You can hide the elements by changing their Display property to Off.
- Move the playhead to 0:00 seconds.
- Hold down the Shift key and select all the colorized thumbnail elements.
- In the Properties panel, change the Display property from Always On to Off.
)
Edge Animate inserts a new keyframe on the Timeline for all the selected elements at 0:00 seconds and the selected elements disappear from the Stage.
)
Inserting the mouseover event
Each grayscale thumbnail contains a click event. You’ll have to edit each of those elements to incorporate a mouseover event. A mouseover event happens when the user moves their mouse cursor over the selected element. When the mouseover event happens, you’ll show the colorized thumbnails.
- In the Timeline or the Elements panel, click the Open Actions button for the first thumbnail element, button1_gray.
- Click on the Plus button on the upper-left corner and choose mouseover.
- Position your cursor on the second line of the script pane (after the first line of comments), and choose the Show Element option.
- Replace the highlighted code with button1_color. Make sure that the double straight quotation marks remain around your element name.
- Preview your Edge Animate composition in a browser by choosing File > Preview in your browser or pressing Ctrl+Enter (Windows)/Command+Return (Mac OS). Move your mouse over the first grayscale thumbnail image.
- Return to Edge Animate and insert the mouseover event with the Show Element action to the remaining four grayscale thumbnail buttons. Make sure to replace the highlighted code portion with the correct colorized version of the thumbnail.
The script panel for button1_gray opens. The current click event and actions appear.
)
)
Edge Animate adds a mouseover tab.
)
Edge Animate adds the JavaScript code to display an element. The highlighted portion of the code is the name of the element to display.
)
)
The full statement appears as follows:
sym.$("button1_color").show();
The dollar sign and parentheses is jQuery syntax, and it tells the browser what element to select. In this statement, the element called button1_color in the current Edge Animate composition is selected, and the method called show() is executed.
As soon as your mouse cursor moves over the grayscale thumbnail image, the colorized version appears. Since the colorized version is above the grayscale version, we see only the colorized image.
)
Inserting the mouseout event
When you preview the Edge Animate project, you’ll notice that the thumbnails become colorized when you move your mouse over them, but they remain in color even after you move your mouse off them. In order to make the thumbnails revert to their grayscale versions, you need to add one additional event: the mouseout event.
The mouseout event happens when the cursor moves off an element. You’ll add the mouseout event to the colorized thumbnails (not the grayscale thumbnails) and pair the event with a command that hides the colorized versions. The result: The colorized versions disappear, leaving the grayscale version visible again.
- In the Timeline or the Elements panel, click the Open Actions button for the thumbnail element button1_color. The element is currently hidden on the Stage, but you can still add script to it.
- In the popup menu that appears, choose mouseout for the event.
- Position your cursor on the second line of the script pane (after the first line of comments), and choose the Hide Element option.
- Replace the highlighted code with button1_color. Make sure that the double straight quotation marks remain around your element name.
- Preview your Edge Animate composition in a browser by choosing File > Preview in your browser or pressing Ctrl+Enter (Windows)/Command+Return (Mac OS). Move your mouse over the first grayscale thumbnail image.
- Return to Edge Animate and insert the mouseout event with the Hide Element action to the remaining four colorized thumbnail buttons. Make sure to replace the highlighted code portion with the correct colorized version of the thumbnail.
The script panel for button1_color opens.
)
Edge Animate adds a mouseout tab.
)
)
Edge Animate adds the JavaScript code to display an element. The highlighted portion of the code is the name of the element to display.
)
The full statement appears as follows:
sym.$("button1_color").hide();
Note the similarities between the actions for this mouseout event and the previous script for the mouseover event.
As soon as your mouse cursor moves over the grayscale thumbnail image, it becomes colorized. When you move your mouse cursor off the image, the button appears to revert back to grayscale.
Editing the click event
One final fix is needed before all the events and actions work together. You may have noticed that clicking on the buttons doesn’t move the playhead as you intend. The reason it no longer works is because the colorized thumbnails overlap their grayscale counterparts, which block the click events. Your final step is to remove the click event from the grayscale thumbnails and add them to the colorized thumbnails instead.
- In the Timeline or the Elements panel, click the Open Actions button for each of the grayscale thumbnail elements.
- Choose the click event tab on the script panel, and click the Minus button.
- In the Timeline or the Elements panel, click the Open Actions button for each of the colorized thumbnail elements.
- Click on the Plus button on the upper-left corner and choose click for the event.
- Choose the Stop at option, and as you did before, replace the millisecond argument with the corresponding label on the Timeline.
- Preview your Edge Animate composition in a browser by choosing File > Preview in your browser or pressing Ctrl+Enter (Windows)/Command+Return (Mac OS).
- Your buttons are complete. When you move your mouse over them, they become colorized. When you move your mouse off them, they revert to grayscale, and when you click on them, Edge Animate displays the corresponding image from the slideshow.
)
Edge Animate deletes the click event and all of its actions.
Edge Animate adds a click event tab.
)
P Note: Use the Code panel and choose the Full Code mode to make global edits to your script easier. You can save time and effort if you’re careful about selecting and editing code.