UNIT-5HOW TO CREATE BUTTONS IN FLASH :

1. Choose Insert→New Symbol . The Create New Symbol dialog box appears.

2. Type a name for your symbol and choose the Button behavior from the Type drop-down

menu.You’re creating a menu, and the obvious place to start a menu is with the Home

button. Therefore, name the button Home.

a.

3. Click OK and Flash enters symbol-editing mode.

4. You have one layer as well as four states, each driven by the user’s cursor position: Up, Over, Down, and Hit. This state determines the target area of the button. You add the Hit state if you have a particularly dainty button that might be hard to select.

5. If it’s not already open, choose Window→Properties.The Properties Inspector opens.

6. Create the shape size for your button.When creating buttons, use the Rectangle tool with a corner radius of 50 px to get an oval shape. Before creating the shape, change the Rectangle Options value in the Properties Inspector to 50, which gives you a nice rounded edge. Choosing View→Rulers enables you to create an object that’s the approximate size of the button.

7. Select the button shape, and in the Properties Inspector, type the desired dimensions for your button in the width and height fields.To figure out what size to make each button, divide the width of your navigation menu by the number of buttons. In this example, you’re creating six buttons for a navigation (nav) menu that’s 600 pixels wide and 25 pixels high. Therefore, each button is 100 pixels wide and 25 pixels high.

8. Select and then align the button to the center of the Stage. Press Ctrl+K (Windows) or Apple+K (Mac) to open the Align panel. Select the To Stage check box, and then click the icons that center the button vertically and horizontally.

9. Click the New Layer button in the lower-left corner of the Timeline.Flash creates a new layer. All you need to know about layers for now is that layers help you organize your work. For the button, you’re creating a separate layer for button text.

10. Double-click the button text layer title. This opens a text box into which you can type a new name for the second layer. It’s not imperative, but crafting an intuitive name now helps you decipher later which layer is used for what when you’re creating a complex movie or symbol.

11. Enter a name for the layer.Text is as good a name as any. While you’re at it, rename the layer on which the button resides. Button Shape is a good name.

12. Select the Text tool and type the desired name. In this case, the button is called Home. When a visitor clicks this button, he goes to the home page.A full-blown tutorial on the Text tool is beyond the scope of this book. However, if you look at the Properties Inspector, you see how easy it is to set parameters for the Text tool.

13. Press F5 in the Down frame on the Text layer. This copies the contents of the Up frame to the Over and Down states

14. Press F6 to create keyframes for the Over and Down states on the Button Shape layer.Creating keyframes enables you to change or modify the contents of these frames, or make some other change that will notify users they have indeed found a clickable button. The graphic on the Down state appears when users successfully click the button

15. Make changes in the Over and Down states for the Button Shape layer.Click the Back button (looks like an arrow, and is left of the Scene title above the uppermost layer).The button is added to the Library and is ready for use.

BUTTON ACTION

1. Add a new layer to the Button Animation Timeline and name it Actions.

2. On the Actions layer, add a keyframe to Frame 15 by pressing F6.

3. Open the Actions panel (Window > Actions) and if necessary, enlarge it to view both the Actions toolbox and the Script pane.

4. With Frame 15 of the Actions layer selected, go to the Global Functions > Timeline Control category of the Actions toolbox and double-click stop.

The stop action lets you specify that the playhead stop when it reaches Frame 15.

In the Button Animation Timeline, Frame 15 of the Actions layer now displays a small a, which indicates that an action is attached to that frame.

5. Click Scene 1, above the Stage, to exit symbol-editing mode and return to the main document.

6. Click the pop-up menu control in the upper-right side of the Actions panel, and select Close Panel.

7. Select Control > Enable Simple Buttons so you can test the animated button.

8. On the Stage, move the pointer over the button and click the button.

9. Select Control > Enable Simple Buttons to deselect that feature.

Frame events (frame actions)

Whereas user interaction triggers mouse and keyboard events, the timeline triggers frame events, which are also known as frame actions because they are attached to frames and always trigger an action.

Frame events—which are always placed at keyframes—are useful for actions that you want to occur at certain points in time. For example, a Stop action will cause your movie to halt, and a Go To action will cause your movie to jump to another frame or scene on the timeline.

