Chapter 5: Use motion paths. EDOBE Edge Animate CC 2014, XDOM EM
Below you will find brief information for Edge Animate CC. This guide helps you create rich animations faster and easier. It covers importing HTML5 videos, using sprite sheets to add advanced animations, linking to DPS articles, and using the enhanced Actions editor. You can also copy and paste illustrations from Adobe Illustrator and use scrolling hand and zoom tools.
Advertisement
Advertisement
Chapter 5: Use motion paths
Animating over a curved path
New features summary
Update to Edge Animate CC available
For more information, see the New features summary .
New features overview
Sarah Hunt, the Product Manager for Edge Animate provides a brief overview of Edge Animate CC features.
Motion paths
Motion paths allow you to add highly expressive motion to elements which follow along a custom curved path. Using this feature, you can emulate real-world experiences through fluid, physics-based movements that cannot be achieved through linear motion.
To control the movement of an element using motion paths, perform the following steps:
1 Select the element on Stage, and click Motion Paths in the Contextual Property Panel (CPP) under the Position and
Size accordion.
55
Motion Paths option in the Contextual Properties Panel
To set motion paths as the default method of movement for new elements in the composition, select “Animate with
Motion Paths” from the Layout Defaults.
Last updated 6/15/2014
Use motion paths
Using Motion Paths as the default for new elements
2 Create a transition as you normally do using keyframes or the Pin. When you do so, you notice a line drawn between two anchor points (represented by triangles) as shown below:
56
'Bee' element to be moved
Path for the 'Bee' element
Last updated 6/15/2014
Use motion paths
Click the line anywhere to see the handles that you can drag to define the path using a Bezier curve. Use the Auto-
Orient option to control the direction of your object as it moves along the path.
57
Click the path to see the handles for editing
Motion Path defined using Bezier curve
• To add an anchor point, hover your mouse on the path and click.
• To delete an anchor point, hover your mouse on the anchor, and then Cmd/Ctrl + Click
• To convert a Bezier to a sharp point, click the anchor point, and then Option/Alt + Click.
• To unlink the two handles on either side of an anchor point so that you can move one independently of the other,
Option/Alt + click and drag.
Last updated 6/15/2014
Use motion paths
Keyframes for location on the timeline represent two separate motion paths. Add a keyframe to split your path into two, or delete a keyframe to create one contiguous path. Easing can be applied to motion paths, and the easing effect is played back on a per-path basis.
• To split a motion path, add a keyframe in the timeline.
• To create a contiguous motion path, delete a location keyframe on the timeline.
• To split two adjoining motion paths in space, Cmd/Ctrl-click and drag at a joining keyframe anchor.
• To connect two end anchors of separate motion paths, drag the anchors together; they will snap to connect location.
The object is tied to the path by the transform origin. Transform origin can be adjusted so the object can follow the path off-center.
Motion Paths and Responsive Layouts
In the current implementation, motion paths cannot be set to use percentage-based layouts. To work around this, set your pathed object inside a group, parent, or symbol and set the parent to use %-based positioning. You can also use this method to set the motion path relative to top/right/bottom/left.
Tutorial
Click Windows > Lessons panel, and click Motion Paths for a guided, hands-on exercise on using motion paths in an
Animate composition.
Optimized publishing with CDN Hosting
Allow your content to be delivered faster with your runtime files on Adobe Content Deliver Network (CDN). To do so, select the Host Runtime Files On Adobe CDN option in the Publish Settings. Your projects download faster with the benefit of cache hosting with absolutely no cost to you.
If the content needs to run offline, deselect this option in Publish Settings. This option is enabled by default.
58
Publishing with CDN hosting
Templates
You can now load, save, and reuse templates from a template gallery. This feature allows you to load an Animate composition for common file patterns. Templates can capture images, text, symbols, fonts, and any custom changes in your current composition. You can load templates from the visual template loader.
Last updated 6/15/2014
Use motion paths
Access the templates menu from the Welcome screen (“Create from Template”) or from the File menu. From the templates gallery you can import, delete, and create a new composition from a template.
59
Create From Template option in File menu
Template files have .antmpl extension and can be freely distributed and can be stored anywhere on the file system.
Swipe gestures
You can now bind elements with left and right swiping actions for mobile-focused experiences. You can assign the swiping action to any element in your composition. You can assign swipe gestures to the stage itself, or apply to multiple elements to create unique mobile experiences.
Right-click the element in the Timeline, click Open Actions For <element> from the menu, and then click swipeleft or swiperight.
Swipe gestures
Last updated 6/15/2014
Use motion paths
Eyedropper tool
The new Eyedropper tool is introduced in the colour selection panels. Select the eyedropper icon to sample colours from the stage.
60
Eyedropper tool
Color coding of elements
You can now assign colors to various elements in your composition to easily identify and work with them. You can click the color palette in the Elements panel or Timeline to assign colors. These colors are reflected in the Timeline transitions too.
Color coding of elements in Timeline
Color coding in the Elements panel
Elements panel and Timeline jumping
The elements panel and timeline will now scroll to show selected elements (if the panel is scrolling).
Last updated 6/15/2014
Use motion paths
New features summary
Update to Edge Animate CC available
For more information, see the New features summary .
New features overview
Sarah Hunt, the Product Manager for Edge Animate provides a brief overview of Edge Animate CC features.
Motion paths
Motion paths allow you to add highly expressive motion to elements which follow along a custom curved path. Using this feature, you can emulate real-world experiences through fluid, physics-based movements that cannot be achieved through linear motion.
To control the movement of an element using motion paths, perform the following steps:
1 Select the element on Stage, and click Motion Paths in the Contextual Property Panel (CPP) under the Position and
Size accordion.
61
Motion Paths option in the Contextual Properties Panel
To set motion paths as the default method of movement for new elements in the composition, select “Animate with
Motion Paths” from the Layout Defaults.
Using Motion Paths as the default for new elements
2 Create a transition as you normally do using keyframes or the Pin. When you do so, you notice a line drawn between two anchor points (represented by triangles) as shown below:
'Bee' element to be moved
Path for the 'Bee' element
Click the line anywhere to see the handles that you can drag to define the path using a Bezier curve. Use the Auto-
Orient option to control the direction of your object as it moves along the path.
Click the path to see the handles for editing
Last updated 6/15/2014
Use motion paths
Motion Path defined using Bezier curve
• To add an anchor point, hover your mouse on the path and click.
• To delete an anchor point, hover your mouse on the anchor, and then Cmd/Ctrl + Click
• To convert a Bezier to a sharp point, click the anchor point, and then Option/Alt + Click.
• To unlink the two handles on either side of an anchor point so that you can move one independently of the other,
Option/Alt + click and drag.
Keyframes for location on the timeline represent two separate motion paths. Add a keyframe to split your path into two, or delete a keyframe to create one contiguous path. Easing can be applied to motion paths, and the easing effect is played back on a per-path basis.
• To split a motion path, add a keyframe in the timeline.
• To create a contiguous motion path, delete a location keyframe on the timeline.
• To split two adjoining motion paths in space, Cmd/Ctrl-click and drag at a joining keyframe anchor.
• To connect two end anchors of separate motion paths, drag the anchors together; they will snap to connect location.
The object is tied to the path by the transform origin. Transform origin can be adjusted so the object can follow the path off-center.
Motion Paths and Responsive Layouts
In the current implementation, motion paths cannot be set to use percentage-based layouts. To work around this, set your pathed object inside a group, parent, or symbol and set the parent to use %-based positioning. You can also use this method to set the motion path relative to top/right/bottom/left.
Tutorial
Click Windows > Lessons panel, and click Motion Paths for a guided, hands-on exercise on using motion paths in an
Animate composition.
Optimized publishing with CDN Hosting
Allow your content to be delivered faster with your runtime files on Adobe Content Deliver Network (CDN). To do so, select the Host Runtime Files On Adobe CDN option in the Publish Settings. Your projects download faster with the benefit of cache hosting with absolutely no cost to you.
If the content needs to run offline, deselect this option in Publish Settings. This option is enabled by default.
Publishing with CDN hosting
Templates
You can now load, save, and reuse templates from a template gallery. This feature allows you to load an Animate composition for common file patterns. Templates can capture images, text, symbols, fonts, and any custom changes in your current composition. You can load templates from the visual template loader.
Access the templates menu from the Welcome screen (“Create from Template”) or from the File menu. From the templates gallery you can import, delete, and create a new composition from a template.
Last updated 6/15/2014
62
Use motion paths
Create From Template option in File menu
Template files have .antmpl extension and can be freely distributed and can be stored anywhere on the file system.
Swipe gestures
You can now bind elements with left and right swiping actions for mobile-focused experiences. You can assign the swiping action to any element in your composition. You can assign swipe gestures to the stage itself, or apply to multiple elements to create unique mobile experiences.
Right-click the element in the Timeline, click Open Actions For <element> from the menu, and then click swipeleft or swiperight.
Swipe gestures
Eyedropper tool
The new Eyedropper tool is introduced in the colour selection panels. Select the eyedropper icon to sample colours from the stage.
Eyedropper tool
Color coding of elements
You can now assign colors to various elements in your composition to easily identify and work with them. You can click the color palette in the Elements panel or Timeline to assign colors. These colors are reflected in the Timeline transitions too.
Color coding of elements in Timeline
Color coding in the Elements panel
Elements panel and Timeline jumping
The elements panel and timeline will now scroll to show selected elements (if the panel is scrolling).
New features summary
Update to Edge Animate CC available
For more information, see the New features summary .
Last updated 6/15/2014
63
Use motion paths
New features overview
Sarah Hunt, the Product Manager for Edge Animate provides a brief overview of Edge Animate CC features.
Motion paths
Motion paths allow you to add highly expressive motion to elements which follow along a custom curved path. Using this feature, you can emulate real-world experiences through fluid, physics-based movements that cannot be achieved through linear motion.
To control the movement of an element using motion paths, perform the following steps:
1 Select the element on Stage, and click Motion Paths in the Contextual Property Panel (CPP) under the Position and
Size accordion.
64
Motion Paths option in the Contextual Properties Panel
To set motion paths as the default method of movement for new elements in the composition, select “Animate with
Motion Paths” from the Layout Defaults.
Using Motion Paths as the default for new elements
2 Create a transition as you normally do using keyframes or the Pin. When you do so, you notice a line drawn between two anchor points (represented by triangles) as shown below:
'Bee' element to be moved
Path for the 'Bee' element
Click the line anywhere to see the handles that you can drag to define the path using a Bezier curve. Use the Auto-
Orient option to control the direction of your object as it moves along the path.
Click the path to see the handles for editing
Motion Path defined using Bezier curve
• To add an anchor point, hover your mouse on the path and click.
• To delete an anchor point, hover your mouse on the anchor, and then Cmd/Ctrl + Click
• To convert a Bezier to a sharp point, click the anchor point, and then Option/Alt + Click.
Last updated 6/15/2014
Use motion paths
• To unlink the two handles on either side of an anchor point so that you can move one independently of the other,
Option/Alt + click and drag.
Keyframes for location on the timeline represent two separate motion paths. Add a keyframe to split your path into two, or delete a keyframe to create one contiguous path. Easing can be applied to motion paths, and the easing effect is played back on a per-path basis.
• To split a motion path, add a keyframe in the timeline.
• To create a contiguous motion path, delete a location keyframe on the timeline.
• To split two adjoining motion paths in space, Cmd/Ctrl-click and drag at a joining keyframe anchor.
• To connect two end anchors of separate motion paths, drag the anchors together; they will snap to connect location.
The object is tied to the path by the transform origin. Transform origin can be adjusted so the object can follow the path off-center.
Motion Paths and Responsive Layouts
In the current implementation, motion paths cannot be set to use percentage-based layouts. To work around this, set your pathed object inside a group, parent, or symbol and set the parent to use %-based positioning. You can also use this method to set the motion path relative to top/right/bottom/left.
Tutorial
Click Windows > Lessons panel, and click Motion Paths for a guided, hands-on exercise on using motion paths in an
Animate composition.
Optimized publishing with CDN Hosting
Allow your content to be delivered faster with your runtime files on Adobe Content Deliver Network (CDN). To do so, select the Host Runtime Files On Adobe CDN option in the Publish Settings. Your projects download faster with the benefit of cache hosting with absolutely no cost to you.
If the content needs to run offline, deselect this option in Publish Settings. This option is enabled by default.
65
Publishing with CDN hosting
Templates
You can now load, save, and reuse templates from a template gallery. This feature allows you to load an Animate composition for common file patterns. Templates can capture images, text, symbols, fonts, and any custom changes in your current composition. You can load templates from the visual template loader.
Access the templates menu from the Welcome screen (“Create from Template”) or from the File menu. From the templates gallery you can import, delete, and create a new composition from a template.
Create From Template option in File menu
Template files have .antmpl extension and can be freely distributed and can be stored anywhere on the file system.
Last updated 6/15/2014
Use motion paths
Swipe gestures
You can now bind elements with left and right swiping actions for mobile-focused experiences. You can assign the swiping action to any element in your composition. You can assign swipe gestures to the stage itself, or apply to multiple elements to create unique mobile experiences.
Right-click the element in the Timeline, click Open Actions For <element> from the menu, and then click swipeleft or swiperight.
66
Swipe gestures
Eyedropper tool
The new Eyedropper tool is introduced in the colour selection panels. Select the eyedropper icon to sample colours from the stage.
Eyedropper tool
Color coding of elements
You can now assign colors to various elements in your composition to easily identify and work with them. You can click the color palette in the Elements panel or Timeline to assign colors. These colors are reflected in the Timeline transitions too.
Color coding of elements in Timeline
Color coding in the Elements panel
Elements panel and Timeline jumping
The elements panel and timeline will now scroll to show selected elements (if the panel is scrolling).
Publish your content
To publish your content:
1 Specify your publish settings. See below for more information.
2 Select File > Publish.
Optimize content for the web
1 Select File > Publish Settings.
2
3
In the Publish Settings dialog box, make sure that Web is selected as the publish target.
Note or change the target directory.
Last updated 6/15/2014
Use motion paths
4 Set the Frameworks Via CDN preference.
Select this option to download the composition's associated jQuery assets from a content delivery network (CDN).
Leave the option deselected to package the assets with the composition.
5 Set the Publish Content As Static HTML preference.
Select this option to generate HTML markup instead of injecting Edge Animate content into the document through
JavaScript. This option improves SEO-friendliness and accessibility on some platforms.
6 Click Save to save the publish settings, or click Publish.
Publish as Animate Deployment Package (.oam)
Select this export option to create a package file of your project for use in other Adobe tools. The following tools support
Animate Deployment Packages: Adobe Digital Publishing Suite (DPS), InDesign CS6, Dreamweaver CS6, and Muse.
1 Select File > Publish Settings.
4
5
2
3
In the Publish Settings dialog box, make sure Animate Deployment Package is selected as the publish target.
Note or change the target directory.
(Optional) Specify a poster image.
Click Save to save the publish settings, or click Publish.
Publish to Apple iBooks Author
1 Select File > Publish Settings.
4
5
2
3
In the Publish Settings dialog box, make sure iBooks/OS X is selected as the publish target.
Note or change the target directory.
(Optional) Specify a poster image.
Click Save to save the publish settings, or click Publish.
Learn more
• Enhance your DPS folios with HTML animations using Adobe Edge
67
What's new in Edge Animate 1.5
Important: Edge Animate 1.5 is no longer supported by Adobe and is not recommended for production use. This version lacks major features, such as motion paths and audio support, introduced in newer releases, as well as performance enhancements and bug fixes (including compatibility issues with modern browsers that can result in unexpected output rendering).
Add gradients to objects
The gradient panel introduced in this release allows you to add gradients to Edge Animate elements. You can create both linear and radial gradients using the options in the panel.
Gradients can be animated. However, you cannot animate between a radial gradient and a linear gradient.
Video tutorial
Last updated 6/15/2014
Use motion paths
Applying colors and gradients in Edge Animate
You can do the following in the gradients panel:
• Use color stops to create complex gradients.
• Create linear gradients or radial gradients.
• For linear gradients, specify the angle of the gradient.
• Save custom gradients as swatches.
• Specify a value for color in any of the three formats (RGBa, Hexadecimal, or HSLa). The "a" refers to the alpha value or the opacity value. Irrespective of the format you use to define color, Animate ultimately converts the values to
RGB format.
• To apply CSS properties to the radial gradient such as Ellipse-farthest-corner, Circle-farthest-side, and so on, click and hold the Radial Gradient button. Select the option that you want to apply.
Note: Gradients are not supported in Internet Explorer version 9. Any applied gradients are replaced with the background color.
68
A Remove color B Angle for linear gradient C Linear gradient swatch D Radial gradient swatch E Color stop F Add gradient swatch G Repeat pattern H Color format buttons I Lightness slider J Color slider K Opacity slider L Add color swatch M Color swatch N Selected color
O Original color P Radial gradient button Q Gradient button R Linear gradient button
For a video tutorial on using colors and gradients in Edge Animate, click here .
Updates to the color panel
In the color panel, you can now do the following:
• Use the Lightness bar slider to customize the intensity for a selected color.
• Use the Opacity bar slider to specify the opacity (transparency) for the selected color.
Last updated 6/15/2014
Use motion paths
• Save the custom colors as swatches for reuse.
• Specify a value for color in any of the three formats (RGBa, Hexadecimal, or HSLa). The a refers to the alpha value or the opacity value. Irrespective of the format you use to define color, Animate ultimately converts the values to
RGB format.
69
A Option to enter color code B Color button C Option to remove color D Added color swatch E Option to add color swatch F Slider for opacity
G Slider for color lightness H Slider for color I Color code format options
Using CSS filters
Options in the Filters panel help you quickly apply CSS filters to symbols, text, Divs, and images. The only way you could previously apply such effects was using an image editor.
CSS filters are currently supported on the latest versions of Chrome, Safari, iOS6, and Blackberry 10.
To apply a CSS filter, select an object on the stage, and use the options in the Filters panel to apply the desired effects.
For example, to apply filters to an inserted image, select the image, and apply filters as required.
To remove a filter from the element, click the corresponding "x" button.
For a video tutorial on using CSS filters in Edge Animate, click here .
Last updated 6/15/2014
Use motion paths
Leverage Edge web fonts for better typography
Edge Animate helps leverage the power of the @font-face CSS property by providing you with an array of web fonts for your design. Edge web fonts allow you to bring the typographic experience of the print medium to the web.
Edge Web Fonts features hundreds of web fonts from the Adobe library as well as a large collection of open source fonts.
Edge Web fonts are free and require no account or kit configuration — making it faster and easier to get started.
Using Edge Web fonts in Edge Animate
When applying font to Text, click the "+" button next to the Font menu to view the Edge Web Font dialog. Select the font that you want to use from the list and click Add Font.
You can filter the fonts in the panel by their type using the buttons to the left of the panel. For example, to view only fonts of the sans serif type, click the Sans Serif button. For more information, see Use Web Fonts .
Video tutorial
Using Web fonts in Edge Animate
70
The selected and applied fonts are added to the Font library in Edge Animate. Double-click the font in the Font library to specify fallback fonts. If the selected font, for some reason, cannot be applied, the fallback fonts are used based on the order in which they are listed.
Last updated 6/15/2014
Use motion paths
Iframe friendly preloaders
Preloading is now optimized to work within Iframes for coordinated resource loading. Animate compositions contained within Iframes wait for the document to load before playing the file.
Iframe preloaders allow you to preload the Iframe with an advertisement before the Animate file and the web page are downloaded.
For more information on using preloaders, see Adobe Edge Animate JavaScript APIs .
Symbol editing mode preserved during Preview
Animate preserves your current editing state on each preview. The composition does not return to the stage when previewing in a browser.
Easily identify locked and unlocked elements
Locked elements appear dimmed on the Timeline and the Elements panel allowing you to easily distinguish them from unlocked elements.
In-app lessons
The Lessons panel in Adobe Edge Animate provides hands-on tutorials with sample assets that you can follow within the tool.
Last updated 6/15/2014
71
Use motion paths
Lessons panel
You can access the Lessons panel from the Getting Started tab on the Welcome Screen, or from the Window menu
(Window > Lessons).
72
Lessons
Target older browsers
Adobe Edge Animate uses web-standards such as HTML5, CSS3, and JavaScript to define animation and interactivity.
Some functionality may not work or appear in older browsers that don't support these standards. You can still target older browsers by creating poster images. You can also use the Google Chrome Frame extension for Internet Explorer for Windows users.
Last updated 6/15/2014
Use motion paths
Support older browsers with poster images
Define a fallback state of your project in the form of a poster image or of your own artwork. When visitors view your content in a legacy web browser, the poster image is displayed.
3
4
1
2
In the Timeline panel, position the Playhead at the end state of all animations.
In the Elements panel, select the Stage element.
In the Properties panel, click the Capture Stage As Poster Image button (camera icon).
In the Capture a Poster Image dialog box that appears, click Capture.
73
5 In the Properties panel, click the Edit button for the Down-level Stage property.
6 Click the Insert button. The image that you captured appears on the down-level stage.
To use your own artwork, drag the image from the Library panel to the down-level stage.
7 Return to the main stage by clicking the Stage breadcrumb at the top of the preview window.
Support older browsers with Google Chrome Frame
Google Chrome Frame is an extension that can be installed in older versions of Internet Explorer. It enables HTML5 technologies such as those used by Edge Animate.
1 Select File > Publish Settings.
2
3
In the Publish Settings dialog box, make sure that Web is selected as the publish target.
4
5
Select the Use Google Frame for IE 6, 7, and 8 option.
Accept the default Chrome Frame Installer "No Prompt" option.
Click Save to save the publish settings and return to the composition.
See also Enable open web technologies in Internet Explorer on the Google Developers website.
System requirements for Animate
System requirements for Animate
Last updated 6/15/2014
Use motion paths
Release Notes
Edge Animate CC 4.0 (June 2014) Release Notes
Edge Animate CC 3.0 (January 2014) Release Notes
Edge Animate 1.5 Release Notes
Learn Edge Animate video tutorials
Learn how to do the basics of Edge Animate CS6 with Getting Started and New Features tutorials by product experts.
Learn Edge Animate video tutorials
Create your first Edge Animate project
There are two ways in which we can create a new Edge Animate project. The first option is to simply click on Create
New on the welcome screen. This will immediately create a new Edge Animate project with a blank stage. The second method of creating a new Edge Animate project is through the file menu. Simply clicking on File and then on New will have the exactly same effect.
Alternatively, we can use the keyboard shortcut: Ctrl + N (for Windows) or Command + N (for Mac).
Whichever method you choose, you will now have a new project opened within Edge Animate. This project will look quite scarce to begin with, as it basically consists of a single, blank Stage symbol. This Stage is representative of the single
HTML element we can locate within the HTML file Edge Animate produces upon saving it, as shown in the following screenshot:
74
Last updated 6/15/2014
Use motion paths
Save
This option will either save the current document if it has been previously saved to the file system, or it will prompt the user to provide a file name and location to save the document if this happens to be a new project.
The keyboard shortcut for this option is Ctrl + S (for Windows) or Command + S (for Mac).
Save As…
Similar to the Save option, this provides the same functionality but will always prompt the user for a file name and location through a system dialog. This is useful when saving separate versions of the same project, or when you simply want to save the project to a new location.
The keyboard shortcut for this option is Ctrl + Shift + S (for Windows) or Command + Shift + S (for Mac).
In the case of a new project, either option will provide us with a file system dialog. We see from the previous screenshot that what we are saving is, in actuality, a .html file. This is an important thing to remember about Edge Animate projects—when we are working in the Edge Animate authoring environment, we are really working in real time with the content that is being produced.
Last updated 6/15/2014
75
Use motion paths
Layout and guidance tools
When working with any element on Stage, it is useful to have some tools which assist in the layout and positioning of the elements in question. Edge Animate comes equipped with a number of tools which assist us in this task—Layout
Preferences tool, Rulers, and Guides.
Layout Preferences tool
The Layout Preferences tool allows us to make some decisions around the default properties of certain element types when create or imported. The tool itself is located on the toolbar, to the right-hand side of the default color swatches.
It appears as a small ruler in the toolbar, indicating layout:
When this tool is activated, a small overlay appears which allows us to set a number of layout preferences for the current project. Most of these preferences have to do with how elements are measured; using either pixels or percentage units:
76
These choices only affect anything new that is created in our composition or newly imported to it. Currently established elements retain their settings.
The following table details the choices we have when determining layout preferences for an Edge Animate composition.
The units for horizontal, vertical, width, and height, though appear to have the same description, are distinct values and it is clear when you adjust these parameters on Stage.
Preference
Corner Alignment
Horizontal Position Units
Vertical Position Units
Width Units
Height Units
Use 'img' tag for images
'auto' for image width
'auto' for image height
Description
It selects which corner to align to by default.
These toggle between pixels and percentage for new elements.
These toggle between pixels and percentage for new elements.
These toggle between pixels and percentage for new elements.
These toggle between pixels and percentage for new elements.
When importing images, use the img tag type.
When importing images, set width to auto.
When importing images, set height to auto.
Rulers
When enabled, Rulers are set along the top and left-hand side axis of project stage in a similar fashion to other Adobe creative applications. They assist in visualizing the measurements between elements, the relation to Stage registration point, element alignment, and more.
Last updated 6/15/2014
Use motion paths
Rulers also serve with the generation and positioning of manual Guides, which we will examine in the next section.
77
Note: To toggle rulers on and off, choose the Rulers option from the View menu in the application, or use the keyboard shortcuts: Ctrl + R (for Windows) and Command + R (for Mac).
Guides
Guides are used alongside Rulers in order to more precisely plot out and position elements on Stage. They can also be used to scope out areas in which we can draw elements using tools such as the Rectangle tool or the Rounded
Rectangle tool :
To create new Guide, be sure for Rulers been activated and are visible within the Stage panel. Click upon a ruler and drag new Guide out along that specific axis. Once Guide is positioned exactly where we like, release the mouse to drop
Guide in place.
Last updated 6/15/2014
Use motion paths
Once Guide has been placed, it can remain a pixel-based Guide or transformed into a percentage-based Guide to assist with responsive layout tools. To convert Guide from pixel units to percentages, hover over Guide and right-click. We now have the option Convert Guide to Percentage. Guide will now appear in a more teal color than the normal violet to distinguish it from pixel-based Guide. Resizing Stage will shift Guide as well—as it is now positioned based upon percentage and not absolute pixel units.
To remove Guide, simply click upon it and drag it back into Ruler. Guides can be locked from the View area of the application menu. Snapping can also be controlled from the View menu.
Smart Guides
When Smart Guides are enabled, dragging elements around Stage will cause temporary guides to appear which can assist with placement of elements. These guides will appear in alignment of other elements, or in order to align with aspects of Stage itself. For instance, in the following screenshot, Smart Guides appear when an element is dragged to the center of Stage, informing us that we will be able to center the object if dropped upon this location.
78
Smart Guides can be disabled from the application menu under View | Smart Guides. Keyboard shortcut: Ctrl + U
(for Windows) and Command + U (for Mac).
Importing external assets
Apart from the creation of basic vector and text elements within an Edge Animate composition, we also have the ability to import external assets for use in a project. These assets may have been prepared in another application such as Adobe
Photoshop, Illustrator, or Fireworks. Generally, we would want to use these imported assets more than the simple shapes generated by Edge Animate, but this will depend upon the project. File types which can be imported into Edge
Animate include:
• SVG: Scalable Vector Graphics
• PNG: Portable Network Graphics
• JPEG: Joint Photographic Experts Group
Last updated 6/15/2014
Use motion paths
• GIF: Graphics Interchange Format
Importing bitmap images
Once an image file is imported into an Edge Animate project, it can be manipulated, animated, and scripted just as any other element. To import a bitmap image file into Edge Animate, we perform the following actions:
1 Navigate to the Edge Animate application menu.
4
5
2
3
Select File | Import….
A system file browser dialog will appear. Navigate to the .png, .gif, or .jpg file you wish to import.
Select the file and click on Open.
The file will now be placed onto the Stage and also added to the project Library under Assets. From here, we can add multiple instances of this asset to the Stage.
79
Note: Note that similar to SVG files, the bitmap file instance placed upon the Stage will be using the exact dimensions of the imported file itself, so it may overlap the boundaries of the Stage. This can be remedied through element manipulation by using the Properties panel.
Now that the bitmap image asset has been imported and an instance of this asset resides upon the Stage, we can use the
Selection and Transform tools to perform manipulations such as resize, scale, and skew just as we can with text or rectangle elements. Unlike vector-based elements, however, visible artifacting, blockiness, and other distortions will occur with bitmap objects.
It is also possible to simply drag-and-drop a .jpg, .png, or .gif file from our operating system file explorer onto the Stage.
This action will have the same effect as described above when working through the application's Import… command, but we will be able to precisely place the imported image onto the Stage when employing drag-and-drop.
Last updated 6/15/2014
Use motion paths
Animation within Edge Animate
There are many applications which enable the user to compose animated sequences. Users of Adobe Edge Animate may have experience in other programs such as Director, Flash Professional, After Effects, or even Photoshop. All of these applications handle animation in slightly different ways, but they do all share some aspects of animation techniques and tooling in common as well.
Like many digital animation programs, Edge Animate employs the concept of "tweening" between keyframes. In traditional cell-based animation, a master animator would draw out certain key frames for an animation sequence, and the frames in between these key frames would be created by apprentice or lower-ranked members of the animation team. The goal was always to create a smooth transition between each key frame created by the master animator, which would result in a completed animation sequence.
This process is performed programmatically within Edge Animate. As keyframes are placed along the Timeline, Edge
Animate will record changes in property values as transitions at the position of the Playhead (moment in time). As authors, we have the additional ability to provide the tweening engine with instruction sets based upon a variety of easing equations. This allows a more natural flow between keyframes, and can also be used to achieved certain effects such as an elastic or bounce motion.
The Edge Animate Timeline
The Timeline is where all of the motion in an Edge Animate composition is orchestrated. The Timeline itself shares concepts and constructs from other Adobe applications, most notably Flash Professional and After Effects.
80
Note: Unlike the frame-based timeline in Flash Professional, the Edge Animate Timeline is purely time-based.
Playback controls
The playback controls in Edge Animate are all grouped together in the upper-left corner or the Timeline panel. These controls allow quick access to many of the playback options available through the Timeline.
Time
The time in Edge Animate is measured in standard decimal time code format (mm:ss.ddd), and this is how it is displayed in the Time control. As the Playhead moves along the Timeline, the information in this display is updated accordingly. A user can scrub the control to the left or right to adjust the current time, or simply click on it—making it editable.
Last updated 6/15/2014
Use motion paths
Note that the time controls in Edge Animate are actually grouped along with the Stage and are accessible from directly beneath that panel. The controls are also broken up to allow separate modification of the Playhead time (yellow), and
Pin time (blue), when enabled.
Timeline options
These options can be toggled on or off depending upon current needs as they perform a variety of Timeline-related functions.
81
These options include the following:
• Auto-Keyframe Mode (K): Selecting this option will enable Edge Animate to generate keyframes for various properties automatically as they are adjusted along the Timeline. When not selected, any keyframes must be inserted manually.
• Auto-Transition Mode (X): When enabled, this informs Edge Animate to use immediate transitions between element property adjustments as they are animated across time.
• Toggle Pin (P): Toggles the Pin on and off. We'll discuss the Pin in more detail shortly.
There are also a number of options present on the bottom of the Timeline:
• Only Show Animated Elements: When this option is selected, only those elements whose properties are animated will display within the Timeline. Static elements (such as a background image, perhaps) will be hidden.
• Timeline Snapping: Toggles Timeline snapping on or off.
• Show Grid: Toggles Timeline grid on or off and allows us to set the grid spacing units.
More about the Show Grid control
We are also able to set the grid spacing by clicking on the small arrow to the immediate right of this icon in order to access a small list of options. We can choose to display grid lines over a selection of measurements across the Timeline.
Last updated 6/15/2014
Use motion paths
Timeline controls
There are basically only four controls within the Timeline that we need to be concerned with: the Playhead, the Pin,
Zoom, and a set of Grid controls. The functionality between controls varies greatly here, as some are used for playback, some for animation, and others are simply there for the enhancement of our overall workflow. All, however, are very useful.
The Playhead
The Playhead is the larger of the two elements on the Timeline and is represented by a solid red line which indicates the current time. We can click on the Playhead and scrub back and forth to change the current time. When an animation is being played back through Edge Animate, the Playhead will move along with the current time.
82
Note: Normally, the Playhead and the Pin are both synced. If not, they can be resynced through the application menu:
Timeline | Toggle Pin .
The Pin
The Pin is a unique control to Edge Animate. It is a way of pinning the current state of element properties to a certain time, while using the Playhead to determine at which time the animation should complete. The Pin can be positioned either before or after the time indicated by the Playhead—but it always indicates a starting point for the animation, with the Playhead indicating the end. Changing any element properties while the Pin is unsynced will create animation of those properties beginning at the Pin and ending at the Playhead position. In this way, we can quickly and freely create animation that is tightly controlled across the Timeline.
To quickly sync or unsync the Pin from the Playhead, we can double-click on the Playhead to toggle between each state.
We can also use the keyboard shortcut (P) to accomplish this same task—or even use the control in the Timeline which performs this action.
When the Pin has been activated, the direction of animation is indicated through a colored strip of chevrons on the
Timeline. The color will be yellow or blue, depending upon the direction of motion; blue indicates motion to the left of the Pin, while yellow indicates motion to the right of the Pin.
Zoom controls
There are two zoom controls in Edge Animate which allow us to expand and contract the Timeline. One is the Zoom
Timeline to Fit button that appears as dual arrows in the lower-right corner of the Timeline. This will expand or contract the entire span of the visible Timeline to the current width of the Timeline panel. It can provide a good overview of the entire animation.
The second control is a slider which appears directly to the right and allows the user to manually control the zoom level of the Timeline to accommodate whatever we are specifically trying to accomplish at any particular time.
Last updated 6/15/2014
Use motion paths
Keyframes
Similar to their representation in After Effects, keyframes in Edge Animate appear along the Timeline as small diamonds. Unlike keyframes in Flash Professional, Edge Animate keyframes are tied directly to the property that is being changed and not to the element itself. This allows for fine-grained property adjustments across the Timeline for any particular element. It is very flexible and a powerful way to animate selected element properties!
Keyframe navigation
There are a number of keyboard shortcuts in Edge Animate that assist with Timeline navigation—specifically when jumping across keyframes.
Command
Go to Previous Keyframe
Go to Next Keyframe
Shortcut
Ctrl + Left Arrow (Windows), Command + Left Arrow (Mac)
Ctrl + Right Arrow (Windows), Command + Right Arrow (Mac)
Creating motion
Animating element properties within Edge Animate is fairly straightforward. In this section, we're going to step through a number of basic ways to animate elements along the Edge Animate Timeline. Once using only the Playhead, and again using the Playhead in conjunction with the Pin. By performing the same animation in each way, we will get a feel for the different workflow styles Edge Animate makes available to us when animating element properties across time.
Note: Note that most elements will not appear within the Timeline until their properties are actually modified across time.
The reasoning for this is if nothing is actually animated, there is no reason to clutter the Timeline.
Inserting keyframes
There are a number of mechanisms through which we can insert keyframes into our composition; using the Properties panel, the application menu, the Timeline Keyframe buttons, or through the right-click menu. Before we move on, let's have a quick look at each of these methods.
Adding keyframes through the Properties panel
With any element selected, we can position the Playhead upon the Timeline and look to the Properties panel to insert our keyframes. Notice how most of the property values have a small diamond next to them? By clicking on this keyframe control, we will manually insert a keyframe for that property into the current Playhead position for the selected element.
83
Last updated 6/15/2014
Use motion paths
Adding keyframes through the application menu
With any element selected, we can position the Playhead upon the Timeline and look to the application menu to insert our keyframes. Simply navigate to the menu and choose Timeline | Add Keyframe and then select the type of keyframe to add, based upon the property we wish to set a keyframe for.
Not all properties have keyboard shortcuts assigned to them by default, though we can easily assign them for commonly used properties, if we wish. This is accomplished through the application menu: Edit | Keyboard Shortcuts….
Using the Timeline keyframe buttons
With any element selected, we can position the Playhead upon the Timeline and look to the left area of the Timeline panel to insert our keyframes. Any property which currently has a keyframe assigned to it will appear grouped beneath an element in the Timeline. These existing properties will include a small icon positioned to the right of the property name through which we can add new keyframes for that specific property.
To add new keyframes to properties which do not appear beneath an element, we can simply right-click on the element name and choose Add Keyframe to insert them.
Last updated 6/15/2014
84
Use motion paths
Using right-click for Keyframe insertion
With any element selected, we can position the Playhead upon the Timeline and look to the Stage itself to insert our keyframes. Simply right-click on any element which exists on the Stage at that place in the Timeline, and choose Add
Keyframe to insert any of the available properties for that element.
85
Animating with the Playhead
We will now do a simple animation of an element moving from one side of the Stage to the other, while rotating and changing color using the Playhead along with the Properties panel.
1 Create a new Edge Animate project and save it to your local disk.
2 Adjust the Stage as follows by using the Properties panel:
• Stage W: 600 px
• Stage H: 350 px
Last updated 6/15/2014
Use motion paths
• Background Color: #000000
• Overflow: hidden
3 Using the Rectangle tool, draw out an element upon the Stage. We will modify its properties in the next step, so do not worry about dimensions or shape.
4 For each property listed, make the following adjustments within the Properties panel:
• Location X: 20 px
• Location Y: 230 px
• Size W: 100 px
• Size H: 100 px
• Background Color: #c0c0c0
5 Still using the Properties panel, click on the keyframe diamond next to the properties for Location, Background
Color, and Rotation. This will set a keyframe for each property within the Timeline.
6 Be sure that Auto-Keyframe properties is in its selected state in the Timeline. Since we have already marked each of these properties with initial keyframes, any adjustments we make across time will be auto-keyframed.
7 Our project should now appear as shown in the following screenshot. We are ready to proceed with the remainder of this exercise.
86
8 Drag the Playhead over to the ruler marker labeled 0:04 and release.
9 Now, select the element with the Selection tool and in the Properties panel, modify the following properties:
• Location X: 480 px
• Background Color: #900000
• Rotation: 480 deg
Last updated 6/15/2014
Use motion paths
10 Notice that we now have transition bars appear on the Timeline with another set of keyframes at the end of our animation sequence.
11 We can now either scrub through the Timeline by dragging the Playhead back and forth, or hit the Play button to view the full sequence. When played back, the element should appear to roll along the Stage from left to right, changing from gray to red as it does so. The resulting end state is displayed in the following screenshot:
87
Note: Note that any of the properties of an element can be keyframed, thus modified over time in the way we have done here.
Animating with the Pin
Now we will perform the preceding exercise, but this time we will employ the Pin to demonstrate an alternate way of creating motion in Edge Animate.
1
2
Create a new Edge Animate project and save it to your local disk.
Adjust the Stage as follows by using the Properties panel:
• Stage W: 600 px
• Stage H: 350 px
• Background Color: #000000
• Overflow: hidden
3 Using the Rectangle tool, draw out an element upon the Stage. We will modify its properties in the next step, so do not worry about dimensions or shape.
4 For each property listed, make the following adjustments within the Properties panel:
• Location X: 20 px
Last updated 6/15/2014
Use motion paths
• Location Y: 230 px
• Size W: 100 px
• Size H: 100 px
• Background Color: #c0c0c0
5 Drag the Playhead to 0:04 in the Timeline.
6 Now, go to the application menu and select Timeline | Toggle Pin. This will unsync the Pin from the Playhead.
Again, the Pin is the small control directly beneath the Playhead when unsynced.
7 Grab the Pin and drag it to 0:00 in the Timeline. This will pin the elements current properties to the 0:00 point without the need to manually insert keyframes. Keep the Playhead itself at 0:04.
8 Now, select the element with the Selection tool and in the Properties panel, modify the following properties:
• Location X: 480 px
• Background Color: #900000
• Rotation: 480 deg
Notice that we now have transition bars appear on the Timeline without the need to set any keyframes whatsoever.
88
9 Go to the application menu and select Timeline | Toggle Pin to sync the Pin. We can also toggle the Pin through a keyboard shortcut as expressed earlier in this chapter.
10 We can now either scrub through the Timeline by dragging the Playhead back and forth, or hit the Play button to view the full sequence. When played back, the element should appear to roll along the Stage from left to right, changing from gray to red as it does so.
Note: Note that, while in this case the Pin was placed at an earlier time in relation to the Playhead within our Timeline— that need not be the case. We can also place the Pin at a later time than the Playhead and the same behavior will be exhibited: current properties are pinned to the Pin position while adjusted properties align to the position of the
Playhead.
Editing transitions
Once a transition has been established, it can be adjusted through mouse interaction via the Timeline. In order to adjust the transition delay, duration, and end we simply click-and-drag the visual transition indicators within the Timeline itself.
Last updated 6/15/2014
Use motion paths
Note: Note that transitions can be adjusted on a per-object or per-property basis, allowing for a great amount of freedom when defining motion behavior.
Transition delay
This determines when the transition should begin, measured from the start of the overall Timeline. Modification of this value is accomplished by either moving the entire transition, or by dragging the right-most edge.
Transition duration
This represents the time taken up by the entire transition. Transitions can be extended or shortened easily by dragging the right-most edge.
Transition end
This is the time with which the transition completes within the Timeline.
Modifying element properties based on transition
To select a transition to edit element properties within the Properties panel; use the mouse to select a Transition block within the Timeline. The cursor should change to a little grabby hand and clicking on the transition will cause it, along with any of its keyframes, to highlight.
We now know that the element is selected and can see that the Properties panel adjusts to reflect the properties of that element at the position of the Playhead. To adjust any properties across time, simply move the Playhead to see the
Properties panel adjust to these changes.
89
Note: Note that when changing the easing behavior of a transition, we can select the entire element transition block or we may choose individual property transitions to apply a variety of transition types to the same element. It is quite flexible.
Last updated 6/15/2014
Use motion paths
Transition easing controls
You may have noticed that the motion achieved through the examples presented so far have been plain, linear transitions from one value to another. To provide a greater sense of realism and a fuller, dynamic nature to individual transitions, we also have the ability to assign a variety of easing equations to our transitions.
There are many easing choices within Adobe Edge Animate. The default is Linear, which will simply express a transition from A to B in an entirely linear fashion. Often, an easing algorithm of a more dynamic nature is required to express a bit more realism in motion, or to achieve a specific effect. Edge Animate comes bundled with no less than 32 easing choices to provide the user with a variety of options when determining transition easing.
90
Note: The transition easing algorithms available in Edge Animate are similar to others found in many ActionScript libraries for animating Flash Professional content. Unlike in Flash Professional, Edge Animate does not yet have the ability to customize these presets.
Transition easing types
While Edge Animate does supply us with a large number of easing types, exactly what they do may not be obvious to many users at first glance. It is very simple to set up an Edge Animate project that allows us to adjust and visualize each of these easing types when applied to a simple transition.
Note: Almost all easing types have three variants of themselves, ease in, ease out, and both ease in and ease out together.
Shifting transitions
Edge Animate makes it very easy to shift transitions back and forth across the Timeline. Simply use the mouse cursor to grab a transition (click and hold) and then move the mouse back and forth along the Timeline until the transition appears at the desired location. Release the mouse to complete the shift.
Changing transition duration
To adjust the duration of any transition, simply hover the mouse cursor over the beginning or end of any transition block until the cursor changes to indicate that adjustments are possible. Then, click-and-drag along the Timeline to adjust the length of a particular transition. We can also select multiple Transitions in this same way through use of the
Shift key while we make additional selections along the Timeline.
Last updated 6/15/2014
Use motion paths
The cursor will adjust to look like two lines with arrows pointing to the left or right when hovering over a transition we can expand in this manner.
Selecting transition keyframes
To select individual keyframes, simply click on the desired keyframe and perform whatever modification is desired.
Some possible options include hitting the Delete key on the keyboard to remove the selected keyframes, or modifying the transition through the right-click menu.
The cursor will adjust to look like a small pointing hand if we are able to select a keyframe. Of course, any locked element keyframes cannot be interacted with in any manner.
Selecting multiple transitions
Holding the Shift key down while keyframes are selected will enable the selection of multiple keyframes. Alternatively, a selection rectangle can be drawn across multiple keyframes, but this is imprecise, as full transitions will more than likely be selected as well.
Copy and paste keyframes
While keyframes are selected, we can easily copy and paste these keyframes from one spot in the Timeline to another by moving the Playhead to another position before we paste. This is a good mechanism for copying the exact properties we want and replicating them across the Timeline.
Generating transitions through keyframes
With multiple keyframes selected, we can choose to right-click on them in order to remove or create transitions between them. This is useful when we have used auto-transition mode but then decide to retain keyframes but remove the smooth transition between them, or perform the reverse intention.
91
Last updated 6/15/2014
Use motion paths
Animating a website header
One of the basic use cases for Adobe Edge Animate is the creation of a simply animated website header. We will be authoring such a composition for a studio recording project of the name An Early Morning Letter, Displaced, who wish to have images of each of their releases animate in on the header itself. Thankfully, they have provided us with all of the assets necessary for the construction of this animated header.
Note: These assets are included as part of the files for this chapter and are in the folder named banner_assets.
Project setup, asset import, and general layout
The first step in this composition will be to set up our Edge Animate project, import all of the assets, and arrange them upon the Stage. We will begin by arranging the assets in their final form, as they should appear at the end of the animation once it has completed playback. The Pin makes it quite easy to animate "backwards".
1 Create a new Edge Animate project and save it onto the local disk.
2 Adjust the Stage as follows by using the Properties panel:
• Stage W: 940 px
• Stage H: 198 px
• Background Color:#000000
• Overflow: hidden
3 Go to the application menu and select File | Import… to bring up a file browser.
5
6
4 Select all of the .png files located within the provided assets folder and click on Open. The selected files will be placed upon the Stage and also added to the project Library.
The background image is the exact size of the Stage itself and should fill this entire area.
The album art can be arranged evenly across the bottom of the Stage as seen in the following screenshot. We can use the mouse or the Properties panel to arrange these images. Space them evenly apart from one another.
92
7 Finally, we need to add a title to this header animation. We'll use the Text tool to form the project's name along the top of the header. Choose Text tool (T) now.
8 Add a new text element to the Stage and type the term An Early Morning Letter, Displaced into the field.
9 With this text element selected, enter the Properties panel and make the following adjustments:
• ID: Title
Last updated 6/15/2014
Use motion paths
• Location X: 16 px
• Location Y: 11 px
• Font Name: Arial Black, Gadget, sans-serif
• Font Size: 40 px
• Font Color: #bbbbbb
10 We should now have a composition that appears as shown in the following screenshot:
93
Performing the animation of elements
We will now perform the animation of all elements on the Stage through use of the Playhead, Mark, and Properties panel.
Animating the background
We will create a transition lasting 00:07.000, which will fade in the background element while slightly adjusting its scale.
1 Using the Selection tool, click on the bg element to bring up its properties.
2
3
In the Timeline, move the Pin to 00:07.000 and the Playhead to 00:00.000.
Using the Properties panel, make the following adjustments:
• Scale (linked): 115 %
• Opacity: 25 %
4
5
In the Timeline, click on the transition that we have just created to select it.
In the Timeline, change the Easing selection to Ease Out | Sine to determine how the transition should occur upon playback. Leave the scale transitions as Linear.
Animating the cover art (do this for each cover art image)
For each image, we will create a transition lasting 00:02.000, which with slide the image in from off-screen, resulting in a playful bounce before coming to a rest. We will stagger the transitions of each subsequent image to begin at the midpoint of the previous transition, creating a flurry of motion within the composition.
1 Using the Selection tool, click on the fvm001 element to bring up its properties.
2 In the Timeline, move the Pin to 00:02.090 and the Playhead to 00:00.000.
Last updated 6/15/2014
Use motion paths
3 Using the Properties panel, make the following adjustment:
• Location X: 986 px
4 In the Timeline, click on the opacity transition that we have just created to select it.
5 In the Timeline, change the Easing selection to Ease Out | Bounce to determine how the transition should occur upon playback.
6 Repeat the previous steps for each of the other album art images.
Note: Edge Animate also includes the option to paste various elements of a transition from one object to another. For repeatable transitions such as this one, we may want to have a look at the Paste Special commands under the application
Edit menu.
Animating the title text
We will create a transition lasting 00:05.500, which will fade in the title text element.
1 Using the Selection tool, click on the Title element to bring up its properties.
2
3
In the Timeline, move the Pin to 00:06.000 and the Playhead to 00:05.000.
Using the Properties panel, make the following adjustment:
• Opacity: 0 %
4 In the Timeline, click on the transition that we have just created to select it.
5 In the Timeline, change the Easing selection to Ease In | Cubic to determine how the transition should occur upon playback.
Finishing up!
Once all of the elements are added to the Stage, positioned correctly, and animated properly through transitions, the
Edge Animate Timeline will look similar to what we see in the following screenshot:
94
Note: Edge Animate makes it easy to see exactly what is going on in a composition through even fine-grained transition indicators, which correspond to individual element properties.
The result of our animated banner appears in a web browser, as shown in the following screenshot. To publish an Edge
Animate composition to the browser, we can choose File | Preview in Browser from the application menu.
Last updated 6/15/2014
Use motion paths
Summary
In this chapter, we've examined how to create motion in Adobe Edge Animate by making use of the Timeline, Playhead,
Pin, and Properties panel. Those who are familiar with Flash Professional or After Effects should recognize just how familiar many of these concepts are, and possibly how refined and evolved these concepts have become as implemented in the Edge Animate application interface. It is quite easy to both create and edit animation within an Edge Animate composition!
Adding basic interactivity
Lesson overview
In this lesson, you’ll learn how to do the following:
• Understand interactivity
• Work with the syntax of JavaScript
• Recognize the relationship between JavaScript, jQuery, and the Edge Animate API
• Differentiate triggers, events, and actions
• Add triggers to the Timeline
• Insert labels
• Create actions to respond to events
• Control the behavior of the Timeline playhead
• View and edit script with the Code panel
• Use comments to annotate code
• Hide and show elements to incorporate visual feedback for buttons
• Control animated elements
• Customize the mouse cursor
This lesson will take approximately two hours to complete. Before you begin, download the Lesson05 content .
Last updated 6/15/2014
95
Use motion paths
Let your viewers explore your composition and become active participants. Use Adobe Edge Animate’s built-in code snippets and intuitive panels to add actions to create engaging, user-driven, interactive experiences.
Getting started
To begin, view the travel guide that you’ll create as you learn to make interactive projects in Adobe Edge Animate.
1 Double-click the 05End.html file in the Lesson05/05End folder to play the composition in a browser.
Last updated 6/15/2014
96
Use motion paths
The project is an interactive photo gallery showing images from Burma. Viewers can watch the short slideshow automatically play and loop back to the beginning. Or, viewers can click any thumbnail image on the left side of the
Stage to go directly to a particular image. Move your mouse over the triangular button at the top to see a caption unravel.
In this lesson, you’ll create interactive buttons with rollover highlights and learn to incorporate the proper code that tells Edge Animate where to move the playhead on the Timeline to display the particular animation or image there.
2 Close the 05End.html file and quit your browser.
3 Double-click the 05Start Edge Animate file in the Lesson05/05Start folder to open the initial project file in Edge
Animate.
97
Last updated 6/15/2014
Use motion paths
98
The file includes all the assets already placed on the Stage and the transitions between each image on the Timeline.
The Stage has already been sized properly. In this lesson, you'll make this linear animation interactive.
4 Choose File > Save As. Name the file 05_workingcopy and save it in the 05Start folder. Saving a working copy ensures that the original start file will be available if you want to start over.
About interactive compositions
Interactive compositions change based on the viewer’s actions. For example, when the viewer clicks a button, a different graphic with more information could appear. Interactivity can be simple, such as the click of a button, or it can be more complex, involving different kinds of interactions with the same element—for example, moving your mouse cursor over a button, clicking the button, and moving your mouse cursor off the button are three unique events that could each result in different visual changes on the Stage.
In Edge Animate, you use JavaScript to achieve interactivity. JavaScript is a popular and standard script for Web browsers. JavaScript runs on browsers for desktops as well as on devices such as tablets and mobile phones.
If you have no idea what JavaScript is, or how to write code—don't panic! Adobe Edge Animate provides an easy interface to add JavaScript to your compositions and integrate common interactive functions. When you get more comfortable with the syntax of the script, you can begin to delve deeper and customize the interactivity.
Last updated 6/15/2014
Use motion paths
In this lesson, you’ll learn to create nonlinear navigation, meaning the animation doesn’t have to play straight from the beginning to the end, and stop there. You'll add code that gets triggered when the playhead reaches a certain point in time.
You’ll also add code that moves the playhead to different parts of the Timeline to display particular elements. You’ll also learn to make elements on the Stage respond to different interactions with the mouse cursor.
Understanding JavaScript
JavaScript is the scripting language that adds additional functionality to a web page. Many of the common interface elements on websites, such as pull-down menus, checkboxes, or search boxes, are created with JavaScript. Edge
Animate also uses JavaScript to power its interactivity, as well as the animations and other effects.
Where the JavaScript lives
Even without adding any interactivity to your composition, your project depends on JavaScript. The JavaScript code is contained in several separate text documents that have the file extension “.js”. Look at the files associated with your Edge
Animate composition, 05_workingcopy. There are four JavaScript files within the folder called edge_includes:
• edge.0.1.6.min.js
• jquery-1.7.1.min.js
• jquery.easing.1.3.js
• json2_min.js
These files contain the basic code required for any Edge Animate composition. There are also additional JavaScript files, which are unique to your project. Those files are located outside the edge_includes folder, and are automatically named with your Edge Animate filename. Your files are named as follows:
• 05_workingcopy_edge.js
• 05_workingcopy_edgeActions.js
• 05_workingcopy_edgePreload.js
When your Web browser first launches your Edge Animate project, it loads the JavaScript code so all the functionality is available when your project plays. All the code is organized as functions, which group commands together. Since each function has a unique name, you can trigger the commands simply by referencing the name of the function.
Programmers say that a function is “called,” or that the browser “calls” a function.
jQuery and the Edge Animate API
While JavaScript is useful, it’s meant to control all the details of a web page, which is powerful but often clumsy and complicated. That’s where jQuery and the Edge Animate API come in handy. jQuery is an open-source JavaScript library that provides an easy way to select, control, and animate elements in a browser. jQuery is not another language, but simply a set of well-written JavaScript functions. If you look again at the JavaScript files in the edge_includes folder, you'll see that two of those files are, in fact, files for jQuery.
Along with jQuery, Edge Animate provides additional functions it has built for you. The library of JavaScript functions that Edge Animate has built for your use constitute the Edge Animate API (Application Programming Interface).
99
Last updated 6/15/2014
Use motion paths
You can think of JavaScript, jQuery, and the Edge Animate API as different layers of control. The Edge Animate API is the top, most superficial layer of control, jQuery is the middle, and the core JavaScript is the deepest layer. A useful analogy is the control of an automobile. The Edge Animate API would represent the controls you see in the driver’s seat—the steering wheel, the parking brake, or the gas pedal. They allow you to drive the car without you needing to know much about its inner workings. They’re created from a combination of levers, dials, and shafts to make controlling your vehicle simple and easy. Those levers, dials, and shafts represent the jQuery level of control. At the most granular level, you have JavaScript, represented by the individual nuts and bolts and gears.
Just as it is so much easier to drive a car using the steering wheel and gas pedal, so it is to control your Edge Animate composition with the Edge Animate API. But in both cases, there’s no reason why you couldn’t tinker with the deeperlevel controls for a more customized experience. You can start coding in jQuery and JavaScript to make your own interactivity. You just need to be sure you’re a competent mechanic, or know your way around JavaScript!
In this lesson, you’ll first learn to add interactivity with the Edge Animate API. Later, as you gain more confidence and comfort, you’ll delve a little deeper and insert some jQuery for more sophisticated effects.
Triggers, events, and actions
Edge Animate uses actions, triggers, and events to incorporate JavaScript in your composition.
Actions are the things that Edge Animate can do, which, given the full JavaScript language at its disposal, is quite a lot.
Actions can range from loading a hyperlink, to changing a particular visual property of an element on the Stage, to storing a piece of information in a variable for later retrieval.
Triggers are actions that are placed along the Timeline. When the playhead reaches the trigger, the actions are executed.
Use triggers when you want code to be synchronized by your animation, and not by user control.
Events are things that happen in a composition that Edge Animate can respond to with an action. Typically, events are user-generated, such as the click of a mouse button, the pressing down of a key, or the tilting of a mobile device.
However, events can also happen automatically. For example, the point when the composition is ready (when all the assets and code libraries have been downloaded) is an event. Events are always paired with actions. When an event happens, an action—or set of actions—is executed.
Timeline triggers
Triggers are the simplest way to add code to your Edge Animate composition. Triggers are executed automatically when the playhead reaches them on the Timeline. You can have multiple triggers along the Timeline. The minimum time interval between triggers is 1/1000th of a second, but practically, you’d never need or want actions to be executed so close together.
Creating a loop
For this slideshow of Burma, you’ll insert a trigger at the end of the Timeline to make the playhead automatically return to the beginning, creating a loop.
1 Click the Zoom Timeline to Fit button at the bottom of the Timeline.
The entire slideshow animation appears in the available space in the Timeline panel.
2 Move the playhead to the very end of the slideshow, at 0:10 seconds.
100
Last updated 6/15/2014
Use motion paths
3 In the Timeline panel, click the Insert Trigger button on the top Actions row. You can also choose Timeline > Insert
Trigger or press Ctrl+T (Windows) or Command+T (Mac OS).
An icon that appears as a diamond enclosed by curly braces appears on the Timeline at 0:10 seconds. The icon represents a trigger.
A panel appears with a large white text-entry field and a column of code snippet options on the right side. The panel is titled Trigger@10000ms, referring to the trigger's position at 10,000 milliseconds, or 10 seconds.
4 Select the content of the current script.
The current script, //insert code here, is known as a comment. Comments always begin with two backslash characters, and are descriptions of the code. Comments are non-functional, and don't significantly add to the file size of your composition.
5 From the menu of code snippets on the right-hand side of the panel, select the Play from option.
Last updated 6/15/2014
101
Use motion paths
New code appears in the panel, replacing the existing comment. The new code comes with its own comments that describe its function. The code, sym.play(1000);, moves the playhead to a particular point in time on the Timeline and begins playing.
6 Replace the 1000 within the parentheses in the code with 0.
The number in between the parentheses of the play() command represents the time to which the playhead will move. Since you want the playhead to move to the beginning of the Timeline at 0:00 seconds, enter 0 in the parentheses of the play() command.
7 Close the panel and preview your project in a browser by pressing Ctrl+Enter (Windows) or Command+Return
(Mac OS).
The slideshow plays through and repeats when it reaches the end at 10 seconds.
Note: The number in between the parentheses of the play() command is called the argument. It gives the command additional information to make it more specific. In this case, it tells the command at what millisecond point in time to start playing. Commands can have multiple arguments, which are separated by commas. As you learn more commands, you also learn what arguments they require.
Editing triggers
Editing the script for your triggers is simple and easy. The panel that appeared when you added the trigger is always available for modifications, additions, or deletions.
• To edit a trigger, double-click the trigger icon on the Timeline.
• The script panel opens to display the trigger, and you can modify the argument, delete the code, or add new code from the snippet options on the right side of the panel.
• To move a trigger, click and drag the trigger icon on the Timeline to a new position.
• The trigger moves to a different position, so the actions are executed when the playhead reaches a new time.
• To delete a trigger, select the trigger on the Timeline and press the Delete key.
The trigger is removed from the Timeline.
Last updated 6/15/2014
102
Use motion paths
Script panel viewing options : The script panel that opens when you add a trigger has several options to help you make viewing the code easier. The top-right options menu has three choices that control what’s displayed.
• Show Line Numbers displays sequential numbers next to each line of code so you and other developers that share the script can pinpoint code.
• Font Size controls the display size (Small, Medium, or Large) of the text in the script. The default option is Small.
• Include Snippet Comments automatically adds comments to the code that you add from the snippet options on the right side of the panel.
In addition to these display options, you can click the vertical border that divides the white script area with the menu of code snippets to collapse the menu to make more room for your code. Click the divider again to expand the menu.
103
Minding your syntax
Let’s examine the code that you added in the trigger more closely to learn about JavaScript syntax, or the way words and punctuation work together. Syntax is the grammar of a programming language.
If you’re unfamiliar with program code or scripting, the JavaScript code that Edge Animate inserts may be challenging to decipher. However, once you understand the basic syntax, you’ll find it easier to follow a script.
The code that is in your trigger at 10000 milliseconds appears as follows: sym.play(0);
• The first word in the statement is sym. When the statement is on the main Timeline, the word sym represents the whole Edge Animate composition. Edge Animate is organized around the concept of “symbols,” and the root, or base-level symbol is the Edge Animate Stage. This root symbol contains all the elements and animations in your
Edge Animate composition—everything on the Stage or Timeline. In JavaScript, when we want to do something, you first identify the object that you want to control. In this case, since you want to affect the Timeline of your Edge
Animate composition, the first thing that is written in the script is sym.
• The dot operator (.) provides a way to access different commands for the object that you’ve identified (in this case, sym). Objects can be animations, text, or abstract concepts such as the date or particular data. Objects have properties, which describe them, and methods, which are the things that they can do. In your trigger, the method for the sym object is play(). The dot, or period separates the object and its method.
• As in English, every open parenthesis must have a corresponding close parenthesis, and the same is true for
JavaScript. If you open something, you must close it. All methods have parentheses. Your method, play(), has an open and close parenthesis.
• Each method can have different arguments in between the parentheses, which provide additional information. The play() method requires a single argument, which tells Edge Animate at what point in time (in milliseconds) to begin playing. Methods can have multiple arguments, which are separated by commas.
• Some arguments require a number, some may need a name, and others may need the words true or false. Whenever you’re entering the name of a file or a URL, use single or double quotation marks. Quotation marks distinguish a
String value, which represent a sequence of characters, with other kinds of values.
Last updated 6/15/2014
Use motion paths
• You can add comments to remind you or others of what you are accomplishing with different parts of the script. To add a comment for a single line, start it with two slashes (//). To type a multiline comment, start it with /* and end it with */. Comments are ignored by JavaScript and won’t affect your code at all.
• Thesemicolon at the end of the line tells JavaScript that it has reached the end of a complete statement and the end of a line of code. A semicolon is like a period in a sentence.
That’s a lot of information packed into a single line of code! But getting comfortable with the syntax is your first step in getting out from behind the steering wheel and looking under the hood of your car.
Events and actions
So far, you’ve seen how Edge Animate uses triggers to automatically execute JavaScript when the playhead reaches a certain point on the Timeline. You added a trigger at the end of the animation to create a loop. The other two ways with which Edge Animate adds JavaScript is with events and actions.
Events are occurrences that happen in Edge Animate that it can detect and respond to. When an event is detected, you provide actions as a response.
It’s useful to think of interactions in terms of events and actions. When you click on a menu button (event), more options may expand (actions). When you roll over a button (event), a triangular play icon may appear on it (actions).
In the next section, you’ll add thumbnail images to the Stage. When the user clicks on each thumbnail (event), the playhead will move to a new position on the Timeline (actions) to show a particular image from the travel slideshow.
Creating the buttons
A button is a basic visual indicator of what the user can interact with. The user usually clicks a button, but many other types of interactions are possible. For example, rollovers, double-clicks, and rollouts are all possible. Edge Animate also provides events unique to mobile devices, such as touches.
You’ll start with the simplest, and most common event, which is the single-click.
Adding the thumbnails
Small, cropped versions of the larger Burma images are provided for you in the images folder.
1
2
In the Library panel, expand the images folder within the Assets folder.
Drag the file called button1_gray.jpg from the Library panel to the Stage.
A grayscale thumbnail of fisherman appears on the Stage, Timeline, and Elements panel.
3 Position the thumbnail so that its top-left corner is at the top-left corner of the Stage. The coordinates should be at
X=0, Y=0.
104
Last updated 6/15/2014
Use motion paths
4 Drag the file called button2_gray.jpg from the Library panel to the Stage, and position it just below the first thumbnail. You can use the smart guides to help automatically snap the images in place. The coordinates should be at X=0, Y=80.
Two grayscale thumbnails are at the left side of the Stage, one above the other
5 Drag the remaining three grayscale thumbnails from the Library panel onto the Stage, positioning each successive one below the previous one.
There should be a total of five thumbnail images vertically stacked on the left side of the Stage.
Last updated 6/15/2014
105
Use motion paths
Adding the events
Each element on the Stage can have its own events and actions. Insert code for individual elements from the far left column of the Timeline or Elements panel. The Open Actions button is indicated by a set of curly brackets.
1 In the Timeline or the Elements panel, click the Open Actions button for the first thumbnail element, button1_gray.
The script panel for button1_gray opens.
A menu of options automatically opens, displaying the events that are possible for the button1_gray element.
Last updated 6/15/2014
106
Use motion paths
2 Select the first option: click.
Edge Animate adds a click tab at the top of the panel with an empty script pane and available snippets on the right.
Note: As you add more events to the same element, additional tabs appear at the top of the script panel.
Note: To delete an event (and any code associated with it), select the particular tab for the event and click the Minus button at the top-left corner of the script panel.
Adding the actions
Each event must have an accompanying action, or a response, to the event.
1 Position your cursor on the second line of the script pane (after the first line of comments), and choose the Stop at option.
Last updated 6/15/2014
107
Use motion paths
Edge Animate adds the code to stop the playhead at a particular position on the Timeline.
2 In between the parentheses of the stop() method, replace the 1000 number with 0.
The stop() method requires a number, in milliseconds, of the point on the Timeline at which it will move to and stop.
Since this first grayscale thumbnail is of the fishermen, you want the playhead to stop at 0:00 seconds, the point at which we see the full image of the fishermen on the Stage.
Note: You can actually use any number between 0 and 1500 for the stop() method for button1_gray, since the image of the fisherman remains on the Timeline until 1.5 seconds, but it’s simpler and easier to be consistent to pick the time when the image first appears.
3 Close the script panel.
The Open Actions icon for the button1_gray element becomes filled in, indicating that there is currently script attached to that element.
Last updated 6/15/2014
108
Use motion paths
4 Preview your Edge Animate composition in a browser by selecting File > Preview in browser, or pressing Ctrl+Enter
(Windows)/Command+Return (Mac OS).
5 At any point during the slideshow, click the first grayscale thumbnail.
The slideshow stops and shows the image of the fishermen.
Completing the interactivity
Now that you’ve completed the interactivity for the first button, add the same functionality to the remainder.
1 In the Timeline or the Elements panel, click the Open Actions button for the second thumbnail element, button2_gray.
The script panel for button2_gray opens.
2 Click on the Plus button on the upper-left corner.
A menu of options opens, displaying the events that are possible for the button2_gray element.
3 Select the first option: click.
Edge Animate adds a click tab at the top of the panel with an empty script pane and available snippets on the right.
4 Position your cursor on the second line of the script pane (after the first line of comments), and choose the Stop at option.
Edge Animate adds the JavaScript code to stop the playhead at a particular position on the Timeline.
5 In between the parentheses of the stop() method, replace the 1000 number with 2000.
109
The stop() method requires a number, in milliseconds, of the point on the Timeline at which it will move to and stop.
Since the second grayscale thumbnail is of the statues, you want the playhead to stop at 0:02 seconds, the point at which we see the full image of the statues on the Stage.
Last updated 6/15/2014
Use motion paths
6 Add similar click events to all the other grayscale thumbnail images, with the Stop at option. Be sure to change the arguments for each stop() method as follows, so the playhead stops at different times to display a unique larger image on the Stage:
• The stop() method for button1_gray should go to 0 milliseconds.
• The stop() method for button2_gray should go to 2000 milliseconds.
• The stop() method for button3_gray should go to 4000 milliseconds.
• The stop() method for button4_gray should go to 6000 milliseconds.
• The stop() method for button5_gray should go to 8000 milliseconds.
Navigating the Code panel
Your travel slideshow is now interactive, where users can click to see any of the images. But your code appears to be scattered among many different elements. How can you view all the code for your Edge Animate composition together?
The answer is in the Code panel, which you can open by choosing Window > Code, or pressing Ctrl+E (Windows) or
Command+E (Mac OS).
Viewing your code
The Code panel displays all the code in your Edge Animate composition—both the code that is automatically generated for every project, and the code that you insert yourself.
1 Choose Window > Code, or press Ctrl+E (Windows)/Command+E (Mac OS).
The Code panel opens. The Code panel is similar to the other script panels for triggers, events, and actions.
110
2 Click on the Full Code button on the far right side of the panel to toggle between Full Code mode and non-Full Code mode.
In Full Code mode, Edge Animate displays the entire code for the JavaScript file for the Edge Animate composition.
Scroll down to see the script for all your thumbnail elements as well as the trigger. The code that this represents is contained in the file 05_workingcopy_edgeActions.js.
Last updated 6/15/2014
Use motion paths
In non-Full Code mode, you can select the code for the individual elements or triggers on the Stage on the left side of the panel. In addition, there is an option to see the code for the Preloader, which is currently disabled because you haven’t yet added one. In later lessons, you’ll learn about adding a Preloader.
3 While in non-Full Code mode, click on the Plus button in line with the Stage element.
A hierarchical menu appears that allows you to add an event to the Stage itself, an event to any of the elements on the Stage, or an event to the Timeline.
Last updated 6/15/2014
111
Use motion paths
4 If you want to delete an event or trigger from the Code panel, right-click on the event or trigger from the list and select Delete Action.
5 In either Full Code or non-Full Code mode, when you make additions and edits to the script, and they are saved in the composition.
Dealing with code errorsUsing the provided code snippets makes adding code relatively easy because the script is already formatted correctly. All you have to do is replace key values. However, bugs and typos do invariably creep in, and dealing with code errors is a common struggle for any developer, whether a novice or an expert.Edge Animate immediately alerts you to code errors, which make finding and correcting them easy. When there is a mistake in syntax in any of the code, Edge Animate displays an error message at the bottom left corner of the Code panel. For example, if you were to accidentally delete the closing parenthesis of the stop() method, the error display tells you where the error occurs. In addition, a red dot appears next to the line of code in question.The error notification is also displayed at the bottom-right corner of the Stage.
Last updated 6/15/2014
112
Use motion paths
Click on the arrow icon after the error description to jump directly to the source of the error in the Code panel so you can fix it. The All or Code options in the error display determines whether all errors are displayed (including warnings of feature incompatibilities with various devices, such as text shadows in IE9), or only code errors are displayed.
Creating labels
When the user clicks each thumbnail, Edge Animate moves the playhead to a new time on the Timeline, according to the argument in the stop() method. However, imagine that the client who has commissioned you to develop this slideshow wants the whole sequence to run a little slower. That’s an easy task to do because you can select all of the elements on the Timeline and move all the keyframes and animations forward to lengthen the total amount of time. But doing so causes the times that each image appears on the Stage to change, which would require you to change all the millisecond values in the stop() methods.
There is an alternate approach that would save you time and effort. Instead of using fixed-millisecond times in the stop() methods, you can use labels, which refer to points on the Timeline. Labels can move with your animation, so increasing or decreasing the length of your animation can move the labels proportionately.
Adding labels
Labels appear on the Timeline panel, below the time markers and just above the Actions layer.
1 Move the playhead to 0:00 seconds.
Last updated 6/15/2014
113
Use motion paths
The image of the fisherman appears at 0:00 seconds.
2 Click the Insert Label button, or press Ctrl+L (Windows)/Command+L (Mac OS).
A label appears on the Timeline, named Label 1.
3 Rename the label fishermen, and press Enter to exit the text editing of the label.
The label called fisherman is now associated with 0:00 seconds.
4 Add four more labels to the Timeline, each marking the starting point at which an image appears on the Stage.
• Insert the label statues at 0:02 seconds.
• Insert the label houses at 0:04 seconds.
• Insert the label monk at 0:06seconds.
• Insert the label women at 0:08 seconds.
Editing labels
There are several ways you can edit labels once you’ve inserted and named them:
• To rename a label, double-click the label name on the Timeline.
• To move a label, click and drag the label on the Timeline to a new position.
• To delete a label, select the label on the Timeline so it is highlighted and press the Delete key.
• To cut, copy or paste a label, right-click on a label and choose your desired option, or use the standard keyboard commands for cut (Ctrl/Command+X), copy (Ctrl/Command+C), and paste (Ctrl/Command+V).
Last updated 6/15/2014
114
Use motion paths
Changing the references to the Timeline
Now that the Timeline contains labels, you can change the references in the JavaScript code.
1 Choose Window > Code, or press Ctrl+E (Windows)/Command+E (Mac OS).
The Code panel opens.
2 If it is not already selected, click the Full Code button to display the panel in Full Code mode.
All the code for the thumbnail events and actions are displayed in the single script pane.
115
3 Replace all the millisecond times in the stop() methods with your labels. The following lines of code should be changed:
• Change sym.stop(0); to sym.stop("fishermen");
• Change sym.stop(1500); to sym.stop("statues");
• Change sym.stop(3500); to sym.stop("houses");
• Change sym.stop(5500); to sym.stop("monk");
• Change sym.stop(7500); to sym.stop("women");
Note: Make sure that you are using straight quotation marks around your label names. The quotation marks are essential for JavaScript to identify the names as a String (and not a variable). Straight quotes and curly quotes (or smart quotes) are different characters in HTML and JavaScript and they are not interchangeable.
4 Preview your Edge Animate composition in a browser by choosing File > Preview in the browser, or pressing
Ctrl+Enter (Windows)/Command+Return (Mac OS).
Last updated 6/15/2014
Use motion paths
5 At any point during the slideshow, click the thumbnail images.
The slideshow stops and shows the selected image.
6 Return to Edge Animate and select all the elements on the Timeline by choosing Select > All, or by pressing Ctrl+A
(Windows)/Command+A (Mac OS). Make sure none of the elements are locked.
7 Click and drag the last keyframe of the last animated element on the Timeline. Drag the keyframe to the left to decrease the total amount of time of the slideshow.
As you decrease the length of time for all the animated elements, the labels also move proportionally, preserving their identification of what's displayed on the Stage. Return the total time of the composition to 0:10 seconds.
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.
1 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.
116
2 Drag button1_color.jpg from the Library on to the Stage.
3 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.
Last updated 6/15/2014
Use motion paths
4 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.
117
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.
1
2
Move the playhead to 0:00 seconds.
3
Hold down the Shift key and select all the colorized thumbnail elements.
In the Properties panel, change the Display property from 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.
Last updated 6/15/2014
Use motion paths
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.
1 In the Timeline or the Elements panel, click the Open Actions button for the first thumbnail element, button1_gray.
The script panel for button1_gray opens. The current click event and actions appear.
2 Click on the Plus button on the upper left corner and choose mouseover.
Edge Animate adds a mouseover tab.
Last updated 6/15/2014
118
Use motion paths
3 Position your cursor on the second line of the script pane (after the first line of comments), and choose the Show
Element option.
Edge Animate adds the JavaScript code to display an element. The highlighted portion of the code is the name of the element to display.
4 Replace the highlighted code with button1_color. Make sure that the double straight quotation marks remain around your element name.
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.
Last updated 6/15/2014
119
Use motion paths
5 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.
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.
120
6 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.
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 of 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 of 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.
1 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.
Last updated 6/15/2014
Use motion paths
The script panel for button1_color opens.
2 In the popup menu that appears, choose mouseout for the event.
Edge Animate adds a mouseout tab.
3 Position your cursor on the second line of the script pane (after the first line of comments), and choose the Hide
Element option.
Edge Animate adds the JavaScript code to display an element. The highlighted portion of the code is the name of the element to display.
Last updated 6/15/2014
121
Use motion paths
4 Replace the highlighted code with button1_color. Make sure that the double straight quotation marks remain around your element name.
122
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.
5 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.
As soon as your mouse cursor moves over the grayscale thumbnail image, it becomes colorized. When you move your mouse cursor off of the image, the button appears to revert back to grayscale.
6 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.
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 don’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.
1 In the Timeline or the Elements panel, click the Open Actions button for each of the grayscale thumbnail elements.
2 Choose the click event tab on the script panel, and click the Minus button.
Edge Animate deletes the click event and all of its actions.
3
4
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.
Edge Animate adds a click event tab.
5 Choose the Stop at option, and as you did before, replace the millisecond argument with the corresponding label on the Timeline.
Last updated 6/15/2014
Use motion paths
6 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 of them, they revert to grayscale, and when you click on them, Edge Animate displays the corresponding image from the slideshow.
Using the Code panel to make global edits : Making global edits as you did in this task, such as deleting all the click events from a set of elements, can be arduous because of the need to select and modify each element. However, using the Code panel can be a huge time-saver if you’re careful about selecting and editing code.Open the Code panel by choosing Window > Code, or pressing Ctrl+E (Windows)/Command+E (Mac OS), and choose the Full Code mode.
Examine the code for all the click events (which are referred to as "click") for all the desired elements. Delete everything that begins with the statements that include the click event and ends with //Edge binding end.
Events for the mouse and for touch devices: The following list explains the available events that you can attach to your elements for interaction with the mouse or with a touch. For most users, the click event or touchstart event will be sufficient for all projects.
• click, an event that happens when the mouse button is pressed and released.
• dblclick, an event that happens when the mouse button is pressed and released twice in rapid succession.
• mouseover, an event that happens when the mouse cursor moves over an element.
• mousedown, an event that happens when the mouse button is pressed.
• mousemove, and event that happens whenever the mouse cursor moves within an element.
• mouseup, an event that happens when the mouse button is released.
• mouseout, an event that happens when the mouse cursor moves off of an element.
• touchstart, an event for touch devices when a user touches an element.
• touchmove, an event for touch devices that happens when the user touches and drags a finger over an element.
• touchend, an event for touch devices that happens when the user stops touching an element.
Other user events such as keyboard presses are also available, but not for individual elements. Key presses are associated with the Stage element, and you'll explore those and other kinds of events in the next lesson.
Customizing the mouse cursor
In addition to the visual feedback that you can provide by changing the appearance of the button when the user interacts with it, you can also change the appearance of the cursor itself. Often, the default arrow cursor on a desktop or laptop browser changes to a hand (known as the pointer cursor) when it hovers over an interactive element or hyperlink. You can choose to change the cursor to a pointer, or choose from among dozens of other cursor types.
Last updated 6/15/2014
123
Use motion paths
Using the pointer
The Properties panel controls the cursor appearance and allows you to select a custom icon for each element.
1 In the Timeline panel, temporarily turn the Display property for the five colorized thumbnail elements to On.
Turning on the Display property allows you to select them on the Stage.
2
3
Select all five colorized thumbnail elements, button1_color through button5_color.
In the Properties panel, click the Cursor option and choose the pointer icon.
124
4 Turn the Display property for the five colorized thumbnail elements back to Off.
The colorized thumbnail elements are hidden again.
5 Preview your Edge Animate composition in a browser by choosing File > Preview in your browser, or pressing
Ctrl+Enter (Windows)/Command+Return (Mac OS).
The pointer cursor appears whenever you move your mouse over or click on the buttons
Note: You can only change the appearance of the cursor for each element, and not for every event of an element.
Controlling animated elements
So far, you’ve added JavaScript that controlled the behavior of the playhead and the hiding or displaying of particular elements. You can also add code to control the playback of animated symbols.
Last updated 6/15/2014
Use motion paths
Symbols, as you learned in the previous lesson, are independent objects that you create that can have their own internal animation. With JavaScript, you can control the symbol animations to create more sophisticated interactions. For example, you can create a button that controls a dramatic animated unfurling or closing of a map. Or, you can create a button that controls the animated expansion or collapse of a more info box. The map and the more info box would be
Symbols that behave independently on the main Timeline.
For your interactive travel slideshow, you’ll add a button at the top of the Stage that, when rolled over, elegantly animates to reveal information about the images and Burma.
Adding the button and animated symbol
The button and the animated symbol have already been created for you, and are in the Library ready to use.
1 In the Library panel, expand the Symbols section, and drag the moreinfo symbol to the Stage. Position the moreinfo symbol at X=200, Y=0.
125
The moreinfo symbol appears in the Elements and Timeline panels. The short playback arrowheads on the Timeline show how long the animation within the symbol lasts (one second long).
2 In the Timeline, click the Playback options for the moreinfo element and choose Stop.
The playback of the internal symbol animation does not play on the main Timeline.
3 Double-click the moreinfo symbol on the Stage and press the spacebar to view the animation within the symbol.
The symbol consists of two short animations. The long horizontal gray rectangle expands, and at the same time, the clipping box of some informational text expands to reveal it.
Last updated 6/15/2014
Use motion paths
4
5
Click the Stage button at the top of the Stage to exit your symbol.
Drag the triangle.png image from the Library Assets folder to the Stage. Position the triangle element at X=484, Y=3, or use the Smart Guides to center the element over the moreinfo element.
Play a symbol animation
The symbol is currently stopped at 0 seconds. You’ll add a mouseover event to the triangle button that tells the symbol to begin playing.
1 In the Timeline or the Elements panel, click the Open Actions button for the triangle element.
The script panel for triangle opens.
2 Choose mouseover for the event.
Edge Animate adds a mouseover event tab.
Last updated 6/15/2014
126
Use motion paths
3 Choose the Get Symbol option.
Edge Animate adds the JavaScript code to select a particular symbol on the Stage. The highlighted portion of the code is the name of the symbol that you want to select.
4 Replace the highlighted code with moreinfo, to match the moreinfo element on the Stage. Make sure that the double straight quotation marks remain around your element name.
The full statement appears as follows: var mySymbolObject = sym.getSymbol("moreinfo");
The first part of this statement, var mySymbolObject, creates a variable for the reference to your symbol, so you can control it.
5 On the next line in the script panel, choose the Play option.
Edge Animate adds a statement that plays the sym object, or the main Timeline. However, you want the symbol to play its animation, not the animation on the main Timeline.
6 Replace sym with the variable, mySymbolObject, which refers to your sym.
Last updated 6/15/2014
127
Use motion paths
The next statement appears as follows: mySymbolObject.play();
Note: You can combine the two statements into one line as follows, sym.getSymbol("moreinfo").play();
Reset the symbol animation
Now, you'll add a mouseout event for the triangle element to move its playhead back to 0 seconds to reset the animation.
1 In the Timeline or the Elements panel, click the Open Actions button for the triangle element.
The script panel for moreinfo button opens.
2 Step textClick on the Plus button on the upper left corner and choose mouseout for the event.
128
Edge Animate adds a mouseout event tab.
3 Choose the Get Symbol option, and replace the highlighted code with moreinfo.
The full statement appears as follows: var mySymbolObject = sym.getSymbol("moreinfo");
4 On the next line in the script panel, choose the Stop at option.
Edge Animate adds a statement that stops the sym object, or the main Timeline. However, you want the symbol to stop its animation, not the animation on the main Timeline.
5 Replace sym with the variable, mySymbolObject, which refers to your symbol. Replace the 1000 default millisecond argument with 0.
Last updated 6/15/2014
Use motion paths
The next statement appears as follows: mySymbolObject.stop(0);
6 Preview your Edge Animate composition in a browser by choosing File > Preview in your browser, or pressing
Ctrl+Enter (Windows)/Command+Return (Mac OS).
When you roll over the triangular button at the top of the Stage, the moreinfo symbol plays its animation, which reveals the text box and text. When you roll off the button, the text box and text collapse.
129
Using jQuery Effects
The Edge Animate API offers a nice balance of power, flexibility, and ease-of-use to incorporate interactivity to your designs and animations. Inserting script by simply clicking a button in the script panel is (mostly) foolproof. However, adding a bit of jQuery to your scripts can often make your job easier. As you learned earlier in this lesson, jQuery is a
JavaScript library that was written specifically to make selecting elements on a web page and creating animations and transitions simple. There are many jQuery methods for animating elements, such as a fade-in, fade-out, or slide-in and slide-out. Since Edge Animate is fully compatible with JavaScript and jQuery, you can use these methods wherever you see fit. Let’s examine one particular jQuery method, fadeToggle(). The method fadeToggle() animates an element's transparency to fade up or fade down, depending on its current state. If the element is transparent, it will become opaque. If the element is opaque, it will become transparent.
1 In a new Edge Animate composition, add a small rectangle and an image on the Stage. Name the rectangle
Rectangle , and the image Image.
Last updated 6/15/2014
Use motion paths
2
3
In the Timeline or the Elements panel, click the Open Actions button for the Rectangle element.
Choose click for the event.
4 Add the following statement for the click event: sym.$("Image").fadeToggle()
5 That's all! Preview your composition in a browser.
When you click on the rectangle, Edge Animate uses jQuery to select the image and executes the fadeToggle() method. The image fades in and out with alternate clicks. jQuery does all the work of creating two inverted animations without requiring you to manually create any symbols, keyframes, or mechanisms to remember the state of the image. jQuery is powerful and makes a good addition to your designer-developer toolkit. You can view the
05JQuery.an file in the 05End_JQuery folder to see the completed example.
Review
Last updated 6/15/2014
130
Use motion paths
Review questions
1 What's the difference between actions, triggers, and events, and how are they used to create interactivity in Adobe
Edge Animate?
2
3
What's the relationship between the Edge Animate API, jQuery, and JavaScript?
4
5
How do you create a button?
Why would you use a label, and where are they located?
6
What is the Code panel, and how does it differ from the panels for actions and triggers?
What does the code sym mean in the Edge Animate API, and how do you use it?
Review answers
1 Actions, triggers, and events are all JavaScript code that you use to create interactivity in Edge Animate. Actions are commands that tell Edge Animate to do something, such as hide or display an element, or load a hyperlink. Triggers are actions that are placed on the Timeline so they are executed at a specific time. Events are things that happen in a composition that Edge Animate can respond to with actions.
2 Edge Animate uses JavaScript to power its animation and interactivity. JavaScript is the standard scripting language for Web browsers. jQuery is a library of well-written JavaScript functions that make it easier to select and animate elements on a web page. The Edge Animate API provides additional functions (based on JavaScript and jQuery) to control elements in your composition.
3 A button is a visual indicator of what the user can interact with. You can create a button by creating an element on the Stage, then clicking the Open Actions button in the Timeline or Elements panel to add an event. In the event tab that opens, insert actions that you want triggered when the event happens.
4 Labels are located at the top of the Timeline. Labels identify specific points in time so that you can refer to label names, rather than fixed milliseconds, in your JavaScript code.
5 The Code panel, which you access by pressing Ctrl+E (Windows)/Command+E (Mac OS), allows you to display all the JavaScript code associated with your current Edge Animate composition. It also shows any code errors and their location in the script. In contrast, panels for adding triggers, events, and actions show only the code for the associated element, or time.
6 The word sym represents the whole Edge Animate composition, when the statement is on the main Timeline. Edge
Animate is organized around the concept of "symbols," and the root, or base-level symbol is the Edge Animate Stage.
This root symbol contains all the elements and animations in your Edge Animate composition—everything on the
Stage or Timeline. In JavaScript, when you want to do something, you first identify the object that you want to control. If you want to affect the Timeline of your Edge Animate composition, the first thing that is written in the script is sym.
131
Using Animate files in InDesign or Muse (Video)
Using Animate files in InDesign or Muse (Video)
Introduction to Edge Animate
Video Tutorial
Introduction to Edge Animate
Last updated 6/15/2014
Use motion paths
Create your first Edge Animate project
Create your first Edge Animate project
Use Edge Animate file in InDesign or Muse
Use Edge Animate file in InDesign or Muse
Download files from Adobe Dev Center
Download files from Adobe Dev Center
Publishing and integration (Video)
Publishing and integration (Video)
132
Last updated 6/15/2014

Public link updated
The public link to your chat has been updated.
Advertisement
Key features
- HTML5 video support
- Sprite sheet import
- Article linking for Adobe DPS
- Enhanced Actions editor
- Copy-paste from Adobe Illustrator
- Scrolling hand and zoom tools