Flash Text and Flash Buttons

[ LiB ]

You've seen how complex Flash content, including interactive movies, can be inserted into HTML pages within Dreamweaver. The Flash Button and Flash Text objects (available in the Media menu of the Common category of the Insert bar) enable you to create, customize, and insert simple Flash-based page elements (buttons and text) into a web page without ever leaving Dreamweaver, and without having to own or know how to use Flash (see Figure 16.20). This opens all sorts of new horizons for integrating different kinds of Flash content in your websites quickly and inexpensively.

Figure 16.20. The Flash Button and Flash Text objects, as they appear in the Common Insert bar.

How Dreamweaver Creates SWF Files

The technology that makes Dreamweaver-created SWF files possible is Macromedia Flash Generator. Generator is a software system for creating Flash graphics dynamically from changing information in a database, similar to the way ASP and ColdFusion create text and page layouts dynamically. To work with Generator, the Flash author creates a special SWT (small web template) file , which is essentially a SWF file with placeholders for collecting and displaying dynamic data. When the page is uploaded to a web server, as visitors access it, the Generator application server, which sits on the server, creates SWF files to display on the page by filling in the SWT placeholders with data from a server-side database.

Using Generator technology, Dreamweaver creates Flash Text and Flash Button objects from SWT files stored in its Configuration folder. Whenever you choose one of the Flash objects from the Insert bar, Dreamweaver collects information from you (text to enter, typestyle, and so on), feeds that information into placeholders in one of its SWT files, and generates a SWF file. Figure 16.21 shows an overview of the whole process.

Figure 16.21. How Dreamweaver creates the SWF files for Flash Button and Text objects from SWT templates.

Creating and Inserting Flash Objects

You create Flash buttons and text at the same time as you insert themby clicking the Flash Button or Flash Text object in the Insert bar. When you click the object, a dialog box displays, enabling you to customize the button or text that will be created. When you click OK to exit the dialog box, the SWF file is created and the object is inserted.

Figures 16.22 and 16.23 show the dialog boxes for the Flash Button and Flash Text objects. They give you similar choices for specifying type, color , and linkage. The Flash Button dialog box also enables you to choose a button style.

Figure 16.22. The Flash Button dialog box, which enables you to choose a button "style" or template to work from, and to customize its text and behavior.

Figure 16.23. The Flash Text dialog box, which enables you to specify text and type style, colors, and links for the new text.

Button Style (Flash Button Object Only)

When you insert a Flash button, Dreamweaver creates a SWF file based on one of a dozen or more SWT templates. Each template contains the graphic elements for a different button. In this dialog box, each SWT template is shown as a separate button style. The graphic appearance of the button styles (color, shape, decorations, and so on) is not customizable because this information is built into the SWT. Any rollover effects also are built into the button style and can't be edited here.

To get more button styles from the Macromedia Exchange, click the Get More Styles button in the editing dialog box. This launches your browser and connects you to the Exchange (if your computer is connected to the Internet). When at the Exchange, navigate to the Flash Media category of extensions to see currently available buttons and other Flash- related extensions. Each set of button styles is saved as a Macromedia Extension Package (MXP) file, ready for use with the Extension Manager.

Text and Typestyle (Button and Text Objects)

If you're inserting Flash text, or if the Flash button style you're inserting includes a text label, you can determine what text will appear and how it will be formatted. Note that because fonts are automatically embedded in all Flash movies, you can set the typeface to any font installed in your system. This font then becomes part of the SWF movie.

Link and Target Information (Button and Text Objects)

If you want your Flash objects to contain any links, you need to assign the link information in this dialog box. The link then becomes part of a getURL() command in the generated SWF file. This is because, unlike images and text, media objects cannot just be wrapped in an <a> tagso you can't use the Property Inspector to assign links. (For more on links and targets, see Chapter 6, "Links and Navigation.")

Background Color (Button and Text Objects)

Like pixel images, Flash content always exists inside its own rectangle. This means you'll need to assign it a background color that matches the color of whatever it will be sitting on (page, table cell , layer, and so on). The following tips apply to assigning background colors:

Color sampling works here like it does throughout Dreamweaver. To match your web page's background color, just position the Flash object dialog box so that you can see some portion of your document behind it, and then click the color swatch; when the eyedropper cursor appears, click to sample the page or other desired background color.
Background color is not just for Flash text! Even for rectangular Flash buttons, you want to assign a background color, unless you want your button to be surrounded by a little white halo on the page.
Although this will have an effect only when seen in IE/Windows, you can use the wmode parameter to make the background invisible. After you've exited the dialog box, select the Flash object and use the generic Parameters dialog box from the Property Inspector to assign wmode=transparent .

Previewing Your Work (Button and Text Objects)

Note that the dialog box offers only limited preview capabilities as you're creating the SWF. You can preview in general what a button style will look like, but other than that, you have no visual feedback as you're working. This is because, as you're making your choices in the dialog box, Dreamweaver has not yet created the SWF file it will be inserting, so there's nothing to preview. If you're using the dialog box to create a new Flash object, instead of editing an existing one, you can't even use the Apply button to see your changes in the Document window because Dreamweaver can't apply changes to a SWF that it hasn't created yet. For this reason, creating Flash Button and Text objects usually involves several trips to the editing dialog box.

Working with Flash Objects

After it is inserted, the Flash button or text is coded into your HTML the same way that any SWF file would be, using object and embed tags. Just like any Flash movie, you can assign any of the parameters listed in Table 16.1. By default, Dreamweaver assigns Flash Text objects a scale value of exactfit , allowing nonproportional scaling. Unlike standard Flash movies, the movie contents are always visible in Dreamweaver Design view, so you don't have to use the Property Inspector's Play button to preview them. This makes resizing more intuitive because you don't have to stop the playback before using the object's resize handles. Here are a few other things to consider when working with these Flash objects.

Editing

You edit a Flash Button or Text object by going to the Property Inspector and clicking the Edit button or by double-clicking the object itself. Either method reopens the original Flash object dialog box, ready to accept customization changes. Be aware that because SWF files can't be edited after creation, when you open the dialog box, make changes, and click OK, Dreamweaver is generating a new SWF, not editing the existing one. If you change the name in the Save As input field, you'll generate a separate SWF. If you leave the name the same, you'll overwrite the original SWF.

Undoing

Again, because Dreamweaver is creating SWF files as it goes, you can't use Edit > Undo or the History panel to undo edits made to Flash text or buttons. It makes sense when you think about it: When you perform your edits, Dreamweaver creates an uneditable SWF file and saves it to your hard drive. Because that file is not editable and is already saved, there's nothing to undo. The only way to undo changes to Flash Text and Button objects is to reopen the editing dialog box and manually change things back to the way they were.

Resizing

It's an obvious statement, but one worth repeating: Flash objects are resizable. Have a blast, with no worries about losing image quality if you scale up an object.

Duplicating

After you've created a Flash object, you can, of course, duplicate it as you would any page element (copy and paste, or Option/Ctrl-drag). Be aware, however, that each duplicate is an instance of the same SWF file. To change the text, color, link information, or other embedded properties in a Flash object, you'll need to tell Dreamweaver to generate a new SWF file instead of replacing the original. The procedure is as follows :

Every program has its own way of handling dragging to duplicate. To Ctrl-drag in Dreamweaver/Windows, click the Flash button and hold down the mouse button until the cursor changes to an arrow with a dotted square. Then press Ctrl, and a plus sign (+) will appear in the square; then drag. If you don't wait for the cursor change, the duplication might not work.

Duplicate the Flash Button or Text object in the Document window.
Double-click the new object to open its editing dialog box, and make whatever changes you like.
Before closing the dialog box, go to the Save As Input field at the bottom of the dialog box, and enter a new filename.
Click OK to exit the dialog box. Dreamweaver now generates a second SWF for you.

Exercise 16.5. Populating a Page with Flash Buttons and Text

It's time to create yet another Art Gecko home page! This time, you'll use gecko_banner.swf for the top banner, but you'll create your own navigation sidebar from Flash Button objects. Then you'll dress up the text headings by replacing them with Flash Text.

From the chapter_16 folder, open gecko_flashobjects.html .
First, replace those boring headings. Select "Welcome to Art Gecko" and cut it to the Clipboard (Edit > Cut). With the insertion point still in position, go to the Media tab of the Insert bar and click the Flash Text object. Create a new "Welcome to Art Gecko" heading, pasting the Clipboard text into the Flash Text dialog box and using whatever font, size, style, and color your heart desires.

Leave the Link field and rollover color swatch blank; you don't need your heading text to link anywhere .

