Adobe Edge Animate Technical Notes

From Notes from “Edge Animate Essential Training” online tutorial

Creates file .an (animate file) with html and other javascript files. Compatible with a large number of browsers, Html and CSS compatible. Excellent for producing e-pubs and Digi mags.

Stage size & responsive design

Stage is 550 by 400 px tall by default. (100% when click – can change sizing when browser changes) – responsive designs. Down-level stage – older browser compatibility.


For stroke must define colour, style and size. Html – <div> tag for each item. Create lines/rules using rectangle tool. Double click to make changes to text. Can’t style individual words and characters – have to style using html. Built in web-safe fonts can be used and web fonts are also addable.

Inserting images

Bringing in content from other sources (graphics etc.)  File>import or Library panel – assets +. Works with .png files. Creates an image directory within project file folder. Can also manually add files by clicking and dragging into this folder.

In colour palette A: alpha (transparency) RGBA colour space. Accessibility feature – tab index enables highlighting of text or objects if user presses tab. Clip tool – cropping. Centre circle much like Indesign can change location of image within the frame.

Preparing content for use in Edge Animate

Photoshop – slices hold control or cmd, brings up dialogue box. Click and drag to create slice. Double click and name. Hide background menu. File>save for web. Select slice with slice tool, choose file format, png 24 (16 bit colour, 8 bit transparency. Save into images directory. “All user slices” drop box – only save the slices drawn (saves as individual png graphics). Also supports animated gifs. Window>timeline. Select first frame, hide background. Save for web – gif, select background colour. Will play the animated gif on the stage while in design view.

Illustrator – slicing tool. View>show slices, Object>slice>slice options and name. File>save for web, select slice, choose png 24, export menu>all user slices, save .Svg (scalable vector graphics) supported. Artboard tool – tool panel shows dimensions .svg results in smaller file size without compromise of quality of graphic. save as>format>svg 1.1, type svg. make sure browser being used can read .svgs. Can check browser compatibility at

Fireworks – Slice under web object. Rename label to name slice. Use Optimize panel to select the file type (png 8 in Fireworks uses semi-transparent pixels)  Smaller file size. Only use if not a lot of tonal range in Graphic. File>export>images only, explort slices, uncheck boxes. Use states and optimize panels. Png, jpeg, svg, gif or animated gif compatible.

Layouts in Edge Animate

Set stage size. (100 view on bottom left of stage). In elements panel change layer order to alter arrangment or modify>arrange. Timeline>lock items in place. Alt shift (option shift) to copy element. Can use timeline to select elements.


Position and size – x co-ord (horizontal displacement). Grab playhead on timeline, drag out, add another keyframe. Hold shift and drag image (turns to hollow diamond) indicating change. Need to add transition between two keyframes. Select last keyframe, right click “create transition” (inbetween). Drag back to first keyframe. Can change opacity, add another keyframe and change opacity on last keyframe

When adding more animation properties, always drag playhead back to first keyframe and then select property you want to change.Blue toggle above animation bar. Drag to show that animation will end up at the composition at the final point. (defining the end point of elements) and animated in relation to starting point.Can change things on the stage without having to manually change different properties. Can move playhead out – animate to that point. Toggle pin for resolution.

Easing – select element, then select transition area. Click easing button (distance vs time graph). Select preset. Animated clip and background position. Auto keyframe, auto transition and toggle pin activated. Can annotate using the clip tool (wipe on/wipe off). Can move object within the frame and annotate to reveal.

Key questions to investigate

What are the workable differences between Edge Animate and Adobe Flash? Which will be the best to work with in conjunction with InDesign? Is using InDesign the long-winded way of what could be completely created in Edge Animate?

InDesign + Flash = interactive ebook?

Edge Animate = interactive ebook? (no interim step?)


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s