To create a frame event that triggers an action:

1. Double-click the key frame where you would like the frame event to occur.

The Frame Properties dialog box appears.

2. Click the Action tab.

3. Click the plus sign ("+") to assign an action or actions that you want triggered when the timeline reaches this key frame.

4. For our demonstration, choose the Stop action, which will cause your movie to stop playing.

The Actions pane displays your completed ActionScript. Notice that even though this is the same action that was assigned to the mouse event we configured earlier, the script is different: It lacks the On (Release) and End On statements, which are only required to define mouse or keyboard events (because both can take so many forms). A frame event can only be triggered one way—by the timeline reaching that frame.

5. Click OK.

When the movie is played, it will perform the action when the timeline reaches this key frame.

To create a movie clip

1. Choose Insert > New Symbol.

The Create New Symbol dialog box appears.

2. Type a descriptive name for your movie clip symbol, choose Movie Clip as the Type, and click OK .

Create a new movie clip symbol by naming it and selecting the Movie Clip Type.

You now enter symbol-editing mode.

3. Create the graphics and animation on the movie clip timeline  .

The pondRipple movie clip symbol contains two shape tweens of an oval getting bigger and gradually fading.

Notice how the navigation bar above the Timeline tells you that you’re currently editing a symbol.

4. Return to the main Stage.

Your movie clip is stored in the Library as a symbol, available for you to bring onto the Stage as an instance  .

Browsers and Networks:

BROWSERS:

Browsers using Flash® include the following.

Firefox® 48 and lower Internet Explorer®

Safari

NETWORKS:Flash Network is a set of library and application to allow building any type of network applications running in the browser. It defines extensive Javascript API for various network socket feature such as DNS resolution, client and server TCP socket, generic UDP socket and real-time RTP/RTCP socket. It uses Flash Player and Adobe Integrated Runtime (AIR) to

facilitate seamless integration with your web application. The idea is to allow any type of network application including multimedia communication application from your web page. 

BEYOND THE BASICS ACTIONS:

About ActionScript:ActionScript is the programming language for the Adobe® Flash® Player and Adobe® AIR™ run-time environments. It enables interactivity, data handling, and much more in Flash, Flex, and AIR content and applications.

ActionScript executes in the ActionScript Virtual Machine (AVM), which is part of Flash Player and AIR. ActionScript code is typically transformed into bytecode format by a compiler. (Bytecode is a type of programming language that’s written and understood by computers.) Examples of compilers include the one built in to Adobe® Flash® Professional and the one that is built in to Adobe® Flash® Builder™ and available in the Adobe® Flex™ SDK. The bytecode is embedded in SWF files, which Flash Player and AIR execute.

Interface Elements :

To design and deliver Flash documents, you work within the Adobe Flash authoring environment. The Quick Start page provides easy access to your most frequently used actions. The stage contains the visible elements, such as text, components, and images of the document. The Timeline represents different phases, or frames, of an animation. The Tools panel provides the tools used to create and manipulate objects on the stage. The Edit bar tells you what you are currently working on and gives you the ability to change the magnification level of the stage. The panels provide access to a wide variety of authoring tools.

Panels:

Panels are Flash screen elements that give you easy access to the most commonly used features in Flash. Panels help you view, organize, and change elements in your Flash document. Panels can have different appearances or states and are categorized into different types based on function.

Panel States :

Panels have three states:

Open—Visible in the interface with a content window

. Collapsed—Visible in the interface as only a title bar with the content window hidden.

Not visible in the interface.

Panel Types :

Panels are divided into three different types.

Panel Type Included Panels

Design Align

Color

Swatches

Info

Scene

Transform

Development Actions

Behaviour

Components

Component Inspector

Debugger

Output

Web Services

Other Accessibility

History

Movie Explorer

Strings

Common Librarie

Procedure Reference Dock and Undock the Panel:

To dock and undock the panel:

1. Choose Window→[panel] to open the panel.

2. In the panel, click the title bar and drag it to another panel to dock the panel with the already existing panel. This creates a group of docked panels.

3. In the panel group, click the tab of the docked panel and drag it out of the panel group to undock the panel.

4. If necessary, close the panel.

Collapse and Expand the Panel :

In a panel, click the title bar to collapse and expand it. You can also click the Minimize button to collapse and expand the panel. The panels are collapsed to icons by clicking the Collapse to Icons option indicated by two right pointing arrows on the top-right corner of the application.

The Tools Panel:

The Tools panel is divided into four sections. You can use the tools in the Tools panel to draw, paint, select, and modify artwork, as well as change the view of the stage.

Area On Tools Panel Description

Tools Contains drawing, painting, and selection tools.

View Contains zooming and panning tools.

Colors Contains tools for setting stroke and fill colors.

Options Displays options for the selected tool that affect the tool's painting

Or editing operations.

LAYER FOLDERS:

Many graphics and animation programs use layers, so it’s useful to understand how they work. In Flash, working in layers is very important. They make animation easier, they allow you to keep the elements of your animation separate, and they allow you to create scenes with the appearance of depth.

Think of layers as sheets of transparent paper arranged in a stack. Each layer is a separate thing, but when you have a stack of layers, each with drawings on them, they can create an entire scene. You can work on one layer without worrying about messing up the other layers. For

instance, if you want to erase something on a layer, you can do it without worrying about erasing anything on other layers. You’ll also find it easier to animate multiple characters if you put them on different layers.

Layer2 layer2

The Basic Layer Panel

In Flash, the layers palette is located at the top left of the Timeline palette. If the Timeline palette is not open, you can bring it up by going to your Window menu and choose Timeline. You start with a single layer, as shown in the image above. After you add more layers, you can choose which layer you want to work on by clicking once on the layer name. The active layer will have a light blue background, and inactive layers will be white.

Layers Tools:

Click to add a new layer. Later versions of Flash do not have a + on the “new layer” icon.

Click to delete a layer.

Click the black dot in this column next to a layer to lock or unlock a layer. Click the the lock symbol at the top of the column to lock or unlock all layers. Locking a layer prevents you from doing any work with that layer, so if you don’t want to accidentally do anything to a layer, it’s a good idea to lock it. I usually lock all the layers I’m not currently working on.

Click the black dot in this column next to a layer to hide or reveal layer. Click the symbol at the top of the column to hide or reveal all layers. You’ll want to hide layers when something on them is covering up something you’re working on in another layer.

Add Motion Layer. This is more advanced and not something to worry about right now. You may not see this, depending on your version.

Add a layer folder. You can use these to organize your layers when you have lots of them. You can click and drag any layer into a folder. Later versions of Flash do not have a + on the folder icon.

Naming Layers:

It’s a good idea to name layers so you can easily identify their contents (call the background layer “background”, for example). Double click on a layer’s name, and a white box will appear around the layer name with the text inside highlighted (as shown in the image above). Simply type a new name. Choose something descriptive: when you have a bunch of layers, it’s good to know what’s on each layer by simply looking at the names.

Layer Order:

You can rearrange layers by clicking on the layer and dragging. As we discussed at the beginning, things in higher layers will cover art in lower layers.

The person layer is at the top of the Layers list

The person is in front of the wall because the person layer is above the wall layer.

The wall layer is at the top of the Layers list

The person is behind the wall because the person layer is beneath the wall layer.

Renaming Layers:

The names Flash gives the layers you create—Layer 1, Layer 2, Layer 3, and so on—aren’t

particularly useful when you’ve created 20 layers and can’t remember which layer contains the

ocean background you spent 10 hours drawing. Get into the habit of renaming your layers as

soon as you create them, and you’ll have an easier time locating the specific elements you need

when you need them.

Copying and Pasting Layers:

To copy and paste a layer:

1. In the timeline, click the name of the layer you want to select.

Flash highlights the layer name, as well as all the frames in the layer.

2. Select Edit→Timeline→Copy Frames.

If you don’t have a layer waiting to accept the copied frames, then create a new layer now before

going on to the next step.

3. In the Layers window, select the name of the destination layer. Then choose

Edit→Timeline→Paste Frames.

Flash pastes the copied frames into the new layer, beginning with the first frame. It also pastes

the name of the copied layer into the new layer.

Deleting a Layer

Flash gives you three ways to delete a layer:

