Adobe Edge: Embedding Animations in a Page

Adobe Edge is a brand new piece of software from Adobe, which is currently still in Preview stage. It implements many of the features I’m used to in Adobe Flash, but exports exclusively as HTML5 animation.
You can download the Adobe Edge preview on the Adobe Website.

Adobe has been the victim of some criticism lately, namely at the hands of the late Steve Jobs, who refused to support Adobe Flash on Apple’s iPhone and iPad products. This meant that Adobe had to come up with something good which allowed them to stay at the top of the food chain with regard to industry software – Adobe Edge is their answer.

My only issue is that Adobe Edge still a little raw (to be expected from preview level software), and there’s a distinct lack of Adobe Edge Documentation for me to gain insight from. Most of what I know of Adobe Edge is based upon self-teaching and youtube videos.

I’m not going to talk about creating animations in Adobe Edge, because I didn’t feel I had any trouble with that side of things; but I am going to speak about what to do after these animations have been exported.

Prior to Exporting your Adobe Edge Animation

Here are some guidelines I came up with to ensure your animation is ready for the web. Much of this will be automatic (I hope) in the full release of Adobe Edge, but at present, it’s a manual task.

1. Ensure there are no spaces in any of the asset names – this prevents some browsers ‘missing out’ some assets
2. Ensure you have named your file appropriately – again no spaces
3. Ensure you have named your composition ID – this helps when managing each animation through CSS, it prevents names like EDGE-26107024
4. Ensure you have applied a poster image to the ‘Down-level Stage’ – this stage is what’s displayed to those without the capability to play the animation

Ensure all these items are looked at before saving the document and you’ll have a much easier time of implementing the Adobe Edge animation.

Embedding an Adobe Edge Animation

Once an Adobe Edge animation has been exported, you’ll find several important files.

• A pre-loader file
• An Actions File
• An animation File
• a HTML file
• an Image directory
• an includes directory

The easiest way to embed an animation is by opening the html file, taking the javascript path from the head and the ‘stage’ div from the body and copying it over to your own web-page.

The javascript file declares the pre-loader and the pre-loader declares all the other files, simple.

Note: NAME YOUR STAGE ID
This is essential for multiple animations, with IDs that clash between the animations, you’ll find that only one of them plays at any one time.

Speaking of multiple animations, you’ll only ever need a single ‘edge_includes’ directory, because

The animation should play provided all your paths are how Adobe Edge wants you to have your paths, but this is never the case… Read on.

Inconsistent Paths

I was adding my animations to a fairly large website with a strict structure. I couldn’t drop the animations in the root, as Adobe Edge had expected, so none of my assets linked.

I edited the Preloader and Animation file to give relative paths to the resources and updated my pre-loader declaration in my html file but this only worked for pages on this level of navigation. i.e. the animation worked on ‘/’ but not on ‘/about-us/’ because it was trying to read the files from ‘/about-us/animations/’ instead of ‘/animations/’

I had to first modify my ‘animation_edgePreload.js’ file and add a variable declaration to the ‘root’ of my website to the top of the file.

At the bottom of the file, you’ll see a path location for each of the other important inclusions. I modified it as so:

And even closer to the bottom:

The preceding ‘/’ that I’d earlier declared always points to the root of my website. If I wanted to store my animations elsewhere, I could modify this line and it should propagate across the file and make the correct linkages.

This should ensure that I have all the included files in the correct locations.

Now for the images.

In the ‘animation_edge.js’ file, you’ll need to modify the top line to point to the correct images directory. Precede it with a ‘/’ again to ensure it points from the root, because relative paths in Adobe Edge are shockingly bad at being consistent.

Also, I’ve noticed that if you’ve used any assets in symbols you’ll need to edit these separately because the ‘im’ variable isn’t applied to them. You’ll need to do this manually in each case:

Embedding Animations with WordPress

The most difficult part about embedding Adobe Edge animations in WordPress is staying true to the file structure. Everything else should be quite easy.

Instead of linking the pre-loader file with a html script declaration, consider using ‘wp_enqueue_script’ instead. This is always a safer way to manage script inclusions:

The future of Adobe Edge

Hopefully, the next stage in Adobe Edge should include a much more comprehensive pathing system, so to eliminate all this manual effort, and hopefully management of assets should be tightened up.

All in all, this software is very comprehensive and allows you to achieve a great deal with your animations. One or two little issues are bringing it down, but hey, it’s a preview version so Adobe are forgiven!

Comments

comments

Powered by Facebook Comments