Adobe Animate CC 2019 for Mac: Core Features and Operations Guide

Source: 爱上MAC  |  Download link: Adobe Animate CC 2019 for Mac

Adobe Animate CC 2019 is a professional software for creating animation and interactive content, formerly known as the widely recognized Flash Professional. It inherits powerful vector animation capabilities and has fully shifted toward supporting modern web standards such as HTML5 Canvas and WebGL, used for creating web animations, advertisements, games, educational content, and application interfaces. This article aims to provide a detailed introduction to its core interface, complete workflow, and efficient operation tips.

I. Detailed Explanation of the Core Interface and Workspace

After launching Animate CC 2019, you will see a customizable workspace composed of multiple panels. The default “Essentials” workspace layout is as follows:

• Stage: The white rectangular area in the center is the visible playback area for animation and also the place where you directly draw and arrange elements. The gray area outside the stage is called the “Pasteboard,” used to store elements that temporarily do not appear in the final output.
• Timeline: Located below the stage, it is the core of animation creation. It consists of layers (vertical direction) and frames (horizontal direction). The left side manages layers (such as layer order, show/lock), and the frame sequence on the right controls changes in animation over time.
• Toolbar: Usually located on the left side of the screen, it contains various tools such as selection, drawing, text, transform, and coloring.
• Properties Panel: Located on the right side, it is the context-sensitive “control center.” Depending on the selected object (stage, shape, element, frame, etc.), it dynamically displays the corresponding adjustable properties, such as position, size, color, filters, and more.
• Library Panel: Located on the right side, it is the repository for all reusable elements in the project (such as graphics, buttons, movie clip symbols, as well as imported bitmaps and sounds). Drag elements from the library onto the stage to create “instances” of those elements.
• Other Panels: Panels such as “Align,” “Color,” “Swatches,” and “Animation Presets” can be opened via the “Window” menu and are used to assist with precise layout and design.

II. Complete Workflow from Creation to Export

1. Creating a New Project

Action: After launching the software, select “New” on the “Start” screen, or use the menu bar File > New.
Location: Menu bar or Start screen.
Key Settings: In the “New Document” dialog box, select the target platform (e.g., “HTML5 Canvas”), set the stage dimensions (width/height), frame rate (FPS, e.g., 24), and background color.

2. Drawing and Creating Symbols

Action: Use the “Rectangle Tool,” “Pen Tool,” or “Brush Tool” from the toolbar to draw graphics directly on the Stage.
Convert to Symbol: Select the drawn graphic, press F8, or right-click and choose “Convert to Symbol.”
Method: In the dialog box that appears, name the symbol, choose the type (“Graphic,” “Button,” or “Movie Clip”), and set the registration point (the symbol’s center reference point). After conversion, the original shape becomes an instance of the symbol, and the original is automatically saved to the “Library.”

3. Creating Animations

Create a Tween Animation:

1. Select a keyframe on the timeline (or press F6 to create a keyframe), drag the symbol from the Library to the Stage, and set the starting position.
2. Right-click at a later frame (e.g., frame 24), choose “Insert Keyframe” (F6), or “Insert Frame” (F5) to extend, then move the symbol to the ending position.
3. Right-click on any frame between the two keyframes and choose “Create Classic Tween.” The timeline background turns purple with an arrow, indicating the tween was created successfully, and the symbol will move smoothly.

Create a Shape Tween: For vector shapes that are not symbols, you can draw different shapes at two keyframes, then “Create Shape Tween” between the frames (the timeline displays green).

4. Add Interactivity (ActionScript 3.0 or HTML5/JavaScript)

Action: Select a keyframe on the timeline, or a button instance on the stage.
Location: Open the “Actions” panel (Window > Actions) or press Option+F9 (⌥+F9).
Method: Write code directly in the “Actions” panel. For example, to add a click event to a button:
myBtn.addEventListener(“click”, function(){ gotoAndPlay(10); });

5. Testing and Debugging

Action: Press Cmd+Return (⌘+↵) at any time to enter “Test Movie” mode and preview animation effects and interactive features in a separate player window.

6. Export the Final Content

Publish Settings: Go to File > Publish Settings (Cmd+Shift+F12) to select the output format (such as HTML/JS, SVG, video, image sequence, etc.) and configure detailed settings.
Publish: After configuring, click the “Publish” button, or export directly via File > Publish (Shift+Cmd+F12). The files will be generated in the same directory as the project file (.fla).

III. Advanced Tips for Common Features

• Camera Panning: Enable the “Camera” layer on the timeline to directly control the scene’s perspective using the move and zoom tools, making it easy to create camera push, pull, and pan effects.
• Animation Presets: Use the “Window > Animation Presets” panel to apply pre-built complex animations (such as bounce, fly-in) to selected elements with one click, greatly improving efficiency.
• Bone Tool (Inverse Kinematics IK): Use the “Bone Tool” in the toolbar to add joint chains to vector shapes or symbol instances. Create natural joint animations by dragging bones, commonly used for character limb movement.
• Layer Folders and Guide Layers: Use layer folders in the timeline to manage layers in complex projects. Create “Guide Layers” to draw custom motion paths for traditional tween animations.
• Asset Deformation: When using the “Free Transform Tool” (Q), hold the Command (⌘) key and drag corner points for free distortion and deformation.

IV. Common Issues and Solutions

• Issue: Creating a tween animation fails, and the timeline shows a dashed line instead of a solid arrow.
  Solution: Ensure that the start and end objects of the tween are instances of the same symbol, not shapes. If they are shapes, they need to be converted to symbols (F8).
• Issue: The exported HTML5 file has choppy animation or misplaced elements in the browser.
  Solution: Check whether filters or blend modes unsupported by Animate are being used. Use pure vector graphics and tween animations as much as possible, and reduce complex bitmaps. In “Publish Settings,” make sure the correct target platform (HTML5 Canvas) is selected.
• Problem: Brush strokes (lines) and fills unexpectedly merge with or cut into other shapes when coloring.
  Solution: This is caused by Animate’s default “Merge Drawing” mode. Before drawing, select “Object Drawing” mode (the icon is a circle) at the bottom of the toolbar, so that each shape is an independent object and does not interfere with others.
• Problem: Too many layers in the timeline make it difficult to manage.
  Solution: Make good use of “Layer Folders” for categorization, and give each layer and folder a clear name. Use the “Show/Hide All Layers” and “Lock/Unlock All Layers” buttons for batch management.

V. Summary Table of Mac Shortcuts