Launch Animate. The Get Started window is displayed.
Add animated content in Adobe Muse
Learn how to create rich interactive Adobe Muse websites with animations and roll effects created using Edge Animate.
As of November 2015, Edge Animate is no longer being actively developed. For more information, see Edge family of products | End of development.
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.
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:
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.
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.Note:
To control whether an animation plays immediately, select the stage and then select or deselect the Autoplay checkbox in the Properties panel.
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.
While the stage is still selected, click the color chip for the stage in the Properties panel and set the transparent option.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.
Select File > Save to save the recent changes.
Choose File > Publish Settings to open the Publish Settings dialog box.
In the Publish Target column on the left, deselect the Web checkbox and select the Animate Deployment Package option.
Click Save to save your changes and close the Publish Settings dialog box.
Choose File > Publish to publish the project.
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.
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:
Launch Adobe Muse and open the site you want to edit.
In Plan view, double-click the name of the page you want to add the animation to.
Choose File > Place... and then navigate to select the .OAM file in your site folder.
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.
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.
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.
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
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.
Choose File > Place. In the Import dialog box, navigate inside the Kevins_Koffee_Kart folder and select the file named logo.swf.
Place the SWF file in the upper left corner, matching the location of the existing logo image file.
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.
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:
- 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.