Adobe Animate Team Blog

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

Jun 15, 2016/HTML5/

Using HTML5 Canvas In Animate CC: JavaScript Basics

For nearly 20 years, the programming language used within Animate (Flash Professional) projects has been ActionScript. So why the current shift to JavaScript? Well, it isn’t exactly as simple as that. For one thing, Animate is not a JavaScript only application. You use JavaScript in projects which require it, such as HTML5 Canvas and WebGL… but you can still use ActionScript on projects which are to be published for Flash Player or AIR, including AIR for Android and iOS – and Adobe continues to update these runtimes. It’s important to note that Animate is not a JavaScript and web-centric application – but is rather a platform and language agnostic application for working across a variety of platforms.



In this article, we’ll examine an animated, interactive project which covers many of the basics when dealing with JavaScript in Animate projects – including interactivity, playhead control, dynamic instantiation of symbol instances, and more!

Writing JavaScript… in “Flash”?

With Animate CC (formerly Flash Professional) having the history that it does… a history made up largely of Flash and ActionScript… it may be surprising to some that not only can you write JavaScript within an Animate project – but that you’ve been able to do so for quite a number of years. Let’s have a look at the various attempts at generating JavaScript and HTML from Flash Professional previous to the tight integration we have today.

Adobe Wallaby (2011-2012)

In 2011, Adobe released a beta utility application built with AIR for Desktop which converted .fla files to HTML. You would author your project using a normal ActionScript-based document type. When ready, fire up the “Wallaby” utility and convert it to HTML and JavaScript.

figure1

Figure 1: The Adobe Wallaby application.

It wasn’t very pretty… and the effort wasn’t long-lived either. What this demonstrated though, is that users wanted more from the Flash Professional application than just Flash-based content and paved the way for the more successful efforts to come.

Toolkit for CreateJS Extension (2011-2013)

With the introduction of the CreateJS set of libraries from Grant Skinner and company, users familiar with ActionScript APIs and the traditional Flash display list had something that felt very familiar. Eventually, CreateJS output was enabled in Flash Professional CS6 through a panel that allowed users to export a project to HTML5 Canvas using the CreateJS libraries.

figure2

Figure 2: The Toolkit for CreateJS panel within Flash Professional CS6.

While this was a workable solution – it remained an external extension with no true native integration… and writing the actual JavaScript within the application was a bit of a hack, as JavaScript wasn’t at all supported. Rather, you’d write any JavaScript within special comments within your ActionScript which would be interpreted through the Toolkit upon publish. Flash Professional users wanted more. We would have to wait until Creative Cloud became a reality to finally have true JavaScript integration within Flash Professional.

Complete CreateJS Integration (2013-Present)

With the release of Adobe Creative Cloud and Flash Professional CC, the application was completely rewritten to modernize the codebase and make the program more powerful than ever. This not only paved the way for users to integrate their own custom platforms through extensions, but also was the beginning of true HTML5 and JavaScript integration within Flash Professional itself.

figure3

Figure 3: The integrated HTML5 Canvas Publish Settings.

Not only do we now have CreateJS completely integrated within Animate… we also have the ability to write JavaScript natively within the application tied to frames – just like ActionScript.

Sample Project Overview

Let’s go ahead and have a look at the sample FLA document, which you can download and modify as you wish. This HTML5 Canvas document includes a good deal of JavaScript in order to perform timeline control, interaction, dynamic text assignment, and generative animation based upon MovieClip symbol instances dynamically created from the project Library. It’s a great example of some of the things you can do with CreateJS and Animate!

figure4

Figure 4: The “Bring the Rain!” project in Animate CC.

Have a look at the project and note that we have an Actions layer to hold any of our JavaScript code and a Labels layer which holds a number of labels given to specific frames. These two layers do not contain any visual content. Next, we have a Nav layer containing a number of interactive button instances. Note that each of these instances has a unique instance name provided, allowing us to wire in interactivity later on.

figure5

Figure 5: The layers within our root Timeline.

Below that, a Darken layer which contains an MovieClip symbol instance with its own internal animation. This instance will be used to switch the rain on and off. There is a Scenic layer below that, containing a Graphic symbol instance with some basic animation of hills and a cloud as well. Lastly, a Sunrise layer which is actually the only thing that is animated directly on the root Timeline.

Timeline Manipulation

To control the playback of both the root Timeline, and the internal Timelines of the different MovieClip symbol instances we are using, we will need to write some JavaScript in the Actions panel. Note that there is no need to control the playback of any Graphic symbol instance Timeline – as the Timeline of a Graphic symbol is bound frame-to-frame to that of the main Timeline.

figure6

Figure 6: The Actions layer within out Project.

With frame 1 of the Actions layer selected, open the Actions panel from the application menu by choosing Window > Actions. Notice the very first thing we do is stop the main Timeline by stating:

this.stop();

 

When you see the keyword this, it will refer to the current scope. In the case of the main Timeline, this represents the main scope of the project. If we include the following piece of code in frame 1:

console.log(this);

 

and then run our project in a browser with the console exposed, we will see exactly what this represents:

figure7

Figure 7: The Google Chrome Console.

We can perform this debug function upon any object within out Animate project to help troubleshoot a problem or investigate the make-up of our objects.

Now, select the final frame of animation – frame 75. You will see the following line of code:

this.gotoAndPlay("LoopPoint");

 

Instead of a simple stop() action, we are telling the playhead to move to the frame which has a label of “LoopPoint” within out Labels layer and then begin playing from that frame. This creates an effective bit of looping within the main Timeline. We can also pass a specific frame number into our gotoAndPlay() command, such as:

this.gotoAndPlay(60);

 

…which would do the exact same thing.

figure8

Figure 8: Frame Labels within the Timeline.

Using frame labels is much more flexible, however, as it allows you to shift the frames around without having to update the specific frame number in your code. You can also use commands such as gotoAndStop() and play() to effectively control the playhead.

Properties and State

Before moving on, we also set a number of state variables on frame 1. These can be seen in the following lines of code:

this.darkening.visible = false;

var isPlaying = false;

var stageHeight = stage.canvas.height;

var stageWidth = stage.canvas.width;

 

The first line sets the visible property of the MovieClip instance with the instance name of darkening to false. This effectively will hide the entire instance from view until we set it to true later on. The second line sets a new variable called isPlaying to the value of false. This is a boolean variable (having a state of either true or false) we will use to keep track of the current state of our interactive across the entire codebase.

We also determine the width and height of the Stage, and preserve these values within variables to access across our interactive later on. The stage.canvas object can be used to access both width and height when writing JavaScript. This is especially useful if we were to adjust the size of our Stage dynamically based upon the parent webpage or some other factor.

Dynamic Text Assignment

There is block of code in frame 1 which modifies the text values of our button labels and makes the additional modification of setting the mouseEnabled property of each internal text field to false. We want this to be set to false so that the text will not obscure action interaction between the mouse cursor and the underlying skin elements.

We can see 2 lines for the “play” button:

this.playBtn.btnLabel.text = "Play";

this.playBtn.btnLabel.mouseEnabled = false;

 

Two for the pause button:

this.pauseBtn.btnLabel.text = "Pause";

this.pauseBtn.btnLabel.mouseEnabled = false;

 

And two for the “stop” button:

this.stopBtn.btnLabel.text = "Stop";

this.stopBtn.btnLabel.mouseEnabled = false;

 

Each of these symbol instances is based off of the ProtoBtn MovieClip symbol in our project Library. It is actually a composite of multiple symbol and object types. As mentioned, ProtoBtn itself is a MovieClip symbol whose first layer is a dynamic text field with the instance name of btnLabel.  This allows us to use the instance name of the button on the Stage, and the instance name of the text field, to dynamically assign a new text value as seen in the snippets above.

figure9

Figure 9: The ProtoBtn symbol Timeline.

To provide the expected button states of up, hover, and down, we have a second layer present which includes an instance of the RealBtn Button symbol – which includes these states by default. In this manner, you can nest multiple symbol and object types together, creating complex interactive elements.

Note that we could just as easily simply use a true Button symbol with its own instance name and containing a text field in place of the RealBtn MovieClip symbol – but have chosen to create a more complicated interactive symbol in order to show how to disable certain elements from interaction with JavaScript.

Interactive Playback Controls

Here is where we wire up our interactive elements, binding specific event listeners to each symbol instance on the Timeline. We do this by using the instance names provided to each of the buttons earlier and using addEventListener to listen for a “click” event on that instance. When this event is detected, we then invoke a certain function which performs any number of tasks within our interactive.

For instance, here is the code which both adds the event listener to our playBtn instance, and invokes playClicked function which is written directly below it. Note that we also bind the current scope (as this) to the function call so that we can write code within the function body which aligns to that same scope.

Within the playClicked function, we tell the main Timeline to begin playing from the current playhead position, set the sun instance and darkening instance to play as well, and set the isPlaying boolean variable to true. We initially declared isPlaying at the top of our code stack, as it is important to keep track of the current state of the interactive across different functions.

this.playBtn.addEventListener("click", playClicked.bind(this));

function playClicked() {

this.play();

this.sun.play();

this.darkening.play();

isPlaying = true;

}

 

For the pauseClicked function, we basically do the exact opposite! Telling the main Timeline to stop at the current playhead position, set the sun instance and darkening instance to stop playing, and setting the isPlaying boolean variable to false.

this.pauseBtn.addEventListener("click", pauseClicked.bind(this));