For a filename, you'll probably want to choose something more descriptive than text1.swf . Set the filename to welcome.swf .

Finally, don't forget to set the background color to match the page color, or else your new heading will appear in its own little white box.

When everything is set, click OK to close the dialog box.
Back in Design view, resize the new Flash heading until it's just the right size and shape for you. Note that the scale parameter for this Flash object defaults to exactfit , so you can squish and stretch the type if you like. ( Warning: Typographic purists frown on this sort of activity. Resizing type nonproportionally distorts the letter shapes and can make them ugly.)
To replace the "What's New at Art Gecko?" heading, start by deleting the text heading that's currently there. Then copy the Flash Text heading that you created in the previous step and paste it into position where the text heading was. Double-click the new Flash Text heading and change the wording to "What's new at Art Gecko?" Use the Save As Input field to enter a new filename; call the new file whatsnew.swf .
Next, add your own sidebar buttons. With the insertion point in the sidebar table cell, go to the Objects panel and click the Flash Button object. Choose any button style you like, as long as it includes a text label.

For a text label, type in Wall Hangings . Format the type any way you please . Because you won't be able to preview the type without creating the button, you have to guess at what type size will be appropriate.

For the link, browse to ArtFiles/art1.html . For the filename, enter art1_button.swf . And don't forget to set the background color!

When you have finished, click OK to close the dialog box.
Back in Design view, you might discover that you don't like the button's size or the size of the type you put in it. You can resize the button by dragging its selection handles. (Note that the scale parameter for this Flash object has been set to show all , so the button maintains its proportions as you scale it. Of course, you can change this to exactfit if you like, although you risk making the button and its label look ugly.) To resize the text label in relation to the button, you have to double-click to re-enter the Flash Button dialog box and change the number in the Type Size field. Keep tweaking the button until you like how it looks on your page.

You have three more buttons to create. You can start by copying and pasting the Flash button you just created three times.

To change each Flash button's text and link information, double-click the button to open the editing dialog box, change whatever settings you need to, and then, in the Save As field, enter a new filename for the new SWF file that must be generated.

When duplicating Flash text or buttons, it's crucial to change the filename in the Save As Input field. If you don't remember this step, you'll be changing the original SWF file you duplicated from.

When you have finished, your page should look something like the one shown in Figure 16.24. Preview it in a browser to check it all out.

Figure 16.24. The gecko_flashobjects.html home page, with Flash objects in place.

Using Flash Objects to Trigger JavaScript Commands

What if you want to use your Flash Button or Text object not as a standard link, but as a link that triggers a JavaScript action? You can't just select a Flash object and assign a behavior to it, as you would with regular text or images, because in HTML, the object and embed tags don't accept event handlers. (See Chapter 15 for more on this.) JavaScript links, like other links, must be embedded in the Flash file itself.

If you read the earlier section on sending JavaScript out of Flash movies, however, you already know that it's possible to embed a JavaScript command in a Flash link. Therefore, just as you can add links to Flash Button and Text objects, you can add JavaScript links. You just use the javascript: keyword, followed by whatever command you want to execute. The Flash Button dialog box shown in Figure 16.25, for instance, creates a button that opens an alert window with the message "Hello, world!"

Figure 16.25. Creating a Flash Button object that will execute a JavaScript command when clicked.

This is fine if you like writing short little JavaScript statements by hand. To execute more complex scripts, write the code as a function in the document head and use the previous technique to embed the function call in the Flash object.

By following the procedure described in Chapter 13 for "hijacking" behavior function calls, you can even use the Flash object to trigger a Dreamweaver behavior, adding complex scripting functionality to your Flash object with minimal coding on your part. The steps are as follows:

Create a dummy text linka temporary page element that can be discarded later.
Select the text link and use the Behaviors panel to apply the desired behavior, configuring the behavior as you like.
Switch to Code view and find the text link, along with its function call. Copy the function call (everything between the quotation marks, after the onClick event handler).
Create the Flash button. In the button's dialog box, in the Link field, type javascript: . Then paste the function call in after the colon .
Back in Code view, find and delete the fake text link. Check the document <head> to make sure Dreamweaver hasn't deleted the function itself.

Figure 16.26 shows a Flash button configured to call the Open Browser Window behavior function.

Figure 16.26. "Hijacking" a Dreamweaver behavior's function call for use in a Flash button.

[ LiB ]

Flash Text and Flash Buttons