Adobe Animate Team Blog

The latest news, tips and insights directly from the Animate team

Category

Animation

Feb 16, 2016/Animation, WebGL/

Creating Interactive WebGL Content with Adobe Animate CC

Learn how to build interactive WebGL content using Adobe Animate CC without any prior programming knowledge.

What you will learn…

  • How to publish for WebGL from Adobe Animate CC
  • How to write simple timeline scripts
  • How to add interactivity using code snippets

With Adobe Animate CC, designers can create content that runs seamlessly across both desktop and mobile web browsers. But what about adding interactivity to a project? Isn’t a developer required for such tasks? Not necessarily.

This tutorial will take you through Adobe Animate CC’s deisgner-developer workflow and show you how easy it is to add interactivity to your project without any prior programming knowledge.

We’ll create a prototype beat ‘em up game where our hero can perform either an attacking or blocking move. By doing so you’ll learn how to work with movie-clips and how to handle and respond to simple user interactions. Before we continue, let’s first take a look at what we’ll be building. You can try out the final result below.

What you are looking at here is rich interactive vector content running in your web browser without the need for a plugin. By publishing to WebGL you are utilising modern web standards and increasing the potential reach of your content to include mobile as well as modern desktop browsers.

Read more…

Nov 30, 2015/ActionScript, Animation, Creative Tools, Custom Platform Support, Custom Platform Support, Extensions, General, HTML5, Toolkit for CreateJS, Video/

Welcome Adobe Animate CC, a new era for Flash Professional

Adobe Animate CC
For nearly two decades, Flash Professional has been the standard for producing rich animations on the web. Because of the emergence of HTML5 and demand for animations that leverage web standards, we completely rewrote the tool over the past few years to incorporate native HTML5 Canvas and WebGL support. To more accurately represent its position as the premier animation tool for the web and beyond, Flash Professional will be renamed Adobe Animate CC, starting with the next release in early 2016. [Update 2/8: Animate CC is now here!]

Today, over a third of all content created in Flash Professional uses HTML5, reaching over one billion devices worldwide. It has also been recognized as an HTML5 ad solution that complies with the latest Interactive Advertising Bureau (IAB) standards, and is widely used in the cartoon industry by powerhouse studios like Nickelodeon and Titmouse Inc.

Animate CC will continue supporting Flash (SWF) and AIR formats as first-class citizens. In addition, it can output animations to virtually any format (including SVG), through its extensible architecture.

There’s much more than just a name change however. Our team is hard at work on a major update with significant new features to create animations for any platform. Here’s a sneak peek by Michael Chaize, Principal Creative Cloud Evangelist:

Here’s what you can expect in Animate CC:

  • Drawing, illustration and authoring
    • Vector art brushes – Modify the path of a stroke after it’s been drawn, and scale them to any resolution without losing quality. You can also make custom brushes and import brushes created with Adobe Capture CC.
    • 360° rotatable canvas – Rotate the canvas on any pivot point as you draw to get the perfect angle and strokes. You can even use this feature with a Wacom Cintiq!
    • Improved pencils and brushes – Draw smooth, precise vector outlines along a curve and get faster live previews.
    • Easier audio syncing – Control audio looping directly on the timeline, without having to code.
    • Faster color changing – Naming tagged colors lets you change one color and have it automatically update your entire project.
    • Colored onion skinning – Easily orchestrate complex animations now that adjacent frames can have different color and alpha values.
  • CreativeSync integration
    • Adobe Stock – Browse and license millions of high-quality photos, illustrations and vector graphics directly in Animate CC. You can even add life to static content by adding animations to them.
    • Creative Cloud Libraries – Access colors, vector graphics and brushes directly as you work.
    • [Update 2/8: We’ve also added Typekit integration!]
  • Output capabilities
    • Multiplatform support: HTML5 Canvas, WebGL, Flash (SWF), AIR, video, and custom platforms (such as SVG) via extensions.
    • 4K+ video export – Export videos with custom resolutions for the latest Ultra HD and Hi-DPI displays.
    • Custom resolution export – Revitalize older content by resizing and optimizing them for any resolution, such as Ultra HD and Hi-DPI displays.
    • .OAM support – Export your project as an .OAM file for easy importing to Adobe Muse, InDesign, DPS and Dreamweaver.

Note: This release is listed as “Adobe Animate CC” in the Creative Cloud desktop application. When you install or update Animate CC, it will be found on your computer as Adobe Animate CC 2015, not Adobe Flash CC 2015.