function pauseClicked() {

this.stop();

this.sun.stop();

this.darkening.stop();

isPlaying = false;

}

 

The stopClicked function is a bit different as it serves to re-initialize and “rewind” the interactive to the beginning. Initially telling the main Timeline to move the playhead to the frame which has a label of “BeginPoint” within our Labels layer and to then stop the playhead entirely. We then invoke a function killTheRain(), which we we see in a bit… I bet you can probably guess what that function does!

We then set the visible property of our darkening instance to false and reset the rainBtn (we’ll address this instance in the next session) text to their default values just like at the beginning of our code stack. Lastly, setting the isPlaying boolean variable back to false as well.

this.stopBtn.addEventListener("click", stopClicked.bind(this));

function stopClicked() {

this.gotoAndStop("BeginPoint");

killTheRain();

this.darkening.visible = false;

this.rainBtn.btnLabel.text = "Bring the Rain!";

isPlaying = false;

}

 

These three functions together compose the interactive timeline control mechanisms within this interactive.

How to… Bring the RAIN!

In the last section, we saw a few references to items like the rainBtn instance and a function called killTheRain(), neither of which have yet been addressed in this article – so let’s do that. If you’ve run the interactive at all, you’ll note that we can toggle the weather from a sunny day, to a rainy day, and back again.

figure10

Figure 10: Changing the weather is easy with Animate and JavaScript.

Before writing the functions which produce (and revoke) a rainstorm, notice that we have a fourth button in our project with the instance name of rainBtn. Along with the label text value assignment for our Timeline control buttons, we will provide a label for this button as well.

this.rainBtn.btnLabel.text = "Bring the Rain!";

this.rainBtn.btnLabel.mouseEnabled = false;

 

Just as we did with the Timeline control instances, we add an event listener and accompanying function to our rainBtn instance. Within the rainClicked() function itself, we first use a simple if/else statement to check whether the darkening instance is visible or not. This lets us toggle between the two weather states in our interactive.

Depending upon the current visible property value for the darkening instance, we will reverse that property, set the rainBtn label to an appropriate value for the user, and either invoke the function to create rain via bringTheRain() or to clear rain using killTheRain(). Note that the bringTheRain() function requires a number to be passed in as an argument. As we shall see, this lets us control the intensity of the rain as it determines the number of raindrops on screen.

this.rainBtn.addEventListener("click", rainClicked.bind(this));

function rainClicked() {

if(this.darkening.visible){

killTheRain();

this.darkening.visible = false;

this.rainBtn.btnLabel.text = "Bring the Rain!";

}else{

bringTheRain(300);

this.darkening.visible = true;

this.rainBtn.btnLabel.text = "Kill the Rain";

}

}

 

This effectively acts as a toggle, reversing the current state of the weather and managing the button label text value for our rainBtn instance.

Rainstorm Preparation

Before setting up either the bringTheRain() or killTheRain() functions, we need to create an additional variable at the top of the code. This object will act as a container for all of the raindrops we create.

var rainField = new createjs.Container();

rainField.regX = stageWidth/2;

this.darkening.addChild(rainField);

 

The rainField is a type of object called a Container in CreateJS. Note that we instantiate a new Container by stating createjs.Container() directly. A Container is useful for grouping a number of additional visual objects within it. We manually set the registration point of this object based upon the width of our Stage, and finally add the rainField object to the darkening instance so that its children will be visible within out project. Using the Container, we can treat all the child objects as a group, and even wipe them all out with a single command. It’s good to be organized!

Rain Generation and Evaporation

For the bringTheRain() function itself, note that the number value being passed in as an argument is exposed through this function with the identifier of raindrops, since it signifies the amount of raindrops for the function to produce. Based upon this number, we use a for loop to basically count down from that number until we hit 0. The loop then no longer runs.

Within the loop itself, we create a temporary variable (renewed with each iteration of the loop) named rainDrop. This is set to a new instance of the RainDrop MovieClip symbol from our project Library by invoking lib.RainDrop(). Note that you must set a Linkage ID within the Library panel for this to work!

figure11

Figure 11: RainDrop MovieClip symbol with Linkage ID of “RainDrop”.

Following instantiation, we set the x and y properties of our rainDrop to a random number with a min/max range. We will have a look at the random() function after going over the remainder of this loop code. After this is all set up, we just need to add the rainDrop to the rainField Container, as it isn’t yet bound to any visible Stage. We accomplish this with the addChild() method.

function bringTheRain(raindrops) {

for(var i=raindrops-1; i>=0; i--) {

var rainDrop = new lib.RainDrop();

rainDrop.x = random(0, stageWidth);

rainDrop.y = random(-1000, stageHeight);

rainField.addChild(rainDrop);

}

}

 

As mentioned previously, the CreateJS Container object type is very useful for managing child objects within it. Within the killTheRain() function, we only need to invoke the removeAllChildren() command to completely empty our rainField Container.

