September 18, 2014 - Tareq Aljaber

Export Sprite Sheets From Adobe Photoshop

The latest release of Adobe Edge Animate supports importing sprite sheets from other design products including Adobe Photoshop CC and Flash Professional CC.

Exporting sprite sheets from Flash Professional is really straightforward. Animations can be exported as an .eas file, and imported directly into Adobe Edge Animate. Learn more about that here. Exporting images from Adobe Photoshop as a sprite sheet can be a little more tricky, as it requires users to enter the correct trimming options such as margins, and shape padding.

In this post we’ll walk you through how to install the extension required to prepare a Photoshop file for import into Adobe Edge Animate as a sprite sheet. Let’s get started.

 

Sprite Sheet Dialog

Sprite Sheet Dialog

 

  1. Download and install the latest version of Adobe Photoshop CC using your Creative Cloud application manager.
  2. Download the ExportToEdgeAnimateSpriteSheetAssets extension and copy the file to the ‘Scripts’ folder in the Adobe Photoshop install location.
      1. Mac: <hard drive>/Applications/Adobe Photoshop  CC/Presets/Scripts/
      2. PC: C:\Program Files\Adobe\Adobe Photoshop  CC\Presets\Scripts\
  3. Restart Adobe Photoshop to load the script: File -> Scripts -> ExportToEdgeAnimate NOTE: Before restarting Adobe Photoshop, save and backup your PSD. You might also want to increase the history states count, in case you want to restore your file back to its original state.
  4.  Open your PSD – check out the sample file crow.psd for layer composition. The animations sequence starts from Layer1 to Layer N. Layer 1 is the first frame of the animation sequence and Layer N is the last animation frame.
  5. Animation Sequence

    Animation Sequence

  6. File -> Scripts – > Browse to create a sprite sheets from the layers in the PSD
  7. Select the ExportToEdgeAnimate.jsx script. The script should pack the animations into sprite sheet and also create a corresponding .eas file in the same folder as the .jsx file.
  8. Follow steps outlined in this article to import the exported sprite sheet into Edge Animate.  Now, you’re ready to streamline your sprite sheet workflow with Creative Cloud.

 

Happy creating!

Avinash Rao

Lead Software Engineer, Adobe Web P&A

9:04 PM Comments (0) Permalink
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