Adobe Edge Animate is a web interaction design tool that allows you to bring animated content to websites, using web standards like HTML5. You can use the intuitive timeline interface within Animate to visually construct compelling HTML5 animations that play back when viewed in all modern browsers.
You can explore several projects (available at this location) to learn how Animate works. If you'd like to follow along with this tutorial, download and open one of the Edge sample projects. The sample project used in these instructions is named SkyScraper.
Before you Animate content in to Muse, there are a few changes you can make to prepare the Animate file, to make embedding within Muse seamless. Do the following:
Click Open to open the .an file and close the Open dialog box. The project appears in the Animate workspace.
Animations created using Animate are either set to play automatically (autoplay) or require you to click a static image to play the animation upon loading. The SkyScraper example is set to autoplay and does not require user interaction. However, when autoplay is turned off, a static image displays on the page until the animation is clicked. To view an example of an animation that does not autoplay, visit Animate Showcase.
To control whether an animation plays immediately, select the stage and then select or deselect the Autoplay checkbox in the Properties panel.
Choose File > Preview Page in Browser to ensure that the animation displays as expected. If there are any changes you'd like to make, return to Muse and reposition the page elements. If you look in the Assets panel, you'll notice that the .OAM file is now listed as an asset. Animations created using Edge Animate can be relinked and updated just like any other site asset.
For example, if you return to Animate, you can open the project and change it. Later, when you republish the .OAM file and replace the version in your site folder, the Assets panel displays the out-of-date link icon. This indicates that the original file has been edited since the asset was placed in a page.
To update the file you placed, right-click on the .OAM file name in the Assets panel and choose Relink .
To learn more about building HTML5 web content and animations with Adobe Edge Animate, check out the Adobe Edge Animate Resources. For more tips with working with Muse, be sure to visit the Muse Help and Tutorials page for tutorials, or the Muse Events page for live webinars and recorded video tutorials.
In Plan view, double-click the MasterFlash thumbnail to open it for editing in Design view. Notice that since you previously duplicated the A-Master page, the static logo image is still there. It is helpful to use the static image to match placement for the animation rectangle. However, ensure that you delete the static placed logo image after embedding the rich media element.
To review how the entire site appears with the new changes to the Home page, choose File > Preview Site In Browser to test the display of the logo on various pages. Without publishing the site, you can work locally on your computer and then preview the site in a browser to click through the pages in the site navigation. Notice that the animation (SWF file) appears once and then stops on the Home page. If you click other pages, only the static logo is displayed.
If you choose File > Preview Page In Browser, the new browser window loads more quickly to display the Home page, but it only previews the active (Home) page. Choose this option if you want to check one page of the site, rather than the entire website.
Adobe Muse allows you to add animations created using Adobe Edge Animate to web pages. The first step to using the Adobe Edge Animate scroll effects feature, is to create an animation specifically for this purpose.
Adobe Muse allows you to add Scroll effects to OAM files to affect the animations that are placed on the main timeline. You can design the animation strategically, so that, only the items you want to move when the page scrolls are on the main timeline you can create interactive animations. It is implicit that the rest of the elements have to placed within nested timelines. As visitors scroll the page, the scroll effect settings only control the playback of animated elements on the main timeline.
For more information on Scroll Effects in Adobe Muse, see Scroll Effects.
Follow these steps to work with the Slideshow tab in the Scroll Effects panel:
- Export the OAM file from Animate and save it to your site folder. For information on exporting OAM files from Animate, see Placing animations in Adobe Muse.
- Launch Muse and double-click a page to open it in Design view. Ensure that the page is long enough to scroll by updating the minimum height settings in the Page Properties dialog box.
- Choose File > Place and browse to select the OAM file from the site folder.
- Open the Scroll Effects panel. Click the Adobe Edge Animate tab (fourth tab from the left) to review the settings for this section.
- While the OAM file is selected, select the Edge Animate checkbox.
In the above image, the key position is set to 700 pixels. You can drag the T-handle or enter a different value in the Key Position field to adjust it.
After setting the key position, you can control playback of the animation using two options:
- Autoplay: When this option is selected, the animation in the main timeline begins playing as soon as the browser is scrolled to the key position, regardless of the number of frames in the main timeline. The animation continues to play until the page is scrolled above the key position.
- Switch Frames Every: When this option is selected, the main timeline animation advances one frame every time the page is scrolled past a specific number of pixels. For example, if you create a page that is 3000 pixels high and enter the number 10, the main timeline animation plays at a rate of 1 frame every 10 pixels that the page is scrolled. If the visitor scrolls down the page faster, the animation rate increases.
Scroll Effect settings do not affect animated objects that are nested within or linked from the main timeline in the Animate composition. Therefore, you can choose to either have a static background or continually looping nested elements that are consistently moving, regardless of visitor interaction to scroll the page.
- After choosing the settings in the Edge Animate tab of the Scroll Effects panel, choose File > Preview Page in Browser (or click the Preview button). Test the page by scrolling up and down to see the Edge Animate animation content (that was added to the main timeline) play back.
- If you need to make any changes, return to Muse (or click the Design button) and update the settings in the Scroll Effects panel.
This example illustrates how to control OAM files exported from Adobe Edge Animate using scroll effects. In this sample, the page is filled with a vertical gradient that begins with a light turquoise color and transitions to a dark blue. You can download the sample file from ScrollEffects.com.
A combination of settings applied in the Motion and Edge Animate tabs create this animated effect.
Three instances of the same OAM file are placed side by side horizontally, to create a row of animated compasses. When you view the sample site in a browser, all three compasses move up into view and then stay in position. Each of the three compasses appears to spin at different rates> However, it is the settings in the Scroll Effects panel, not the construction of the Edge Animation file, which cause them to revolve at different speeds.
Follow these steps to create a similar effect with three placed OAM files:
- In Design view, choose Page > Page Properties. Set the Min Height field to a much larger value. In the site example, the minimum height of the page is set to 7465 pixels.
- Select all three instances of the compass on the page. In the Motion tab of the Scroll Effects panel, you can see that all three OAM files have the same key position and motion settings, because all of the values are displayed.
If you preview the sample in a browser, you'll see all three OAM elements jump up in unison and then stay in a row as though they are pinned.
- Click away from the compasses to deselect all three, and then select just the compass on the left. Press and hold the Shift key while selecting the compass on the right, so that both are selected. Open the Edge Animate tab of the Scroll Effects panel to review the settings.
The two side compasses are both configured to loop through the timeline animation and advance to the next frame every time the page scrolls down 350 pixels.
- Deselect the two outer compasses. Select the center compass and look in the Edge Animate tab again to see that the Switch Frames Every field is set to 400 pixels. This setting causes the center animation to move slower compared to the two outer compasses.
You can create interesting animation effects by varying the speed of several placed Edge Animate animations, in relation to the speed of the page scroll. For example, you can create a school of fish, a sky filled with moving clouds, or other effects by adding multiple iterations of the same OAM file with different scroll effect settings applied.