infiniteskills learning adobe edge animate cc

#Infiniteskills learning adobe edge animate cc how to#
#Infiniteskills learning adobe edge animate cc full#
#Infiniteskills learning adobe edge animate cc code#

Create a simple animation on the Stage, such as a rectangle moving from left to right.ģ. From the Properties panel, in the Stage section, uncheck Autoplay.Ģ.

#Infiniteskills learning adobe edge animate cc how to#

In the following procedure, I explain how to use Stage actions to allow your audience to both start and stop an animation from playing by pressing and then releasing the spacebar.ġ. You can use a particular Stage action only once per composition.

#Infiniteskills learning adobe edge animate cc code#

The variable 'e.which' tells you the key code of the key that was pressed, e.g. insert code to be run when the user stops pressing a key. Now, when the user releases the spacebar, the animation stops. The following example code uses keyup, which works in the same manner as keydown.

insert code to be run when the user presses a key. In this example, the animation plays when the user presses the spacebar. Before I chose Play, however, I placed the cursor directly after the bracket (and then pressed Enter on the keyboard to start a new line, then pressed Tab for the correct spacing), because that is where I want to insert the Play code (highlighted in bold). After you choose keydown on the Actions menu, you must then choose how you want that action triggered. All of the code preceded by double slashes (//) are notes to help explain what the code does. The following example code works with a keydown Stage action. OnError: Fires when an event handler causes a JavaScript error.įor more information on these Stage actions, see the Adobe Edge Animate JavaScript API, which is available atįigure 11-2: Create Stage actions from the Elements panel. Scroll, orientationchange, and resize: These are page-level events. Keyup: Fires after the user stops pressing an assigned key. Keydown: Fires after the user presses an assigned key (find the example code after Figure 11-2). Here is a brief description of what you can do with each of the Stage actions:ĬreationComplete: Fires immediately after a Symbol is created and initialized but before autoPlay occurs.īeforeDeletion: Fires just before a Symbol is deleted.ĬompositionReady: Fires after the composition is ready to play but before autoPlay occurs. After a list of definitions, I provide some quick steps for using keydown and keyup. However, even code-wary designers can use some Stage actions, such as keydown and keyup, to good effect. You can find a description of those actions in Chapter 5.įor some of these Stage actions, a designer with no coding experience may want to shy away from using certain actions that are code-intensive. The remaining actions - from click to focus - are used for elements as well. The first nine actions listed in Figure 11-2 are unique to the Stage.

#Infiniteskills learning adobe edge animate cc full#

To open the Actions box from the Elements panel, simply click the Open Actions icon, which is shown in Figure 11-2 along with a full list of all possible actions that you can add to the Stage. You can find the Elements panel in the top-right corner of the interface (as shown in Figure 11-1).įigure 11-1: The default view of the Elements panel shows the Stage.Ĭhapter 5 discusses actions in detail, along with triggers that you can add to the Stage, but here I discuss how to use actions for the Stage from the Elements panel. The Elements panel updates along with the Timeline and vice versa, which is discussed in the next section. From the Elements panel, you can do several things: The Elements panel provides a useful means to help organize and work with elements. However, you can always see the Stage in the Elements panel. The Elements panel remains empty until you create your first element, such as a text box or a rectangle, or you import an image. You can also name, or label, elements from the Elements panel. You can do a number of things from the Elements panel, including selecting elements, opening actions for an element, setting the visibility of an element, locking an element, and nesting one element into another element. The Elements panel is located in the top-right corner of the screen.

Using the Timeline in conjunction with the Elements panel Using the Elements panel to organize and work with elements Adobe Edge Animate CC For Dummies (2013) Part III Formatting and Animating Chapter 11 Using the Elements Panel