February 26, 2014 - Lewis Haidt

Adobe SXSW 2014 Creative Camp – Edge Animate in the House

Adobe is traveling to SXSW for our Annual Creative Camp, Friday March 7th at the Radisson Town Lake, Riverside Ballroom and Edge Animate is in the house. Our Product Manager, Sarah Hunt shares how to create dynamic, interactive infographics. All of our sessions dive into topics shaping the modern web. Plus, you’ll need your fuel to make it through SXSW and we’ve got you covered all day with lunch, and snacks galore – flavored popcorn, mini-burgers and petit BLT’s plus a happy hour during our final session of the day.

Here’s the info on Sarah’s session:

The Onions of Interactive Infographic Design 3:30 – 4:30
 
Interactive infographics make it possible for you to truly capture your audience and engage with them in a manner that simply is not possible when merely citing dry facts or statistics. This session will cover the value of creating animated, interactive infographics with HTML your readers care about using Adobe Edge Animate with Product Manager, Sarah Hunt.
 

And come for our full session line up:
 
What Do We Build Next? 11:00 – 12:00
 
Get behind the scenes at Adobe and learn how our product development teams go from just an idea to a functional prototype ready for testing with real users in a matter of weeks for their newest web authoring tools. Devin Fernandez, Principal Product Manager, and Winsha Chen, Senior Computer Scientist will show examples of real projects under development right now.
 
5 Things Developers Need to Know About Design 12:30 – 1:30
 
In this session you will learn with Adobe Evangelist Paul Trani the techniques designers use as well as the things they wish every developer knew about design. Understanding these 5 things will not only make you better at design, it will help you work better with designers. We’ll also be serving lunch during this session so make sure you come early to grab a sandwich and get a seat.
 
Rich Web Experiences & the Future of the Web 2:00 – 3:00
 
We’re reaching a point where ideas we could only dream of in the past from interactive film to global multiplayer 3D gaming can become a reality, all living inside of your browser. We’ll explore inspiring examples of how the web can be used to create rich media experiences and what’s possible in the future with Adobe Creative Technologist CJ Gammon.
 

The Ultimate Developer’s Tool: Theory & Discussion 5:00 – 6:00
 
What do iOS, Android, and the Internet all have in common? They were all built using source code editors driven. But what qualities are needed in a modern code editor? Enjoy some cold beer and snacks while you engaging in a discussion with Senior Product Manager, Jonathan Dunlap, on how we can use our present knowledge to build the ultimate source code editor.

10:35 AM Permalink
February 13, 2014 - Rich Lee

A Re-imagined Annual Report and Edge Animate CC

cups

When the not-for-profit Calgary Urban Projects Society (CUPS) wanted a new way to promote its initiatives and attract donations, its marketing agency, ZGM, suggested creating an animated digital annual report using Adobe Edge Animate CC, part of Adobe Creative Cloud.

“We used many tools in Adobe Creative Cloud for teams, but Adobe Edge Animate CC really stood out in helping us achieve our vision,” says Peter Bishop, creative director at ZGM. “Adobe Edge Animate CC breaks new ground in HTML animation and lets designers make a simple transition from traditional motion graphics to web animation without heavy coding or a steep learning curve.”

Read the full story here (PDF).

Cheers,
Rich Lee
Sr. Product Marketing Manager

10:17 AM Permalink
January 21, 2014 - Sarah Hunt

Did you hear that? A new version of Edge Animate CC is here!

Hello Edge Animate fans!

After months of intensive development from the Animate team, we’re proud to release a major update to Edge Animate CC (3.0) available right now with your Creative Cloud membership. This release comes jam-packed with brand new features, giving you the tools you need to keep pushing the boundaries of animating with HTML.

What will you find in this release?

Audio Support (!!)

Sound can be an essential component of any interactive multimedia experience. Whether it’s adding subtle sound effects or creating animated stories, audio will help you bring your narrative to life to enhance the experience of your viewer. We’re quite excited to bring you audio support using all the native HTML5 audio capabilities. This will let you import audio into your projects, synchronize sound with your timeline and easily control audio events with new snippets and playback controls. Since we’re using the browser as the player, anything you can do with sound in the browser you can do inside of Animate. Cool right?

We’ve put a lot of love into this feature and put together some documentation to help get you started. Check out Adding Audio to Your Animations to learn more.

Responsive Scaling

Creating motion for multiple screen sizes can be difficult. This is why we’re brought you responsive scaling to help your Animate projects scale up and down to fit different viewports. With this feature enabled, your projects will resize to fit whatever container you place it in and scale up and down as the container or browser resizes — keeping the aspect ratio of all your animations in place. To try it out, just check “Responsive Scaling” for the Stage properties, preview in the browser and watch the magic happen.

Script Loading

The web is beautiful in that there’s countless JavaScript libraries available which help you create anything you can imagine without having to write it yourself from scratch. If there’s anything we’ve learned from how you guys use Animate, it’s that you love bringing in JavaScript libraries to extend your compositions. Since Animate uses the open web to create your projects, it only made sense for us to easily allow you to bring in all your favourite libraries like Greensock, Edge Commons, jQuery UI and many more. In the library panel you’ll find a new section called “Scripts” — click the plus button to bring in that favourite JS library from your hard drive, or point to an online source. 

