Archive for July, 2012

July 25, 2012

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

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