o In the timeline, right-click (Control-click) the layer you want to delete and then, from the

shortcut menu that appears, choose Delete Layers.

o Drag the layer you want to delete to the trash.

o Click the layer you want to delete to select it (or Shift-click to select several layers), and

then click the trash can.

Locking and Unlocking Layers

Working with layers can be confusing, especially at first. So Flash lets you lock individual layers

as a kind of safeguard, to keep yourself from accidentally changing content you didn’t mean to

change:

o To lock a layer, click the dot under the padlock, as shown in Figure   4-20 . When you do,

the dot turns into a little padlock icon and deselects any objects that you’d selected on the stage

in that layer. If you locked the active layer, Flash draws a slash through the pencil icon next to

the layer’s name as a visual reminder that you can’t edit it.

o To unlock a layer, click the padlock (Figure   4-20 ). Instantly, the padlock turns into a

dot, Flash reselects your objects, and you can edit them once again on the stage.

o To lock (or unlock) all your layers all at once, click the Lock or Unlock All Layers

icon (padlock at the top). Click the icon again to return to unlocked (or locked) layers. Ctrl-

clicking (⌘-clicking) on any Show/Hide button also locks or unlocks all layers.

o To lock (or unlock) all layers except one, Alt-click (Option-click) the dot or padlock in

the layer you want to edit.

Organizing Layers with Folders

When your animation has only a handful of layers, organization isn’t such a big deal. But if you

find yourself creating 10, 20, or even more layers, you’ll want to use layer folders to keep your

layers tidy (and yourself from going nuts).

A layer folder is simply a folder you can add to the Layers window. Layer folders aren’t

associated with frames; you can’t place images directly into them.

Instead, layer folders act as containers to organize your layers. For example, you might want to

put all the layers pertaining to a certain drawing (like a logo or a character) into a single layer

folder and name the folder logo or Ralph. That way you don’t have to Creating Layer Folders

To create a layer folder:

1. Click the name of a layer to select it.When you create a folder, it appears above the selected

layer; but you’ll be able to drag your folder and its contents to a new location.

2.Click the Insert Layer Folder icon. (If you prefer, you can choose

Insert→Timeline→LayerFolder or right-click the layer, and then, from the shortcut menu that

appears, choose Insert Folder.)

3. Drag layers onto the layer folder.If the folder is already expanded, you see the layers appear

beneath it. If the folder is closed, then click the triangle button to view the layers inside.

Deleting a Layer Folder

To delete a layer folder, and all the layers and folders inside, right-click the layer folder, and then, from the shortcut menu that appears, select Delete Folder. Flash pops up a warning message informing you that you’re about to delete not just the folder, but also everything in it. If that’s what you want, then click Yes; otherwise, click no.

ACCESSIBILITY:This Accessibility Guideline is probably one of the most contentious and difficult to interpret. In many cases the potential accessibility of a non-W3C application that requires specialist software is determined by three factors:

The inherent accessibility of the application, or application version.

The availability of user software (readers) to render the application, and the technological capacity needed for that software.

The ability of current assistive technologies to access content generated by the application and rendered by the user software.

The Move to Accessibility

With the release of Flash Player 6 in 2002, Macromedia provided a player that supports Microsoft Active Accessibility (MSAA) to serve as a link between appropriately made Flash material and assistive technologies. At the time of the release, only Window-Eyes (from GW Micro) supported the accessible Flash content. A short while later Freedom Scientific released a new version of JAWS, the most widely used screen-reader, which could also access Flash 6 material.

MAKING ACCESSIBLE FLASH:

The Macromedia Flash MX authoring tool was designed to help developers create accessible Flash content. The inclusion of an accessibility panel (more later) in Flash MX allows designers to add names and descriptions to whole Flash movies and objects within movies in a similar way to ‘alt’ and ‘longdesc’ text equivalents for HTML images. Text equivalents can also be can also be assigned to buttons, however each graphic should be contained in its own movie clip and given an instances name.

Using the Accessibility Panel

A central new feature of Flash MX is the addition of an accessibility panel that enables designers to control the accessibility of a Flash movie and some elements of a movie. The accessibility of graphics can also be enhanced, but only after they are converted into movie clips.