function killTheRain() {

rainField.removeAllChildren();

}

 

At the very bottom of our code is the randomization function we used within bringTheRain() to randomize x and y raindrop positions as they are instantiated from the project Library. This is a standard utility function you can use in all sorts of projects to get a random value between a chosen set of numbers.

function random(min, max) {

return Math.floor(Math.random()*(max-min+1)+min);

};

 

The only thing left unexplained is the movement of our raindrops!

Rain Movement

We want our raindrops to fall in a regular cycle, and to do this we’ll take advantage of the CreateJS Ticker. To use the Ticker, we set it to fire on “tick”, which is actually the frames-per-second (FPS) of our Animate project. Since our project is set to 10FPS – the Ticker will “tick” 10 times every second. When a “tick” fires, we want the function named animLoop to run.

createjs.Ticker.on("tick", animLoop);

 

Within the animLoop() function, we first check to see whether the interactive is paused or playing through the isPlaying boolean variable. If this returns a value of true, we then run through a for loop and move each individual raindrop per loop iteration.

What makes this really simple to perform is our use of the rainField Container object. There is a numChildren property inherent to this object type that will report the exact number of child objects within the Container. Using the value of this property, we know exactly how many raindrops we have to move – and how many times to iterate our loop.

Within the loop itself, we create a temporary variable named rainDrop for each specific raindrop and increase its position along the y axis by 100 pixels. Seeing as how this function runs 10 times per second… the rain appears to fall very quickly!

The final thing we do is check the position of each raindrop against the height of the Stage, adding a 50 pixel buffer to be sure the raindrop is no longer visible. Once a raindrop moves past this point, we reset its position, creating a never-ending rainstorm.

function animLoop(e) {

if(isPlaying) {

for (var i=rainField.numChildren-1; i>=0; i--) {

var rainDrop = rainField.getChildAt(i);

rainDrop.y += 100;

if (rainDrop.y > stageHeight+50) {

rainDrop.y = random(-1000, stageHeight);

}

}

}

}

 

We are moving each rainDrop along the y axis by exactly 100 pixels upon each tick – but we could also use our random() function to add some variance to the storm.

Conclusion

Yes, Animate CC is a completely platform agnostic creative application… using JavaScript alongside HTML5 Canvas remains a popular and compelling platform choice for interactive media. The native support for JavaScript within Animate is there now – robust and ready – and a joy to use!

Jun 1, 2016/Extensions/

Export SVG Animations for the Web with Snap.SVG Animator

cover

Animate.CC is primarily a vector animation tool. SVG is the vector language of the web. So it seemed to make sense that Animate would have the ability to create vector animations you could then export and run natively as vectors on the web. This was the vision behind Snap.SVG Animator. Snap.svg Animator is an open sourced plugin for Animate CC that exports animations for the web rendered in SVG.

It uses the Snap.svg JavaScript library to dynamically draw SVG content at runtime. Snap.svg is a JavaScript library created by Dmitry Baranovskiy, who also created Raphaël.js. It provides a simple API for writing and manipulating SVG content in the browser. Snap.svg was written to focus on newer features of SVG supported by modern browsers without having to fallback to legacy browser support. It supports advanced features enabling rich dynamic SVG graphic effects.

The Snap.svg Animator plugin can be installed through the Adobe add-ons portal. If you have syncing enabled through the creative cloud this will automatically install it directly into Animate CC.  From here you simply create a new “Snap.svg Animator” document type and begin creating content s you would normally. Publishing your content then generates a boilerplate HTML file along with all the assets you need, giving you an example of how to embed your animation into a webpage.

Note: If you are having issues installing the Snap.svg Animator plugin from the Adobe add-ons portal, you can download the plug-in from here and install using this utility for Windows and Mac.  To know more about this utility please refer here.

interactive

The plugin supports most basic animation features in Animate CC such as images, shapes, and tweens. It also supports masking as well as gradients. Recently we added scripting support so you can add scripts to keyframes inside the actions panel. Scripting is done with JavaScript and the Snap.svg API.  The following video shows some examples of the kind of interactive capabilities that can be achieved with scripting in Snap.SVG Animator.

You can add instance names to display objects in the properties panel and then access them in the scripts panel using the `this` keyword to get the current timeline’s instance.  The instance name of the children will be a property of their parent timeline’s instance.

var mychild = this.mychild;

Then you can call typical methods on movie clips, such as `stop();` or `gotoAndPlay();` A full description of the current commands available can be found in the project’s github wiki. You can also leverage some Snap.SVG methods directly on the movie clip, like `click`, `mouseover`, `mouseout`, and more.

recording

The plugin also supports external scripting. By defining linkage names for movie clips in your library you can access them through the generated javascript. You can then instantiate the exported movie clips in JavaScript and add them to the main stage’s timeline. This gives you the freedom to code in the IDE of your choice rather than in the actions panel.

