July 25, 2012 - sahunt

Preview 6.1 is here, fixing issues with Firefox 14

Firefox 14 was released out of beta last week, and with it came a surprise to our users – Edge animations stopped running in Firefox! Our team has been working diligently to provide a fix, which we released today as Adobe Edge preview 6.1 – more on that below. I also wanted to take this opportunity to explain what caused the issue.

CSS3 is still officially in a draft state. This is why browser prefixes (-moz, -o, -webkit, -ms) have become rampant in web development, and it’s really up to the browsers to decide how they want to implement and render the spec. The challenge for Edge is to try to stay ahead of the game and adapt quickly when things change in a major release.

 

What went wrong?

With the release of Firefox 14 came a change in the transform spec. Previously the CSS transform spec outlined here had the following syntax for specifying skew:

-moz-transform: skew(30deg,20deg);

It has now been changed to only support the individual axis.

transform: scaleX(sx);
transform: scaleY(sy);

More information on the Firefox animation spec can be found here.

The problem was that just about all Edge animations utilize the transform property, and even if your composition didn’t modify the skew property, the animation would drop the whole transform declaration since it is part of the “transform” CSS property.

How do I fix it?

Our team has devised a remedy for the problem, and it is available today as Adobe Edge preview 6.1.  You can download it from Adobe Labs or via the Creative Cloud. After you install it, all you’ll have to do is resave your project(s) and it will work in Firefox. Alternatively, you can simply swap out the runtime files without having to reload the composition in the app.

We live in a wonderful time where the web is evolving to give us new capabilities, though sometimes that involves some growing pains. Thank you everyone for your patience.

Download Edge 6.1 now.

 

8:58 PM Permalink
July 18, 2012 - Elaine

Tutorial: Leveraging Independent Symbol Timelines

Introduction

Recently, I put together a simple project for an Edge user who was having what I would consider a fairly standard problem: he had one timeline, and couldn’t figure out how to use this single timeline to display an arbitrary set of objects.  In his case, he wanted to animate a series of magazine covers for a particular year, and then allow the user to select any year from buttons on his main timeline.  Once the button was clicked, he wanted the existing covers to animate out, and the new ones to animate in.  Now, there are ways to do this on a single timeline, but it seemed like a job for symbols and variables.

This article is intended for novice users of Edge who may not have a deep coding background.

Topics covered in this article:

  • getting and setting variables
  • symbol timelines
  • basic triggers
  • basic interactivity
  • overflow
  • autoplay
  • basic animation and easing

The screen shots and project files from this post are based on Edge Preview 6, which is available for free on Adobe Labs or via the Adobe Creative Cloud.

Download the finished project files
See a live example

Creating the First Symbol

Right click after multiselecting to convert to a symbol.

Right click after multiselecting to convert to a symbol.

We’re going to first start this project with three mock magazine covers.  Create one rectangle and copy them twice to create three identical Rectangles, then change the name of each one of the Rectangles to something more significant, like “title1,” title2,” and “title3.”  Multi-select these Rectangles by clicking the first one and shift-clicking on the others, then convert all three to a single symbol by using the context menu (right click) to select “Convert to Symbol…”  Since it’s a bunch of red rectangles, name the symbol “red.”  By default, Edge creates an element with the new symbol name and places it on the stage in the same place as your original assets.  It’s critical to remember that a symbol is more like a template or definition – in fact, you can have multiple elements deriving from the same symbol.  That being said, in this project, we will have a single element per symbol.

Now, enter the symbol editing mode by double clicking on the icon next to the symbol’s name in the Library panel.  Once inside this substage, we can begin creating our animation!

You can find the symbol icon under the "symbols" section in the Library Panel, next to the name of your symbol.

You can find the symbol icon under the “symbols” section in the Library Panel, next to the name of your symbol.

 

Animating In and Animating Out

You can create using the Pin or using keyframes.  For more information, see the two lessons about Animation when you first launch Edge.

You can create using the Pin or using keyframes. For more information, see the two lessons about Animation when you first launch Edge.

For a more customized rate of motion, select the Easing button on the Timeline Panel.

For a more customized rate of motion, select the Easing button on the Timeline Panel.

For this example, we’re going to begin with a very simple animation of each one of the rectangles zipping in from the right.  With a quick application of easing (easeIn/quad), we have a neat animation in.  I won’t go too much into detail here, as there are video introductions and lessons within Edge to introduce you to animation, using keyframes, and using the Pin.

Move the playhead to a point on the Timeline and press Ctrl-T (Win) or Cmd-T (Mac) to insert a trigger.

Move the playhead to a point on the Timeline and press Ctrl-T (Win) or Cmd-T (Mac) to insert a trigger.

At this point, we want the animation to stop and wait for some user input.  Move the playhead to the end of the animation and place a trigger (Ctrl/Cmd-T) at that point.  In the actions pop-up window, type in the command to stop the playback, which is “sym.stop();”  You can also click on the top button on the right side, “Stop,” and it will insert the same code you just typed in.

Now that we’ve animated in, let’s work on the outgoing animation.  Move the playhead to 2 seconds in the timeline and create a transition for each item to the left, once again applying easing (easeOut/quad) to make the animation seem like it’s scooting out to the left.

Once your basic animations are complete, your Timeline should look something like this.

Once your basic animations are complete, your Timeline should look something like this.

Next, set up reference points within the timeline so we know where our animation starts.  Move the playhead to the beginning of each section of animations and press Ctrl/Cmd-L to create a label.  Name one called “in” and another called “out” so that you can reference them in your code.

Labels help you reference load points on the Timeline.

Labels help you reference load points on the Timeline.

 

Adjusting the Visibility

You can find the Autoplay setting on every stage, including the main Stage.

You can find the Autoplay setting on every stage, including the main Stage.

The last couple of things we need to do before we begin adding interactivity have to do with how the symbol displays on the stage.  First, we want to make sure that this symbol doesn’t automatically play – after all, we want the mouse clicks to handle the animation in and animation out.  Since the autoplay setting is checked by default when we create the symbol, change it by clicking first on the stage background to get the symbol properties, then uncheck the “Autoplay” checkbox.

Now that we have our completed symbol, we can return to the main stage and look at the symbol in the context of the stage.  As you can see from the screenshot, you won’t actually see anything directly on the Edge stage. If you select “red” in the elements panel, you can see that the bounding box goes way off the stage to the right.

However, if “Autoplay” for the symbol were set and you were to preview in browser, you might actually see the elements before they begin animating – not good if we don’t want the user to see the assets before they display in the animation.  What we really want is a way for the Stage to be the bounding box for the visibility of the animation – almost like a cropped view.  In order to do this, you should change the overflow setting by clicking on the Stage (anywhere in the window, or on the Stage element in the Elements Panel), and then switching Overflow from “visible” to “hidden.”  This will hide anything that’s offstage, so we get a clean animation in.

 

By setting the overflow, you can determine whether your animation has scrollbars or simply hides everything that's off-Stage.

By setting the overflow, you can determine whether your animation has scrollbars or simply hides everything that’s off-Stage.

Adding Interactivity

There are other event handlers you can choose, including some meant for touch devices.

There are other event handlers you can choose, including some meant for touch devices.

Now we’re ready to add in the animation in on a click!  Draw another rectangle on the stage with the same red to be your button, and name it “redButton.”  Once you have it placed where you want it to be, add in a simple response to a click by selecting the actions button, either in the Elements Panel or in the Properties Panel.  You can also right click on the element and select “Add Action.”

Once inside the actions editor, insert the code to reference the symbol and play its timeline from a label:

   sym.getSymbol("red").play("in");

As a side note, getSymbol always refers to the element name and not the symbol name.  In this case, they’re both set to “red.”

At this point, if you preview in browser and click on the small red button, the rectangles zip in correctly.

 

The Second Animation

Protip: Use the symbol export view to transfer symbols between compositions, machines, or even between two people.

Protip: Use the symbol export view to transfer symbols between compositions, machines, or even between two people.

Now that we have an animation in, we can work on the animation out while a second set of rectangles (read: magazine covers) transitions in.  In order to do this, first duplicate the symbol (let’s call this one “blue”) and change the colors of each one of the rectangles by editing the symbol.  Also, duplicate the button to make a blue button as well.  Finally, drag the blue symbol onto the stage, aligning it perfectly with the “red” element on the stage so that it sits right on top of one another.  (Hint: select “red” before dragging blue on stage to align one object on top of the other.)

You can also snap to an object's side and resize so that it's the same size as another object on the Stage.

You can also snap to an object’s side and resize so that it’s the same size as another object on the Stage.

This is the point where we have to do some planning – what happens when the user pushes the second button?  Well, we want whatever is on the stage to animate offstage, and then whatever color button the user pushes to animate onstage.  That should be relatively easy to do if I only have two buttons, but what happens if we have three or more?  The answer is simple: state management.

For the non-programmers out there, you can interpret this to mean: “Where am I?  What’s on the stage right now?”  All you need to do is to create a variable to hold information on what element is currently displayed on the stage.  Then, we can refer to that variable when we do the animate out.

In addition to the compositionReady event, there are other Stage events that can be useful, including keystroke events for better user interaction.

In addition to the compositionReady event, there are other Stage events that can be useful, including keystroke events for better user interaction.

First, let’s start out by initializing the variable when we first load our composition.  The Stage’s compositionReady event is the one I want to target:

   sym.setVariable("current", "");

Since there’s nothing on the stage to begin with, set it to an empty string.

Then, at the end of the code for both redButton and blueButton, add code to set the “current” variable to that color.  For instance, in redButton’s click event:

   sym.setVariable("current", "red");

Now, all that’s left is to check what the current object is and animate that out.  In this case:

   var current = sym.getVariable("current");
   if (current != "") {
      sym.getSymbol(current).play("out");
   }

Our total code in each button should look something like this (for instance, in redButton click):

   var current = sym.getVariable("current");
   if (current != "") {
      sym.getSymbol(current).play("out");
   }
   sym.getSymbol("red").play("in");
   sym.setVariable("current", "red");

 

So, if the user clicks on on blue and red is already on the stage, red should play “out” and blue should play “in.”

 

But Wait…!

It seems like we’re 90% there, but there’s one major problem – the animations are running over each other!  In fact, the rectangles are animating in at the same time as the previous set is animating out.  What we really need is a little bit of buffer time before the animation in happens.  Now, there’s code to do this, but the easiest way is to move our animations over and add another second and a half of buffer time in order to allow the animation out to happen before we do the animation in.

Before: You can also move individual keyframes left and right along the timeline.

Before: You can also move individual keyframes left and right along the timeline.

This extra space in our timeline allows for the animation out to occur.

After: This extra space in our timeline allows for the animation out to occur.

At this point, when you preview, switching back and forth between blue and red looks really good, but the initial click now has a second and a half delay.  Easy enough to handle – we’re now going to add another label called “shortIn,” which doesn’t have the long lead time.  Then, you can insert some code that will play the short intro if we’re at the very beginning (meaning, if current is set to the empty string).

This new label will allow me two options - either to begin my animation immediately or to take a second and a half to begin my animation.

This new label will allow me two options – either to begin my animation immediately or to take a second and a half to begin my animation.

Our total code, then, looks like (in redButton click):

   var current = sym.getVariable("current");
   if (current != "") {
      sym.getSymbol(current).play("out");
      sym.getSymbol("red").play("in");
   }
   else {
      sym.getSymbol("red").play("shortIn");
   }
   sym.setVariable("current", "red");

In my final version, I’ve also included a green button to demonstrate that adding another button doesn’t require a whole lot of work.

Download the final project files here.

Have questions?  Join us in the Labs Forums and search to discover if someone has already asked (and answered) your question, or add a post to ask your question!  Also, check out the Edge microsite, with lots of downloadable goodies and project files.

 

11:21 AM Permalink
June 29, 2012 - sahunt

Would you like some statistics with that?

For those of you using Google Analytics, I’ll show you how to use tracking events in Edge to monitor statistics for events executed in your Edge compositions (Adobe also offers a web analytics solution called SiteCatalyst, which we may cover later).

Preview the sample file.
Download the sample file.

Set up your analytics account

Visit http://www.google.com/analytics/ and sign in with your existing account or create a new one.

If you’re integrating your Edge composition with a page that already contains your tracking code, you can skip this step and move onto “Tracking Events in Edge”.

Once logged in, visit the Admin tab to grab your tracking code towards the bottom of the page.

 

Copy and paste your tracking code into the .html of your Edge composition.

Now that you’re all set up we can begin to track.

 

Tracking Events in Edge

Event tracking in Edge is actually quite simple. You can track anything bound to an event or have tracking executed automatically via triggers on the timeline. In this example, I’m going to set up event tracking for several events in my composition.

