Посібник користувача Скасувати

Animate workflow and workspace

  1. Adobe Animate User Guide
  2. Introduction to Animate
    1. What's New in Animate
    2. Visual Glossary
    3. Animate system requirements
    4. Animate keyboard shortcuts
    5. Work with Multiple File Types in Animate
  3. Animation
    1. Animation basics in Animate
    2. How to use frames and keyframes in Animate
    3. Frame-by-frame animation in Animate
    4. How to work with classic tween animation in Animate
    5. Brush Tool
    6. Motion Guide
    7. Motion tween and ActionScript 3.0
    8. About Motion Tween Animation
    9. Motion tween animations
    10. Creating a Motion tween animation
    11. Using property keyframes
    12. Animate position with a tween
    13. How to edit motion tweens using Motion Editor
    14. Editing the motion path of a tween animation
    15. Manipulating motion tweens
    16. Adding custom eases
    17. Creating and applying Motion presets
    18. Setting up animation tween spans
    19. Working with Motion tweens saved as XML files
    20. Motion tweens vs Classic tweens
    21. Shape tweening
    22. Using Bone tool animation in Animate
    23. Work with character rigging in Animate
    24. How to use mask layers in Adobe Animate
    25. How to work with scenes in Animate
  4. Interactivity
    1. How to create buttons with Animate
    2. Convert Animate projects to other document type formats
    3. Create and publish HTML5 Canvas documents in Animate
    4. Add interactivity with code snippets in Animate
    5. Creating custom HTML5 Components
    6. Using Components in HTML5 Canvas
    7. Creating custom Components: Examples
    8. Code Snippets for custom Components
    9. Best practices - Advertising with Animate
    10. Virtual Reality authoring and publishing
  5. Workspace and workflow
    1. Creating and managing Paint brushes
    2. Using Google fonts in HTML5 Canvas documents
    3. Using Creative Cloud Libraries and Adobe Animate
    4. Use the Stage and Tools panel for Animate
    5. Animate workflow and workspace
    6. Using web fonts in HTML5 Canvas documents
    7. Timelines and ActionScript
    8. Working with multiple timelines
    9. Set preferences
    10. Using Animate authoring panels
    11. Create timeline layers with Animate
    12. Export animations for mobile apps and game engines
    13. Moving and copying objects
    14. Templates
    15. Find and Replace in Animate
    16. Undo, redo, and the History panel
    17. Keyboard shortcuts
    18. How to use the timeline in Animate
    19. Creating HTML extensions
    20. Optimization options for Images and Animated GIFs
    21. Export settings for Images and GIFs
    22. Assets Panel in Animate
  6. Multimedia and Video
    1. Transforming and combining graphic objects in Animate
    2. Creating and working with symbol instances in Animate
    3. Image Trace
    4. How to use sound in Adobe Animate
    5. Exporting SVG files
    6. Create video files for use in Animate
    7. How to add a video in Animate
    8. Draw and create objects with Animate
    9. Reshape lines and shapes
    10. Strokes, fills, and gradients with Animate CC
    11. Working with Adobe Premiere Pro and After Effects
    12. Color Panels in Animate CC
    13. Opening Flash CS6 files with Animate
    14. Work with classic text in Animate
    15. Placing artwork into Animate
    16. Imported bitmaps in Animate
    17. 3D graphics
    18. Working with symbols in Animate
    19. Draw lines & shapes with Adobe Animate
    20. Work with the libraries in Animate
    21. Exporting Sounds
    22. Selecting objects in Animate CC
    23. Working with Illustrator AI files in Animate
    24. Applying blend modes
    25. Arranging objects
    26. Automating tasks with the Commands menu
    27. Multilanguage text
    28. Using camera in Animate
    29. Graphic filters
    30. Sound and ActionScript
    31. Drawing preferences
    32. Drawing with the Pen tool
  7. Platforms
    1. Convert Animate projects to other document type formats
    2. Custom Platform Support
    3. Create and publish HTML5 Canvas documents in Animate
    4. Creating and publishing a WebGL document
    5. How to package applications for AIR for iOS
    6. Publishing AIR for Android applications
    7. Publishing for Adobe AIR for desktop
    8. ActionScript publish settings
    9. Best practices - Organizing ActionScript in an application
    10. How to use ActionScript with Animate
    11. Accessibility in the Animate workspace
    12. Writing and managing scripts
    13. Enabling Support for Custom Platforms
    14. Custom Platform Support Overview
    15. Working with Custom Platform Support Plug-in
    16. Debugging ActionScript 3.0
    17. Enabling Support for Custom Platforms
  8. Exporting and Publishing
    1. How to export files from Animate CC
    2. OAM publishing
    3. Exporting SVG files
    4. Export graphics and videos with Animate
    5. Publishing AS3 documents
    6. Export animations for mobile apps and game engines
    7. Exporting Sounds
    8. Best practices - Tips for creating content for mobile devices
    9. Best practices - Video conventions
    10. Best practices - SWF application authoring guidelines
    11. Best practices - Structuring FLA files
    12. Best Practices to optimize FLA files for Animate
    13. ActionScript publish settings
    14. Specify publish settings for Animate
    15. Exporting projector files
    16. Export Images and Animated GIFs
    17. HTML publishing templates
    18. Working with Adobe Premiere Pro and After Effects
    19. Quick share and publish your animations
  9. Troubleshooting
    1. Fixed issues
    2. Known issues

 

