Flash Assignment 6 – Working with Text

Photo credit: Stacey Lynn Baum, uploaded via Flickr, Creative Commons License

6.1 Understanding Flash Text:

The Flash text properties panel.

• 6.1.1 Understanding Text Field Types:  In this introductory section, we cover the various types of so-called classic text field types in Flash.  Text fields of this type may assume one of three forms:
• Static text, or what might be called a label, is text that will not be modified during the execution of the Flash movie.
• Input text describes a text field where a user might enter some information, such as a user name or password.  This type of text may be read and used in the execution of Action Script code within the Flash movie.
• Dynamic text is what might be termed output-text.  This is text that may be generated and displayed by processes executed within the Flash movie.

When creating text fields in Flash, regardless of type, we note that the properties panel affords us a rich variety of formatting options on par with what one might expect in a full-fledged word processing application.

• 6.1.2 Understanding Text Layout Format:  In addition to the so-called classic text type discussed in the previous section, Flash CS5 introduces a new type of text known as Text Layout Format (TLF).  Text designated as TLF has many more formatting options, going beyond that found in most word processing apps.  The formatting options for TLF text are in fact more akin to those found in desktop publishing and typography apps, allowing for granular control over elements such as leading (spacing between successive lines), tracking (character spacing), multi column layout, and so forth. 

Particularly noteworthy is that when using TLF text, one may elect to have the chosen display font baked right into the compiled Flash SWF, so it is not incumbent on the user to have a particular font installed on her system in order to view the content as envisioned by the designer.  Good stuff!

6.2 Working with Text:

• 6.2.1 Creating Text Fields:  Here we review some of the material we covered earlier in our primer on text boxes.  We note that we can create expandable text boxes with our text tool by simply clicking anywhere on our stage and beginning to type.  We know that we are working with an expandable text box by the circular handle present at the upper right corner of the box.  This type of text box will continue to widen as we continue to enter text therein.

A second type of text box is the fixed-width variety.  We create a fixed-width box by using our text tool to click and drag a rectangular shape until we reach our desired width.  When we begin typing in this type of box, our text will automatically wrap when the fixed width has been reached, continuing to push the lower bounds of the box downward as we add more text.  The fixed-width text box is readily identifiable by the presence of the square handle at the upper right corner of the box.

A noteworthy property of the above-reference shaped handles on these text boxes is that they can be used to alter the text box type.  For instance, one may grab the circular handle on the expanding box, and drag it to any desired width.  This will size the text box accordingly, and convert it to a fixed-width box.  Similarly, double-clicking on the square handle of a fixed-width box will unwrap the text therein and size the box width to accommodate the existing text.  At that point, the box will be converted to an expandable box, continuing to grow as more text is added.

We note here that when creating input text fields, we do not have the click-and-type option available to create expanding text fields.  However, once a fixed width input field is defined, we can still convert it to an expandable field in the conventional manner.  Also remarkable with respect to input fields is the enabling of the show border around text button in the character section of the properties panel.  Selecting this option gives the field the appearance of the familiar input box, replete with white background and black border.

• 6.2.2 Advanced Text Formatting:  Perhaps this section less than aptly named; this is a bit of review on the subject of text formatting.  Herein, we experiment with adjusting font style, size, character spacing, leading, and alignment.  These are important skills to master if one will be doing much work with text. 

• 6.2.3 Using Text Rendering Methods:  As noted earlier, Flash enables one to embed specific font data into one’s published SWF file, ensuring that the text will render as intended regardless of whether or not the desired font is installed on the user’s system.  However, in this exercise, we experiment with this type of embedding and note its effects on the resultant file size of the SWF.  Of course, larger file sizes are less desirable than smaller ones, so this technique should be used sparingly. 

We also examine other options for rendering our text in the published SWF.  The most efficient of these is simply instructing Flash to use the device fonts, which means that Flash will search the user’s system for the specified font, and use it if available, or some other reasonable alternative if the specified font is not installed.

Another option is to instruct Flash to create bitmap shapes of the character outlines.  This can be more efficient space-wise than embedding the font definitions, but results in a lower quality approximation of the desired font.  This effect can be mitigated somewhat by opting for the application of anti-aliasing filters to the bitmapped characters.  This results in a better quality image than a purely bitmapped approximation of the typeface.  The resulting SWF is somewhat larger than a bitmapped version, but still smaller than a SWf with the specified font data baked-in.  Note that there are a few options for applying anti-aliasing filters, so it might be worth experimenting with them to see which works best for one’s particular application.  As always, your mileage may vary.

