Adobe Edge Preview 4 Available Now!

Adobe Edge Preview 4 is available now and you can download it from Adobe Labs, http://labs.adobe.com/technologies/edge/. Also check out the video I did to highlight a few of the features on Adobe TV, http://tv.adobe.com/watch/adobe-edge-preview/introducing-adobe-edge-preview-4/.

Given that the first three previews were released a month apart and it has been over three months since Preview 3, a logical question is: “What took you so long?”

There are a couple of reasons. The first is that we work in one month sprints that are aligned on the month boundry and both Oct, Nov and Dec were all shorter than normal due to MAX, Thanksgiving and Christmas. Additionally, we added a number of features that took multiple sprints to implement.

The result is that Edge Preview 4 this is a MAJOR release. At a high level, here are the features you will find in it.

  • Symbols – Reusable objects with their own Timelines, Actions, Triggers and Labels. You no longer have a single timeline and can create multiple instances and dynamically control them from code or on the timeline. This opens up a ton of new capabilities.
  • Web Fonts – import and use fonts from any service on the web or bring your own to get the exact font you want. You can download font packages from services like FontSquirrel, or link to fonts from Google Web Fonts, and of course, leverage Adobe TypeKit. When you add a Font to your project, you define the font fallback list, and after that, it appears in the list of fonts just like the built in ones.
  • Element Display – This allows you to control an element’s “display” attribute. Setting display=none (“Off” in Edge’s UI) means the element is removed from the browser’s rendering tree and increases efficiency. When Elements are “Off”, there is a nice cross hatch pattern that lets you easily see this on the timeline.
  • Library Panel – This allows you to see and manage the images, symbols and fonts used in your project. Symbols and images can be dragged from the Library Panel on to the stage to create new instances of them.
  • Drag and Drop from the File System - you can now import images simply by dragging them them from the file system and dropping them onto the stage where you want them.
  • Reparenting of Elements – you can reparent Elements in the Elements Panel using drag and drop.
  • Transform Tool – For Preview 4, this allows you to scale objects, instead of resizing them. In the next preview, you will be able to do on stage rotation.
  • Transform Point Improvements – while a minor feature, you can now place the transform point of an element outside of the element. This allows you to do things like have an element orbit a specific point just by doing a rotation.
  • Color tools – located on the toolbar, this allows you to select the stroke and fill color for a shape before you draw it.
  • Clip and background position – you now have access to these properties which allows you to do interesting masking and panning effects. You can even load Sprite sheets and animate them.
  • Composition ID – This is now editable in the Stage Property panel and is the ID that appears in the script files that you use as the class name of the host div in your HTML page.
  • Composition “autoplay” control – If you want a composition not to play automatically, rather than having to put a “stop()” command at 0.0, you can now just uncheck the autoplay property. Note that all symbols have this property for you to use.
  • Simplified Script Include – to include your composition in a page, you now have to copy just a single line of code.
  • Option/Alt drag to duplicate – if you want to copy something on the stage, just hold down the Option (Mac) or Alt (Windows) key and drag the selected objects.
  • Insert Time – this allows you to insert time, shifting transitions to the right of the playhead or stretching transitions that overlap the playhead.

These are the main features, though there definitely are some others in there. In addition, we’ve done a couple of things to improve the performance of the tool.

First, we are using a new version of WebKit that is the same on both Windows and Mac. This provides a big speedup for Windows user. We’ve also re-writteen the “actors list”, which is the list of animated elements and properties on the left hand side of the Timeline Panel and it’s a lot faster, more responsive and keeps in sync with the rest of the timeline when scrolling.

Lastly, we’ve fixed lots of bugs and made a number of incremental refinements so it should feel a lot better than Preview 3.

Overall, this is a huge release for Edge and makes it much more powerful, but we’re not done! We’re hard at work on Preview 5 and have a lot of cool stuff in store for you.

So download Edge Preview 4, give it a try and let me know what you think. Also, follow me on Twitter – @markand, and stay in touch!

Enjoy!