You can learn more about the plug-in, fork it, submit bugs, or feature requests at the project’s github page. Using a timeline based animation tool in conjunction with JavaScript really empowers designers and animators to do amazing things with SVG.

May 25, 2016/Motion Editor/

Easing and the Motion Editor

Even a small amount of easing, if applied correctly to an animated object, can go far in conveying a truer sense of reality and weight. Animate CC includes a number of mechanisms for applying easing in this way, and we will examine how to apply simple and advanced easing in this article… with a focus on the new and improved Motion Editor.

figure1

Figure 1. The Animate CC Motion Editor

The Motion Editor is a mechanism that can be used exclusively with Motion Tweens to perform advanced easing upon any tweenable property of a symbol instance being animated through an applied Motion Tween. When using a Shape Tween, a Classic Tween, or animation with an IK Armature, the Motion Editor will not be available – yet other easing mechanisms can still be applied through the Properties Panel.

Fall and Rise of the Motion Editor

The background of the Motion Editor is actually quite similar to that of the Bone Tool and associated inverse kinematics armature support within Animate back when Flash Professional (Animate’s former identity) was updated from the CS6 version to CC. The application was completely rewritten to modernize the codebase and make it more powerful than ever. However, certain features such as the Motion Editor and Bone Tool were not rewritten along with the core application. This meant that for a few release cycles, the program did not include a Motion Editor at all!

With that said… Adobe had hinted that certain features left out of the program, due to the aforementioned rewrite, would be added back in if there was enough of a desire for them. In June of 2014, we saw Flash Professional receive a revamped and reintegrated Motion Editor – and this is now available in Animate as well. Whereas the old Motion Editor was a completely separate panel (and a bit clumsy to use), the new Motion Editor is integrated directly in the Timeline and allows direct manipulation of each property of an object across time in fine detail.

Simple Easing with the Properties Panel

For an example, we’ll create a Movie Clip symbol instance in Animate and perform a variety of easing procedures upon it. First, I’ve gone ahead and captured a rough sketch created by one of my daughters with the Adobe Capture CC < http://www.adobe.com/products/capture.html> mobile app.

figure2

Figure 2. Captured potato shape in my CC Library

I’ve used the tools within Capture CC on Android (you could use iOS instead) to convert the sketch into a shape and have saved it to a CC Library in order to use it within Animate. You can download the shape, or sync it to a CC Library of your own by using this share link. < http://adobe.ly/1TwEBad>

Once brought into a document with the CC Libraries panel within Animate CC, I’ve gone ahead and applied some color to the sketch by using the Brush Tool, Fill Tool, and even some nice vector art brushes using the new Paint Brush Tool. With the coloring stage completed, I’ve gone ahead and created a Movie Clip symbol from the fully colored potato assets by selecting all of its component shapes and choosing Modify > Convert to Symbol from the application menu. In the dialog which appears, I’ve given it the name of “Potato” and chosen Movie Clip as a symbol type.

figure3

Figure 3. Movie Clip Symbol – Chill Potato

The symbol now exists within the project Library and I have an instance of it on my Stage to work with. Extending my frame span out across 50 frames in the Timeline by placing the playhead at frame 50 and choosing Insert > Timeline > Frame from the application menu, I can now begin to animate. I will create a Motion Tween across all this frame span by clicking upon any one of those 50 frames, going to the application menu, and choosing Insert > Motion Tween. I now have a Motion Tween established along the Timeline for this particular instance.

figure4

Figure 4. Creating a Motion Tween

Simple eases can be applied to any tween type through the Properties panel when any frame of a tween is selected. The Ease value can be set from -100 (indicating a strong ease in) all the way to 100 (for a strong ease out).

figure5

Figure 5. Easing through the Properties panel

As indicated, any negative value will cause a simple ease in to occur for that tween, while any positive value will result in a similar ease out. While this easing can be performed on any tween type, there are some drawbacks to this method if you require anything beyond a simple ease. In fact, any easing applied in this way will apply to all instance properties that are being animated by the tween – they cannot be isolated to exhibit different easing types through this method.

Even though we’ve created a Motion Tween and applied this simple easing to that tween, as mentioned previously – we actually have another interface at our disposal within Animate to create easing on specific properties with complete customization of those eases through a visual user interface. This is what we will examine next.

Advanced Easing with the Motion Editor

To access the Motion Editor from an existing Motion Tween, all that needs to be done is to double-click on the frame span of the actual Motion Tween. The Motion Editor will then contextually emerge from the Motion Tween, within the project Timeline. To close the Motion Editor, simple double-click on the tween once again and the Motion Editor will collapse back within.

Examining the Motion Editor Interface