To address the accessibility of a whole movie, rather than the individual elements it may contain, select only the movie. Selecting the different elements in a Flash movie will activate an accessibility panel with the relevant options for that selection.

Make Movie Accessible:

This option is selected by default and can be used to provide a text equivalent name and clear description for a movie. Names and descriptions should also be provided for different elements within a movie as they are created.

Deselecting this option will hide a Flash movie that provides no content from assistive technologies.

Make Child Objects Accessible:

Also selected by default, this feature allows objects (elements) within a movie such as buttons to be more accessible. Screen readers will identify the different objects by speaking their names as they are encountered.

By deselecting this option, child objects can be hidden. In the case of text animation this will also prevent screen readers from reading the animation text.

COMPONENTS:

Components are prebuilt interface elements (widgets) that will speed up programming of interactive Flash pages.Flash has a few built-in components (called widgets or gadgets in other contexts) and that will allow to you to build an interactive environment more quickly than by coding all by yourself.

Open the component library (Window->Components or CTRL-F7) Drag a component to the stage Fill in some parameters Add some ActionScript code that will handle user action events.

To open the component library

Window->Components or CTRL-F7 I suggest docking it against your library.

Using components

Open the component library (Window->Components or CTRL-F7) Drag a component to the stage. This will also add this component to the library.

Once a component is in your library, just drag it from thereComponent assets

Adding a component to the stage or to the library also will copy necessary Component Assets in a folder. Do not delete this folder !

If you wish you can then change the components skins (i.e. the graphical representation) by editing these elements (but make sure that you know what you do).

Sizing components

With the free transform tool (or similar) you can resize component instances

Just click on it on the stage and do it Alternatively set the size through the parameters or properties panel.

In any case, you do not need to fiddle with component internals ....

Various button componentsButton

“The Button component is a resizable, rectangular button that a user can press with the mouse or the spacebar to initiate an action in the application. You can add a custom icon to a Button. You can also change the behavior of a Button from push to toggle. A toggle Button stays pressed when clicked and returns to its up state when clicked again

CheckBox

“A CheckBox is a square box that can be selected or deselected. When it is selected, a check mark appears in the box. You can add a text label to a CheckBox and place it to the left, right, above, or below the CheckBox” 

RadioButton

“The RadioButton component lets you force a user to make a single choice within a set of choices. This component must be used in a group of at least two RadioButton instances. Only one member of the group can be selected at any given time. Selecting one radio button in a group deselects the currently selected radio button in the group. You set the groupName parameter to indicate which group a radio button belongs to.” 

List-based componentsLists

These components are based on lists

A list is a row Rows can have columns A cell is either an element of a simple row or the intersection of a row with a columnSWC components

Components can be distributed as *.swc files. A *.swc component is a compiled movie clip that you can't edit. You still may edit its properties. They publish faster than *.fla component.

FLA components

“A FLA-based component is a movie clip that is editable by a Flash developer. When you drag a FLA-based component from the Components panel to the Stage or to the Library, behind the scenes it is just as though you opened a FLA file as an External Library and dragged in a symbol from that Library.

INTERFACE COMPONENTS:

Accordion: This component is a clickable menu to display different Flash content in the same space-saving frame. An example of a situation when you would use the accordion component, would be when creating a flash web site that needs various customer forms to process information in an organized way. 

Alert: This component is similar to that of a JavaScript component that will display a popup window with a message of a detailed alert that usually functions within a form. The alert component is a pop-up message to communicate to the specific user that is viewing your project. This is often used as an error function to report invalid content within a form that needs to be changed or typed again.

Button: A button is a clickable region that processes information. You will usually use the button component when using a form within flash. If you wish to create a fancier button beyond what the default settings of flash provide, you can simply create a button symbol and modify it that way by using various stages of up, down, hit, and over.

Checkbox: This is form component used to allow the user to select multiple options within a field or question. For example if you were filling out a form at a Doctor's office that needed information on past illnesses and surgeries and a list was given to you of various things you could have went through. The user would be able to check off the ones that apply to them.

ComboBox: This component is exactly the same as a drop down menu provided by most user interfaces when selecting one specific option out of a list of options.

