You would have seen many sites while surfing on the internet showing very nice animated characters, graphics and pictures. Web Animation is a very powerful and flexible medium to convey text or moving picture messages and create long-lasting impact on the mind of viewers. Whereas a static website despite delivering unique and meaningful content may not be able create impression on the mind of visitors. Web Animation in simple words is animation on the World Wide Web (www). Flash has changed the way of making animations and the way of their presentation; as nowadays in the rapid changing world animation and interactive web features has become an indispensable part of web development. Before you start to use any software to create animation or graphics, you must know about its workspace area. Flash is no different. When you first launch Flash, a welcome screen appears which is called the workspace. The Flash workspace is separated into different features with their own functionality.
In this unit you will come to know about the basics of Flash like the workspace, file formats and the procedure to set up a new Flash project.
When you start to work in Flash you create and keep in line your documents and files with the help of several different types of elements like panels, bars, and windows. Any arrangement of these elements is known as "workspace". When you first start an Adobe Creative Suite component, you see the default workspace, which you can customize for the tasks you perform there. For instance, you can create one workspace for editing and another for viewing, save them, and switch between them as you work.
The Flash Professional CS5 work area includes the command menus at the top of the screen and a variety of other tools and panels for editing and adding elements to your Flash movie. In Flash you can create all the objects you need for your animation in Flash, or you also can import elements you have created in Illustrator, Photoshop, Adobe After Effects, and other compatible applications. Flash by default shows the menu bar, Timeline, Stage, Properties inspector, Tools panel and a few other panels. While working in the Flash, you can open, close, dock, undock, and move panels around the screen to suit your style of working or the resolution of screen you want to use in your current document. It is described graphically in Figure 1.1.
Figure 1.1: Choosing Workspace
1.2.1 How to choose a new workspace?
Following are the steps to choose a new workspace:
1. Click the Essentials button at the top right of the Flash workspace and choose a new workspace. The various panels are rearranged and resized according to their importance to the particular user. For example, the Animator and Designer workspaces put the Timeline at the top for easy and frequent access.
2. If you have moved some of the panels around and want to return to one of the previously arranged workspaces, select Window > Workspace > Reset and the name of the preset workspace.
3. To return to the default workspace, choose Window > Workspace > Essentials. For instance, for our purpose we will be using the Essentials workspace. It will appear like the Figure 1.2.
Figure 1.2: Choosing a New Workspace
1.2.2 Saving your workspace
After choosing your workspace and creating any design, you need to save your document. If you find an arrangement of panels comfortable for your style of work, you can save the custom workspace to return to it at a later date.
1. In order to save your file click the Workspace button at the top-right corner of the Flash workspace and choose New Workspace. The New Workspace dialog box appears like shown in Figure 1.3.
Figure 1.3: Saving Workspace
2. Here in the dialog box you can enter a name for your new workspace then click OK. The current arrangement of panels is saved. Your workspace is added to the options in the Workspace pull-down menu, which you can access at any time.
Self Assessment Questions
1. In Flash documents files can be manipulated using various elements such as ........................., bars, and windows.
2. The arrangement of the elements like panels, bars and windows is called .........................
1.3 Using the Stage and Tools Panel
After learning about the workspace, for choosing workspace and saving the file you need to know about the stage and the tools panel used in the flash. The big white rectangle in the middle of your screen is called the Stage. This is where the Flash files are created using either image(s) that is imported in various formats. Basically, the Stage is the canvas that you work on. It contains the text, images, and video that appears on the screen. You can move elements on and off the Stage to move them in and out of view. You can use the rulers or grids to help you position items on the Stage. Additionally, you can use the Align panel and other tools. The figure 1.4 shows you a blank stage.
Figure 1.4: The Stage
In general by the default setting of the Flash, you'll see the grey area off the Stage where you can place elements that won't be visible to your audience. The grey area is known as the Pasteboard. To just see the Stage, choose View > Pasteboard to deselect the option. Your window will appear as in the Figure 1.5:
Figure 1.5: Adjusting the Pasteboard
1.3.1 Changing the stage properties
You can customize the stage as per your requirement. If you want to set the color and the dimensions of the Stage, these options are available in the Properties inspector, which is the vertical panel just to the right of the Stage. The Properties inspector panel will appear like the image in Figure 1.6.
Figure 1.6: Properties Inspector Panel
You can change the resolution and area of your image from the properties panel. At the bottom of the Properties inspector, you can change the desired resolution and size. (Note that the dimensions of the current Stage are set at 550 x 400 pixels). You can also choose a new colour for the background of your stage from here. The next tab in the same panel is Library where you can where you store and organize symbols created in Flash, as well as imported files, including bitmaps, graphics, sound files, and video clips.
1.3.2 Panels
Panels are the tools which control the most commonly used functions in Flash. Panels make the properties for altering and modifying content, so that you can make changes in them quickly. There are four Panel sets by default in Flash, each containing a collection of multiple Panels in each individual set. Flash panels serve different purposes such as the positioning and alignment of objects on the stage, the control and selection of color, a library of the objects and symbols used in the project. The Info panel shows you the sizes of images, and the work area in use. The mixer panel is used when you have to change the color of a graphic or text or you need to use a combination of different colors. Character panel is used to change the fonts type and their sizes. Instance panel is used to add instances in your document, which makes your work a little easy. You will learn about the instance further in this book.
By default your window will show you panels as in the Figure 1.7.
Figure 1.7: The Default Panel Set
Self Assessment Questions
3. The big white rectangle in the middle of the screen is called the...............................
4. The stage contains the text, images, and video that ............................... on the screen.
1.4 The Timeline
The timeline is the area on the screen where you will be working with layers and frames to alter your movie's content and animation. The Timeline is located below the Stage. You can change the content on the Stage for different frames. To display a frame's content on the Stage, move the playhead to that frame in the Timeline. At the bottom of the Timeline, Flash indicates the selected frame number, the current frame rate (how many frames play per second), and the time that has elapsed so far in the movie. You will stage a sequence of events over time, just as a director stages a sequence of events over time in a movie. In addition, because you can build interactive Flash movies, you can let the user select what part of the movie they wish to view. Furthermore, you use the Timeline to fine-tune or tweak your Flash movie, much like the editing process in traditional film where the editor assembles various pieces of the movie together, using time code to bring the pieces together at the right point in time. The Timeline bar in the Flash appears as in the Figure 1.8.
Figure 1.8: The Timeline Bar
The Timeline also comprises layers, through which you can organize your creation in your document. Think of layers as multiple film strips piled on top of each other. Each layer incorporates a different image that is displayed on the Stage, and you can draw and edit objects on one layer without disturbing objects on another layer. The layers are arranged in the order in which they overlap each other, so that objects on the bottom layer in the Timeline are on the bottom of this arrangement on the Stage. You can hide, show, lock, or unlock layers. Each layer's frames are unique, but you can drag them to a new location on the same layer or copy or move them to another layer.
Self Assessment Questions
5. The Timeline is the area which is used to assemble the Flash .........................
6. Each layer contains a different .........................that appears on the Stage.
1.5 Using Flash Authoring Panels
Till now you explored about the workflow and workspace, using the stage and tools panel and the timeline. But this is not the end. There are many more things to know. Now you will learn about using the authoring panels. The authoring panel consists of Property Inspector, Library panel, components panel and web services panel.
1.5.1 Property inspector
The Property Inspector is context-sensitive, and changes constantly to reflect your selections. In the Flash workspace, the property inspector appears at the bottom by default, but you can make it float as a separate panel. In order to create a floating Property Inspector in Windows, click the textured area in the top-left corner of the Property Inspector, and drag the panel away from the edge of the window. Property Inspector allows you to modify the objects selected on the stage. It displays specific information related to the objects you selected on the stage. For example, if you select the line tool the Property Inspector becomes the Line Tool Property Inspector. Property Inspector can also display and set an object's properties, including width, height, position, and fill color. Without going to main menus or panel you can modify the objects you selected. It displays information about the active Flash document, selected tool, selected graphics, text block, a bitmap or video clip, or a selected frame. The Property Inspector is also the place for setting many tools' parameters and for changing the attributes of selected elements. If you select two or more than two objects on stage, the Property Inspector shows the total number of selected.
The Figure 1.9 shows you the properties of the text and the size of the fonts.
Figure 1.9: The Property Inspector showing the Properties for the Text Tool
Shortcut: To see the Property inspector, Select Window > Properties, or press Control+F3.
1.5.2 Library panel
Flash content that you import or that is a symbol is stored in your Library panel. You can store and organize symbols made as well as imported files, comprising bitmap graphics, sound files, and video clips in the Library. Thus, Library panel is a storehouse. You can store reusable elements in it. Imported sounds and bitmaps are automatically placed in the library. You can organize library items in folders with the help of Library panel. An item is used in a document, and sort items by name, type, date, use count, or ActionScript linkage identifier. There is a menu called 'Panel Sets' under the Windows menu. In panel sets, you can load all the predefined panel sets, and you can also save your own panel set from the 'Save Panel Layout' menu. Whenever need arises, you can open up all the panels while authoring and save it as a new layout.
In Adobe' Macromedia Flash 8 Professional, the Library Panel has been greatly improved. The panel opens automatically when Flash starts. The Flash 8 has only one Library Panel regardless of the number of open files. This one panel includes a new drop-down menu that provides quick access to the different Libraries. You can drag items from any of the Library panels regardless of which file you are actively working on. This makes it easy to share library items between movies.
Figure 1.10: The Library Panel showing a Movie Clip Symbol
1.5.3 Actions panel
The Actions Panel is the place that enables you to add, view and edit ActionScript for an object or frame. ActionScript is the scripting language that allows us to add interactivity to our Flash movie and to control Flash objects. You can create ActionScript in the Action panel. Everything that we introduce in Action Panel will be reflected later in our movie. Using the Arrow tool, you select the frame, button, or movie clip with which you desire to link ActionScript; then you can open the Action panel. To open the Actions panel, choose Window > Actions. All of the scripts you write for Flash will be placed within the Actions Panel. When you are working directly in Flash there are two places where you can add scripts: Object and Frame. ActionScript can be added to a movie clip, button or object on the Stage. Scripts can also be placed in the Timeline in a specific frame. The Actions Panel is divided into two parts: (i) on the left we have a help facilitated by Flash that gives us access to all the actions, objects, properties etc. These elements are divided in folders that contain more folders classifying effectively everything what Flash places at our disposal. To insert them in our script it will be enough to double click the chosen element. (ii) On the right side we have the space to place our script, here will appear what we are inserting. It also includes utility tools, like the search of words, the possibility of inserting break points, the tool to Review Syntax and the Flash help for ActionScript.
The Actions Panel has two different editing modes: (i) normal mode and (ii) expert mode. In Normal Mode you can write actions using parameter (argument) fields that prompt you for the correct arguments. In Expert Mode you can write and edit actions directly in a text box, much like writing script with a text editor. The Action Panel title, depending upon what have been selected, changes to Button Actions, Frame Actions, or Movie Clip Actions. For example if you select a button or movie clip, the Action Panel title changes to Object Action and if you select a frame, the Action Panel title changes to the Frame Actions. It is shown in the figure 1.11
Figure 1.11: The Actions Panel showing a stop() Action in a Frame
Note: For more information about the Actions panel, choose Help > Using Flash and search for the using the Actions Panel topic.
1.5.4 Movie explorer
Like Actions Panel, Movie explorer panel is also an indispensable part of authoring tools available in Flash. The Movie Explorer helps you arrange, locate, and edit media. It is a powerful tool for deciphering movies and finding items within them. To open the Movie Explorer, choose Window > Movie Explorer (Option/Alt+F3). With its hierarchical tree structure, the Movie Explorer provides information about the organization and flow of a document.
The Movie Explorer allows you to browse everything in your scene in a tree format. You can see every element in its relationship to all other elements, and you can see this all in one place. You can use this to select items to edit without having to try to click them from a tangle of objects in a complex scene or find them when they are hidden under something else.
Following functions can be performed by the Movie Explorer:
The Movie Explorer can provide an excellent map to the structure and function of what you have already accomplished.
Movie Explorer can filter the items categories in the document.
Movie Explorer can function as project documentation for finished work, providing a reference of all scripting and Movie Clip placement.
With the help of Movie Explorer you can search for an element in a movie by name.
With the help of Movie Explorer one can exhibit the selected categories as scenes, symbol definitions, or both.
Movie Explorer is able to expand and collapse the navigation tree.
You can replace one or more occurrences of a font with another font.
You can search for an element in a movie by name.
One can be familiar with the structure of a Flash movie created by another developer.
With the help of the Movie Explorer you can find all the instances of a particular symbol or action.
Movie Explorer can also Print the navigable display list currently displayed in the Movie Explorer.
The Movie Explorer has a Panel menu and a context menu having options for executing operations on your selected objects or items or changing the Movie Explorer display.
1.5.5 Flash components and the components panel
Since Flash MX, you will find that Flash contains a Components Panel. Flash MX Components introduce a powerful new tool for the Flash developer, expanding the application of Flash 5 SmartClips. Components add a special potentiality to the document created in Flash. Components can comprise graphical front end and integrated code to complete their purpose. However, code-only components are also sometimes used as ActionScript libraries to expand the capabilities of the language. A component is comprised of user interface controls, data access and connectivity mechanisms, and media-related elements. A component can be, for example, a radio button, a dialogue box, a preload bar, or non-graphic elements, such as, a timer, a custom XML parser or a server connection utility.
For using Components, you should first define the visuals for the triangle and then write the ActionScript within a movie clip for the triangle class, properties, and methods. After that the Component can be placed in a movie, consequently, the class constructor is invoked. Methods allow us to access the properties and manipulate the visuals. In case, you are not familiar with ActionScript writing, you can use components in your document. You can also set their parameters in the Component Inspector or Property inspector, and use the Behaviors panel to tackle with their effects.
Inserting a component using the component panel
After adding a component in a document, the component is imported as a movie clip into the Library panel. A component can also be dragged from the Components panel right away. Then you can put it into the Library Panel and then add an instance of it to the Stage.
Entering parameters for a component using the component inspector
In order to enter parameters for a component using the component inspector you will have to do the following steps:
1. To open Component Inspector, click it and drag it to the Stage. If the Component inspector is not open, then select Window > Component Inspector.
2. In the Component Inspector, select a component instance on the stage.
3. Click on the Parameters tab, Flash lists the component's parameters. You can change the default value to assign a new value for any of the listed parameters.
Self Assessment Questions
7. The authoring panel consists Property Inspector, Library panel, ................................. panel and web services panel.
8. The Actions panel helps you create and edit ................................. code for an object or frame.
1.6 Accessibility in the Flash Workspace
With the help of accessibility support in the authoring environment you can use the keyboard shortcuts to navigate and use interface controls, comprising panels, the Property inspector, dialog boxes, the Stage, and objects on the Stage, and thus you can work with these interface elements even without using the mouse. Workspace Accessibility Commands section of the Keyboard Shortcuts dialog box is used, in order to customize the keyboard for accessibility in the authoring environment.
1.6.1 Select panels or the property inspector with keyboard shortcuts
A keyboard shortcut allows you to make your program faster. Also, it is often easier than using a mouse to access the pull down menus. To select a panel or the Property inspector, you should press Control+F6 for operating software Windows and Command+F6 for operating software Macintosh.
There are some criteria that should be kept in mind while using keyboard shortcut to select panels. Firstly, focus should be on docked panels. After pressing control+F6, focus is applied on the timeline, if the timeline is showing docked panels, otherwise the focus should move on to the rightmost and highest docked panel. If you repeatedly press control+F6, focus moves through the other docked panels from right to left and from top to bottom on the workspace. After moving the focus on to all the docked panels, focus moves to that floating panel which is rightmost and highest. Subsequently, focus moves through all the floating panels in the same order as in the case of docked panes.
Using the keyboard shortcuts to select or deselect, expand, or collapse panels or the property inspector
When you press Control+F6, a dotted line appears around the title of the presently focused panel. You can move the focus to the previously selected panel by pressing Control+Shift+F6 (if you use operating software Windows) or command+Shift+F6 (if you use operating software Macintosh). Then, in order to deselect a panel, press Escape, or move, dock, or undock the panel. If you want to move the focus to the panel above the presently focused panel in a panel group, press Up Arrow and vice versa. By pressing F4, you can hide all the panels as well as Property inspector. If you press F4 again, all panels and the Property inspector will be displayed again in the workspace.
A collapsed panel displays only its title bar, so it does not take up much space. Use the arrow on the left side of the title bar to collapse or expand a panel or click its title bar.
1.6.2 Selecting the stage or objects on the stage using keyboard shortcuts
By clicking on the stage, you can select the Stage. If you select the Stage, all other elements previously selected become deselected. You can also select Stage by pressing shortcut keys Control+Alt+Home if you use Windows as operating software. If you use Macintosh, you can use Command+option+Home, to select Stage. Tab key is used to select object on the stage. By pressing Shift+Tab, you can select previously selected object. Keyboard shortcut cannot be used to select two or more than two objects at a time. Also, hidden or locked objects cannot be selected by using shortcut keys.
1.6.3 Working with the library items using keyboard shortcuts
The Library stores all of your symbols so you can reuse them later. everything you use in your Flash movie will end up in the Library. You also can work with the library items using the keyboard shortcuts. If you want to cut a library item press Control+X (if you are Windows user) or press Command+X (if you are Macintosh user). To copy an item, Windows users can press Control+C and Macintosh users can press Command+C. For pasting an item, first click the Stage to create blank space and then press Control+V or Command+V depending on the operating software you are using.
Following points must be kept in mind while copying or pasting library items using keyboard shortcuts:
Items copied or cut from the library panel can be pasted in a folder in another library or on other Stage. Try to organize library items in folders to minimize name conflicts while copying items.
To retain existing items in the destination document, click Don't replace existing items.
With the destination document open, select the item in library panel in the source document and drag the item into the library panel in the destination document.
To paste the item in the center of the space, place the pointer on the Stage and select Edit > Paste In Center. To paste the item in the same location as in the source document, select Edit > Paste In Place.
Always remember, A shape cannot be pasted from the Stage into the library. Also, you should not paste a library item into a common library because you cannot modify common libraries.
To paste a library item into a folder in the destination document, click the folder before pasting.
Self Assessment Questions
9. Selecting the Stage with a keyboard shortcut is equivalent to clicking on the .................................
10. To move the focus to the Panel menu of the panel ................................. keys are used.
1.7 Undo, Redo and Repeat Commands
You can use the undo, redo and repeat commands in the Flash similarly as you use in the word processor. To undo or redo actions on single objects, or all objects within the present document, you should assign whether you want to use either object-level or document-level Undo and Redo commands. However, in Flash the default behavior is document-level Undo and Redo.
But, remember that you cannot undo some actions when you are using object-level Undo command set by you, like entering and exiting Edit mode; selecting, editing, and moving library items; and creating, deleting, and moving the scenes.
Use the Save and Compact command, to remove deleted items from a document after using the Undo command.
Use the Repeat command, to reapply a step to the same object or to a different object.
Flash by default supports only 100 levels of undo for the Undo menu command. But you can customize it by selecting the number of undo and redo levels, from 2 to 9999, in Flash Preferences.
When you undo a step by using Edit > Undo or the History panel, the document's file size does not vary, even if you delete an item in the document by default settings of the Flash. For instance, if you import a video file into a document, and undo the import, the file size of the document still comprises the size of the video file. Similarly when you delete any items from a document when performing an Undo command they are preserved in order to be able to restore the items with a Redo command. Select File > Save and Compact, if you want to remove an item permanently the deleted items from the document, and cut down the document file size.
The History panel
The History panel displays a list of the steps you've executed in the current document since you created or opened that document, up to a stipulated maximum number of steps. The slider in the History panel initially indicates to the last step that you performed.
Use the History panel to undo or redo individual steps or multiple steps at once. Apply steps (undo or redo) from the History panel to the same object or to any other object in the document. Nonetheless, you cannot rearrange the arrangement of steps in the History panel. The History panel is a record of steps in the order in which they were executed.
Clear the History panel to erase the history list for the current document. You cannot undo the steps that are cleared after clearing the history list.
Closing a document clears its history. You should copy the steps with the Copy Steps command or save the steps as a command, to use steps from a document after that document is closed, if you feel that you might need to perform undo later on.
Self Assessment Questions
11. To undo or redo actions on individual objects, or all objects either object-level or document-level Undo and Redo commands are .................................
12. The slider in the History panel initially points to the last ................................. step.
1.8 Automating Tasks with the Commands Menu
You can also automate the tasks with the Commands Menu.
1.8.1 Create and manage commands
If you want to repeat the same task, create a command in the Commands menu from steps in the History panel so that you can reuse the command. Steps replay just as they were earlier performed. You can't alter the steps as you replay them. Saved commands are held back permanently by the Flash, unless you delete them. But remember that the steps that you copy using the Copy Steps command of the History panel are disposed when you copy or cut something else.
1.8.2 Steps that can't be used in commands
Some tasks can't be repeated or saved as commands using the Edit > Repeat menu item. These commands can be undone and redone, but they cannot be repeated. For instance, actions performed for selecting a frame or modifying a document size.
Activity 1:
You read this unit now can you suggest what advantages does the Adobe Flash have over other software used for animation.
Self Assessment Questions
13. Steps can't be modified while ................................. them.
14. Steps that are copied using the History panel Copy Steps command are ................................. when something else is copied.
1.9 Summary
In flash you can create unique text, animations, movies, web applications, games and more. Although flash is somewhat more complex than traditional web development technologies like HTML and CSS. In this unit you learned about the main elements of the Flash interface, dock, resize, and customize the Flash workspace, Restore default Panel layouts, access Preferences, authoring tools and panels. This unit explained you to make your animations, editing, deleting and saving the animated movie.
1.10 Glossary
Accessibility: Making a project usable to people with disabilities.
ActionScript: Based on the same standard as JavaScript, ActionScript is a simple programming language. Flash designers and developers can use it to customize the behavior of a movie and enhance it with interactivity.
Color change: Color change changes the color of an object.
Layer: A layer is a section where you can include a specific portion of an animation such as just a background, or a face, or eyes.
Work area: The area used to create Flash art. It includes the areas adjacent to the Stage.
1.11 Terminal Questions
1. What are the main areas of the Flash workspace?
2. How are the Stage and the Timeline related?
3. Which are the authoring panels of the Flash?
4. What do you mean by accessibility in the flash workspace?
1.12 Answers
Self Assessment Questions
1. panels
2. workspace
3. stage
4. appear
5. movie
6. image
7. components
8. ActionScript
9. stage
10. arrow
11. specified
12. performed
13. replaying
14. discarded
Terminal Questions
1. The menu bar, Timeline, Stage, Tools panel, Properties inspector, and a few other panels. Refer section 1.2
2. Timeline shows the sequence and time of the images on the stage. Refer section 1.3 & 1.4
3. Property panel, Library panel, actions panel, movie explorer panel, Flash components panel and, web services panel. Refer section 1.5
4. Accessibility support in the authoring environment provides keyboard shortcuts for navigating and using interface controls, including panels, the Property inspector, dialog boxes, the Stage, and objects on the Stage. Refer section 1.6
