Web Gallery Using Flash

Title: Web Gallery Using Flash

By: Ali Akbary
 Chapter 5 Properties, Library & Assets panel
Learning Outcome

Objectives of this chapter are: -

➢ Properties panel
➢ Library panel
➢ Assets panel

ANIMATE PROPERTIES
The Property inspector provides easy access to the most commonly used attributes of
the current selection, either on the Stage or in the Timeline. You can modify the object
or document attributes in the Property inspector without accessing the menus or panels
that also control these attributes.
Depending on what is selected, the Property inspector displays information and settings
for the current document, text, symbol, shape, bitmap, video, group, frame, or tool.
When two or more different types of objects are selected, the Property inspector
displays the total number of objects selected.
To display the Property inspector, Select Window > Properties, or
press Control+F3 (Windows) or Command+F3 (Macintosh).
Animate 2020 release provides a modernized Property Inspector with four tabs as
Tools, Object, Frame and Doc. Each tab corresponds to the properties for the current
selection.
➢ Tool - Indicates the current tool that is selected. If a tool does not have a valid
PI, Doc PI is shown, and Tool PI tab is disabled. This tab refers to the properties
of the currently selected tool.
➢ Object - Indicates the current object that is selected on stage. If no object is
selected, this tab is disabled. This tab refers to the properties for the currently
selected Object.
➢ Frame - Indicates the current frame that is selected in timeline. If no frame is
selected, this tab is disabled. This tab refers to the properties of the currently
selected Frame.
➢ Doc - Indicates the current document you are working on. This tab outlines
properties specific to the currently opened document.
 Figure 2 Tool Figure 4 Object
Property Inspector Property Inspector
Figure 1 Doc
Property Inspector

Figure 3 Frame
Property Inspector

Additional properties of the Properties Panel

DRAGGABLE SECTIONS
Sections of Property Inspector are now draggable and can be rearranged. A gripper is
shown on hovering over the draggable section.

Figure 5 Draggable sections

Quick Action Toolbar
The Property panel has a new Quick action section and a refreshed header sections to
make modes and related functionalities discoverable and quickly accessible.

Figure 7 Refreshed header section for

Figure 6 Quick action section Bitmap
Modernized Filter Settings
Filter section has been upgraded to make it easier to apply filter combinations. Also,
order of filters can be changed by dragging one filter above or below the other filters.

Figure 8 Modernized filter settings

MODERNIZED FILL AND STROKE
Fill and Stroke section is renamed as Color and Style.
➢ Alpha option for Fill and Stroke colors are added upfront for easy accessibility.
➢ For a clutter free and hassle-free experience, relatively less used options in
Stroke settings have been moved to the Ellipsis icon for both Style profile option
and Width profile option. Click the Ellipsis icon to select these options.
➢ Cap and Joints options are accessible upfront.
➢ Stroke option or/and Fill option display(s) according to the part of the object that
is/are selected.

Figure 9 Color and style

Remove Tween Option
Tweening section now has the option to remove tween within the Property Inspector.

Figure 10 Remove tween

Match Content option
Match Content option is now available on a single click in document setting section.

Figure 11 Match content option

Updated Camera Tool PI
Camera has all the color effects and Filters now
Figure 12 Updated camera options
Updated Polystar, Rectangle, Oval, Text and Magic Wand Tool Properties
Property Inspector panel have been modernized for the Polystar Tool, Rectangle Tool,
Oval Tool, Text Tool and Magic Wand Tool to promote accessibility and clutter free user
interface.

Figure 13 Polystar Figure 14 Static Text

ABOUT THE LIBRARY PANEL
The Library panel is where you store and organize symbols created in Animate. You can
also store imported files, including bitmap graphics, sound files, and video clips.
The Library panel lets you organize library items in folders. Also, see how often an item
is used in a document, and sort items by name, type, date, use count, or ActionScript®
linkage identifier. For example, when you import an animated GIF, it creates a folder
named GIF under the root folder and places the file. You can also search
the Library panel by typing in a symbol name or linkage name in the search field. You
can also set properties on most multiple-object selections.

Figure 15 The Library panel with an audio clip selected

ABOUT THE ACTIONS PANEL

The Actions panel lets you create and edit ActionScript code for an object or frame.
Selecting a frame, button, or movie clip instance makes the Actions panel active. The
Actions panel title changes to Button Actions, Movie Clip Actions, or Frame Actions,
depending on what is selected.
 Figure 16 The Actions panel showing a stop () action in a frame.