What is Animate?

Adobe

General Animate workflow

To build a Animate application, you typically perform the following basic steps:

Plan the application.

Decide which basic tasks the application will perform.

Add media elements.

Create and import media elements, such as images, video, sound, and text.

Arrange the elements.

Arrange the media elements on the Stage and in the Timeline to define when and how they appear in your application.

Apply special effects.

Apply graphic filters (such as blurs, glows, and bevels), blends, and other special effects as you see fit.

Use ActionScript to control behavior.

Write ActionScript® code to control how the media elements behave, including how the elements respond to user interactions.

Test and publish your application.

Test your FLA file (Control > Test Movie) to verify that your application is working as you intended and find and fix any bugs you encounter. You should test the application throughout the creation process. You can test your file in Animate and the AIR Debug Launchers.

Publish your FLA file (File > Publish) as a SWF file that can be displayed in a web page and played back with Flash® Player.

Depending on your project and your working style, you might use these steps in a different order.

Workspace overview

You create and manipulate your documents and files using various elements, such as panels, bars, and windows. Any arrangement of these elements is called a workspace. The workspaces of the different applications in Adobe® Creative Suite® 5 share the same appearance so that you can move between the applications easily. You can also adapt each application to the way you work by selecting from several preset workspaces or by creating one of your own.

Although the default workspace layout varies in different products, you manipulate the elements much the same way in all of them.

  • The Application bar across the top contains a workspace switcher, menus (Windows only), and other application controls. On the Mac for certain products, you can show or hide it using the Window menu.

  • The Tools panel contains tools for creating and editing images, artwork, page elements, and so on. Related tools are grouped.

  • The Control panel displays options for the currently selected tool. In Illustrator, the Control panel displays options for the currently selected object. (In Adobe Photoshop® this is known as the Options bar. In Adobe Animate®, Adobe Dreamweaver®, and Adobe Fireworks® this is known as the Property Inspector and includes properties of the currently selected element.)

  • The Document window displays the file you’re working on. Document windows can be tabbed and, in certain cases, grouped and docked.

  • Panels help you monitor and modify your work. Examples include the Timeline in Animate, the Brush panel in Illustrator, the Layers panel in Adobe Photoshop®, and the CSS Styles panel in Dreamweaver. Panels can be grouped, stacked, or docked.

  • The Application frame groups all the workspace elements in a single, integrated window that lets you treat the application as a single unit. When you move or resize the Application frame or any of its elements, all the elements within it respond to each other so none overlap. Panels don’t disappear when you switch applications or when you accidentally click out of the application. If you work with two or more applications, you can position each application side by side on the screen or on multiple monitors.

    If you are using a Mac and prefer the traditional, free-form user interface, you can turn off the Application frame. In Adobe Illustrator®, for example, select Window > Application Frame to toggle it on or off. (In Animate, the Application frame is on permanently for Mac, and Dreamweaver for Mac does not use an Application frame.)

 

Default Illustrator workspace

A. Tabbed Document windows B. Application bar C. Workspace switcher D. Panel title bar E. Control panel F. Tools panel G. Collapse To Icons button H. Four panel groups in vertical dock 

Hide or show all panels

  • (Illustrator, Adobe InCopy®, Adobe InDesign®, Photoshop, Fireworks)To hide or show all panels, including the Tools panel and Control panel, press Tab.

  • (Illustrator, InCopy, InDesign, Photoshop) To hide or show all panels except the Tools panel and Control panel, press Shift+Tab.

    Tip: You can temporarily display hidden panels if Auto-Show Hidden Panels is selected in Interface preferences. It’s always on in Illustrator. Move the pointer to the edge of the application window (Windows®) or to the edge of the monitor (Mac OS®) and hover over the strip that appears.

  • (Animate, Dreamweaver, Fireworks) To hide or show all panels, press F4.

