Adobe Muse / Tutorials

Inserting Adobe Edge content into a Muse website

 

Adobe Edge Preview is a new web motion and interaction design tool that allows designers to bring animated content to websites, using web standards like HTML5, JavaScript, and CSS3. You can use the intuitive timeline interface in the Edge Preview workspace to visually construct compelling HTML5 animations that play back without a plug-in when viewed in all modern browsers.

Adobe Edge Preview is free preview software that you can download and install to experiment with building motion graphics.

Adobe Labs provides many sample projects that you can explore with Adobe Edge Preview to learn how it 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 Getting Jumpy, Sample 2.

Preparing Adobe Edge animations for insertion in Muse web pages

Before you add the content you create in Adobe Edge Preview to Muse, there are a few changes you can make to incorporate the HTML 5 content into your web design. After finalizing the animation for your site, you'll publish the file that you'll place in Muse.

1. Launch Adobe Edge Preview. The Get Started window is displayed.

2. Click Open File... and then browse to select a sample project files you downloaded with the .edge file extension. Or if you prefer, open an Edge file you created (see Figure 1).

 

Figure 1. Click the Open File link in the Get Started window.

3. Click Open to open the .edge file and close the Open dialog box. The project appears in the Adobe Edge Preview workspace (see Figure 2).

 

Figure 2. The Edge project is displayed on the stage.

Edge animations are either set to autoplay or they display a static image when the page loads that must be clicked to start the animation. The Getting Jumpy, Sample 2 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 Adobe Edge Showcase and view the Shady Text sample project.

Note: To control whether an animation plays immediately, select the stage and then select or deselect the Autoplay checkbox in the Properties panel (see Figure 3).

Figure 3. Enable autoplay by selecting the Autoplay property.

If you are working with a project that does not autoplay, you can set the appearance of the static image that is displayed when the page first loads by creating a poster image. When a visitor clicks the poster image, the animation starts playing.

To create a poster image, select the stage. Move the playhead to the location on the timeline that displays the desired image, and then click the Poster camera button in the Properties Panel to capture the poster image (see Figure 4).

Figure 4. While the stage displays the part of the animation you want to display as the static image, click the Poster camera button and then click Capture.

This operation creates a PNG file named Poster.png that is published along with the Edge animation project. The Poster Image window updates to confirm that the poster image has been captured.

Note that this sample project has a gradient image file in the background. If you'd like to set the animation to have a transparent background (to enable the web design on the page to show through), you'll make two minor changes.

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 (see Figure 5).

Figure 5.  Select the background image and delete it.

After deleting the image, the next part involves setting the stage background color to transparent.

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

Figure 6.  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. Choose File > Save to save the recent changes.

7. Choose File > Publish Settings to open the Publish Settings dialog box (see Figure 7).

Figure 7. Update the Publish Settings before publishing the file.

The Publish Settings dialog box appears.

8. In the Publish Target column on the left, deselect the Web checkbox and select the InDesign / DPS option (see Figure 8).

Figure 8. Choose the InDesign / DPS publish settings to create an .OAM file.

Note: Newer releases of Adobe Edge Preview will also display a Muse publish setting checkbox. When that option becomes available, choose the Muse checkbox in the Publish Target column of the Publish Settings dialog box.

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

10. Choose File > Publish to publish the project (see Figure 9).

 

Figure 9. Publish the animation file from Adobe Edge Preview.

11. Quit Adobe Edge Preview. Use Windows Explorer (or Mac OS Finder) to locate the Edge project folder on your hard drive. After publishing the project, you'll find a folder named publish with a subfolder named dps in the project folder. The .OAM file in the dps subfolder is the file you'll use for your Muse site (see Figure 10).

 

Figure 10. Locate the .OAM file in the Edge project folder.

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 Edge content on a page.

 

Back to top >>

Placing Edge animations in a Muse web page

Follow these steps to add the Edge 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 Adobe Edge Preview animation (see Figure 11).

 

Figure 11. Open the page you want to edit by double-clicking it in Plan view.

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 Edge 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. Edge animations can be relinked and updated just like any other site asset (see Figure 12).

Figure 12. The .OAM file is listed in the Assets panel.

For example, if you return to Adobe Edge Preview, 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 will display the out-of-date link icon, indicating 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 Update Asset (see Figure 13).

 

Figure 13. Choose the Update Asset option from the context menu.

The Update Asset option updates the placed asset to match the edited source file. This is a great way to quickly update the animation, rather than 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.

8. Preview the live site in a browser and visit the page that contains the Edge animation to verify that it displays and plays as expected.

Preview the site in a browser and visit the page that contains the Edge animation to ensure that it displays as expected.

To learn more about building HTML5 web content and animations with Adobe Edge Preview, check out the Adobe Edge Resources. For more tips with working with Muse, be sure to visit the Muse Tutorials page for written tutorials, or the Muse Events page for live webinars and recorded video tutorials.

 

 

Back to top >>

 

 

 

 

 

Copyright © 2012 Adobe Systems Incorporated. All rights reserved.

Use of this website signifies your agreement to the Terms of Use and Online Privacy Policy.