Edge Animate First Tutorial

Edge animate is a visual tool for Adobe's latest production of HTML5 animations, which can be easily understood as the HTML5 version of Flash Pro. In the following article, I will introduce the new HTML5 animation artifact.

First, create Edge animation project

Start Edge Animate and create a new project.

Set stage (stage) width to 640px and height to 1136px. Ctrl+s saved as demo.html. A standard edge animate project is made up of a series of HTML,CSS,JS and related resource files. As shown in the following:

• Engineering files for Edge animate: the. An format file is more like an empty shell file or index file, indicating the necessary information for the project. You can use Notepad to open the. An file to find out what's specific.
• Edge_includes directory: This directory is the edge of the production of HTML5 rely on the JS class Library: Edge.6.0.0.min.js (the previous version has a dependency on jquery, and then after 5.0 was removed, resulting in its own library, the notation to participate in jquery).
• Other. js files: JS files such as demo1_edgeactions.js,demo1_edge.js are specially generated for the current animation.
• . html file: The main HTML file.

Second, create Edge animation project

The strength of Adobe Edge Animate is that it provides precise editing tools and a visual timeline.

Toolbar: (1-3) Element manipulation tools, (4-7) tools for creating elements, (8-10) Element details adjustment tool, using HTML5 and CSS.

1. Select (V)	4. Rectangle (M)	8. Background color
2. Stretch transform (Q)	5. Fillet Rectangle (R)	9. Edge Color
3. Cropping (C)	6. Oval (O)	10. New element Default layout
	7. Text (T)

The following shows the main workspaces for Edge animate:

1. Toolbars: Used to manipulate and create elements in the stage

2. Stage

3. Elements: Elements contained in the stage

4. Properties panel: Here you can adjust the property values of the element (including the stage)

5. Library: You can import images and. svg files in the library, Web font libraries and symbols (import via File>import, or click the Plus button to add)

6. Timeline: Create animations with changes in the value of element properties over time (set keyframes)

How to adjust the layout of the workspace: by clicking and dragging the active Panel icon (or the entire label) to the left of the work panel, drag it to the destination area and add it in the opposite position on the other active panel. When you drag the panel over the other panels, you will see that you place the panel above the other panel (Above), below (Below), left side, right, or merge (Tab), and when the corresponding position is highlighted in purple, Release the left mouse button to place the panel in the corresponding position

Third, Edge animation stage

1. Enable ruler (Rulers): (shortcut key Ctrl/command + R or view-rulers menu), can be defined as pixels or percentages (Pixel and Percentage Guides)

2. Stage scroll bar (persistent stage Scrollbars) and automatically place the stage in the middle of the button (auto Center stage)

3. Drag zoom (Scrub zoom): Drag the value next to the Zoom icon to control the stage zoom. Double-click the percent value to manually enter a zoom percentage number

4. Relative mark (Relativity Makers/pin): (This does not seem like the v1.0 version) is mainly used to zoom the stage, the stage is displayed in the window portion of the position.

5. Time Code: The time at which the playhead position is displayed.

6. Code Error HINT: In the lower right of the stage, quickly troubleshoot event handler code errors or generic scripting errors.

Iv. Edge Animation Properties panel

The strength of Adobe Edge animate is that it gets the tag (that is, the ID) and the element style attribute (CSS) of the element in the stage, and "marks" the changes on the timeline as keyframes. This inevitably results in a change in the attribute value between KeyFrames, which is transformed into a transition phase, or an animation (changes in transparency opacity, fading, moving location of a component, scaling scale, and so on).

The following shows the attributes of an element, which can be adjusted and each element has its own property value:

1. Element ID: An element's identity token, which allows direct access to the element's property values through code and modifies them.

2. Element tag: Div, IMG, etc.

3. Element category (Class)

4. Action Events: You can add an action event control code to an element.

5. Display: Whether the element is displayed on the stage.

6. Display settings (overflow): including

Visible: Default value. Do not cut content or add scroll bars. If this default value is explicitly declared, the object is trimmed with the dimensions of the window or frame that contains the object. and the Clip property setting is invalidated.
Auto: The object content is cropped or the scroll bar is displayed when required.
Hidden: does not display content that exceeds the size of the object.
Scroll: Scroll bars are always displayed.