But wait, there’s more! Also included in this release are enhancements to OAM publishing, usability improvements for motion paths and object alignment, and other goodies to make your editing experience even better. To see an overview of all the new features, check out What’s New in 3.0.

Can’t wait to get your hands on it? Click on the “Install” button beside Edge Animate CC in your Creative Cloud desktop app to install, or visit creative.adobe.com and select “Download”.

Thanks to you, our loyal fans, for your ongoing feedback and support which help us drive what happens with each release. You rock. Happy animating!

Sarah Hunt
Product Manager, Adobe Web P&A

10:39 AM Permalink
November 4, 2013 - Sarah Hunt

Want to relink AN project files on a CDN? It’s easier than you might think.

It’s not uncommon to find yourself wanting to deploy an Animate project online and have control over where your scripts and images are linked from. There’s several situations where you might want to do this:

  • Loading multiple Animate projects with shared resources and you want to avoid duplicate loading
  • Managing multiple Animate projects across your server and you want to point to a single JS folder to save on load time
  • Content needs to be dynamically packaged and loaded from a single source due to CMS or other server-side requirements

Whatever environment you’re working in, you may want the option to control the source of Animate dependent files. This post will describe how to point to your own CDN source and the files to edit to do so. The below writing is fairly technical and assumes you have some fundamental knowledge about Edge Animate and JavaScript.

Overview of Required Files

An Animate composition has the following file dependancies for the composition to run:

  • edge.2.0.1.min.js – This is the Animate runtime and remains static. This file is hosted on our Akamai-powered CDN so you essentially get this for free. By default it is not included in a published project as it loads from the CDN.
  • jquery-1.7.1.min.js – We use jQuery to power bits and pieces of the Animate runtime. This file is hosted on Google via ajax.googleapis.com. By default it is not included in a published project as it loads from the CDN.
  • xxx_preload.js – This is the Animate preloader and is used to load all dependent project files. This file changes based on the content of your project.
  • xxx_edge.js – This file contains the DOM information for your animation. This file changes based on the content of your project.
  • xxx_edgeActions.js – This file contains all the actions and user-created code within your Animate file. This file changes based on the content of your project.

Changing the Source

Due to the way Animate project files are dependent on one another, we can’t simply change “mysite.com/myfile/preload.js” to “mysite.com/mydifferentfile/preload.js” in the HTML and call it a day since the links go deeper than the initial load of preload.js. The two files we need to edit are preload.js (to redirect the scripts) and edge.js (to redirect the images).

Note: This method is NOT roundtrippable. Animate will overwrite these changes when resaving a .an file. Only use this step when you’re ready to deploy your project online. Resaving the project will require you to re-edit the files.

Step 1 – preload.js

Editing preload.js will repoint the dependent Javascript files. This is necessary to ensure all dependent files get loaded via the preloader.

Open xx_preload.js in a text editor. Towards the bottom you’ll see the following lines:

preloadnocdn

We’ll be adding a new variable to point to the location we want to load these files from:

preloadwcdn

In the above example I’ve done two things:

  • Line 46 – Created a new variable called CDN_URL. This points to the URL I want my JS files to link from. Change this to your own domain; be sure to add the backslash at the end of the path!
  • Lines 50-52 – Added the CDN_URL var to the file path. This allows you to edit the URL at your leisure and have the new path apply recursively to the linked JS files. If you’ve just dumped your local files onto your server be sure to be aware of any changes you’ve made to subfolder directories.

Step 2 – edge.js

Editing edge.js will repoint the images folder. This is necessary to ensure all required images get loaded with the composition.

Open xx_edge.js in a text editor. At the top you’ll see the following lines:

edgejsnocdn

We’ll be adding a new variable to point to the location we want the images folder to load from:

edgejswithcdn

In the above example I’ve done two things:

  • Line 7 – Created a new variable called CDN_URL. This points to the URL you want the image folder to source from.
  • Line 8 – Added the CDN_URL var to the image path. This will link the “images” folder from “http://www.mysite.com/newsource/images”.

The last step is changing the URL for xx_preload.js in your HTML file (if you choose to do so).

preloadlink

In the above step, I’ve changed the source of xx_preload.js to point to a new directory.

(Optional) Step 3 – Changing Fonts

If you’ve linked to a local font source via CSS using the Custom Font feature, you may also want to change the reference of your fonts folder to reflect the new source.

fontsbefore

In the above untouched example, this is what a local font reference looks like. In this example, my stylesheet points to “fonts/bebasneue.css”.

fontsafter

In the above step I’ve included the CDN_URL variable to in the href, so “bebasneue.css” is now sourced from “http://www.mysite.com/new_source/fonts/bebasneue.css”.

Save, close, and you’re done!

In the above examples I used unpublished versions for readability. This method can be applied to minimized published Animate output, however you may want to run it through a JS beautifier for readability. You can also use the above technique to redirect edge.min.js and jQuery if you choose to host these on your own servers. If at first you don’t succeed, double-check your file paths to make sure they align.

