November 20, 2014 - Tareq Aljaber

Edge Animate Bug-Fix Update is Now Available – Download Now!

The latest release of Edge Animate CC (October 2014) introduced major architectural and runtime changes to reduce the runtime size by 55% in addition to other new features. Even though we performed necessary testing, we still expected a few issues to come up given the magnitude of the changes implemented. Luckily, we have a great and active community who have reported these issues, worked closely with us to help reproduce them, and they also confirmed our fixes.
We just released an update with fixes for all known issues that our customers have reported. Here is a list of the top issues we’ve addressed in this update:

Timeline control and triggers
We’ve fixed multiple timeline issues such as resetting movie properties while looping, multiple triggers using the bindTriggersAction() method, and settings timeline controls (stop, reverse, etc.) on the first frame.

Crash when deleting keyframes
Issues when deleting a timeline keyframe in nested upgraded/updated movies have been fixed.

Element Panel
All the issues and crashes when re-ordering layers in the Element Panel have been fixed.

Custom fonts
An issue working with custom fonts when upgrading movies to use the latest runtime has been fixed.

Scroll effects workflow in Muse
The scroll effects did not work correctly with OAM content in Muse. The animation would start playing as soon as the page loads even before scrolling down. This issue has been fixed.

To see a complete list of what we have fixed in this update, click here. We encourage you to continue providing your feedback and input, as we are actively making Edge Animate the best animation authoring tool of the web.

Best,
The Edge Animate Team

8:11 AM Comments (5) Permalink
October 16, 2014 - vmenon

Using responsive Edge Animate compositions in Dreamweaver

In previous versions of Dreamweaver, if you embedded your Animate compositions using the Responsive Scaling feature, you may have run into some issues with your project not rendering correctly with the rest of your responsive page. The latest versions of Animate and Dreamweaver contain a fix for this issue so you can now safely embed your responsive Animate projects.

responsiveOn the left shows how responsive Animate compositions would cause a white space in the rest of your website when embedded in Dreamweaver. On the right is the fix!

Known issues when working with multiple Animate projects

There is one known issue with this fix; when you insert multiple responsive Animate compositions on a single HTML page, Dreamweaver does not render the animations. To workaround this issue, you need to tweak the code a little.

This blog post will walk you through the changes that you need to do in the code in Dreamweaver to get all the responsive compositions rendered on the page.

  1. Download and install the latest version of Adobe Edge Animate (CC 2014.1) and Adobe Dreamweaver (CC 2014.1) using the Creative Cloud application.
  2. Create two or more responsive Animate compositions, and publish them to get the .oam files.
  3. Create an HTML page in Dreamweaver, and select Insert > Media > Edge Animate Composition, and then select a .oam file. Save and preview in browser to see the Edge composition playing.
  4. Insert your second .oam file. If you preview in browser now, you will find none of the Edge compositions rendered on the HTML page.
  5. Merge the code generated for each .oam file in the <head> section of the Dreamweaver HTML page, such that the code looks like this:

<!–Adobe Edge Runtime–>
<meta http-equiv=”X-UA-Compatible” content=”IE=Edge”>

<script>

var custHtmlRoot=”EdgeComp1/Assets/”
var script = document.createElement(‘script’);
script.type= “text/javascript”;
script.src = custHtmlRoot+”edge_includes/edge.5.0.0.min.js”;
var head = document.getElementsByTagName(‘head’)[0], done=false;
script.onload = script.onreadystatechange = function(){

if (!done && (!this.readyState || this.readyState == ‘loaded’ || this.readyState == ‘complete’)) {

done=true;
//1st composition

(function() {
var custHtmlRoot=”EdgeComp1/Assets/”;
var opts ={
scaleToFit: “both”,
centerStage: “none”,
minW: “0”,
maxW: “undefined”,
width: “550px”,
height: “400px”
};

opts.htmlRoot =custHtmlRoot;
AdobeEdge.loadComposition(‘EdgeComp1′, ‘EDGE-2308149′, opts,
{“dom”:{}}, {“dom”:{}});
})();

 

 //2nd composition

 (function() {
var custHtmlRoot=”EdgeComp2/Assets/”;
var opts ={
scaleToFit: “both”,
centerStage: “none”,
minW: “0”,
maxW: “undefined”,
width: “550px”,
height: “400px”

};

opts.htmlRoot =custHtmlRoot;
AdobeEdge.loadComposition(‘EdgeComp2′, ‘EDGE-2639752′, opts,
{“dom”:{}}, {“dom”:{}});

})();

 

script.onload = script.onreadystatechange = null;
head.removeChild(script);

                        }

};