7. Add keyframes (keyframe Maker): Click to add a transparency keyframe to the timeline.

8. Transparency (Opacity): The adjustment of transparency can be achieved by dragging or entering values directly.

9. Responsive layout presets (responsive layout presets): Different position and size change control options can be set

10. Adjust unit switch: Can be adjusted to percent or pixel units

11. Element transform (Transform): Includes size (scale:x, y), deformation (skew:x, y), rotation (adjustable pivot position and rotation angle).

12. The indicator icon (Cursor): You can set the mouse to move over the element when the mouse display icon (such as the element is a button can be set as a small hand icon).

13. Shadow (Shadow): Open the rear switch button to enable or disable the shadow function, where the shadow function is limited to the shadow that can cast a square, you can adjust the shadow parameters, such as angle, size and feather value.

14. Cropping (clip): The elements are cropped, primarily to make the elements do not overlap.

15. Accessibility (Accessibility): includes title and attribute values.

The 16.Global and Applied:global are transformed by the relative coordinates of the stage, while the applied is the relative coordinates of the parent level.

V. Edge Animation element panel

The Adobe Edge animate elements Panel displays a node-like tree structure that represents the connection of elements to the stage of the parent component.

The elements placed (or stacked) above have higher z-index values that appear above the other elements (stacked below).

The following indicates the main features, illustrations, and use cases of the element panel.

1. Each element has a user-defined ID and tag, represented by an icon associated with the element type;

2. Stacked elements can use the group, nested, or symbol instance features in Adobe Edge animate.

3. Click the Action Events button (actions) and select the appropriate function from the event handler list to add the global stage control event (Compositionready,scroll,orientationchange, Resize, etc.) and local element control events (Click,mouseover,touchstart, etc.).

4. Double-click a symbol instance icon to enter the symbol editing mode.

5. Click Visibility to toggle the visibility of elements in the stage, but without affecting the visibility of the runtime elements.

6. Right-click the element to select more actions from the pop-up menu, or choose More from the Modify menu.

Six, edge animation time line

Adobe Edge Animate's timeline blends the element's node-like tree structure with the keyframes associated with the element properties, which appear on the left side of the timeline, while the right side displays the time information table. Element attribute values (keyframes) are marked at the exact point in time of the timeline, and when the property value changes, the transition stage produces an animation.

1. Animated labels and triggers (Trigger): Custom timeline animation labels and triggers can also control the state and processing of element animations on the stage; Use Ctrl/command + L to generate an animated label at the Playhead's point in time, using the ctrl/ Command + t to place a trigger at the Playhead's point in time.

2. Show only animated elements (Filter animated Elements)

3. Enable the timeline adsorption function (Enable Timeline snapping): Drag the playhead, the playhead will automatically snap to the point of time, animation or keyframes, etc.

4. Enable the timeline grid (Enable Timeline grid): The Time Information table will display a time grid, convenient for designers to set keyframes at the exact point in time, etc., the size of the grid can be user-defined.

5. Automatically record Keyframe mode (Auto keyframe mode (K)): In open mode, the designer's property value modifications to elements are recorded on the timeline as keyframes.

6. Auto-Generate animation mode (auto Transition mode (X)): In open mode, the animation is automatically generated between two keyframes, which is turned on by default.

7. Play Marker (Toggle Pin (P)): You can set the starting and ending positions of the playback.

8. Animation transition Adjustment (easing): Adjusts the curve between animation transitions to make them more consistent with the designer's requirements.

Vii. Edge Animation Code Management

The Code manager uses a separate, complete window interface to show all event control code and timeline triggers. (shortcut Ctrl/command + E or open via menu window-code) the control code or trigger that is being edited is highlighted.

1. Click "+" icon to add global, local, timeline control code or trigger;

2. Click the "Full Code" button to display and edit the entire code of a single file, not just the internal code of a single function function;

3. Error detection can be quickly ruled out by the code error prompt below.

Edge Animate First Tutorial