Previous versions of Flash Professional prior to the 2016 release will continue to be available.

Throughout the week, we will be giving a sneak peek of Adobe Animate on our Adobe live stream channel on Twitch, showing it both for animation and building games.

The entire team is thrilled about our upcoming release, and more importantly, beginning a new era with Animate CC. As we approach the 20th anniversary of Flash Professional, we invite animators and interactive designers around the world to join us for decades to come.

[Update 2/8: Animate CC is available now!]

Jan 7, 2015/Animation, General/

Tip: Audio synchronization settings in Flash

Question: The sound clip continues to play till the end even after the movie has ended. How can I stop the sound along with the image?

Answer: If the sound is embedded in the timeline, select the keyframe on which the sound starts and then, in the Properties window, set the Sync property for the selected sound to “Stream.”

Here is a complete list of synchronization settings in Flash for your reference:

Event: Synchronizes the sound to the occurrence of an event. An event sound plays when its starting keyframe first appears and the plays in its entirety, independently of the playhead in the Timeline, even if the SWF file stops playing.

Start: The same as Event, except that if the sound is already playing, no new instance of the sound plays.

Stop: Silences the specified sound.

Stream: Synchronizes the sound for playing on a website. Flash Professional forces animation to keep pace with stream sounds. If Flash Professional can’t draw animation frames quickly enough, it skips frames. Unlike event sounds, stream sounds stop if the SWF file stops playing. Also, a stream sound can never play longer than the length of the frames it occupies.

Note: Stream setting is not supported in WebGL and HTML5 Canvas documents.

For a detailed help article on the topic, see Using sounds in Flash

Dec 18, 2013/ActionScript, Animation, HTML5, Introduction, Toolkit for CreateJS/

Creating HTML5 Canvas | Reusing ActionScript 3.0 assets | Flash Pro CC – Part 2

This post in the 2nd and last of the two-part series of Converting and reusing ActionScript 3.0 assets in an HTML5 Canvas document.

Recap

In my previous post, we learned how to run the JSFL script (Commands > Convert to HTML5 Canvas AS3 document formats) to convert legacy ActionScript 3.0 assets and reuse them in an HTML5 Canvas document. We also examined the conversions that were applied on each of layers and objects within the AS3.0 file.

Did you observe?

If you read through the previous post entirely, you must have wondered why the Tap to Jump button in the HTML5 animation wouldn’t work (unlike the SWF where it worked). Like I explained in my previous post, during the conversion ActionScript code is commented out. So, as a final step of the conversion process, we will replace the ActionScript code with equivalent JavaScript. You will be happy to know that Flash Pro CC fully supports JavaScript coding, with additional code-hinting and auto-format features.

Frames 114, 141, 142, & 278

These frames contained fully-functional ActionScript code in the original Banner.fla file, which was commented out during the conversion. Let us pick each of these frames individually and add equivalent JavaScript code for the same:

  1. Go to Frame 114, and select the keyframe on the Code layer.
  2. Press F9 or select Window > Actions to bring up the Actions Panel. You will see the ActionScript code is commented out.
  3. From the table below, copy the JavaScript code below copy the JavaScript code below the AS code and close the Actions Panel.
  4. Similarly, add JavaScript code for frames 141, 142, and 278, as well.
Frame number ActionScript Code Equivalent JavaScript Code
114

var self = this;this.btnJump.onClick = function() {self.gotoAndPlay(“endWait”);}

var self = this;this.stop();this.btnJump.addEventListener(‘click’, onClickJump);function onClickJump() {self.gotoAndPlay(“endWait”);

}

141

removeEventListener(MouseEvent.CLICK,onClickJump);gotoAndPlay(“startWait”);

removeEventListener(MouseEvent.CLICK,onClickJump);this.gotoAndPlay(“startWait”);

142

removeEventListener(MouseEvent.CLICK,onClickJump);

this.instance.removeEventListener(“click”, onClickJump);

278

import flash.events.MouseEvent;btnPlay.addEventListener(MouseEvent.CLICK, onClickEnd);function onClickEnd(pEvent : MouseEvent) : void {navigateToURL(new URLRequest(“http://www.adobe.com/”),”_blank”);}

stop();

this.stop();stage.onClick = function() {window.open(“http://www.adobe.com”, “_blank”);}

And finally…

Publish (Ctrl+Enter on Windows and Command + Enter on MAC) the HTML5 Canvas document again to see the fully functional animation running smoothly on your default browser.

Video tutorial

I created this video tutorial to make it easier for you to understand the conversion process: