Join Steve Harris for an in-depth discussion in this video Integrating Adobe Edge Animate graphics, part of Designing a Portfolio Website with Muse (2012).
I'd like to thank designer Jeremy Goldberg for making this simple animation for me to feature in the video. You can check out his work at jeremytech.com. Next let's see how this was built. The size of this logo is approximately 203 pixels wide by 96 pixels high. If we set up our document in Edge we're going to be using those exact same dimensions 203 pixels by 96 pixels. Once we've created our animation, we need to make a few changes before we can publish this to Muse. First of all, we need to make sure that our stage background color is set to transparent.
We don't want any color behind there or it's not going to overly nicely on to our header. Lastly, we need to make sure that Autoplay is selected. We want this animation to play directly when we drop it into Muse without having to click on it or start it in any way. Once we've made those two changes let's go ahead and change some of our Publish settings. So if we click File>Publish Settings, we need to make sure that the following selections are made. We need InDesign and DPS selected. DPS stands for Digital Publishing Suite.
This is going to output the correct file format that we can import into Muse. Lastly, just set the Target Directory where we'd like this file to be placed. I have it going to a folder called publish/dps. I've also given it the name red30logo. When that's go to go let's hit Publish. Now that this file has been published to our computer, let's place it in Muse. If we go back to our Muse site--I'm going to just open up a blank header here. If we quick File>Place let's navigate to our Edge Animation folder in Edge>publish>dps>red30logo.oam.
The OAM file is what we're going to be placing into Muse. If we click open, you'll see we have a loaded cursor. Let's just click that into the header area of our site. You may be asking yourself why this is solid white. It's because there is a fill applied to it. Let's just remove the Fill and remove the Stroke. Now that this is done we can preview this page in Muse and as you can see our Edge Animation plays without having to click on it to start it or control it in anyway.
- Planning the site with a wireframe
- Creating master pages
- Building and placing graphics from Photoshop, Illustrator, or InDesign
- Creating buttons and button states
- Adding a header, footer, and navigation widget
- Creating a slideshow
- Setting up a contact form
- Publishing to a third-party hosting solution
- Tracking site traffic with Google Analytics
Skill Level Intermediate
Q: This course was updated on 7/24/2013. What changed?
A: We added new movies on mobile and tablet layouts, the new sticky footer, working with a content management system (CMS), the Layers panel, and the Scroll Motion effect, which allows for parallax scrolling.