To display the Actions panel, select Window > Actions or press F9.
Using the movie explorer (deprecated with Animate)
The Movie Explorer lets you view and organize the contents of a document and select
elements in the document for modification. It contains a display list of currently used
elements, arranged in a navigable hierarchical tree.
Use the Movie Explorer to perform the following actions: -
➢ Filter which categories of items in the document appear in the Movie Explorer.
➢ Display the selected categories as scenes, symbol definitions, or both.
➢ Expand and collapse the navigation tree.
➢ Search for an element in a document by name.
➢ Familiarize yourself with the structure of an Animate document that another
developer created.
➢ Find all the instances of a particular symbol or action.
➢ Print the navigable display list that appears in the Movie Explorer.
The Movie Explorer has a Panel menu and a context menu with options for performing
operations on selected items or modifying the Movie Explorer display. A check mark
with a triangle below it in the Movie Explorer panel indicates the Panel menu.
Note:
The Movie Explorer has slightly different functionality when you are working with
screens.
View the Movie Explorer
➢ Select Window > Movie Explorer.
Filter the categories of items that appear in the Movie Explorer
 ➢ To show text, symbols, ActionScript, imported files, or frames and layers, click
one or more of the filtering buttons to the right of the Show option. To
customize which items to show, click the Customize button. To view those
elements, select options in the Show area of the Movie Explorer Settings dialog
box.
➢ To show items in scenes, select Show Movie Elements from the Movie Explorer
Panel menu.
➢ To show information about symbols, select Show Symbol Definitions from the
Movie Explorer Panel menu.
Note:
The Movie Elements option and the Symbol Definitions option can be active at the same
time.
Search for an item using the Find box
➢ In the Find box, enter the item name, font name, ActionScript string, or frame
number. The Find feature searches all items that appear in the Movie Explorer.
Select an item in the Movie Explorer
➢ Click the item in the navigation tree. Shift-click to select more than one item.
➢ The full path for the selected item appears at the bottom of the Movie Explorer.
Selecting a scene in the Movie Explorer shows the first frame of that scene on
the Stage. Selecting an element in the Movie Explorer selects that element on
the Stage if the layer containing the element is not locked.
Use the Movie Explorer Panel menu or context menu commands
➢ Do one of the following: -
❖ To view the Panel menu, click the Panel menu control in the Movie
Explorer panel.
❖ To view the context menu, right-click (Windows) or Control-click
(Macintosh) an item in the Movie Explorer navigation tree.
➢ Select an option from the menu:
❖ Go to Location - Jumps to the selected layer, scene, or frame in the
document.
Go to Symbol Definition
Jumps to the symbol definition for a symbol that is selected in the Movie Elements area
of the Movie Explorer. The symbol definition lists all the files associated with the
symbol. (The Show Symbol Definitions option must be selected. See its definition in this
list.)
Select Symbol Instances
Jumps to the scene containing instances of a symbol that is selected in the Symbol
Definitions area of the Movie Explorer. (The Show Movie Elements option must be
selected.)
Show In Library
Highlights the selected symbol in the document’s library. (Animate opens the Library
panel if it is not already visible.)
Rename - Lets you enter a new name for a selected element.
Edit In Place - Lets you edit a selected symbol on the Stage.
Edit In New Window - Lets you edit a selected symbol in a new window.
Show Movie Elements - Shows the elements in your document organized into
scenes.
Show Symbol Definitions - Shows all the elements associated with a symbol.
Copy All Text To Clipboard - It copies selected text to the clipboard. For spell
checking or other editing, paste the text into an external text editor.
Cut, Copy, Paste, And Clear - Performs these common functions on a selected
element. Modifying an item in the display list modifies the corresponding item in the
document.
Expand Branch - Expands the navigation tree at the selected element.
Collapse Branch - Collapses the navigation tree at the selected element.
Collapse Others - Collapses the branches in the navigation tree that do not contain
the selected element.
Print - Prints the hierarchical display list that appears in the Movie Explorer.
Using Animate components and components panel
A component in Animate is a reusable, packaged module that adds a particular
capability to an Animate document. Components can include graphics and code, so they
are pre-built functionality that you can easily include in your Animate projects. For
example, a component can be a radio button, a dialog box, or a preload bar. It can also
be something that has no graphics at all, such as a timer, a server connection utility, or
a custom XML parser.
If you are less experienced with writing ActionScript, you can add components to a
document and set their parameters in the Property inspector or Component inspector.
Use the Behaviors panel to handle their events. For example, you could attach a Go To
Web Page behavior to a Button component. Button can open a URL in a web browser
when it is clicked without writing any ActionScript code.
If you are a programmer who wants to create more robust applications, you can create
components dynamically. Use ActionScript to set properties and call methods at
runtime, and use the event listener model to handle events.
Insert a component using the component panel
When you first add a component to a document, Animate imports it as a movie clip into
the Library panel. You can also drag a component from the Components panel directly
to the Library panel and then add an instance of it to the Stage. In any case, you must
add a component to the library before you can access its class elements.
➢ Select Window > Component panel.
➢ Select an instance of a component in the Component panel, and drag it to the
Stage or Library panel. After a component is added to the library, you can drag
multiple instances to the Stage.
➢ Configure the component as needed using either the Property inspector or the
Components inspector. For information on the parameters the component uses,
refer to the appropriate component documentation for the version of ActionScript
you are using in the Animate document.
Using the component parameters panel
➢ Animate designers can import their external components to Animate and use
them to build their animations. To make this workflow easier, Animate provides
component parameters section as a panel. This feature lets you resize or move
this panel around in Animate staging environment. You can also lock the panel in
place by clicking the hamburger icon at the upper-right corner of the panel.
Select the lock option from the menu.
➢ You can open this panel by using Show Parameters button in the Property
inspector or by using Window > Component Parameters. You can add values for
the parameters in the dialog.
Figure 17 Show parameters button
 Figure 18 Component parameters panel