In the future we’ll be looking for ways to make this easier for Animate users, but if you’re in a pinch this method will get you started. Good luck!

3:10 PM Permalink
October 24, 2013 - Rich Lee

Rush Movie Companion Site and Edge Animate CC

Rush of a Lifetime

Websites that help build buzz for Hollywood movies are nothing new. But what is new is how they are created. For Universal Pictures’ new film Rush, the studio wanted a site that would build excitement for the movie. Concept Arts created a site that highlights famous daredevils and rivals in history using a parallax scrolling timeline created with Edge Animate.

“Edge Animate enabled us to cut our previous parallax development cycle in half,” says Aaron Nicholson, developer on the project. “Without it, we would not have been able to address this project’s business requirements while handling its complexity.”

Edge Animate enabled the team to cut its previous parallax development cycle in half. Developers were up to speed quickly, and even with the addition of new features were able to complete the site in less than four weeks. The parallax technique enhances rather than overwhelms the experience and social media integration makes it easy for users to share their own sports stories.

Read the full story here (PDF).

Cheers,
Rich Lee
Sr. Product Marketing Manager

7:24 AM Permalink
October 8, 2013 - Chris Converse

Motion graphics in a mobile world

The spectacular popularity of mobile devices means interactive designers need to extend their skills beyond the desktop to embrace the universe of HTML5. Among mobile devices, including tablet computers, smartphones, and interactive books and magazines, HTML5 is the common denominator.

With HTML5 comes the need to find new ways to integrate interactive media. Specifically built to meet web standards, Adobe Edge Animate provides a way to create interactive and animated content using HTML, CSS, and JavaScript with confidence that it will look and behave how you want it to no matter what device you’re using.

Now I know there are a lot of people who don’t think HTML animation is very robust. They imagine type and div boxes animating and fading in and out, which I agree is less than optimal. But when you start combining that functionality with CSS3 and some of the styling and imagery, it starts to get compelling— you’re only limited by the browsers. Android and iOS devices have latest CSS3 capabilities that support features such as blurring, so it’s possible to offer a more sophisticated animation experience on these devices.

Animated illustrations in HTML5

Recently I created a course for the annual conference of the Association of Medical Illustrators that covered how to simulate illustrations in HTML for use in iBooks and digital magazines or for viewing on websites or mobile devices. While the subject matter experts were all medical illustrators, the session itself focused on making content today—easily digestible to readers—something that spans across industries. How do you capture your consumers’ attention with animation, and across various devices?

Interactive project for Association of Medical Illustrators deigned and created by Chris Converse.

Interactive project for Association of Medical Illustrators deigned and created by Chris Converse.

For the class, I created an animated interactive graphic that compares a healthy eye to an eye with glaucoma. The illustration shows how an eye with glaucoma can’t properly drain fluid, and includes a vision simulator that displays the effect of this condition on a person’s vision. The animated droplets are actually a series of nested animated symbols that create the constant, flowing effect. Edge Animate is able to replace a time and labor intensive coding process with one that is both easy and affordable.

One of the keys to easily creating interactive components in Edge Animate is how the symbols talk to each other via targeting. You can associate an interactive element, such as a click, with a symbol. In the glaucoma example, the user clicks the words Affected by Glaucoma, which then tells another symbol (in this case, the sunset photograph) to change its state. It is this ability to combine the functions and the order of symbols—each with their own timelines—that enables us to create these engaging animations. In the relatively short two hour class with 20 participants, it was exciting to see how quickly attendees were able to create their own animation projects using Edge Animate.

Animation is fun again

A few years ago, the web was full of animations and cool interactions, but those faded away as more attention turned to offering content that behaved consistently across devices and platforms. But people are starting to get excited again about adding it back into projects, and with Edge Animate we can combine styling and imagery with cascading style sheets and simple animation to once again create content that is exciting, engaging, and fun.

Learn even more about Edge Animate with Chris Converse on lynda.com. Get a free 7-day trial with this link: lynda.com/trial/chrisconverse.


Chris Converse is a partner at Codify Design Studio, which has a unique focus on both design and development. Chris develops across such languages as PHP, ActionScript, HTML, CSS, and JavaScript, making his design execution optimal across various media. Chris is a featured speaker at various industry conferences, including the How Design and Interactive Conferences, AIGA, Adobe MAX, and EMERGE. Chris has also written, designed, and hosted video training titles on lynda.com, Udemy.com, Amazon.com, HOW Design University, and Adobe KnowHow. Chris graduated from Rochester Institute of Technology with a BFA in graphic design.

12:41 PM Permalink
September 19, 2013 - Elaine

Floral Matchmaker Tutorial #4: Randomizing the Game Board

Over the past three tutorials in this series about the Floral Matchmaker sample, I’ve talked about animating with the timeline, using the scalable stage in conjunction with a resizable iframe, and creating dynamic colors.  This next post steps away from Edge Animate specifically and into JavaScript to explain how one might efficiently put together a randomized game board.

My game is a very simple match-2 game that has 12 pairs of colors.  The user flips over one token and then another.  If they match, the tokens stay on the flower; if they don’t match, the tokens turn back over so that they’re hidden again.  While I could have laid out a static layout, I thought it would be a more interesting game to play (if not test!) if the game board were randomized so that no one, not even the developer, knew the order of the colors underneath the token.