Once the Motion Editor is exposed, you’ll likely wonder how to go about using it! At first glance, it may be intimidating with all of its graphs, buttons, and individual properties. Learning what these interface elements are and what they do will go far in gaining an understanding of the sort of advanced work you can accomplished with this tool.

figure6

Figure 6. Motion Editor Controls

As you can see – there are quite a few tools, functions, and display adjustments to consider while using the Motion Editor. Here follows a rundown of everything detailed in the above figure.

Layer: This is the layer which contains the Motion Tween that the Motion Editor is tied to. In our example, the “Potato” Movie Clip symbol instance resides within this layer and has a Motion Tween applied to it.

Motion Tween: Double-click upon the Motion Tween to expand or collapse the Motion Editor.

Tween Properties: This column will contain all the properties of the instance being tweened which currently have some sort of value change attributed to them. Various position, scale, skew, rotation, color, and filter properties can all be manipulated through the Motion Editor.

Graph: The graph area displays all of the different property curves for this tween. Selecting a particular property along the side will highlight the associated property curve. The selected curve can then have its anchor points modified using the Selection Tool.

Add Anchor Point: Allows you to add anchor points to a property curve. Once an anchor point is added, this tool is automatically deselected so that the new anchor point can be further manipulated with the default Selection Tool.

Fit to View: This button will expand the Motion Editor along the entire width of the Timeline, making it easier to work within the graph area and further manipulate the various property curves.

Remove Property Tween: Selected property tweens from the left-hand column can be removed with this function. They can be added back in by adjusting those properties across the Motion Tween as you normally would, and then further tweaking them within the Motion Editor.

Easing Presets: Upon choosing this, a small interface will appear which allows you to apply easing presets to the selected property tweens.

Zoom: Will zoom the graph area in height for more precise modification of property tween curves.

Using Easing Presets

The use of easing presents is the simplest way to apply an effective ease to an animated property. Clicking on the Easing Presets icon will pop up a small selection window which includes a number of common easing presets, organized by category. Expanding these categories give you access to the individual presets with a visual representation of the property curve displayed across an internal graph.

figure7

Figure 7. Motion Editor Easing Presets

Selecting each preset will apply the selected preset to the individual selected property. Note that you can also apply the same Easing Preset across multiple property tweens by selecting them before entering the Easing Presets.

Modifying Property Curves

Likely, when you first enter the Motion Editor, you won’t actually see any property curves that are very curvy – they’ll more likely appear as straight lines. No matter how linear these paths are at first, they will have an existing anchor point at each end. These curves can be made more complex by adding additional anchor points along the length of the path.

Use the Add Anchor Point Tool to add new anchor points along a property curve. With the tool enabled, just click anywhere along the existing path to add a new anchor point. When this tool is not selected, it is possible to click on and modify existing points and even select and delete them. Doing this, you can manually adjust each property curve to your exact specification.

figure8

Figure 8. Modifying Property Curves

You can perform these actions in a freeform way, or even use an Easing Preset to get you started, and then tweak the resulting property curves with these modification methods. If you are used to working with paths and anchor points within Illustrator, Photoshop, or even in Animate itself… the same properties apply here.

Preview the Animation

Animate provides a mathematical-visual representation of the property value modifications through the Motion Editor graph. You can also use other tools available within the Timeline to really get a feel for your animation even before a true preview.

figure9

Figure 9. Preview with Onion Skinning

For instance, in the figure above, we are using a combination of the Motion Editor along with Onion Skinning turned on across a number of frames. Animate now provides definite colors to the onion skinning where frames that precede the selected frame have a blue tint, and those following it are tinted green. The number of frames included in either direction can be adjusted by clicking and dragging the small blue or green circles on each side of the onion skin indicators in the Timeline.

Oftentimes, using a combination of features within Animate can produce a clearer vision of what to expect when the content is actually running!

Conclusion

As demonstrated in this article, there are many options available within Animate CC to add a bit more weight and realism to your animated content. Easing with the Properties panel or with the Motion Editor can enhance any project type, including rich ads, web animations, interactives, and more!

 

May 18, 2016/Bone Tool/

Mysteries of the Bone Tool

Adobe Animate CC includes a really interesting tool that not many users know about. In fact, this subject is way beyond the scope of a single tool – as it encompasses and entirely different way of assembling and animating content in the Timeline.  Let’s have a look at some of the ways you can use the Bone and Bind tools to create intricate Armatures in Animate using inverse kinematics!

Is the Bone Tool New in Animate CC?

Not exactly new, no. When Flash Professional (Animate’s former identity) was updated from the CS6 version to CC – it was completely rewritten to modernize the codebase and make the program more powerful than ever. Unfortunately, certain features such as the Bone tool were not rewritten along with the core application. This meant that for a few years, the program did not include this tool.