6.3 Advanced Text Techniques:

• 6.3.1 Adding Filters to Text:  In this section, we examine some the powerful graphic filters that Flash can apply to our text.  We have used some of these filters previously in our tutorials on working with artwork, so these are not wholly unfamiliar. 

Filters are managed in the lowest portion of the properties panel.  Selecting the add filter icon at the bottom of the filter management area opens a menu list of filter effects from which to choose.  Options include drop shadow, blur, glow, bevel, gradient glow and gradient bevel.  Once a filter is selected, further options appear in the filter management area, allowing one to tweak the filter settings as desired.  If one gets a little too crazy with filter settings and is not sure how to back-up, there is also a reset filter button, that sets the filter options back to default.  One can also choose to discard the filter altogether with the delete filter button, or simply remove its effects with the enable/disable filter button.

6.3.2 Using External Text Files:   In this exercise, we explore the process of generating text from an external text file in a SWF movie.  The example used here is a tip of the day flash movie that would be updated daily with a new passage of helpful text.  The trick here is that the tip should be able to be easily updated without having to re-edit the Flash FLA file each day.  Instead, this method will enable one to simply instruct the SWF movie to display the contents of a stand-alone text file, which itself can be easily updated daily.

We begin this process by inserting a special type of text box known as a text area from the components panel.  This text area can be dragged-and-dropped from the components panel right onto our stage, then sized and positioned on the properties panel.  Also set on the properties panel are some other behavior options, such as word wrap and scroll properties.

Next we will go to our code snippets panel and locate the item load external text located in the load and unload folder.  We will also display our actions panel in the application (recall that all of our myriad panels, if not present on our screen, can be made visible by checking them on the Window menu).  Now, with our code snippets and actions panels in view, we double click on the load external text code snippet, and note that our actions panel immediately populates with some action script code. 

We edit this generic code a bit, specifically instructing Flash to grab the tip of the day text that we want to display by specifying its path.  Also, we specify where the text should be displayed (in our text area).  In the Function segment of out action script code, we add a line with the form object.property = value, which should be familiar to those who have done some work with object oriented programming.  The object at issue here is our text area, which is a movie clip object that we gave an instance name of TipText_mc.  The property we wish to define is Text, and the value we will assign is textData, which is the variable name that Flash choose to assign to our text file.  So, in object.property = value syntax we specify:  TipText_mc.text = textData; (the semicolon being a line terminator in ActionScript syntax). 

Now, when we run our executable SWF file, the text in the plain TXT file that we specified is rendered in the text area of our Flash movie.  The beauty of this is that we may now have our minions update this text file daily, without the need for any modifying of the Flash movie.

6.4 Animating Text:

• 6.4.1 Animating Text Perspective:  In this lesson we have some fun with our 3D rotation tool in conjunction with motion tweens.  By right-clicking on various objects on our stage, text boxes in this example, we open a context menu and select create motion tween.  This inserts a 1 second timeline (by default) associated with the object’s layer, and creates a keyframe at the last frame in the timeline.  We can now manipulate the object’s appearance in the ending keyframe with any one of the tools available (such as 3D rotation, free transform, etc).  Now when we generate the SWF and play the movie, our object will gradually transform from its appearance in the first frame to the appearance in the last frame over the duration of the movie.  We can repeat this technique for each object and/or layer in the Flash movie.

As an additional exercise, we add a bit of code to prevent our flash movie from continually looping (the default behavior) by inserting a stop(); command in our actions panel.  Note that we create a new layer for the actions command, as is dictated by good practice guidelines.

• 6.4.2 Animating Text Characters:  Well, this is pretty freakin’ cool.  Here we select a text box containing some content.  From the menu we select Modify => Break Apart, and presto, each character now exists in its own text box.  Now we can manipulate each character individually.  In this example, we create key frames on every fifth frame of our movie, allowing one additional character (text box) to appear at each keyframe.  Neat!

• 6.4.3 Animating Text with a Motion Tween:  In this exercise, we do a bit more with motion tweens.  Here we reveal letters progressively as in the previous exercise, but we also add another object into the mix.  A movie clip object in the form of a pencil will follow along with the text as it is revealed, giving the illusion that the pencil is drawing the letters.  The trick here is that rather than just specifying a start and end point for the pencil, we specify a keyframe at each individual frame in the animation, so the pencil appears to trace-out the letters faithfully.  By moving the position of the pencil along the path of the letter slightly at each frame, this effect is realized.