This article is intended for users of Animate who have some knowledge of coding in JavaScript.

Topics covered in this article:

  • Animate symbol scope
  • the code panel
  • Javascript objects
  • Javascript random number generation
  • Javascript arrays

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 Problem with Random Numbers

Some users have asked the question: “I have <a bunch of things> that I want to display in a random order, one after another.  How do I do that?”  Sometimes their first solution looks something like this:

  • Pick a question at random by selecting a random number
  • When the question is complete, pick another question at random by selecting a random number
  • Repeat the previous step as many times as you have questions

Anyone who has done this has probably experienced the problem of repeated questions, where the random numbers turn out to be: 20, 5, 1, 2, 6, 7, 7, 8, 8, 8, 8, 8, etc.  The problem is that we aren’t guaranteed 20 equally distributed random numbers when we use standard random number generation.  In my case, I wanted to ensure that I had 12 unique matching pairs.

 

Would You Like a Hash with That?

Let’s say I have five marbles, each a different color: blue, red, white, green, and yellow.  I want to make a list of five unique colors.  These marbles all go into a bag, and every time I draw from the bag, I take note of the color and then stick it back into the bag.

Here’s how I start my list:

  • draw a marble (red)
  • write the color of the marble on my list (red), put the marble back in the bag
  • draw a marble…

At this point, if it’s red, we can’t just repeat step 2, because my list wouldn’t be unique anymore.  So, I keep a second list.  Here’s what it looks like:

  • draw a marble (red)
  • write the color of the marble on my first list (red), and write the color of the marble on my second list.  Put the marble back in the bag
  • draw a marble (green)
  • check the second list to see if the color is on the list (no).  Since it’s not, add it to my first list (red, green), and add it to the second list (red/green).  Put the marble back in the bag.
  • draw a marble (red)
  • check the second list to see if the color is on the list (yes).  Since it is, put the marble back in the bag.

At this point, you’re probably thinking that the two lists are the same.  Why, then, would I maintain a second list?  Well, here’s where things get interesting.  Let’s say that we have 1,000 colors on our first list and a very large bag of marbles.  The standard way of checking to see if a color is on the list is:

  • draw a marble (white)
  • look at the first item in the list.  Is it white?  (no)
  • look at the next item in the list.  Is it white? (no)
  • repeat until you either find a white object or you run out of items on the list

If your color (white) isn’t on the list, you’ve effectively had to look at every item in the list.  And if you’re drawing 2,000 unique colors, you can imagine that this would get pretty slow if you have to traverse the list every single time.

Instead, there’s a way to create an object called a hash where your workflow looks like this:

  • draw a marble (white)
  • ask the hash if it has a white object (no)
  • add the color to the first list and to the hash

Or:

  • draw a marble (white)
  • ask the hash if it has a white object (yes)
  • repeat the draw

While the first way of looking at the data requires you to check the list multiple times, the second type of list only requires one request.  A hash is a very efficient way of checking to see if you’ve already selected the object so that your first list only consists of unique items.  This comes in handy whether or not you’re making a list of questions or selecting 2 colors.

Now that we have a good concept of how we want to implement the code, let’s take a look at JavaScript.

 

JavaScript and Hashes

For those of you who are familiar with JavaScript, the first thing you might point out is that JavaScript doesn’t actually have a hash object or even an associative array object.  This is true; instead, you can use properties of a generic object to accomplish the same thing.  To follow along in the Floral Match Maker sample:

  • open the Code Panel by selecting Window > Code from the main menu or typing Ctrl/Cmd-E
  • Select the “gameBoard” line in the tree control

This will show you all of the code in the gameBoard symbol.  Note that there are some custom function outside of the scope of the creationComplete event handler.  Declaring them in the gameBoard symbol space means that any functions within the symbol closure can call them, somewhat akin to a private method in other programming languages.

Then:

  • scroll down to line 25

At this point, we declare two containers: one an array and the other a generic object.

var matchArray = new Array();
var colorHashObject = new Object();

In the parlance of the previous section, “matchArray” would be the first array and “colorHashObject” would be the second array.

 

Setting Up the Color List

We’re now going to introduce two more lists: a list of colors in order and a list of all of the flowers I need to populate.

Line 9 in the gameBoard scope has a variable declaration:

var colorArray = ["#989AE8","#D3A7FF", "#B4DBFF", "#98E8E6",
      "#F55A76", "#A384AD", "#FFFFBF", "#FFB6FF",
      "#BEF299", "#CCCCFF", "#FFD7A2", "#CCFFF8"];

This sets a series of hex color values into an array.  This means that if I query colorArray for the first value (colorArray[0]), it will return “#989AE8″, and so on and so forth down the line until we get to the 12th value (index 11).  Note that I came up with this number based on the fact that I have 24 matching pairs, and so need 12 predefined colors.

Similarly, line 2 in the gameBoard scope has a variable declaration:

var boardArray = ["flower0", "flower1", "flower2", "flower3", "flower4",
     "flower5", "flower6", "flower7", "flower8", "flower9", "flower10",
     "flower11", "flower13", "flower14", "flower15", "flower16",
     "flower17", "flower18", "flower19", "flower20", "flower21",
     "flower22", "flower23", "flower24" ];

This ordered list corresponds to the element names associated with the gameBoard.  To see where I got these element names:

  • go to the Library Panel
  • double click on the icon next to “gameBoard”
  • look in the elements panel

I’ve laid out a 5×5 grid in this symbol with the flowers named flower0-flower24 – a total of 25 flowers.  But since it’s an odd number of flowers, I decided the center would be a free square.  Therefore, my boardArray array doesn’t contain a “flower12″ object.

In the boardArray array, I have 24 objects, with indices from 0-23.

Now that I understand my four lists, I’m ready to populate my game board.

 

Making the Slots

The first thing I need to do is to initialize my hash.  Since I’m keeping track of 2 of each object, I decided to use a number to track how many of each object I’ve already drawn.  If the number is 2, then I know to draw again.  If I were to only need one of each (like in my question example), I could use a Boolean value (true/false) instead.  In the sample project, line 28:

for (var i=0; i < 12; i++) {
    colorHashObject[i.toString()] = 0;
 }

Note that we use JavaScript’s toString() function to convert the number (let’s say 5) from its numerical value to a text value.  This is important, because object parameters are referred to by a string, not a numerical value.  So, essentially, what we are doing is saying:

colorHashObject["0"] = 0;
colorHashObject["1"] = 0;
…
colorHashObject["11"] = 0;

 

Filling The First List

Now it’s time to fill our first list (matchArray) with 24 randomized, numerical values, and our second list (colorHashObject) is ready to be used as a checklist.

while(matchArray.length < 24) {
    var randNum = Math.floor(Math.random() * 100) % 12;
    if (colorHashObject[randNum.toString()] < 2) {
       colorHashObject[randNum.toString()] += 1;
       matchArray.push(randNum);
    }
    else {
       continue;
    }
 }

This block creates a random number in the following way:
Math.random() creates a number between 0 and 1 (e.g. 0.260384).  We then multiply it by 100 (in this case, 260.384), then take the floor of the number (round down: 260).  Then, we modulo, or take the remainder, of the number once it’s been divided by 12 (therefore, 8).

Stepping through the function, we check to see if this number has already been chosen, by saying: “If colorHashObject[“8″] has not been hit twice, then add one to that object, add it to the end of the first list, and move to the next iteration.”  The index of colorHashObject is a string value, but the value it holds determines how many times it’s been called.  Since we’re looking for a pair, the number has to be less than 2 for us to keep going.

Let’s walk through this.  After we draw 8, our colorHashObject looks like this:

colorHashObject["0"] is 0
colorHashObject["1"] is 0
...
colorHashObject["8"] is 1
...
colorHashObject["11"] is 0

If we draw a 6 the next time, we now have:

colorHashObject["0"] is 0
...
colorHashObject["6"] is 1
colorHashObject["7"] is 0
colorHashObject["8"] is 1
...
colorHashObject["11"] is 0

Now, if we draw 8 again, we’ll get:

...
colorHashObject["8"] is 2
...

If we draw 8 again, the program checks:

if (colorHashObject["8"] < 2) ...

In this case, we reject the draw because we know we already have a pair in matchArray and try again.

Note that we use a while loop instead of a for loop because we don’t know how long it’s going to take to get 24 values.  We just keep on checking whether or not the list is long enough.  At the end of the while loop, we should have a matchArray of exactly 24 objects, with exactly 12 pairs of objects.

 

Setting Up the Game Board

When I set up each game piece, I want each one to not only have the background set, but also to know what its own value is for a quick comparison when I’m playing the game board.  Since each game piece is actually a symbol, I know that I can just set a variable in that symbol’s scope so I can just ask the game piece what its value is.

In the sample project, I separated this out into the colorizeBoard method.  I pass in the matchArray into the function as “randomColors,” so you can think of the two as identical.

// NOTE: randomColors is actually matchArray in this code
for (var i=0; i<24; i++) {
    // each flower knows what its color is
    var currColor = randomColors[i];
    currSym.getSymbol(boardArray[i]).setVariable("color", colorArray[currColor]);
    // set the color of the background
    currSym.getSymbol(boardArray[i]).$("background").css("background-color", colorArray[currColor]);
 }

Since I have exactly 24 objects, I can use a for loop.  I use the colorArray I defined with all of the hex values and the list of elements in boardArray to essentially do the following:

  1. Grab the current index’s random number out of randomColors, each of which should be between 0 and 11
  2. Grab the associated element in boardArray, get its symbol, and assign a variable with the current index’s random number
  3. Get the color associated with the random number out of colorArray, grab the background out of the element, and get its DOM handler.  Assign the background-color to the color using jQuery.

 

Summary

Unique randomization can be a difficult problem for intermediate coders, but this little trick of using helper arrays and a hash (or generic JavaScript object) can really help optimize your code and make it more efficient.  Have questions on this technique?  Edge Animate engineering staff and great community members answer questions in the Animate user forum.

5:02 PM Permalink
September 5, 2013 - Elaine

Floral Matchmaker Tutorial #3: Hiding and Showing the Game Board

In the first two tutorials of the series, I covered the code solution for the automatic colorization of our flowers and the way I got the ornaments to swing naturally.  For this tutorial, I wanted to focus on how to combine responsive and traditional layouts to expand and shrink the stage.  If you view the live example and mouse over the panel, you’ll notice that the game board pops out to the left, over the text of the webpage.  Once the mouse leaves the confines of the stage, the stage closes back to its original dimensions.  Some of our users think of this as “expanding and shrinking the stage,” and go through extensive code solutions to actually change the size of the Stage.

t3-shot0

When the game board is open, it covers existing text.

 

I decided to approach this problem in a different manner; instead of resizing the stage, I decided I would resize the container and let Animate’s scalable content handle the rest.

This article is intended for intermediate users of Adobe Edge Animate who have a light coding background.

Topics covered in this article:

  • scalable layout
  • direction anchors
  • gradients
  • HTML iframes
  • jQuery’s animate() function

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

 

Resizable Content and iFrames

Animate’s resizable content settings allows you to change the dimensions of your objects based on percentage instead of pixels.  This is commonly used to create content that will fit on multiple platforms, such as content that should take the full size of the browser on multiple mobile devices, each of which has similar but not identical form factors.

Stepping back to a more conceptual level, I wanted my match-two game to slide in and out from behind the informational half of my advertisement.  At first, I thought (like many others) I should resize the stage using jQuery.  But after taking a look at what might be involved, I realized that I was thinking of the Stage as the container, when in reality my advertisement would actually live within an iframe.  If my iframe didn’t resize, all I’d get would be an iframe with a horizontal scrollbar on the side of a webpage.

I realized I should be focusing on changing the iframe’s size, not the stage size.  Knowing that we had a scalable layout feature made it all that much easier for me to make my content change with the size of the iframe.

 

Step 1: Resize the Background

Since I knew that my advertisement would stay 600px high, I only had to resize the width of the Stage.

  • Click on the Stage in the Elements panel, or click on an empty part of the Stage in the main Stage panel
  • Select the toggle button next to the W (width) selection in the properties panel to change it from px to %
  • Preview in browser and change the browser size

Scalable Stage setting

Notice that the previewed project takes up the entire width of the browser.  This is expected until you place the Animate file in its parent iframe.

You can also preview what this looks like by changing the size of the stage by adjusting the preview marks.  Once you select the % property for the Stage, you can drag the slider in the ruler left and right to see the Stage resize.

t3-shot2

 

Step 2: Set the Reference of the Major Objects to Different Sides

Default Reference PointsBy default, all of the objects take their references from the top and left sides.  This means that any X or Y value you set references 0,0 in the upper left hand corner of the Stage, and move the object based on a point defined in its upper left hand corner.  However, in order to make the expansion and shrinking to work, I needed to have objects pinned to both left and right of my Stage.

Animate makes this easy by providing a four-square selection box in the properties panel for every object.  Since the main part of the advertisement would stay pinned to the right hand side, I decided to pin my cascadingFlowers object and the associated text to the right side of the Stage.

  • Select the first four objects in the Elements panel (“playGame”, “sfflowerexpo”, “decorateTheOutdoorsText”, and “cascadingFlowers”)
  • In the properties panel, select the top-right rectangle
  • Preview in browser and change the browser size, or adjust the preview marks to see how the objects flow

Orientation

 

Step 3: Place the Project in an iframe

Many times, an Animate project is placed within the context of another HTML file, like as a menu, an animated header, or content rotator.  In this case, our skyscraper advertisement lives on a news site and will pop over existing text when the user mouses over the project.

  • Start with an HTML file with some text in it.  In this case, I used the following as my container:
    <div align="left" style="width:700px; position: absolute; top: 0px; left: 0px; border: none; font-family: Verdana, Geneva, sans-serif; font-size: small">
       INSERT MY TEXT HERE
    </div>
  • Add jQuery to the parent page by adding a <script> tag in the header of the file:
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

    This allows us to use jQuery within the parent page.  Even though Animate has jQuery in it, we’re not allowed to use it in the parent unless we reference it properly due to scope.

  • Create an iframe and load the Animate project into it
    <iframe id="advertisement" src="skyscraper.html" height="600" frameborder="0" style="position:absolute; top: 50px; right: 10px; width: 160px"></iframe>

As you can see from the iframe statement, the default width of the iframe is 160 pixels.

 

Step 4: Opening and Closing the iFrame

We can now use jQuery to open and close the iFrame by adding the following script to the body of the parent HTML file:

<script>
   $('#advertisement').mouseenter(function() {
      $('#advertisement').animate({width: "600px"}, 500);
   });

   $('#advertisement').mouseleave(function() {
      $('#advertisement').animate({width: "160px"}, 500);
   });
</script>

This is jQuery that says: “When the mouse enters the ‘advertisement’ object, resize the width of that object to 600px.  When the mouse leaves the ‘advertisement’ object, resize the width of that object to 160px.”  Both resizing functions (using the jQuery animate() API) will animate over the course of 500ms, or half a second.