head.appendChild(script);

</script>
<style>

.edgeLoad-EDGE-2308149 { visibility:hidden; }
.edgeLoad-EDGE-2639752 { visibility:hidden; }

</style>

<!–Adobe Edge Runtime End–>

This workaround is just for the case where you want to embed multiple responsive Animate compositions inside of Dreamweaver; no need to worry if you just have a single composition. This workaround is a temporary way for you to get started, in the future we’ll be improving this workflow to make it easier for you to embed multiple Animate projects.

You can download the samples zip file from link given below, which has the following files for reference:

  • Dreamweaver HTML file after inserting the first OAM file.
  • Dreamweaver HTML file after inserting the second OAM file
  • Dreamweaver HTML file after the code is merged into the <head> section.
  • Whole Dreamweaver project with Edge OAM files.

Download link for sample files

Happy animating!!!

Vivek Kumar

Edge Animate Team

 

 

10:20 PM Permalink
October 6, 2014 - Tareq Aljaber

Edge Animate reduces runtime size by 55%, ‘Save to Custom Folders’ feature, new Preloader options, and more!

Today we launched a major update to Edge Animate CC! In just three short months since launching a jam-packed release with major new features, we’re happy to announce a new update with a 55% more optimized runtime, fewer project output files, and more. This release is a major milestone to provide web designers with tools and features to easily publish lightweight HTML animations across different screens.

The latest update to the 2014 of Edge Animate CC

The latest update to the 2014 of Edge Animate CC

 

Here’s what we’re delivering to you today:

Reduced supporting runtime size by 55%

The team has been hard at work to reduce the runtime size by 55%, both by compressing our own runtime and removing dependencies on JQuery. This means a smaller payload size and reduced number of downloads required for running compositions, giving you faster loading times when viewing projects on the web.

This is a significant milestone for Animate as we work towards delivering lightning fast animations on the web. We’ve also been working closely with our friends at the IAB to help bring Animate in alignment with emerging web guidelines for advertising, giving authoring to the world of HTML ads.

Save your images, media and scripts to custom folders

Save your images, media and scripts to custom folders

Save your images, media and scripts to custom folders

 

In previous releases of Edge Animate, you had limited control on where to publish your assets regardless of their type (images, audios, videos, etc.), making it difficult to organize your site files..

In this release, we’ve mainstreamed the publish workflow by re-engineering and redesigning the publish setting dialog to choose where to place your files at publish time for each type of asset (images, audios, videos, and scripts). No need to manually copy-paste and organize folders.

Fewer project output files to manage

One of the great improvements we’ve delivered this release is publishing fewer output files. Fewer project output files means fewer files to manage, which means more time to build beautiful animations. With the latest release a composition will only have one JavaScript file compared to three JavaScript files with previous releases.

New preloader options

The latest release of Edge Animate gives you the option and control whether to include the preloader into your HTML file, or have it as a separate JavaScript file. For small compositions, users might prefer to include it into the HTML file to reduce the number of required files that need to be downloaded, resulting in a faster load time.

With a 55% reduced runtime size, fewer published files, streamlined publish options and new preloader options the latest release of Edge Animate is giving you the lightweight tools you need to create animations on the web.. Download the latest release by visiting creative.adobe.com and start animating.

We can’t wait to see what you build with these new features, and we hope to get your feedback and input.

Happy Animating!

The Edge Animate Team

 

6:51 AM Permalink
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 Permalink
August 4, 2014 - Sarah Hunt

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