• 6.4.4 Animating Text with a Mask:  Building on the previous exercise, we enhance the effect of the pencil drawing out the characters here by using a mask over the characters to progressively reveal the strokes as the pencil object moves along.  The clever bit here is copying the text and pasting it in place to a new layer above the text layer. Here we again choose Modify => Break Apart, which splits the newly pasted text box into individual boxes, as in the previous example.  However, if we perform the same menu command again, the individual text boxes fall away, and we are left with a graphic object that is merely a shape in the form of our text.  Right-clicking on the layer icon allows us then option to convert this shape to a mask.  Adding keyframes to this layer that correspond to the pencil keyframes allows us to reveal the mask along with the strokes of the pencil, making for more realistic animation of the pencil drawing the characters. 

Furthermore, we are introduced to the motion editor panel, which allows us to step our way through a motion tween, and refine the motion further.

Flash Assignment 5 – Importing Artwork

Photo credit: Jay Kleeman, uploaded via Flickr, Creative Commons License

5.1 Importing JPEG Files:

A bit of review here.  In this section we revisit the topics of importing assets to the library, dragging and dropping to the stage, using layers, ruler guides and resizing.

5.2 Importing GIF Files:

The GIF file is an olde tyme graphics file format that is still used to some extent for simple images that lack the complexity of something like a photograph.  The principal shortcoming of the GIF is that it is limited to 256 colors.  However, the GIF file format does support animated images, and also supports pixel transparency, making it a viable format for some use cases. 

In this exercise, we make use of the swap feature alluded to earlier.  We have an example of a JPG image that was converted to a movie clip object and then incorporated into a Flash project with a motion tween.  Upon review, it is decided that the project will benefit if the JPEG image is converted to a GIF, and the white background is pixels are replaced with transparent pixels.  We do not venture into the machinations of how this is accomplished, as that is beyond the scope of this exercise.  The point is, having made that modification to the image, we do not need to recreate the movie clip object and the motion tween with the new GIF image. 

Having imported the new GIF into our library (File => Import => Import to Library), we simply double click on the movie clip object in our library to enter symbol editing mode.  Then, we select the JPEG image within the movie clip that we want to replace.  Once selected, we can utilize the swap button within the properties panel.  This provides us with a dialogue box that allows us to select another object from the library to take the place of the JPEG that we want to replace.  Selecting our newly-imported GIF, we now have our new-and-improved movie clip intact.  Presto!

5.3 Importing PNG Files:

The PNG file format is another popular graphics file format in use today.  PNG (Portable Network Graphic, or PNG’s Not GIF) has the advantage of supporting transparency, like GIF images do, but also has the capacity to render millions of colors, like JPEG.  In addition, PNG uses lossless compression techniques, which preserves image quality.

Flash fully supports the use of PNG graphics.  Importing this type of image to the library or stage is accomplished in the same way as with other image formats.

5.3, 5.4 Importing Artwork from Adobe Photoshop/Illustrator:

In the examples above, Flash imports graphic files as single-layer bitmapped images.  This may be fine for something like a simple photograph, which is nothing more than a single layer bitmap anyway.  However, as we have seen in our lessons on creating and modifying artwork in Flash, graphic images may often be made up of many separate layers, and each layer itself may be composed of several independent vector objects.  Importing such a complex image into Flash as a single-layer bitmap would clearly be limiting, as it would prevent the image from being further manipulated or animated in the way it might otherwise be in a Flash movie. 

Fortunately, if one has used another Adobe Creative Suite application such as Photoshop or Illustrator to produce artwork, those files can be imported to into Flash directly from their native file format, and elements such as editable text and layers can be preserved.

The import process is similar to those described above, however one is prompted with a dialogue box allowing one to choose how the target graphic files are translated into Flash.  For instance, One can elect to preserve the layer structure in a piece of artwork, converting each to a Flash layer.  Alternatively, each layer in a Photoshop or Illustrator image could be converted to a keyframe in a Flash movie clip.  Editable text can also be preserved, or converted to a vector shape.  Sadly, it appears that individual vector objects may not be preserved; vector graphic objects are converted to bitmaps, so they lose their individual identity and my not be resized or deformed.  Apparently, the seamlessness of transitioning from Photoshop or Illustrator to Flash has some room for improvement.  