DataGrid: Think of this component as a table of rows and columns that displays data. You would usually this component when you want to transfer data from your server and display it in a flash table form. However, you could also use this to collect local data gathered by local forms within a flash project.

DateChooser: This component is basically a clickable calendar in which the user can select a date without guessing the format it should be in and type from scratch. This saves all the time for date processing, wither its a news post, a date of an important event, or a birthday. This component comes in hand when, for example, you’re putting together an online event scheduler and you want people to be able to click different dates to see a list of the vents scheduled for that date.

DateField: This is a combination of a the above component of a "Date Chooser" and a "text field", the Date Field component visually reinforces a person's choice by filling a text field with the date he/she selects. For example, if a calendar is displayed with clickable links of the dates within that month, somewhere around that calendar will be text fields that will display the actually date you selected within that calendar.

Label: This component let you add a single line of no editable, no clickable text to your flash project. This is commonly used as a short description tool to name fields or large bodies of text.

List: You would use the list component to create a clickable, scrollable list form which someone can "Shift + Click" to select multiple options. This component is fairly close to the "Combo Box" component except the available options can be selected within a window instead of a drop down and multiple selections can be made.

Loader: A loader component is a no scrollable window that lets you display an animation or bitmap image along with your main animation. By customizing the Loader component, you can show the animation or bitmap full-size or modify it to match the Loader dimensions you set.

Menu: This component is very useful if you’re creating a full-fledged program in flash and want to let your audience navigate your program by choosing from familiar drop-down menus. The menus you create using the menu component are similar in style and function to the file and edit menus in flash , although you do have to have quite a bit of Action Script knowledge to customize and use them.

MenuBar: The menu bar component is a horizontal navigation bar of clickable buttons. This component's handy if, for example, you're creating a complex web site in flash you want to display an identical, space-saving menu bar at the top of each page. Basically it's a navigational component that you can customize and use in multiple instances.

NumericStepper: You would use this component to create clickable list of numbers. This is a simpler way for people to use than a type-in-your-own-numbers text field. This component makes it easy for you to limit your audience's choices to predefined set of valid numbers.

ProgressBar: The horizontal Progress Bar component is a visual indicator of how long flash expects to take to complete a process. This can be used as a loader screen when loading your flash project and its various components. This is a great component to create from scratch and customize with a loader bar animation.

RadioButton: This is a combination of a few components that have already been discussed such as the Combo Box and the Checkbox component. A list of items or displayed in a list and a circular button is presented next to that data to select only one option within that list. Its displayed like a Checkbox, but used like a Combo Box where only one selection can be made.

ScrollPane: Similar to the Loader component, the Scroll Pane component lets you include an additional animation or bitmap image in your main animation. But, unlike the Loader component, the Scroll Pane component includes scrollbars that the user can use to control the content they see.

TextArea: The Text Area component is a multi-line, scrollable text field that's useful when you want your audience to be able to type a long comment, or any other information longer than a few words.

TextInput: This component lets you create a single-line text field. Using this component lets you give your audience a freeform text field just long enough to type what you want them to type. This is a good idea to use when making short input forms such as, name, phone, and email address.

Tree: Similar to the List component, the Tree component displays information in a hierarchical fashion. This component’s useful if, for example, you're creating a complex web site and you want to add a site map option that shows your audience the categorical view of your site, from the home page down.

UIScrollBar: The UIScrollBar component is a fancy, color-customizable scrollbar you can add to a Text Input or Text Area field to make your text field’s math your overall color scheme.

Window: The window component is a movable, titled window to display an animation or a bitmap file. You might want to use this when you’re creating a tutorial in flash you want to display each how-to animation in separate windows so that your audience can reposition each window and close it easily when they're ready to move on to the next topic.

CHANGING THE APPEARANCE OF COMPONENTS:

You can modify the look, size, or position of a component at run time by using several component properties, styles, or ActionScript methods, including the following:

x and y width and height styles, by using setStyle(stylename,value)You can set the x and y properties of a component only when the component is in a container that uses absolute positioning; that is, in a Canvas container, or in an Application or Panel container that has the layoutproperty set to absolute. All other containers perform automatic layout to set the x and y properties of their children by using layout rules.