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.

Preparing animations in Animate

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:

  1. Launch Animate. The Get Started window is displayed.

  2. Click Open File and then browse to select a sample project file you downloaded with the .an file extension. Or if you prefer, open an Animate file you created.

    Adobe Muse lets you embed Edge Animate animations.
    Click the Open File link in the Get Started window.

  3. Click Open to open the .an file and close the Open dialog box. The project appears in the Animate workspace.

    Project appears
    The Animate project is displayed on the stage.

    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.

    Note:

    To control whether an animation plays immediately, select the stage and then select or deselect the Autoplay checkbox in the Properties panel.

    Autoplay option
    Enable autoplay by selecting the Autoplay property.

  4. Click the background image to select it on the stage. While it is selected, a blue bounding box appears and the Properties panel to the left displays the properties for the image (named Image2 in this example). Press Backspace (Windows) or Delete (Mac) to remove the background image file.

    Blue bounding box
    Select the background image and delete it.

  5. While the stage is still selected, click the color chip for the stage in the Properties panel and set the transparent option.

    Transparent option
    Set the background property of the stage to transparent.

    Note:

    The content on the stage displays a white background; you won't see the transparent background appear on the stage unless you export or preview the animation.

  6. Select File > Save to save the recent changes.

  7. Choose File > Publish Settings to open the Publish Settings dialog box.

  8. In the Publish Target column on the left, deselect the Web checkbox and select the Animate Deployment Package option.

  9. Click Save to save your changes and close the Publish Settings dialog box.

  10. Choose File > Publish to publish the project.

  11. Quit Animate. Use Windows Explorer (or Mac OS Finder) to locate the Animate project folder on your hard drive. After publishing the project, find a folder named Animate Package. The .OAM file in this folder is used to add Animate content to your Muse site.

  12. Copy the .OAM file and save it in the folder on your desktop that contains all of the other images and site assets for your website. After publishing the animation and saving the file in your site folder, proceed to the next section to place the Animate content on a page.

Placing animations created using Animate in a Muse web page

Follow these steps to add the animation to a page in your Muse website:

  1. Launch Adobe Muse and open the site you want to edit.

  2. In Plan view, double-click the name of the page you want to add the animation to.

  3. Choose File > Place... and then navigate to select the .OAM file in your site folder.

  4. Click once on the page to place the animation.

    Note:

    Unlike placing images, you cannot click-drag as you place an Animate animation to resize it. If you want to place the content at a different size, update the Edge project and republish the .OAM file.

  5. Use the Selection tool to position the animation on the page at the desired location. Note that although the animation background appears to be opaque in Muse, the background is transparent when you preview or publish the page.

  6. 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 .

    The Relink option updates the placed asset to match the edited source file. This is an easier way to quickly update the animation, as opposed to manually deleting and replacing files.

  7. Click the Publish link in the Control panel. Choose the desired options and click OK to publish the site updates.

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.

​Embedding rich media content to add animation to the site

  1. 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.

  2. Choose File > Place. In the Import dialog box, navigate inside the Kevins_Koffee_Kart folder and select the file named logo.swf.

  3. Place the SWF file in the upper left corner, matching the location of the existing logo image file.

  4. Once you have aligned the new SWF window that you placed with the older static logo, delete the static logo by selecting it and pressing the Delete key.

  5. 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.

    Note:

    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.

Adding Scroll Effects to animations

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:

  1. 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.
  2. 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.
  3. Choose File > Place and browse to select the OAM file from the site folder.
  4. Open the Scroll Effects panel. Click the Adobe Edge Animate tab (fourth tab from the left) to review the settings for this section.
  5. While the OAM file is selected, select the Edge Animate checkbox.
Scroll Effects panel
Set the Edge Animate animation to begin playing when the page scrolls to a specific location or set it to switch frames every time the page scrolls down a specific distance (in pixels).

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.

Note:

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.

  1. 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.
  2. If you need to make any changes, return to Muse (or click the Design button) and update the settings in the Scroll Effects panel.

Example

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:

  1. 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.
  2. 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.
Same key positions and motion settings
The compasses move up until the page scrolls to their key position, and then they remain in place as the page continues to scroll down.

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.

  1. 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.
Switch frames every 350 pixels
The compasses on both sides are set to switch frames every 350 pixels.

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.

  1. 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.
Switch frames every 400 pixels
The center OAM file is set to switch frames every 400 pixels.

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.

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  Twitter™ and Facebook posts are not covered under the terms of Creative Commons.

Legal Notices   |   Online Privacy Policy