The Import Photoshop Document dialogue box.

Dreamweaver Assignment 7 – Adding Text Content

Photo credit: Meredith Harris, uploaded via Flickr, Creative Commons License

7.1 Typing, Copying/Pasting, or Importing Text:

Like most any application running on current operating systems, Dreamweaver supports copy and paste functions that enable one to easily transfer text from another document into one’s webpage.  One can paste text directly into the design window of a document, and the associated code is automatically inserted into the code window. 

However, we are advised that this is sometimes problematic when copying text from MS Word, as there is often extraneous code that comes along for the ride, cluttering-up one’s code window.   When copying text from Word, our tutor suggests that we take advantage of the Edit => Paste Special option, which allows us to throttle the level of formatting carried over from the Word document, or eliminate the formatting altogether and simply paste the ASCII characters into our web document.  We can then reformat our text as we see fit from within Dreamweaver, thus relieving ourselves of unnecessary hodge-podge in our html code window. 

Alternatively, there is a baked-in clean-up filter available on the Commands menu (Clean Up Word HTML), which is supposed to do the job for us, although we were not treated to a demonstration within our training video.

7.2 Setting Headings:

Here we look at the process of tagging headings on our page.  Creating a heading is more that simply making a paragraph title in bigger and bolder text.  While a human would instantly recognize big, bold text standing alone atop a paragraph as a heading for the content therein, our less sophisticated computers and software are somewhat less perceptive.  Adding a heading tag designates text as a header for the benefit of screen-reading, web-crawling and content-scraping software applications, in addition to enlarging and emboldening the text for the benefit of us carbon-based meat-bags. 

The HTML standard allows for a hierarchy of six levels of header text.  Designating text as such involves simply selecting the desired text and than selecting the appropriate header designation (h1 – h6) from the Format drop-down box in the Properties panel. 

7.3 Creating Lists:

Creating a bulleted list of items in Dreamweaver is done in much the same way that one would do so in MS Word.  The only trick is to be certain that the list of items to be bulleted each must be enveloped within paragraph tags (<p> list item </p>).  If items are separated only by a line break (<br />), they will be combined into a single bullet. 

Assuming one has properly delineated a set of list items, one may highlight said list and click on the bullet icon (unordered list) or number icon (ordered list) in the properties panel to create the list.  Note also that the increase indent and decrease indent are present in the panel as they are in Word, and function likewise.

Finally, we also note that the lower half of the properties panel contains a button labeled List Items…, Here we can choose options such as choosing between bullets and numbered lists, types of bullets or numbers, and so forth.

7.4 Bold & Italics:

To format text as bold or italic, simply select the desired text, and click on the bold or italic icons in the properties panel, or on the text tab of the insert bar.  Emboldening text adds the <strong> tag, whereas italicizing text adds the tag <em> (emphasis).  These tags are evident in the code window view, and can also be added manually if so desired.

7.5 Special Characters:

Adding special ASCII characters to page content is achieved through the insert menu or insert bar.  Characters such as copyright, trademark, or certain foreign currency symbols can be found by selecting Insert => HTML => Special Characters.  

Also in this section, we note that characters or character strings can be highlighted, then dragged and dropped about the page in either the design or code windows.

Dreamweaver Assignment 6 – Creating a New Web Page

Photo credit: fuhrmanator, uploaded via Flickr, Creative Commons License

6.1 Creating a Web Page:

Here our tutor rehashes the process of creating a new webpage document  (File => New…), and the various options available in the new document dialogue box.  She also reminds us that the document toolbar, if not displayed when a new document is created, can be accessed through the View -> Toolbars => Document menu option.

6.2 Saving a Web Page:

Having created a new page, we now confront the issue of where to save it.  Here we see the significance of the topic defining sites covered in our last lesson.  We note from the files panel that the folder we last defined as our root folder is displayed by default.  This is the folder that will be selected by default in our file browser dialogue box when we save our document.  We are also reminded that when we create a top-level page, common practice dictates that we name the document “index.html”, as web servers are programmed to search for such a page and serve it up by default when no specific page within a domain is requested.  

For example, when one types WhatBorderColliesEat.com into ones web browser, the web server by default serves-up the file WhatBorderColliesEat.com/index.html, unless a specific page is requested, such as WhatBorderColliesEat.com/my_favorite_shoes.html.