2 thoughts on “Adobe Edge Preview 4 Available Now!

  1. Hi Mark, great post!

    I am more of a designer than a developer and have worked for years with Flash. I quite like where Edge seems to be headed, but since while I was doing some work on Preview 4 I found I needed some extra features so I compiled a quick list of some of them and I though might be helpful to share them with you here. I apologize in advance if some features I listed as missing are already in Edge Preview 4…. if they are there, then weren’t easy to find as I poked around quite a bit :) Ok so here is the list.

    “Selectability” of Elements in the elements list… given the layers
    Visible [ √ ] Locked [ √ ] —> Element1
    Visible [ √ ] Locked [ √ ] —> Element2
    Visible [ √ ] Locked [ √ ] —> Element3
    Visible [ √ ] Locked [ √ ] —> Element…

    User must set to “false” the visibility of Elements 1 and 2 to be able to edit Element3 when they are overlapping. Elements located at the bottom of the stack would not be editable unless top ones are set to be invisible.

    Overflow hidden should not prevent drag-selection of elements whose bounds are located outside of the stage size. Ex. given a stage size of w:500 h:400, an element located at x:550 or y:450 should be selectable via drag select when overflow has been set to hidden for an Edge Project

    Selection of single keyframe should operate like in Flash and AfterFX.
    Consider 2 keyframes A and B at 1sec. and 2 sec. where wants to change an element’s alpha value from 100 to 0. As it is now it is not possible to select a single keyframe because selecting “A” will also cause “B” to get selected. Therefore changing the value of A element’s alpha, (let’s say to 0 for instance) will not change just the value of the element at keyframe A creating an fade-in animation (A alpha=0 to B alpha=100). Oddly and counterintuitively, both keyframes will simply disappear.

    Add the ability to create complex/irregular multi-point custom masking shapes instead of having to resort to use transparent PNGs or Gifs as masks

    Add cross browser masking of symbols to allow masked animations

    Add masking of embedded videos elements with the ability to place video/s into symbols and work with them like users can with any other symbol.

    Copy paste of sections of keyframes must be more intuitive. Right now seems always to be “anchored” to the start of the timeline instead of starting anywhere within the timeline. Noticeable when animating elements on stage. Placing the marker somewhere in the timeline and changing (for instance) its alpha value, it will instantaneously create an animation from the beginning of the timeline even if user does not need that element or symbol to be present since the start and it’s not introduced until later (say 10 seconds into the animation).
    Also when working with alpha values or positions when building animations, if a value needs to change within the same timeline, it will be necessary to do so using a woraround: for instance… say that Element 1 needs to fade in from second 3 to second 5, then needs to stay like that for 2 seconds (up to second 7) and then should disappear over 2 seconds (ending at second 9). When setting up the fade-in that’s all fine up until the keyframe to start the fade-out needs to be set. The workaround used was to set alpha 100 at second 5 and alpha 99 at second 7 so that the fade out to alpha 0 at second 9 could be set. Setting alpha 100 at second 7 would not create a start keyframe for the fade out animation. I hope the explanation came across. It’s often difficult to illustrate a process that would take no time when shown directly

    Selection of frames and reversing order (reverse can only be done playing backwards using actions on a symbol, but not physically taking a keyframe section, copy/paste it and reversing it)

    Motion guides to allow users to create symbols that will follow paths when animating (same as in flash)

    Add more animation presets such as bounce side-to-side, up-down, looping, etc.

    Add assignable animation effect (like easing) to simulate 3D effects in 2D such as cube rotations, globe spinning

    Allow creation of oddly shaped elements not just rectangular and ovals.

    Allow mapping of images to custom-defined shapes (would help simulate 3D)

    Auto re-flowing of text around hedges of a mask (like in Indesign)

    Add gradient fill for text (not just single colors) with UI to animate gradient fill (like it’s possible in flash).

    Add ability to update bitmaps in library re-connecting them to new sources (same as flash)

    Add ability to re-optimize PNG/GIF and JPEGs (same as flash)

    Add ability to swap symbols (same as flash)

    Add ability to clean up unused assets in library (same as flash)

    I hope the list above will be of some help for future improvements/features additions to Edge.

    Thanks and keep up the great work.

    • Hi tf, this is a GREAT list of feature requests and you have done a fantastic job of explaining them. We’ve fixed a few – notably, showing elements outside of the stage when overflow is set to hidden. Some we have on our list and some we don’t. I’ve made a copy of your comments and will add them to the list of requests.

      I do have a question about your copy paste comments, because it seems wrong. Not sure if it’s a bug.

      I would definitely recommend checking out the Adobe Edge Forums. It’s the best place for submitting and sharing ideas. There’s also a thread where people post their animations. I’d love to see yours!

      Mark

Comments are closed.