However, Adobe had always stated that features that were left out would be added back in if there was enough of a desire for them. In 2015, we saw Flash Professional receive a revamped and reintegrated Bone tool and inverse kinematics system of animation – and this is now all available in Animate as well.

Inverse Kinematics

When first introduced to this method of creation content in Animate – the main thing users have trouble grasping is exactly what the term inverse kinematics (IK) means.

As stated on Wikipedia:

Inverse kinematics refers to the use of the kinematics equations of a robot to determine the joint parameters that provide a desired position of the end-effector. Specification of the movement of a robot so that its end-effector achieves a desired task is known as motion planning.”

figure1

Figure 1. An illustration of IK created and distributed by NASA.

In Animate CC terminology, IK is used alongside a number of tools and and mechanisms to create, refine, and provide constraints to a skeletal structure which can be animated as a single, reactive entity through a series of poses. It’s pretty slick! Of course, IK isn’t limited to human or animal forms. You can use IK mechanics to animate machinery as well – and it does a great at that.

The Bone Tool and the Bind Tool

The first thing to mention is a set of tool that enable the creation and refinement of IK armatures within Animate – the Bone and Bind tools.

bone_toolThe Bone Tool is the primary tool in Animate when dealing with IK. This tool is used to draw out bones within a shape to create an armature, or to draw out bones connecting Movie Clip symbol instances to build an armature. Either method generally works the same way; click and drag with the Bone Tool to draw the initial “tail” bone, then clack and drag new bones which branch off from the initial tail to form a complete IK structure.

bind_toolThe Bind Tool is grouped along with the Bone Tool. Clicking upon either tool within the toolbar and holding the click for a few seconds will allow you to choose either tool. The Bind Tool itself is used to modify the connections between existing bones and the shape control points in a shape-based armature. Using the Bind Tool, you can refine how the stroke distorts when each bone moves for better results.

For more information on the use of these tools, have a look at the Animate Bone Tool documentation. <https://helpx.adobe.com/animate/using/bone-tool-animation.html>

Creating a Shape-based Armature

To give an example of using an IK armature on a shape, I’ve drawn out a simple slug-like creature with the Oval Tool, modifying the paths with the Selection Tool. When placing and extending bones, it’s often useful to to turn off snapping, as this can make the placement of your bones become forced to the grid – which often doesn’t work so well for armature creation. You can disable snapping by disabling the View > Snapping options from the application menu.

figure2

Figure 2. Hovering over the paths of a shape with the Selection Tool allows us to push and pull to modify the path.

With our basic shape created, we can now begin adding bones to it using the Bone Tool. With the Bone Tool selected, click within the slug and drag out a bone. When you release the cursor, the resulting bone will be created and remain at the chosen length. This initial bone is referred to as the “tail” and can always be located by the special red and white diamond shape at the point of inception. All other bones in the armature originate from this single tail.

figure3

Figure 3. The initial “tail” bone of the armature is created.

Now that we have a tail to our structure, we can drag other bones out from here to create either a linear, or branched IK armature. Notice that the shape is no longer a shape at all – but is now a special type of object in Animate called an IK Shape. Therefore, we no longer see the shape selection pattern when this object is selected. In its place is a blue bounding box with all existing structural bones visible. To add additional bones to our existing IK Shape armature, click on either end of the existing bone with the Bone Tool and drag out additional bones. We will do this until we have our IK Shape segmented with a number of bones as shown in the figure below.

figure4

Figure 4. Drawing out additional bones to complete the armature.

At this point, we can test how the armature behaves by using the Selection Tool to move the slug around. The movements will be based upon the bone structures we have created – but they may be a bit rough when taken to extremes. This is where the Bind Tool comes into play. Selecting any of the bones with the Bind Tool allows us to adjust the control points which determine how the shape reacts to movements of specific bones. Spending some time to be sure all control points are positioned in an acceptable way will go far in making any movements behave as you intend.

figure5

Figure 5. Adjusting control points with the Bind Tool.

Once the armature is completed, you’ll notice that the layer within which the original shape existed is now empty (you can delete it, as I’ve done) and in its place is a new armature layer. The armature layer is signified with a special icon (a human-like figure) as well as having all frames within the armature layer take on a greenish color. We now have a completed shape based armature.

figure6

Figure 6. A completed IK armature.

With Animate CC, you can create both linear and branched armatures using IK. This example is a linear, shape-based armature. In the figure below, we are creating poses for our armature. Creating and managing poses is the same for both shape and symbol based armatures, so we will go over this concept after discussing symbol based armature creation.

figure7

Figure 7. Creating Poses in a shape based armature.

Creating a Symbol-based Armature

A shape based armature can be neat to play with, and has useful applications, of course. If you want to create a more complex armature though – you’ll want to build one with Movie Clip symbol instances.