We are advised here that when naming html files, good practice dictates that only lower-case letters be used, and spaces or special characters are not allowed.  Note that hyphens and underscore characters are not regarded as special characters, and hence are allowable.  One should consult an html reference resource for a definitive list of valid characters; there might be one or two of those guides floating around on the internet somewhere.  Furthermore, consistency with your chosen extensions is important.  You can use either the .htm or .html designation, but whichever you choose, be sure to stick to it throughout your site pages.

6.3 Assigning a Title to a Web Page:

With our newly created and saved webpage displayed in our application, we note that the aforementioned Document toolbar displays a Title textbox, which by default reads “Untitled Document”  Here we can assign a name to our webpage that will display in the web browser’s title bar or tab (depending on the browser).  This is also the default title of the page that will appear to a user who bookmarks this page.  Furthermore, the page title is often used by web crawlers that index the web for use by search engines. It is therefore important to assign your page a meaningful name.

6.4 Inserting Meta Tags:

Meta tags are snippets of code that appear in the heading area of a pages html code.  Meta tags are global instruction that convey pieces of information to the web browser or web-crawling bot that are applicable to the entire page.  For instance, by default a new page created in Dreamweaver contains the meta tag <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />, which indicates to the browser some specifics on how to render the page.   

Other common meta tags discussed here include Keywords and Description.  These are tags that might be used by search engine web crawlers to index a page. 

Our tutor demonstrates how meta tags can be inserted with ease by utilizing the Meta option under the Head icon on the Common tab of our Insert Bar.  Of course, one can also simply type the meta tag into the head section in the code view window, but using the meta tool relieves one of the responsibility for getting the code syntax just right.

Dreamweaver Assignment 5 – Defining a Site in Dreamweaver

Photo credit: tifotter, uploaded via Flickr, Creative Commons License

5.1 Introduction and Benefits: 

The process of defining a site within Dreamweaver consists of defining the location of all of ones assets needed to render the website  (graphics, databases, style sheets, etc).  Once Dreamweaver knows where everything is, it can keep track of it all during the process of building and editing the site design.  However, it can only do so if one manipulates those assets from within Dreamweaver itself.  Making changes to the file system at the OS level results in Dreamweaver falling out-of-the-loop, creating headaches for the designer.  Working from with the files panel in Dreamweaver ensures that the application remains up-to-speed with any asset manipulation occurring during the build process.

5.2 Course Setup:

Here we create a new root folder to hold our assets for a web site as described in the preceding section.  At the beginning of this video clip, our tutor has what appears to be a file browser window open, sitting atop the work area of the Dreamweaver application window.  This leaves one wondering what menu option or action prompted the file browser window to open within Dreamweaver.  However, after some consideration, it appears that perhaps the tutor simply launched an instance of windows explorer to create a root folder.  The explorer window was not maximized, and happened to be sitting in front of the maximized Dreamweaver window in the background, creating the illusion that the window had been launched from within the application itself.  That’s my interpretation, anyway.

Regardless, apparently all we are doing here is creating a folder to serve as the root for our website.  ‘Nuff said.

5.3 Defining a Site in Dreamweaver:

Having created a root folder in the OS environment to store our project files, we now move to the Dreamweaver application to tag this folder as such.  From the site menu, we select manage sites, and then select new from the resulting dialogue box.  We than get a second dialogue box, affording us the opportunity to name the site, and select the root folder we wish to use.

After accepting this assignment and closing our dialogue boxes, we return to the application and note that the newly defined root folder is apparent in our files panel. 

***IMPORTANT***  From this point on, any importing, moving or copying of file assets to be used in the site must done from within the files panel in the Dreamweaver application!  Failure to do so will result in the application losing track of the asset inventory.

5.4 Using the Files Panel:

The files panel functions much like the file browser or explorer window in the OS.  One can navigate folders, drag-and-drop files, make connections to remote network drives, as well as create, rename and delete folders and files.  Once again, all of these operations should be performed from within this interface, rather than at the OS level.

The Files Panel.

Flash Assignment 4 – Working with Symbols and the Library

Photo credit: Mindy McAdams, uploaded via Flickr, Creative Commons License

4.1 Managing Library Content:

The Library is panel in the Flash interface where all of the assets of a Flash project file are stored.  Assets include photographs or other graphic images, sound and video files.  Any symbols (graphics, buttons or movie clips) that we create in the Flash project will automatically be stored in the library.  In addition, we can import items into the library from external sources.