Note that we’re using the mouseenter and mouseleave events and not the mouseover and mouseout events.  Many new users will confuse the two, but mouseover and mouseout will fire whenever the mouse moves, which means that your animation will oftentimes flicker as you move your mouse.  Instead, use mouseenter and mouseleave – it’s what you want 90% of the time.

 

Step 5: The Need for a Background Object

At this point of development, I noticed I had a problem.  To see the problem in the project:

  • Click on the eyeball next to the “background” element in the Elements Panel
  • Resize the Stage width to 160px using the preview slider in the ruler

t3-shot4

The text with the game (and really, the game board itself) displayed behind my flower wind chimes.  But the animation trigger for opening and closing the advertisement lives within the parent HTML, and I didn’t want to call back into the project if I could help it.  Instead of doing the complicated code solution, I realized I could just create an object that would live below the wind chime flowers but on top of the game board and all of its associated text.

Since I had a gradient as the background, I used color swatches to save my gradient.Gradient swatches

  • Click on the Stage in the elements panel
  • Click on the gradients icon in the properties panel to load the gradients color selector
  • Click on the + next to the vertical gradient bar to add it to the color swatch
  • Draw a rectangle and set it to 160px wide by 600px high
  • Click on the gradient selector in the properties panel
  • Click on the saved gradient in the color swatch to reload it
  • (optional) Convert to symbol (notice that background is a symbol, though it isn’t required in this case)
  • Drag the background object in the Elements Panel until it’s below the cascadingFlowers
  • Change the reference point of background to top-right and align it with the right side of the project

Gradient swatches and color swatches are saved with your Animate project, so you can reuse them over and over again through the lifetime of your project.

 

Summary

By inserting Animate into an iframe, you can easily add independent animated content to existing HTML projects.  You can use a little bit of jQuery in the parent HTML to take advantage of Animate’s scalable layout feature and adjust the size based on whatever you’d like, including mouse events and media queries, to name a few options.  And, finally, the color and gradient swatches feature is a great little time saver for when you’re working with the same colors over and over again.

Have questions on this technique?  Edge Animate engineering staff and great community members answer questions in the Animate user forum.

9:18 AM Permalink
August 19, 2013 - Elaine

Floral Matchmaker Tutorial #2: Animating with the Timeline

The last tutorial I posted had a code solution for the automatic colorization of one of our flowers in the Floral Match Maker sample.  For this tutorial, I wanted to focus more on the power of timeline animation.  If you view the live example, you’ll notice that the initial animation has seven ornaments that drop from the top of the composition.  Afterward, they start a slow, subtle independent wave back and forth to look like a wind chime.  I took about a half an hour to get this animation working and just right, whereas coding it by hand would probably have taken me easily four or five times the time to get the animation looking the way I wanted it to.

With a little timeline magic and very little code, I was able to create an animation that looks sophisticated and draws the eye.

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

Topics covered in this article:

  • simple timeline animation and easing
  • reuse of symbols
  • simple triggers

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 a paid subscription to the Creative Cloud.

Download the finished project files
See a live example

 

Creating the Wave

Originally, I created the simpleFlower symbol to group together the string (which is a 3px wide div) and the colorized simpleFlower element.  In retrospect, I could have also used a group (right click > Group Elements in DIV) to create the same effect, as I only used this symbol once.  Either way will function in this part of the tutorial.

Open the swingingFlower symbol by double clicking on the icon next to its name in the Library Panel.  This symbol handles only the right-and-left swaying motion.  In the symbol substage, you can see the flower element placed in the center of the symbol substage by default and the autoplay is off, because I don’t want the animation to start until the bounce has completed.  “Autoplay” is more or less what it sounds like: the setting determines whether or not the timeline begins playing when the symbol instance is loaded.  If it is unchecked, the symbol will be frozen at time 0.

From a high level perspective, the motion is a simple rotation.  However, by default, the rotation point is in the center of the object, which would have the object moving like a pinwheel instead of a hanging object.  The first thing to do, then, is to set the transform origin:

  • select the element
  • in the Properties panel, go to the Transform section
  • set the Y value to 0.00%

t2-keyframe

Note that the transform origin property only affects the reference point for the properties within the transform section of the properties panel.

Then, set the motion from -3 degrees to 3 degrees over a 1 second period.  In order to do this, you can use the auto keyframe setting to animate.

  • First, place a keyframe at 0 seconds so that the default is always 0 when the symbol initializes.  Move the playhead to 0 seconds and click on the diamond next to the rotate value.
  • Then, move the playhead just to the left of 1 second and place a second keyframe so that the value is maintained.  The second keyframe should be hollow, which means that the value has not changed from the previous keyframe.
  • Turn off auto-transition mode by pressing the button on the timeline panel or pressing X

t2-autokeyframe

  • Move the playhead to 1 second and set the value to 3 degrees rotation in the properties panel.  A new keyframe should be placed automatically, because the auto-keyframe setting is on by default.
  • Turn on auto-transition mode again
  • Move the playhead to 1.5 seconds and set the value to 0 degrees rotation in the properties panel.  A new keyframe and a new transition should be created so that there’s now a transition between 3 and 0.
  • Move the playhead to 2 seconds and set the value to -3 degrees rotation in the properties panel.