Display panel options

  1. Click the panel menu icon in the upper-right corner of the panel.

    Tip: You can open a panel menu even when the panel is minimized.

    Tip: In Photoshop, you can change the font size of the text in panels and tool tips. In the Interface preferences, choose a size from the UI Font Size menu.

(Illustrator) Adjust panel brightness

  1. In User Interface preferences, move the Brightness slider. This control affects all panels, including the Control panel.

Reconfigure the Tools panel

You can display the tools in the Tools panel in a single column, or side by side in two columns. (This feature is not available in the Tools panel in Fireworks and Animate.)

 In InDesign and InCopy, you also can switch from single-column to double-column (or single-row) display by setting an option in Interface preferences.

  1. Click the double arrow at the top of the Tools panel.

Manage windows and panels

You can create a custom workspace by moving and manipulating Document windows and panels. You can also save workspaces and switch among them. For Fireworks, renaming custom workspaces can lead to unexpected behavior.

 The following examples use Photoshop for demonstration purposes. The workspace behaves the same in all the products.

Rearrange, dock, or float document windows

When you open more than one file, the Document windows are tabbed.

  • To rearrange the order of tabbed Document windows, drag a window’s tab to a new location in the group.

  • To undock (float or untab) a Document window from a group of windows, drag the window’s tab out of the group.

     In Photoshop you can also choose Window > Arrange > Float in Window to float a single Document window, or Window > Arrange > Float All In Windows to float all of the Document windows at once. See tech note kb405298 for more information.

     Dreamweaver does not support docking and undocking Document windows. Use the Document window’s Minimize button to create floating windows (Windows), or choose Window > Tile Vertically to create side-by-side Document windows. Search “Tile Vertically” in Dreamweaver Help for more information on this topic. The workflow is slightly different for Macintosh users.

  • To dock a Document window to a separate group of Document windows, drag the window into the group.

  • To create groups of stacked or tiled documents, drag the window to one of the drop zones along the top, bottom, or sides of another window. You can also select a layout for the group by using the Layout button on the Application bar.

     Some products do not support this functionality. However, your product may have Cascade and Tile commands in the Window menu to help you lay out your documents.

  • To switch to another document in a tabbed group when dragging a selection, drag the selection over the document’s tab for a moment.

     Some products do not support this functionality.

Dock and undock panels

A dock is a collection of panels or panel groups displayed together, generally in a vertical orientation. You dock and undock panels by moving them into and out of a dock.

  • To dock a panel, drag it by its tab into the dock, at the top, bottom, or in between other panels.

  • To dock a panel group, drag it by its title bar (the solid empty bar above the tabs) into the dock.

  • To remove a panel or panel group, drag it out of the dock by its tab or title bar. You can drag it into another dock or make it free-floating.

Navigator panel being dragged out to new dock, indicated by blue vertical highlight

Navigator panel now in its own dock

 You can prevent panels from filling all the space in a dock. Drag the bottom edge of the dock up so it no longer meets the edge of the workspace.

Move panels

As you move panels, you see blue highlighted drop zones, areas where you can move the panel. For example, you can move a panel up or down in a dock by dragging it to the narrow blue drop zone above or below another panel. If you drag to an area that is not a drop zone, the panel floats freely in the workspace.

 The position of the mouse (rather than the position of the panel), activates the drop zone, so if you can’t see the drop zone, try dragging the mouse to the place where the drop zone should be.

  • To move a panel, drag it by its tab.

  • To move a panel group, drag the title bar.

Narrow blue drop zone indicates Color panel will be docked on its own above the Layers panel group.

A. Title bar B. Tab C. Drop zone 

 Press Ctrl (Windows) or Command (Mac OS) while moving a panel to prevent it from docking. Press Esc while moving the panel to cancel the operation.

Add and remove panels

If you remove all panels from a dock, the dock disappears. You can create a dock by moving panels to the right edge of the workspace until a drop zone appears.

  • To remove a panel, right-click (Windows) or Control-click (Mac) its tab and then select Close, or deselect it from the Window menu.

  • To add a panel, select it from the Window menu and dock it wherever you want.

Manipulate panel groups

  • To move a panel into a group, drag the panel’s tab to the highlighted drop zone in the group.