Some projects may have a large number of objects in the library, making it difficult to find anything.  We can address this by organizing our library into folders, where we can group together items with a common theme, or common item type.

Within the library panel, we also have options for viewing and editing the properties of the various items therein.

4.2 Understanding Symbols:

Symbols are essentially templates for an item.  We may use that template to create multiple instances of that item.  For example, were we to create a Flash project illustrating 99 bottles of beer on a wall, we might begin by creating a single symbol of a bottle of beer.  We could then use that symbol to create 99 instances of beer bottles.  Note that this does not mean that all of our bottles would necessarily have to look identical; we could make individual modifications to each instance of the bottle.  On the other hand, if we wanted to make a similar modification to all instances of the bottle, say, make them all splits rather than long necks, we could propagate that change by simply modifying the bottle symbol.

Symbols in Flash can take the form of a graphic object, a movie clip or a button.

Graphic object and movie clip symbols are similar in that they can have an unlimited number of frames associated with them on the timeline.  The main difference between the two lies in the property of the movie clip that allows each instance of itself on the stage to be uniquely identified, and thus referenced when writing code.

A button is a graphic image with four specific frames built into its timeline.  These frames correspond to the button in its normal or “up” state, it’s mouse-over state, and its down or pressed state.  The fourth frame is used to designate the live or clickable area of the button.

There are several ways to create a symbol in Flash.  We may create a piece of artwork on the stage and drag it over to the library, which will result in it being converted to a symbol automatically.  Also, we may select our artwork and choose the menu option Modify=>Convert to symbol.  Alternatively, we may begin with the menu option Insert=>New symbol.  Finally, we may work from the library panel, where there is a new symbol option on the library options menu, as well as a new symbol button on the library panel.

4.3 Understanding Graphic Symbols:

Graphic symbols are the building blocks of Flash projects.  They can form the basis from which button symbols are made, and multiple graphic symbols can be used within movie clip symbols. 

As an interesting aside in this lesson, our tutor demonstrates placing a symbol on a layer to be used only for reference.  Right-clicking on the layer name and selecting Guide renders this layer inert, meaning that it will not publish into the final Flash product. 

Similarly, we learn how edit a symbol alongside other objects that we might like to use for reference by using edit in place mode for symbol editing.

4.4 Understanding Movie Clip Symbols:

Aside from instance naming, as previously discussed, movie clip symbols differ from graphic symbols in that they have timelines that are independent of the main stage timeline.  Graphic symbols too can be animated and have timelines, but those timelines are bound within the main stage timeline.

Note that we can modify individual instances of our movie clip symbols, as well as modify the symbol blueprint itself.  However, the propagation of template changes through the instances that have already been changed is somewhat complex, and might take some trial and error to get just right.

Also in this section, our tutor exposes us to the 3D rotation and translation tools.  Caution; wackyness may ensue if one gets too carried away with these.

4.5 Movie Clip vs. Graphic Symbols:

Here we get a demonstration of the behavior of graphic vs movie clip symbols with respect to the timeline properties discussed above.  Additionally, we gat a bit of a primer on creating motion tweens, adding and deleting frames from a timeline, and learn that a keyframe is designated as a frame within a timeline in which some property of an object is changed.  

4.6 Understanding Button Symbols:

In creating a button symbol, the four frames previously discussed are automatically generated on the timeline.  The important thing to remember when building the contents of the frames, important to remember inasmuch as it is not very intuitive, is that one must insert a keyframe into the blank frames that were auto generated.  This is easily done by right-clicking the frame on the timeline and selecting insert keyframe.

Another handy feature touched-on here is the use of the onion skin view option.  When working on any of the buttons frames, selecting the onion skin option at the bottom of the timeline panel allows one to see any or all of the other frames as transparencies.  This is particularly handy when defining the live or clickable area of the button.

Finally, we see how invisible buttons can be useful in web design, allowing feedback to be generated when a user mouse’s over a particular area of a graphic image or other Flash-generated area.  For instance, when one navigates to the website of a global entity, one is frequently greeted with a map of the world and asked to select one’s region in order to be directed to the appropriate web page.  Mousing over different areas of the globe prompts the mouse-over frame of invisible buttons to display, which might contain text such as “North America” or “Europe”, advising the user as to which region’s home page will load if that area is clicked.