August 7, 2013 - sahunt

Update to Edge Animate CC is here, fixing compatibility issues with IE11

Hello Edge Animate lovers!

Today we’ve release an update to Edge Animate CC, fixing compatibility issues with Internet Explorer 11. This update is recommended for all users, ready for you to download at https://creative.adobe.com/products/animate.

View the full Edge Animate release notes here.

About this update:

Due to the evolving nature of the web, sometimes things break when newer browsers are released and we do our best to stay ahead of the game with compatibility as browsers progress. Animate uses the popular library yepnope for preloading your AN content, and this fix leverages an updated version of that library. Keep in mind that content created with Animate versions prior to CC (this includes 1.x and Preview versions) will face compatibility issues in IE11. We have two options for you to update your files:

Recommended: Load your Animate CC 2.0 composition in Animate CC 2.0.1, resave, and republish. Done!

Don’t want to go through the hassle of resaving already live content? No problem, there’s an easy manual fix.

Note: The below fix is not roundtrippable! If you load a changed file inside of an older version of Animate, the changed preloader will not save as Animate will overwrite the default preloader. Only use the below solution if you’re unable to resave your composition through the Animate CC update, or if you’re looking to update a completed project.

1)   Download the latest version of yepnope (1.5.4 as of this writing) from Github and open it up in a code editor.

Open yepnope.1.4.5-min.js

 

 

 

 

 

 

 

2)   Open yourAwesomeFile_edgePreload.js (it’ll say “Do not edit this file” at the top – don’t worry, we won’t tell.)

Open preload.js

 

 

 

 

 

 

 

3)   Copy the contents of  yepnope.1.5.4-min. js and paste into your preloader.js between:

if(!AdobeEdge.yepnope) {

and:

AdobeEdge.yepnope = window.yepnope;
}

Replace the old yepnope code with the new code

 

 

 

 

 

 

 

 

Thanks for using Animate! If you have any questions, please direct them to our Animate user forums.

- The Edge Animate Team

10:01 AM Permalink
July 17, 2013 - Elaine

Floral Matchmaker Tutorial #1: Dynamic Colors

For those of you who don’t know me, I am one of the quality engineers on Edge Animate and work directly on the product itself.  As a part of every release, our team releases a couple of sample files in our Edge Animate Showcase to get users started.  My contribution for the Animate CC was Floral Match Maker, which is a game rolled into an advertisement.  Several users have asked how the project was built, so I thought I would break down the project into its component parts and talk about how I made each part of the scenario work.

The first topic I’d like to introduce is that of dynamic colors.  This is a technique that Sarah first introduced in the “Catch Cracidae” game, which had a number of pastel birds fluttering across the screen for you to click.  I liked it so much that I brought it into this sample file, which featured a number of flower ornaments that moved like a hanging wind chime.

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

Topics covered in this article:

  • leveraging transparency in an asset
  • getting a reference to an object in a nested symbol
  • assigning colors to a managed object

The screen shots and project files from this post are based on Edge Animate CC, which is available for a free 30 day trial via the Adobe Creative Cloud and is included in any paid subscription to the Adobe Creative Cloud.

Download the finished project files
See a live example

 

The Only Image Asset

Since this file was supposed to be an advertisement, I wanted to ensure that the smallest number of assets were used.  Since I had seen the Catch Cracidae sample, I wanted to recreate something like it.  Using Adobe Fireworks, I created a PNG32 file that relied on transparency and opacity.

transparentflower

As you can see from the screenshot, I created an ellipse that had a black background with some level of opacity set, a solid yellow ellipse for the center of the flower, and two five point stars, one of which had an erase filter and the second of which had a lighter opacity setting (about 30%).  After exporting into PNG32 to give me the flattened file, I was ready to work in Animate.

Download the original Fireworks asset

My exported asset ended up being 2k, which meant that the download overhead would be very small for this project.

 

A Single Flower