I’ll be using the analytics code for event tracking as documented here using the _trackEvent method. Visit the Google Analytics tracking guide to learn how to use these paramaters.

I’ve set up events in a few different parts of my composition. You can set up as many or as little events as you’d like; I’ve added plenty to give a few examples of events you can track.

Ready to upload

Now that all your tracking code is in place, you’re ready to upload. Once your composition is uploaded to your website Gogle Analytics will start tracking the events. Note: it might take a while between the time the event is fired to when Google receives it.

To view the events on Analytics, Go to Standard Reporting > Content > Events.

Once the events are executed, they’ll appear in your analytics report which allows you to get in-depth analysis on how visitors are using your Edge compositions.

6:10 AM Permalink
June 13, 2012 - sahunt

Merging the worlds of Edge and Muse

Edit June 16 2012 – The following post is a way to integrate your Edge content without the use of iframes. For detailed information on how to integrate your Edge compositions using iframes (which will also allow you to preserve your Muse project for editing) visit the Muse documentation page here.

This post will show you how to integrate your Edge compositions into Adobe Muse. Be warned, this does involve some code – BUT – don’t let this intimidate you! If you’re the type that would rather poke a fork in your eye than code, fear not. All we’ll be doing is copy and pasting.

This post also assumes you have the basics of Muse and Edge down and is not a tutorial on how to use either. For resources on how to use Muse, check out muse.adobe.com. For resources on how to use Edge, check out edge.adobe.com.

Getting started

View the Page
Download the sample files

I’ve created a very basic site in Muse which has some simple navigation and a placeholder for the banner I will later create in Edge. There’s two caveats to integrating Edge content into Muse;

  1. Integrating Edge compositions requires HTML export out of Muse, and therefore you will not be able to edit your site in Muse once the Edge content is integrated. Make sure your site is good to go before publishing. If not, the process of merging your Edge content is fairly easy once you’ve done it a few times so if you need to change your site, you’ll just have to republish and reinput the Edge snippets.
  2. You will not be able to upload your site via Business Catalyst in Muse after you’ve integrated your Edge content, since the site is published as HTML from Muse.

With that out of the way, here is the basic site I created.

Once you’ve completed your site, go to the File menu and select “Export as HTML”.

After you publish, you should see something similar to this in your published directory.

Onto Edge

In this example, I’ve made a simple banner in Edge which I’ll be putting into my Muse site.

Save your Edge composition in the same directory as your Muse published content. Your folder should now look something like this:

Edge and Muse Files

And now we code (kind of)

Put down the fork! By code I really mean copy and paste – we’ll be merging the content between the Edge HTML and the Muse HTML.

Open the two HTML files in the directory you’ve been saving your work in.

We’ll start with the Edge HTML. First, copy the following code:


Then switch over to the Muse HTML. Look for the closing </head> tag (there will be only one in the document). This is where we’ll paste the code.

Your Muse HTML should now look like this:

We’re halfway done!

Open up the index.css file that Muse exported. If you’re not familiar with CSS, it’s an output file that works similarly to how styles work in InDesign, Illustrator or Photoshop. Muse will export the styles for every element you create defining things like colour, fonts, position, etc.

I know I set my placeholder to 700px wide, so doing a search I can instantly find the name of the placeholder. Make sure the Edge content you create and the placeholder you created in Muse match sizes; if the dimensions are off it can cause your page to style incorrectly.

In this case, the ID of my placeholder is #u141.

Now that we know what the ID is of our placeholder, we can integrate our Edge content. Go back to the Muse HTML page and do a search for your ID. ID’s can only exist once on a page, so it will be the only one you find.

There’s one more line we have to grab from the Edge HTML. Return to the Edge HTML and copy the following line:

Return to the Muse HTML and paste it in between the <div> tags of our placeholder. It will now look something like this:

You’re done! Now your Muse HTML page is ready to go.

Make sure when you deploy your website you include all of the Muse and Edge files.

Since both Edge and Muse are very new products, our efforts have been put into making our individual products better before focusing on cross-product workflows. Edge has already started exploring workflows with other products, including InDesign and iBooks. When it comes to Edge and Muse, is there room for improved integration? Absolutely! However that’s for a future release, as for now you’ll have to get your hands a little dirty to make the two work together.

 

6:04 PM Permalink
May 15, 2012 - Josh Hatwich

Bootstrapping Animate Compositions

Multi-Composition Support?

One of the most frequently asked questions is how one can integrate multiple Animate compositions in the same page.  Perhaps you have a series of compositions that you want to play one after another, or a composition that sends data to another composition.  The solution is the API AdobeEdge.bootstrapCallback, which allows you to register a callback function from the context of your HTML page that will be called when your Animate composition is loaded and ready to play. This provides a hook to register event listeners for Symbol and Timeline events.

This post has been updated with sample files created in Adobe Edge Animate 1.5.

An Example: Play 3 Compositions in Sequence

Let’s look at an example that plays a series of compositions in sequence.  In this example we will avoid editing the Edge compositions themselves; instead we will be focused on editing the wrapper.html that combines them.  The compositions we’ll use are very simple.

You can download a zip of the sample files here. (Updated to Animate 1.5.)

Project Setup

Edge does not support editing multiple compositions in the same file, but you still might want to make edits to a composition after integrating it into a larger site. An emerging practice is to edit the compositions separately via composition-specific .html files and then combine then in a single “wrapper.html” file that is just used to preview the combined work.

The wrapper and each of the pages can be placed in the same directory so they can share resources.

 

Include 3 compositions

First the wrapper.html needs to include each of the compositions:

Add HTML markup for each stage

Each Edge composition is associated with a “stage” DIV that has a class name identical to the Edge composition’s ID.

Add CSS to position 3 stages

Each Edge Composition lives inside a “stage” DIV element. Without a little help from CSS the 3 stages would flow and appear one after another. They would also all appear when the page loads. In this case we want to hide the 2nd and 3rd stage until the right time in the sequence.

Bootstrapping with JavaScript

Since Edge is loaded using a preloader script, very few JS APIs are reliably available from the wrapper HTML page. The preloader downloads Edge and jQuery libraries dynamically, so the page needs a hard signal when it is safe to call into them. The following code can be added to establish callback when it is safe to call jQuery and Edge APIs:

AdobeEdge.bootstrapCallback(function (compId) {
//your function will be called when the composition is ready to play

});

Coordinating multiple compositions

Our bootstrap function is going to coordinate 3 compositions. It will be called 3 times as each composition loads and is ready.  Since we want to coordinate the compositions we are going to keep track of loading using the loadedComps variable.

Registering Animate-specific callbacks

Since the Animate composition is ready when the bootstrap callback is issued, we can safely bind to Edge callback APIs.  The same syntax that is used in the xyz_edgeActions.js can be used here.  The following code listens for the timeline to complete.  When one timeline completes, it hides the related composition and then shows and plays the next one in the sequence.

 

It is pretty simple!  Here is the finished result (more for you to inspect than for your viewing pleasure).

 

12:17 PM Permalink
May 10, 2012 - Rich Lee

Edge Preview 6 is here!

We’ve just released Edge preview 6, which has many significant updates:

  • Built-in lessons: First-timers and newbies, rejoice! We have six new tutorials built right into Edge, to help new users get familiar with the basics.
  • Coding: A new code panel gives you a complete view of the actions code in your project, and the code editor has a new full code mode.
  • Publishing: Easily import your projects into Adobe’s Digital Publishing Suite with InDesign CS6, or Apple iBooks author. We also have a new Static HTML Markup feature for SEO benefits, and Google Chrome Frame support for better fidelity on older browsers.
  • Symbols: You can now copy/paste and import/export symbols from one project to another.
  • Languages: Edge is now available in French, German, Japanese, Italian, and Spanish. Just go to the ‘Help’ menu to change it.
  • Other cool stuff: The Preview in Browser function is now compatible with Adobe Shadow, auto-keyframe mode has been improved, editable time codes are back, and so much more to make Edge more efficient.

Check out this video with Mark Anders, who covers the new features in preview 6.

Get the complimentary download here (you can also get Edge preview 6 as part of the Adobe Creative Cloud).

Also, our new microsite at edge.adobe.com is live!  This is our new “home” where people can learn about Edge, get helpful resources, download samples, and more. Please let us know what you think.

Cheers,
Rich

9:06 PM Permalink
March 16, 2012 - Mark Anders

Edge Preview 5.1 Now Available

Today we released a minor but important update – Adobe Edge preview 5.1. Preview 5.1 fixes 2 bugs that were reported by users that we felt were important to fix.

The first concerns a “blank” error dialog that is displayed when deleting an image from the images folder while still referencing the image from the composition.

The second is an issue where existing HTML files that contained unclosed <li> tags would not be displayed correctly.

Both are now fixed, and you can download the update from the Edge page on Adobe Labs.

4:21 PM Permalink
March 13, 2012 - Scott Evans

Preview 5: Timeline Updates

Since Preview 4 in January, we’ve made a lot of tweaks and improvements to Edge’s timeline.

Here’s the Preview 5 timeline. Click to cycle between Preview 5 and Preview 4.

Preview 5 (click image to cycle between Previews 4 & 5)

We refined and tighted up the visuals quite a bit. Some of these changes are cosmetic, and some have functional motivations. For example, the ruler is 10px shorter, which frees up room for (most of) another lane in the timeline proper. We’ve added some color: the Pin (more on that shortly) is blue and the Playhead is gold. The layout of the eyeball and lock buttons now matches the layout of the Elements Panel.

New and Changed Controls

With the Edge UI, we try to walk the line between simplicity and control, so there’s a lot of debate before we add new timeline controls. Preview 5 adds a few controls: Easing (with no selection, this button sets the default easing for new transitions; with transitions selected, it edits their easing); Toggle Pin; Expand/Collapse Lanes; Insert Label; and Snap On/Off.

Snap On/Off is tucked at the bottom left of the timeline, along with Only Show Animated Elements.

We sort of inverted the Generate Smooth Transitions mode and button: We replaced Generate Smooth Transitions with an Instant Transitions mode and button (the button with the hollow diamond; a hollow diamond represents an instant transition). This command’s hotkey is I.

The Pin

We renamed “the Mark” to “the Pin” this release, and improved it in a number of ways. This feature is the fastest way to create animations in Edge — you get two keyframes with a single edit, and spend less time moving the Playhead around and dropping keyframes. But the Pin is unique to Edge, and surfacing it has been tricky. These latest changes help, but you may need to play with the feature for a few minutes to get a feel for it. Mark Anders’s Introducing Adobe Edge Preview 5 video includes a good introduction to the Pin.

Visually, the Pin is more important now — it’s positioned above the Playhead, and when active, it’s blue. The Region between the Playhead and Pin is rendered in one of two colors: gold for a “forward” animation, blue for a “backward” animation, along with subtle arrows that indicate direction.

Pin interactions are improved too. In Preview 4, clicking and dragging the Mark would activate it and drag it away from the Playhead. We saw new users do this unknowingly, when they intended to move the Playhead. So now the Pin is attached to the Playhead until you explicitly activate it. There are a number of ways to toggle the Pin: double-click the Pin or Playhead; the Pin button on the timeline; menu — Timeline/Toggle Pin; hotkey — P.

We also added Flip Playhead and Pin (hotkey Shift-P), which exchanges the location of the Playhead and Pin.

Ghost Pin + Playhead, and the Return Command

After creating transitions — with or without the Pin — most of us press Play to see the animation. The newly added Return command (the arrow next to the playback buttons; hotkey — Return; menu — Timeline/Return) brings the Playhead back to its original position. If the Pin was active, the Return command also reactivates the Pin and Region. You can see this original position as a “ghosted” version of the Pin, Playhead, and Region.

Timecode

A big change in Preview 5 is the absence of the large, editable timecode display. We added timecode displays right next to the Playhead and Pin, which makes it easier to see their exact positions as you move them with the mouse. The Playhead time indicator shows the absolute position of the Playhead; the Pin’s shows the relative length of the Region between the Pin and Playhead.

For those of you who love and need editable timecode, remain calm — we’re planning to bring it back in a future release.

Missing Controls

In addition to timecode, another control is missing, at least for now: the Filter Text box. We expect to bring this back in the future as well.

Symbol Lanes

Symbol playback lanes now show subtle forward/backward arrows that indicate when the symbol’s timeline is playing.

When a symbol is selected, any Symbol Playback Commands (Play, Play Reverse From, etc.) now show the command’s target time or Label.

You can now double-click a Symbol Playback Command to modify it.

Zoom Hotkeys

In Preview 4 the zoom hotkeys had the Alt/Option modifier; we removed that in Preview 5. Zoom the timeline with = and -, and zoom to fit with \.

That’s It For Now

