Adobe Creative Cloud

Rolling Animate CC Projects into Dreamweaver CC Web Pages

Sure, animations bring web pages to life. But for far too long, you needed to virtually channel Victor Frankenstein (pronounced Frahnk-en-steen) just to juggle all the elements necessary for handling a proper integration across browser platforms. The recently released, re-engineered and rebranded Animate CC provides an all-in-one package that Dreamweaver CC can easily incorporate—with or without a lightening Flash. Pun so very much intended.

OAM: the Animate CC to Dreamweaver CC connection

As you probably know by now, Animate CC is the next evolution of Flash, ushering its solid foundation of animation tools into a web standards world. One of the web standards supported in Animate CC is OAM, short for OpenAjax Metadata. The specification for OAM was created by the IDE Working Group, which included members from Microsoft, IBM, Google, Sun, and Adobe. A world-class foundation, for sure.

Used primarily to package Ajax widgets (themselves a combination of code and assets), an OAM file is essentially a compressed archive with unpacking instructions built-in; Dreamweaver even provided the ability to import Ajax widgets in OAM format in an earlier release. As part of an Adobe initiative, the OAM standard was employed to bundle animation projects. Now, Animate CC publishes in the OAM format—which, handily, Dreamweaver is still very much capable of reading. Ta-da! Get ready to shout, “It’s alive!”

Publishing an OAM package

Preparing an OAM package in Animate CC is pretty much a one-click wonder. To demonstrate, I opened an HTML5 Canvas file, based on an asset originally created for a book of mine that detailed projects which used the entire suite of Adobe creative tools, Adobe CS4 Web Workflows.  Admittedly, the book is a bit dated with regards to specific products (miss you, Fireworks CS6!), but the basic concepts remain valid and the assets still rock.

andw2

Whether you are working with a web standard HTML5 Canvas animation, a Flash movie or a future-looking WebGL project, you can incorporate it in Dreamweaver by following these steps in Animate CC:

  1. If you want to use a frame from the animation as a poster image, move the playhead to that frame.
  2. Choose File > Publish Settings. You can also click Publish Settings from the Publish panel.andw3
  3. In the Publish Settings dialog, select the OAM Package option.
  4. Complete the OAM Package options:
    1. Output file – choose a location to store OAM file. This file will not be uploaded, but you still might want to keep it with other source files for your Dreamweaver site.
    2. Poster image – select either the current frame or a separate web-compatible graphic file.
  5. If you’re ready to export the animation, click Publish.
  6. Click OK.

That’s it for the Animate CC side. Easy-peasy defined, right? Bringing the animation project into Dreamweaver is just as straightforward.

Integrating OAM into Dreamweaver

Once you’ve published your Animate CC project as an OAM package, you’re ready to insert it into your web page in Dreamweaver. Again, it’s one of the easiest operations around—but there is one little adjustment you may need to make. I’ll explain as we work through the example.

  1. With your page displayed in Live view, select the element you want to put the animation in or on either side of.
  2. In the Insert panel, switch to the HTML category and drag Animated Composition onto the page.andw4You’ll find Animated Composition in the collection of media-related objects, the fourth group on the Insert panel. If you prefer to go the menu route, choose Insert > HTML > Animated Composition.
  3. When the Open dialog appears, locate the OAM file you previously published from Animate CC.
    As with other elements, when inserting the animation object Dreamweaver will display the Position Assist dialog to help you fine-tune exactly where you want it: Before, After, or Nested within the selected element.
  4. Click Refresh to view your animation in Live view.
    You can, of course, also preview the page in a browser.

andw5

When the Animated Composition object was inserted, Dreamweaver performed a couple of operations behind the scenes. First, it unpacked the OAM file and stored the results in a site-root level folder named animate_assets. Within that folder is a subfolder for this particular project taken from the file name (FMA_Canvas), which contains an XML config file as well as a folder of assets. The config.xml file points to the assets folder for further operations.

The Assets folder holds all the goodies generated by Animate CC: in this scenario, a JavaScript file, a PNG poster image, an HTML page with all the code to load and initialize the Canvas based animation, and another XML file, this one with an “_oam” string in the file name. The config file within the Assets folder includes all the particular instructions for replicating the animation, including the required files and the properties set in Animate CC.

andw6

In addition to adding the necessary files to your site, Dreamweaver inserted the needed code. Here’s what the code from my example looks like:

<object id=”EdgeID” type=”text/html” width=”1020″ height=”280″ data-dw-widget=”Edge” data=”edgeanimate_assets/FMA_Canvas/Assets/FMA_Canvas.html”>     </object>

As you can see, this is a simple <object tag> specifying a width and height as well as a custom attribute, data-dw-widget and the accompanying data, which points to the HTML file in the Assets folder.

Here comes the little adjustment I mentioned earlier. The eagle-eyed among you may have noticed the additional space to the right and below my inserted animation. Dreamweaver automatically adds 20 pixels to both the width and height of an Animated Composition object to accommodate horizontal and vertical scrollbars. If your animation doesn’t need the scrollbars, it’s a quick fix. Just select the containing element—here, it’s #outerWrapper #FMA—and via CSS Designer, add an overview:hidden property.

andw7

And there you have it: a clear, uncluttered path from Animate CC to Dreamweaver CC. Now you can use the power tools in Adobe’s animation platform to create motion graphics for the web and quickly showcase them online.

Cue the organ music: “It’s aliiiiive!!!”

 

 

Dreamweaver Interface