In addition, HTML5 custom component developers can use HTML/CSS based user
interface for its parameters.

WHAT IS ASSETS PANEL?

Assets panel contains ready to use assets, which can be used in your animation
projects. You can find Assets Panel in the tab group at upper-right corner in most
workspaces, along with Properties Panel.
If Assets Panel is not visible, you can enable it by selecting Windows>Assets. To use
assets from Assets Panel, drag-and-drop asset to the stage.
 Figure 19 Location of Assets Panel
SECTIONS IN ASSETS PANEL
Assets Panel has two tabs: -
➢ Default: Contains assets packages with Animate
➢ Custom: Contains assets exported by you

Figure 20 Tabs and Sections in Assets Panel

Default tab has three sections - Animated, Static, and Sound clips.
Custom tab has two sections - Animated and Static.

Animated section contains symbols having more than one frame. Static section
contains symbols with one frame and images. Sound clips contain sample background
and event sounds.

Search Assets
Type search text in the text box just below Default and Custom tabs. Animate
searches for assets with names matching the search text. Search results could be
across multiple sections, so make sure you expand all the sections to view search
results.
Filter Assets
Assets in Animated and Static sections can be filtered for quick search. The main
filter allows you to filter assets by categories such as Characters, Props, and
Background. The second filter is useful if you are looking for rigging assets. It allows
you to filter assets as Rigs, Rigs with Motion, or Objects.
Sound clip section allows you to filter assets based on types: -
➢ Background Sound
➢ Event Sound
Background sounds are typically longer than event sounds.

Figure 22 Filtering for Figure 23 Filtering Sound

Figure 21 Filtering Assets Rigging clips
Export Assets
There are two ways you can add assets to the panel. In the Libraries panel, select a
symbol you want to convert to asset. Right-click the asset, and then select
either Export Asset or Save As Asset option.
Export Asset: allows you to save the asset as a file, which can later be imported in
Assets Panel.
Save As Asset: allows you to directly save to Assets Panel without saving to a file.
Choose Export Asset option if you want to use the asset in another instance of
Animate, or if you want to share the asset with others.
Both options open Export Asset dialog box.

Figure 24 Export from Library

 Figure 25 Export Asset
You have number of options available when exporting Symbol as asset. You can choose
to export with combination of different attributes of the Symbol.
You can export Bones with or without motion and object, if the Symbol has an armature
layer.
You can export Object with or without Audio, if it is a not-rigged Symbol.
Motion and Audio can't be selected independently.
Depending on the options you select, Type field shows section of the Asset Panel
where Asset would be placed. Also note that exported assets are saved in
the Custom tab.
You can also specify comma-separated tag names, which are used during search
operation.
If you have selected Export Asset, click Export to open the File Save dialog box. If
you have selected Save As Asset, then exported asset is added to the Custom tab.
Import, Rename, and Delete Assets
Assets can be imported to the Custom tab of Assets Panel. Click the + button
at lower-left corner of the panel to choose a file. Select asset files .ana format.
 Figure 26 A - Import Asset, B - Delete
Asset, C - Rename or Delete Asset Figure 27 A - Download B - Delete C -
Rename or Delete
To delete an asset, select the asset and click the icon at lower-right corner of the panel.
You can also right-click the asset, and choose Delete. Rename the asset by choosing
'Rename' option from the menu.
Download Assets
You can download assets from Animate server by clicking Cloud icon at the lower-left
corner of Default tab. Assets are downloaded in small batches. Click the Cloud icon
multiple times to download more assets. Once all assets from the
server are downloaded, the cloud icon is disabled.