If you look at the finished project file and double click on the “simpleFlower” symbol, you will see the setup for the flowers I used all over this project.  As you can see, it’s the image with an ellipse behind it.  In order for me to see it, I set the ellipse to red (#ff0000) as a temporary placeholder within my project.  By placing the ellipse (which I renamed “background”) lower in the Elements Panel, the color displays through the transparency of the PNG.  As you can see, the darker segment automatically provides a darker shade of the background color.

withbackground

Colorization

I’ve skipped over the creation of the intermediary symbol (“flower”), which adds the thread upon which the ornament hangs and handles some of the movement, as I plan to cover the movement in another post.  In the “cascadingFlowers” symbol, I have seven flowers that now statically hang on the stage.  Move the playhead to about 4 seconds on the symbol’s timeline to see all of them.

Open up the code panel and select the “creationComplete” event under cascadingFlowers, or simply select the Open Actions button next to the cascadingFlowers line in the elements panel.

codeSnippet

The first line has an array with all of the objects in it.  As a side note, some people prefer to dynamically generate variable names, as it is a fairly common practice in ActionScript 1 and 2 and is allowed in JavaScript.  However, debugging with this practice tends to be a little more complex, so I personally lean toward the coding method of iterating through an array instead.

The second chunk has a for loop, which will step through each one of the objects in the flowerNames array and assigns a hue.

The magic of dynamic colorization happens in the next two lines, which I’ll explain in detail:

The first line creates an RGB string, which looks something like this: “rgb(XXX, YYY, ZZZ)”.  This is a string that can be passed as a parameter to jQuery’s css assignment method in the second line, therefore setting the background-color to a particular RGB hue.  There are three segments in the string, which I’ve denoted as XXX, YYY, and ZZZ.  Each one of these numbers is created in the same method.

Let’s start from the inside out.  Math.random() will return a random fractional number between 0 and 1.  256 is the max value for each one of the RGB parameters, so you’ll get a value somewhere between 0 and 256 when it’s multiplied against the random number we just created.  Then, since it’ll probably be a fractional number (like 100.5206234) and the CSS value has to be an integer, we wrap this number with Math.floor() to round down to the nearest whole number.  Finally, we want to shift all of it into the pastel range by adding 50 to each value.  We then call this code three times, one to get the red value, one to get the green value, and one to get the blue value, and join them all together using the + operator into the hue variable.

Now that we have the RGB value, we can assign the current flower in the loop to the color.  We’ll do this in a series of getSymbol() calls to drill down to the current flower’s “background” element.  In order to do this, we have to look up the current flower name, the flower inside of the instance, the simpleFlower within that instance, and finally, get the DOM handle of the “background” element.  We then can call the .css() assignment operator and assign this new value to the “background-color” CSS property.

Summary

With an asset with some transparency and some fancy coding, you can put together a colorful, randomized set of assets that doesn’t require you to create separate images for each color.  Have questions on this technique?  Edge Animate engineering staff and great community members answer questions in the Animate user forum.

3:45 PM Permalink
May 6, 2013 - Rich Lee

Edge Animate CC – Coming in June is here!

an

EDIT: Edge Animate CC is here!

If you haven’t heard by now, Adobe announced major updates to nearly all of its creative tools at MAX this morning, available in June today, June 17. This includes a major update for Edge Animate, with the upcoming version being called Edge Animate CC. We’ve added some new features that we think you’ll love:

  • Motion paths – Finally!
  • Templates that you can save and re-use
  • Swipe gesture support for touch devices
  • Optimized publishing with CDN hosting, at no cost to you

Check out the features page for more info.

Also, the free introductory offer expires when Animate CC releases next month. To get the new features, you can either subscribe to a Creative Cloud single-app or full membership, or sign up for a free 30-day trial. Here’s our FAQ for more details.

We can’t wait to launch Animate CC and hope you’re excited to try it out. Stay tuned for more updates!

Cheers,

Rich Lee
Sr. Product Marketing Manager

1:52 PM Permalink
March 11, 2013 - sahunt

What’s in a filter?

What’s in a filter?

With the release of Edge Animate 1.5 we’re excited to announce the implementation of CSS built-in filters, a cutting edge new spec which enables web developers and designers to bring stimulating visual effects to their elements which could previously only be achieved in design tools like Photoshop.

So what is a filter, exactly?

CSS filters are a powerful introduction to the CSS language, which bring eye-catching visual effects to the web. Backed by hardware acceleration, filters provide a fast and simple way to style your content. But how do they work? Think of filters as post-processing step similar to how you would edit effects in Photoshop. The browser takes a snapshot of the page, grabs the pixel data, styles your elements, and then serves it back to you with the filter effect intact.

Similar to how you can stack lenses on a camera, filters can also be stacked to create unique effects. Combined with the power of Edge Animate, you can achieve compelling animated effects in your compositions.

Keep in mind that CSS filter effects are highly experimental, and are currently only available using the –webkit prefix in Chrome, Safari, iOS6 Safari and Blackberry 10 browsers.

Filters in Animate

Usually when we think of filter effects we think of images. Filters are much more powerful and can be applied to a variety of elements.

Rollover the thumbnails to see the applied filters (only works in webkit browsers)
 

In the above example, a filter is applied to a symbol, which in turn applies the effect to the image and text underneath. Translated into DOM-speak, symbols are glorified divs where each sub-symbol is akin to a child div. What makes this special is when filters are applied to the parent div, all the children inherit the style. This includes divs, text, images and other symbol children, eliminating the need to drill down into your symbols to render individual elements.

Before filters, the above effect could only be achieved through layering of multiple graphics. By using filters, you can minimize server requests and reduce your output payload by using a single graphic instead of two or more.

Supported Filter Types

Animate offers support for the following built-in filters:

  • Invert
  • Hue-Rotate
  • Contrast
  • Saturate
  • Sepia
  • Greyscale
  • Blur and,
  • Shadow

Box/Text-shadow vs. Filter: drop-shadow

Drop-shadow is a valuable add to the filter stack, allowing you to take shadows above and beyond what can be achieved with a box-shadow.

boxshadow

A graphic styled with box-shadow

 
 

The above graphic is rendered using box-shadow. Not bad. We have a transparent PNG file, though it’s highly evident the shadow is being applied to the dimensions of the graphic. Box-shadow is a literal rendering of its’ definition; a box-esque shadow is applied based on the current dimensions defined by the container.

filtershadow

The same graphic styled with drop-shadow

This is where the magic of drop-shadow comes in. This effectual property grabs transparent pixel data, and then applies the shadow around the opaque pixels. Since the property is also intelligent enough to pick up translucent pixels, your shadow will also appear behind semi-transparent elements (as opposed to box-shadow, which only renders around the outline.)

Performance

Since built-in filters are GPU accelerated, their performance is fairly stellar considering the processing demands on the browser for rendering. However, be aware that the more filters you implement, the harder the browser has to work, leading to degraded performance. The following table outlines each filter and how you can expect them to perform:

Filter effect Browser support Performance
grayscale
Chrome
very fast
sepia
Chrome
very fast
saturate
Chrome
very fast
hue-rotate
Chrome
fast
invert
Chrome
very fast
contrast
Chrome
fast
blur
Chrome
slow unless accelerated
drop-shadow
Chrome
can be slow
Table from htmlrocks.com
 

As you can see, filters can add rich effects with hardware-accelerated performance. By styling content leveraging the power of browser rendering, you can optimize your compositions for richer effects with less payload. We encourage you to give filters a shot, and see how they can enhance your Animate projects. If you haven’t downloaded Animate 1.5 yet, be sure to get it here http://html.adobe.com/edge/animate/ while it’s still free.

For more information on other exciting CSS features coming to a browser near you, visit html.adobe.com/webstandards.

4:47 PM Permalink
February 14, 2013 - sahunt

Adobe Edge Animate 1.5 is here, bringing new design capabilities to the web

Happy Valentine’s day for all you Edge Animate lovers! Today we’re introducing version 1.5, with new capabilities and features that allow you to style content with browser-based effects. In the past, these effects could only be achieved by importing multiple graphics. We’ve been working very hard over the past few months to bring you this updated release, and best of all, it’s still available for free through any subscription tier of Creative Cloud.

Download Edge Animate

 

CSS Built-In Filters

Up until now, special effects and UI transitions could only be accomplished by stacking multiple images and using transitions to reveal and hide each layer. This increases the payload of your website and forces you to control multiple stacks of imagery instead of a single element. With CSS filters, you can now apply effects which were previously only available to you in image editing software like Photoshop. Filters are especially powerful in Animate and can be used on more than just images. You can apply filters to images, text, divs and symbols.

CSS built-in filters

CSS built-in filters

Since filters are a highly experimental feature, they’re still making their way into all the popular browser channels. Currently CSS filters are only supported in Chrome, Safari, iOS6 and Blackberry 10 browsers, but if you’re targeting a mobile-first experience or want to add some flair to your site with graceful degradation, give them a try.

 

Gradient Support

Gradients in Animate not only allow you to style your elements, but they’re fully animatable like any other property. This enables you to go beyond typical styling and create some interesting 2.5D effects by emulating light and depth. In this example, I’ve used a CSS filter shadow with a radial gradient to give the illusion of light being cast on the sphere. The new gradients panel allows you to apply linear or radial gradients and adjust the gradient positioning for fine-grained control. You can also choose how a radial is applied based on properties available in CSS by click-holding the radial icon.

Editable gradients.

Animatable gradients.

 

Typography enhancements with Edge Web Fonts

No longer do you have to manually juggle code to add fonts to your Animate compositions. Edge Web Fonts gives you access to a vast library of fonts made possible by contributions from Adobe, Google and designers around the world. Edge Web Fonts are powered by Typekit, so you can be assured of high performance and stability. This will make it much easier for you to control typography at production time. Sort your fonts by style and add as many as you want to your font library. The Edge Web Font service is completely free and there’s no limit to how many fonts you can add to your content.

Control typography with Edge Web Fonts.

Control typography with Edge Web Fonts.

 

Check out the above features in action on YouTube.

To learn more about what you can find with this update, visit the Edge Animate release notes. Thanks for using Animate, and we hope you enjoy this update available for download here.

8:55 AM Permalink
December 14, 2012 - sahunt

Adobe Edge Animate 1.01 is now available!

The first official Adobe Edge Animate update is now available, containing several performance improvements and bug fixes. This update is recommended for all users and contains the following updates:

  • Added support for Edge Web Fonts
  • Performance improvements on published content
  • iOS 6 fix for multiple compositions embedded via iFrame and Adobe DPS
  • Various fixes to improve application stability

To better understand the features that matter most to our users, this update also includes the ability to report back anonymous data related to the usage of specific features in Edge Animate. This information will help our team make more informed decisions for prioritization and focus on particular features. The Edge Animate team has had a very close relationship with our users during the development of 1.0, and their feedback influenced the product greatly. This update allows you to speak to us through your actions in the application.

To install the update, click on the “Update Available” banner on the EA welcome screen. Download instructions and release notes can also be found here.

Thanks everyone for using Adobe Edge Animate, and happy animating!

Sarah Hunt
Product Manager

9:39 AM Permalink
September 24, 2012 - Rich Lee

Adobe Edge Animate 1.0 is available now, with a surprise!

The day has finally come — Adobe Edge Animate 1.0 is here! We’re proud to announce that the first commercial version is now available from the Adobe Creative Cloud, as a perpetual (non-expiring) product. The surprise is that it’s FREE as an introductory offer, as a thank you for the tons of feedback we received during the preview phase, helping us get to version 1.0. We hope by making it free, we’ll get even more feedback and adoption. If you’re new to the Creative Cloud, all you need to download Edge Animate for free is go to creative.adobe.com and sign up for a membership. You’ll also have access to other Adobe Edge Tools & Services, such as Edge Inspect and PhoneGap Build.

New mnemonic for Adobe Edge Animate

Concluding the Preview Period

It’s been a thrilling ride for the Edge Animate team, since we first sneaked an experimental prototype of it at MAX 2010. Less than a year later, on August 1, 2011, we released Preview 1 on Adobe Labs. We really didn’t know how it would be received, but the response was overwhelming — there were 70K downloads on the first day, and major press coverage from publications like Cnet, USA Today, The New York Times, and Mac World. However, the most surprising aspect was that users were already showing off what they made with it within the first 12 hours of launch. It was incredible and flattering to know people had downloaded Preview 1, figured out how to use it, and posted their work on production sites in less than a day.

Looking back, some of us feel that Preview 1 was released too early. It only had a single timeline and couldn’t handle user interactions at all. Just about the only thing you could do with it was create a static, linear animation. There was concern that people would look at the tool and write it off as too basic or primitive for real-world use. We made a conscious decision to release early and often, taking in user feedback to help us improve it. Our development philosophy was very different from what people came to expect from Adobe. In just over a year, we released six more previews. Each release incorporated user feedback and had a mix of major and incremental  improvements to the previous version. There were over half a million downloads during the preview phase, and as I mentioned earlier, the feedback we received was instrumental in making Edge Animate 1.0 what it is today.

Here’s a quick summary of the major enhancements of each Preview:

  • Preview 1 (8/1/11) – Single timeline, import graphic files, open HTML files
  • Preview 2 (9/7/11) – Fit and finish improvements and bug fixes
  • Preview 3 (10/1/11) – Interactivity and access to the Edge Animate API
  • Preview 4 (1/19/12) – Symbols, web fonts, element display lifetime
  • Preview 5 (3/11/12) – Optimized publishing options, down-level support for non-HTML5 browsers
  • Preview 6 (5/10/12) – Built-in lessons, localized in six languages, DPS and iBooks publishing
  • Preview 7 (8/20/12) – Resizable layouts, new drawing tools, stage improvements

We plan on releasing more updates to Edge Animate, to add new capabilities as well incorporating more feedback. Stay tuned for more news! With that said, please download Edge Animate 1.0 and let us know what you think!

Thanks,

Rich Lee
Product Marketing Manager

10:35 AM Permalink
August 20, 2012 - Rich Lee

Edge Animate Preview 7 is now available

Today we have some big news – Preview 7 has just been released, and our new name is now Edge Animate.

Starting with this release, the name has changed from Edge to Edge Animate. Edge has been renamed to better reflect its capabilities as a tool to create animated, interactive content.

Preview 7 is a major update that our team is VERY excited about. We’ve been hard at work since Preview 6 launched in May, and added a lot of features to make your compositions more compelling and easier to create. Here’s a quick snapshot of what’s new:

  • Resizable Layouts: Enable your projects to adapt to different screen sizes.
  • Creativity Tools: New ellipse tool, box and text shadows, more robust text editing.
  • Stage Improvements: Rulers, guides, resizable stage, and positioning
  • Timeline Improvements: Adjust snapping, time-based increments that emulate FPS, visible grid.
  • Keyframe Improvements: Lots of improvements were made to make it easier and faster to work with keyframes.
  • Usability Enhancements: Grouping, refreshed properties panel, new keyboard shortcuts, and more.
  • Updated Code Editor: Re-skinned code tree, updates to symbols, error prompts.
  • Accessibility: Publish screen-reader friendly HTML tags.

Our team leader Mark Anders just released a new video that shows Preview 7 in action.

Be sure to check out the complete list of new features here. You can also see all the features we’ve added since Preview 1 launched a little over a year ago.

We hope you’re excited about Preview 7 – please get the complimentary download here and let us know what you think!

Cheers,
Rich

8:44 PM Permalink
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