August 4, 2014 - sahunt

Get your update for Edge Animate, addressing compatibility issues with Chrome 36

Hello Edge Animate fans!

Today we’ve released an update to Edge Animate CC 2014, containing several bug fixes. This update is recommended for all users. Ready to get your hands on it? You can either;

1) Download from creative.adobe.com

2) Launch your Creative Cloud application and click “Install” next to “Edge Animate”. Your Creative Cloud application may require a restart to see the option to install.

Adobe Edge Animate

Adobe Edge Animate

 

Read the full release notes here. 

What you’ll find in this update

Resolved compatibility issues with Chrome 36

The latest release of Chrome deprecated the need for the -webkit prefix for transform-origin. As a result, once your content hit the browser any items using transform-origin would have their position misaligned. Not good! This issue has been resolved, as well as an additional fix to future-proof your Animate content when browsers remove prefixing for CSS properties. Thanks user DavePowellGPA for reporting this on our forums.

Resolved errors on launch

Some users were receiving the following error when starting Animate: “The requested url/welcome_to_project_edge/WelcomeToEdge.html was not found on this server”. This has been resolved and you should no longer receive this message. Thanks user l1l4 for reporting this on our forums.

Fixed crash when publishing static HTML

If you were receiving a crash when publishing static HTML, chances are you had an empty symbol. This issue has been resolved and you can safely publish your projects.

Thanks to our community members who took the time to bring these issues to our attention, we appreciate your ongoing support and feedback! Go download Edge Animate CC 2014 to get the latest update. Feel free to reach out on our community forums if you have any questions.

- The Edge Animate Team

10:03 AM Permalink
July 30, 2014 - Chris Converse

The Updated Actions Panel

The new Actions Panel in Edge Animate CC 2014 offers a new streamlined workflow for visually adding actions to specific elements and on the timeline.

Actions allow us to provide event-based instructions to our composition. These instructions include playing an animation, creating a hyperlink, creating article links in a DPS magazine, changing text, and many more.

Assigning Actions

Actions can be assigned directly to the timeline, or to individual elements in your composition. To assign an action to the stage, use the insert trigger button in the actions layer of the timeline. The action, or trigger, will be assigned to that point-in-time on the timeline. To assign an action to an element, right-click on an element on the stage, and choose “Open Actions” for that element.

Figure 1:  Actions, also referred to triggers, can be assigned to the timeline or specific elements in your composition.

Figure 1:
Actions, also referred to triggers, can be assigned to the timeline or specific elements in your composition.

 

If you assign an action to the timeline, you can immediately begin choosing the action and target properties. If you assign an action to an element in the composition, you’ll first need to choose the event type that triggers the action. Event types include things like clicking, double clicking, mouse overs, or even touch events, such as tapping and swiping.

Figure 2: The new Actions Panel interface shows a visual representation of the composition structure

Figure 2:
The new Actions Panel interface shows a visual representation of the composition structure

With your event type decided, the process of assigning an action has been broken down into two main steps; picking an action, and picking a target.

Easier Targeting

While the syntax of the Edge Animate framework has not changed, the new interface allows you to logically assign actions and target elements by simply selecting items listed in columns.

In previous versions of Edge Animate, targeting a symbol involved assigning an action named Get Symbol. Once assigned, you needed to manually assign the instance name assigned in the Properties panel. In the 2014 release, this process has been completely overhauled.

Figure 3: Targeting a nested symbol is now a fully visual 4-step process.

Figure 3:
Targeting a nested symbol is now a fully visual 4-step process.

In the figure above, we are assigning a “play” action to a symbol placed on the stage. In JavaScript, these elements are part of a nested set of elements, and the targeting needs to be exact for the browser to locate the correct elements. Edge Animate visualizes this structure in the new Actions Panel, and provides us with an interactive method for assigning our actions.

DPS Linking

If you have worked with Hyperlinks in InDesign or HTML Stacks in Adobe DPS (Digital Publishing Suite), then you are familiar with the “navto:” protocol. By using “navto://” in a hyperlink, and specifying an article name (as defined in the Folio Builder panel), you can create links form one article to another.

Figure 4: The new Adobe DPS action category allows you to quickly link to articles with a digital magazine created with InDesign.

Figure 4:
The new Adobe DPS action category allows you to quickly link to articles with a digital magazine created with InDesign.

Edge Animate now includes an action category called Adobe DPS. This action will automatically format a hyperlink based on the DPS syntax for inter-article linking in a digital magazine. To create a DPS link, choose the Adobe DPS category, then click the button Navigate Article. There is even an option for linking to a specific page of an article.

Once complete, you can test this by loading the Edge Animate composition into an InDesign folio, and previewing it in the Adobe Content viewer.

Creating Custom Snippets

Another great time-saving feature is the new My Snippets feature. This allows you to save snippets of code for later reuse in the current project, or any project opened on your computer.

Figure 5: Saving actions into custom snippets provides a fast, and efficient way to share actions across multiple elements, or multiple projects

Figure 5:
Saving actions into custom snippets provides a fast, and efficient way to share actions across multiple elements, or multiple projects