Keyframing should be familiar to those who use AfterEffects.  Remember that we also have the Pin, which is extremely powerful for creating transitions quickly.

However, at this point in time, the motion isn’t really very natural – the flower just swings across the stage woodenly.  The culprit is the linear easing, so the best thing to do is to play with the easing in order to make it faster at the bottom and slower at each side:

  • select the left transition and select the easing button in the Timeline panel
  • select Ease In and Quad.  This will mean that the animation gets faster close to the end of the animation
  • select the right transition and select the easing button in the Timeline panel
  • select Ease Out and Quad.  This means that the animation gets slower as it progresses

Now the swing is more natural as it progresses across the stage.  The final thing for us to do here is to make the animation swing from side to side repeatedly.  The way to do this is to use timeline triggers.

  •  Move the playhead to 1 second and press Ctrl/Cmd-T (or go to Timeline > Insert Trigger)
  •  In the actions pop-up that appears, click on the Play button in the snippets on the right side of the window
  •  Move the playhead to 2 seconds and insert another trigger
  •  In the actions pop-up, click on the Play Reverse button in the snippets

t2-snippets

Note that these two snippets allow for you to insert canned code that will help you in your animation.  sym.play() plays from the timeline location forward in time, and sym.playReverse() plays from the timeline location backward in time.

If you’re following along in the finished file, you’ve probably noticed that the triggers aren’t actually exactly on 1 second and 2 seconds – in fact, they’re pulled slightly to the outside of the transitions.  I fiddled with this for a little while before getting it where it felt right.  Leaving the triggers at the end of the transitions made it feel as if the flowers just hit a wall and bounced right back.  By giving it just a moment of no movement at the peak, I made the objects react the way that they would if they were actually affected by gravity: each flower naturally comes to a stop for a brief moment before swinging back.  In order to do this:

  • click and drag the trigger on 1s to the left a little
  • click and drag the trigger on 2s to the right a little

The last thing in this symbol is the creation of a label.  I can use either time codes or a label to refer to a specific location on the timeline, so I’ve placed a label at the point where we hit 0 in rotation to begin our animation.  (Press Ctrl/Cmd-L or Timeline > Insert Label)  Name this label “center”.

Creating the Bounce

The way I handled the animation of the bounce was first laying out the final location of the flowers and then doing the animate in.  This is easiest with the Pin, which is described in videos and in our own in-app lessons (Animate II: The Pin, which can be found in both the Lessons Panel and linked off of the Welcome page).

  • Drag seven copies of swingingFlower onto the Stage
  • Highlight them all and create a symbol called “cascadingFlowers”
  • Double click on the new symbol on the Stage or click on the icon next to “cascadingFlowers” in the Library Panel
  • Adjust the symbols into their final positions and adjust the symbol stage if desired
  • Rename the elements if desired (e.g. “falling0″, “falling1″, etc.)
  • Move the playhead to 3/4 of a second, or 0.750 seconds
  • Press “P” to toggle the pin, or click on the pin button in the Timeline Panel
  • Drag the playhead to the left to 0 on the Timeline

If you’ve dragged the playhead to the left, the bar between the playhead and Pin should be blue; if you’ve accidentally dragged the Pin to the left, the bar between the playhead and Pin will be yellow.  If you need to switch the location, press Shift-P to swap the Pin and the playhead.

t2-pin

The Pin marks the value that you don’t want to change, and the playhead marks the value that will change.

  • Shift-drag the first object straight up so that it’s off the symbol stage.
  • Drag the pin region (the blue bar between the Pin and the playhead) to the right so that the playhead sits at 1/2 of a second, or 0.500 seconds
  • Repeat the shift-drag with another flower
  • Repeat the previous two steps until the flowers cascade
  • Highlight all of the transitions created in this symbol and change the easing to Ease Out > Bounce

t2-bounce

 

Starting the Playback

Now that we have the bounce in, we can start each flower playing the slow wave back and forth.  In order to get the vague sense of unpredictability, I set each flower to play once the bounce-in animation completes.  Because I set up the flower’s animation to go from left to right over time, I need to start from the middle of the timeline.

Notice that we have a label at the center of the movement called “center.”  We’re going to play from this label so that we don’t get any awkward jumps.

In the cascadingFlowers symbol:

  • At the end of the falling0 transition, press Ctrl/Cmd-T to create a trigger
  • Add the following code to start the animation from the label “center”:
    sym.getSymbol("falling0").play("center");
  • At the end of the falling1 transition, press Ctrl/Cmd-T to create a trigger
  • Add the following code to start the animation from the label “center”:
    sym.getSymbol("falling1").play("center");

Repeat for each one of the falling flowers, and enjoy your wind chime effect!

Summary

Simple timeline transitions can be very powerful, and with just a little bit of code, you can make animations that will ping-pong back and forth along the timeline perpetually.  Have questions on this technique?  Edge Animate engineering staff and great community members answer questions in the Animate user forum.

 

3:39 PM Permalink
August 7, 2013 - Sarah Hunt

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