Again, it’s worth checking out Mark’s Preview 5 video and blog post for more on this release.

The timeline is central to Edge’s UI, and we spend a lot of time talking about it and trying ideas. Look for more evolution in the future. And of course, we welcome your feedback!

1:15 AM Permalink
March 12, 2012 - Rich Lee

Edge Preview 5 – Now available!

Hello!

Edge preview 5 is now available on Adobe Labs! We’re VERY excited about this release, which has a lot of big updates – many of which were requested by the community. Here’s a quick overview:

New Publishing and Optimization Features:

  • Publish to web: Preview 5 has an option to specify if jQuery should be packaged with the composition, or downloaded from a CDN to produce lighter code and improve caching.
  • Down-level browser support: Define a fallback state of a composition for non-HTML5 browsers like IE8 and below.
  • Preloader improvements: Choose what gets shown during the preloader, before the framework, jQuery, or composition is loaded.

Emphasis on animation:

  • Timeline: We made several significant improvements to the timeline that make composing animations much easier and faster, such as an easier to use Pin (formerly the Mark) and smarter playback behavior.
  • On-stage tools: New clip and transform tools make it easier to manipulate objects and create animation effects.

Many other enhancements:

  • Improved symbol functionality, stage editing options, the ability to swap images, more intuitive contextual menus, many bug fixes, and much more have been added to preview 5.

See the full list of updates here.

And here’s the latest video from Adobe Fellow Mark Anders, who covers the latest goodies in preview 5.

Please download preview 5, give it a spin, and let us know what you think!

Thanks,
Rich

3:59 AM Permalink
February 3, 2012 - Josh Hatwich

Preview 4: Interactivity Updates

Edge Preview 4 is now available for download on Adobe Labs! Preview 4 adds major new capabilities like Symbols and Web Fonts, but also has a number of refinements including tweaks to the JavaScript API. The following interactivity changes are in Preview 4.

Resolving Selectors

In Preview 3 we introduced an API that allows you to lookup a selector within a Symbol:

sym.lookupSelector("XYZ");

In almost every instance the reason you lookup a selector is to pass its result into jQuery like this:

$(sym.lookupSelector("XYZ"));

We’ve streamlined this call in Preview 4, so now you can get the same result by doing this:


sym.$("XYZ");

vMouse is being Depreciated

We decided to remove the vMouse options from the Edge UI in Preview 4. The idea behind vMouse is that you can write code that depends on mouseover / mouseout logic and still have it work on touch devices. We came to understand a few problems with the practice of using vMouse and decided the additional complexity was worth avoiding. In case you are wondering the problems come about when the Element changes on mouseover. Imagine a mouseover script that hides the Element. On the desktop you never get a chance to issue a click to the object, but on a touch device vMouse would synthesize vMouseover on the way to handling a click. These kinds of things can be tricky to find and resolve, so we decided to keep it simple and recommend using the raw browser events.

If you used vMouse in Preview 3, Edge will still recognize it and vMouse events will still work in Preview 4, you just won’t be able to add them via the UI. The related JS file is still bundled with Edge, so your content should keep working.

Working with Multiple Compositions

Preview 3 added the ability to place multiple compositions on a single web page and in Preview 4 we’ve made that a little easier. Preview 4 has a single-line JavaScript include for each of your compositions, so you don’t need to coordinate the shared libraries and such. You still need to specify stage elements for each composition using the Composition ID as the class name for the stage.

Showing / Hiding Elements

In conjunction with the Element Display feature that we added in Preview 4 there is a slight change to the behavior of Managed Elements around creation time. Managed Elements are the graphical components and text you create in Edge (vs. Static Elements that you define in your HTML markup directly). The change is that Edge now hides all Managed Elements at creation time and then sets their initial display state when all resources are downloaded and the composition is ready to play. This is done to avoid showing the content pop in as it arrives on the network.

Symbols & Playback Commands

In Preview 3 playback control was only available via triggers. Since Edge doesn’t execute triggers on its stage, the effect they have on the animation is only apparent when you are running in the browser. Playback commands allow you to scrub into Symbol timelines and can be a more effective means to control the timeline than one-line triggers.

Pardon the dust!

The Edge APIs will be evolving as we iterate and incorporate your feedback. We appreciate your patience as we tweak the runtime. As you try things, please bring your questions and engage the Edge team on our forums.

6:00 PM Permalink