Custom snippets can contain any code, not just code generated by Edge Animate. In the figure above you see a code snippet I use ofter in my projects in order to randomize my animations. To create a custom snippet, select the code, then click the plus (+) sign next to the My Snippet action category. You will be prompted to name the snippet, and in turn, this name will become the button you use to apply this code to other actions.

To edit a snippet, simply right-click the button name to edit, rename, or delete the custom snippet.

Learn more

Learn more about the new Actions Panel on Lynda.com. If you don’t have a subscription, use this free 7-Day Trial trial:  http://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.

9:00 AM Permalink
July 28, 2014 - Tareq Aljaber

Entertaining To Drive Awareness

 

Interac e-Transfer service in Canada

Interac e-Transfer service in Canada

With a little imagination, even the topic of electronic money transfers can be entertaining. When the creative minds at Zulu Alpha Kilo and Secret Location were challenged with increasing awareness of the new Interac e-Transfer service in Canada, they developed www.makecashandchequeshistory.com. The interactive website spoofs the history of money exchange while encouraging users to try the convenient services.

The agencies combined video and rich Edge Animate CC animations to create a site that is visually compelling, yet still quick and responsive for users. In addition to simplifying the HTML animation process, the software speeds up workflows by giving more creative control to designers.

Ryan Andal, technical director and vice president at Secret Location, says, “In the past, creating animations was a lengthy process that took the time of both designers and developers. Adobe Edge Animate CC helps our designers regain control over all aspects of visuals, including animations, without needing to rely upon developers.”

The campaign has received positive reviews, and the agencies are continuing to explore how additional apps and services available through Adobe Creative Cloud can benefit their workflows and help them deliver more creative client projects.  http://adobe.ly/1pgHXiv

1:47 AM Permalink
June 18, 2014 - Tareq Aljaber

Unleash Web Interactivity With The 2014 Release Of Edge Animate CC

The 2014 release of Edge Animate CC

Edge Animate lets web designers create interactive HTML animations for web, digital publishing, rich media advertising and more, reaching both desktop and mobile with ease.

 

The 2014 release of Adobe Edge Animate is finally here! This release offers a rich set of features such as support for HTML5 video, importing sprite sheets from Flash Professional and Photoshop, linking support for DPS articles, a designer friendly action editor, and the ability to copy and paste SVG artwork from Illustrator, and more.

Create engaging and inspiring content with the new HTML5 video support in Edge Animate. You can now import, control, and add interactivity to your videos without any coding experience. With the newly designed actions editor, you’ll be able to add interactivity using the new video media actions window.

New video media actions window.

New video media actions window.

Who says books, articles and magazine can only be static!? With the new DPS article linking feature, you can link to your InDesign or DPS Folio articles from Animate without writing a single line of code, to build more interactive title pages, table of contents, and advanced navigation to target articles.

Vector, vector, vector!

Bring your vector graphics from Illustrator and paste them into your compositions! No magic or special skills are required. Simply copy and paste shapes from Illustrator into Edge Animate compositions.

 

SVG Import

Copy and paste shapes from Illustrator into Edge Animate compositions

 

Did I hear support for importing sprite sheets? Yes, you heard it right! You can now import your sprite sheets from Flash Professional or Photoshop and import them with a few clicks, and add advanced, multi-frame animations to your compositions.

Sprite sheets support

Import Sprite sheets from Flash Professional or Photoshop with a few clicks

The team has been hard at work to deliver features that will help you to deliver interactive HTML mobile and web content reaching both desktop and mobile with ease. Ready to boost your creativity? Download Edge Animate now and unleash your creativity.

 

 

12:12 PM Permalink
May 7, 2014 - Tareq Aljaber

Create Visuals that Communicate Ideas Quickly

The ability to create visuals that communicate ideas quickly, and get from strategy and ideation to the approval phase is a very long and expensive road. Jim McArthur, Senior Vice President of Digitaria, shares how his agency utilizes the power of animation to easily create quick interactive prototyping which helps cut costs and improve your creative workflow.

 

2:31 PM Permalink
April 14, 2014 - Rich Lee

Coachella and Edge Animate CC

Vibrant energy captured for any device

Coachella_EdgeAnimate

As one of the hottest festivals on the national music-and-arts circuit, the Coachella Valley Music and Arts Festival attracts 90,000 fans on each of its two weekends. No doubt many of them got information on the event lineup from the festival’s official website, which features interactive animations by Heavenspot that reflect the round-the-clock energy of Coachella.

The digital agency spent two weeks designing and developing animated headers using Adobe Edge Animate CC in Adobe Creative Cloud. To capture the energy and creativity of Coachella on any device, Heavenspot used Adobe Edge Inspect CC for rapid testing on multiple devices, which cut development time by 20%.

“Most people still aren’t used to experiencing this depth of animation, especially in a mobile-friendly format,” says Tim Jaramillo, a lead developer at Heavenspot. “Adobe Edge Animate CC makes it easy for us to develop animations with impact that strengthen our client relationships and enable our clients to more fully engage and inspire their audiences.”

Visit the Coachella website to view the animations, which change depending on the time of day.

Read the full story here (PDF).

9:43 AM Permalink
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 - sahunt

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 - sahunt

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