a panel to a panel group

  • To rearrange panels in a group, drag a panel’s tab to a new location in the group.

  • To remove a panel from a group so that it floats freely, drag the panel by its tab outside the group.

  • To move a group, drag the title bar (the area above the tabs).

Stack floating panels

When you drag a panel out of its dock but not into a drop zone, the panel floats freely. The floating panel allows you to position it anywhere in the workspace. You can stack floating panels or panel groups so that they move as a unit when you drag the topmost title bar.

Free-floating stacked panels

  • To stack floating panels, drag a panel by its tab to the drop zone at the bottom of another panel.

  • To change the stacking order, drag a panel up or down by its tab.

     Be sure to release the tab over the narrow drop zone between panels, rather than the broad drop zone in a title bar.

  • To remove a panel or panel group from the stack, so that it floats by itself, drag it out by its tab or title bar.

Resize panels

  • To minimize or maximize a panel, panel group, or stack of panels, double-click a tab. You can also double-click the tab area (the empty space next to the tabs).

  • To resize a panel, drag any side of the panel. Some panels, such as the Color panel in Photoshop, cannot be resized by dragging.

Collapse and expand panel icons

You can collapse panels to icons to reduce clutter on the workspace. In some cases, panels are collapsed to icons in the default workspace.

Panels collapsed to icons

Panels expanded from icons

  • To collapse or expand all panel icons in a column, click the double arrow at the top of the dock.

  • To expand a single panel icon, click it.

  • To resize panel icons so that you see only the icons (and not the labels), adjust the width of the dock until the text disappears. To display the icon text again, make the dock wider.

  • To collapse an expanded panel back to its icon, click its tab, its icon, or the double arrow in the panel’s title bar.

    Tip: In some products, if you select Auto-Collapse Icon Panels from the Interface or User Interface Options preferences, an expanded panel icon collapses automatically when you click away from it.

  • To add a floating panel or panel group to an icon dock, drag it in by its tab or title bar. (Panels are automatically collapsed to icons when added to an icon dock.)

  • To move a panel icon (or panel icon group), drag the icon. You can drag panel icons up and down in the dock, into other docks (where they appear in the panel style of that dock), or outside the dock (where they appear as floating icons).

Save and switch workspaces

By saving the current size and position of panels as a named workspace, you can restore that workspace even if you move or close a panel. The names of saved workspaces appear in the workspace switcher in the Application bar.

Save a custom workspace

  1. With the workspace in the configuration you want to save, do one of the following:

    • (Illustrator) Choose Window > Workspace > Save Workspace.

    • (Photoshop, InDesign, InCopy) Choose Window > Workspace > New Workspace.

    • (Dreamweaver) Choose Window > Workspace Layout > New Workspace.

    • (Animate) Choose New Workspace from the workspace switcher in the Application bar.

    • (Fireworks) Choose Save Current from the workspace switcher in the Application bar.

  2. Type a name for the workspace.

  3. (Photoshop, InDesign) Under Capture, select one or more options:

    Panel Locations

    Saves the current panel locations (InDesign only).

    Keyboard shortcuts

    Saves the current set of keyboard shortcuts (Photoshop only).

    Menus or Menu Customization

    Saves the current set of menus.

Display or switch workspaces

  1. Select a workspace from the workspace switcher in the Application bar.

 In Photoshop, you can assign keyboard shortcuts to each workspace to navigate among them quickly.

Delete a custom workspace

  • Select Manage Workspaces from the workspace switcher in the Application bar, select the workspace, and then click Delete. (The option is not available in Fireworks.)

  • (Photoshop, InDesign, InCopy) Select Delete Workspace from the workspace switcher.

  • (Illustrator) Choose Window > Workspace > Manage Workspaces, select the workspace, and then click the Delete icon.

  • (Photoshop, InDesign) Choose Window > Workspace >Delete Workspace, select the workspace, and then click Delete.

Restore the default workspace

  1. Select the Default or Essentials workspace from the workspace switcher in the application bar.

     In Dreamweaver, Designer is the default workspace.

  2. (Photoshop, InDesign, InCopy) Select Window > Workspace > Reset [Workspace Name].

(Photoshop) Restore a saved workspace arrangement

In Photoshop, workspaces automatically appear as you last arranged them, but you can restore the original, saved arrangement of panels.

  • To restore an individual workspace, choose Window > Workspace > Reset Workspace Name.

  • To restore all the workspaces installed with Photoshop, click Restore Default Workspaces in the Interface preferences.

 To rearrange the order of workspaces in the application bar, drag them.

 Adobe

Отримуйте допомогу швидше й простіше

Новий користувач?