In order to construct such an armature, you’ll first need to build the individual members. The most useful illustration of this concept is the human form. Think about the different pieces in regard to a human skeleton; you have the head, upper arms and lower arms, hands, chest, pelvis, upper and lower legs, completing the whole form with two feet. This concept can be applied to any form which is constructed of joints and solid forms.

In this example, we draw out each of these shapes with the tools available to us within Animate. One by one, convert each shape to a Movie Clip symbol by selecting it and choosing Modify > Convert to symbol from the application menu. Provide a useful name for each symbol and be sure to have Movie Clip as the symbol type. Hit OK for each and you’ll have an assortment of parts to build your armature from.

Constructing the Armature

Building an armature from Movie Clip symbol instances is very similar to building an armature from a shape in that bones are drawn using the Bone Tool and branched out from a primary tail bone. The difference comes into play where we are dealing with multiple objects in place of a single shape.

I have created a set of Movie Clip instances to construct our armature based upon the human form; a head, torso, pelvis, upper and lower arms and legs, hands and feet, et cetera. They are arranged in the figure below as an inventory, though we will want to place each piece in relation to the other before we begin building our IK armature.

figure8

Figure 8. A set of Movie Clip instances.

To build an armature from multiple pieces like this, we must use the bones to connect them as they are drawn out across the various parts. This will allow us to define the full armature based upon these individual pieces. With the assorted parts arranged in the way you want them, select the Bone Tool to begin creating the IK armature.

You’ll want to first use the Bone Tool to create a tail just as we have done with the shape armature. The difference here is that when dealing with Movie Clip symbol instances instead of a shape, each bone must connect the instances to one another and multiple bones cannot exist within a single instance.

figure9

Figure 9. Connecting Movie Clip symbol instances with the Bone Tool.

For something like the human form, you might place the armature tail originating at the chest or pelvis. From there, draw out branching bones which connect to the head, arms, legs, and so on throughout all parts of the body.

figure10

Figure 10. A completed IK structure representing the human form.

Constraining Joint Movement

You may have noticed at this point in our exploration of IK armatures that when a single bone is selected with the Selection Tool, we get a whole host of properties to manipulate within the Properties Panel. Specifically, joint rotation and translation across the X and Y axis – along with spring strength and damping. The strength and damping values control how much springiness there is to a specific bone and the rate of decay to that springiness.

figure11

Figure 11. The arm instance has its joint rotation constrained to provide more realistic movement.

Making fine adjustments to the constraints of specific joints and the angles they are allowed to rotate against will go far in making a more believable armature – and result in more realistic poses. Additionally, setting these constraints will make it much easier to work with the armature since it will only move in ways which you have allowed it to move. A combination of joint constraints and bone spring strength and damping will allow a great deal of control in terms of how each individual bone behaves across poses.

Managing Poses

With a shape or symbol based armature assembled and completed, it’s time to talk about animation. Animating an IK armature in Animate is completely different from other animation mechanisms you may be familiar with. For instance, you do not create any sort of shape or motion tween on the armature layer – simply existing as an armature layer automatically provides the IK armature animation mechanic within an Animate project.

With the armature created, all you need to do in order to design the animation is to extend the frames across the Timeline and change the pose across different frames. Poses within an armature layer are created in a similar way that keyframes are created in a Motion Tween. You simply move the playhead to the frame you’d like to create a new pose at – and make adjustments to the position of your armature.

figure12

Figure 12. Use Onion Skinning controls to preview the animation between Poses.

If you need to duplicate a pose for slight adjustments, or are creating a looping animation such as a character walk cycle… Animate has a really simple way of managing poses. By bringing up the context menu from an armature layer, you will see a bunch of different options for dealing with armatures and poses.

figure13

Figure 13. Managing poses from the contextual menu.

Most conveniently, this menu allows an easy way to copy and paste poses across frames. Note that in order to use this feature, you must have selected a frame which includes a pose in order to copy it from this menu.

figure14

Figure 14. The completed IK armature complete with poses.

Runtime Armatures

Whether building an armature from a shape or set of symbol instances, the option exists to use the armature as a “runtime” armature. What this means is that poses can be dynamically set at runtime by the user through interaction with the armature. To select this option, select any frame upon the armature layer and change it from the Properties panel.

Of course, you give away all control over the armature itself by allowing this… but it can be joyful for the user.

figure15

Figure 15. Selecting an armature type of Authortime or Runtime.

Note that you cannot use runtime armatures if the armature contains more than one pose.

Conclusion

While traditional frame-by-frame, shape tween, motion and classic tweens are all valid mechanisms to use within an Animate project… have a play at IK animation using the information presented here. It’s a different way of animating – and one which can be both a fun way to explore a different animation mechanic and at the same time get a feel for IK physics. While it is a simple thing to create an IK armature in Animate, taking the time to finesse control points, joint rotation, springiness, and so on can really go far in making a believable armature.