Macromedia Flash MX Integration with Dreamweaver
- Using the Flash Text Feature
- Using the Flash Buttons Feature
- Applying a Silly Flash Trick
- Conclusion
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
It seems that every page you visit on the Web uses Flash in some way or another. So, what if you don't have Flash to add introductory movies or interactive buttons? How about Dreamweaver 4? If you have it, then there's no need to worry. Dreamweaver 4 gives you the tools to quickly add simple Flash movies and interesting buttons directly to your Web pages.
Dreamweaver 4 comes with two new tools: Flash Text and Flash Buttons. Both of these tools allow you to add Flash to your Web pages very easily. There is no need to mess around with arranging or creating the designs because they are all built in. Figure 1 shows a Web page with interactive Flash Text and Flash Buttons.
)
Figure 1 The "New Search" button is created with Dreamweaver 4's Flash Text Tool.
As you may expect from Macromedia, adding Flash Text and Flash Buttons to your Web page is very easy. All of the controls to manage this process are on the Objects panel, as shown in Figure 2. The default panel is the Common Objects. If another panel is showing, select the arrow in the top right corner of the Objects panel and select Common from the drop down list.
)
Figure 2 The Flash Text and Flash Button objects are located on the Common Objects panel.
We are going to first explore the Flash Text feature. You will find similarity between this and Flash Buttons, but, to get started let's insert some Flash Text.
Using the Flash Text Feature
Open a new page and save it as FlashText.htm to begin practicing. Note that you must first save a page before adding Flash Text and Flash Buttons. Select the Flash Text button, which opens the Insert Flash Text dialog box for the Flash Text control (see Figure 3), which is very similar to other dialog boxes you see with other object controls in Dreamweaver. The Flash Text window is broken down into a series of text boxes that you need to fill out in order to create the Flash Text movie on your Web page.
)
Figure 3 The properties that control how your Flash Text will appear in your Web Browser.
I always start by filling in the Text box with the text I would like to see on the page. The Flash Text feature is great for small sections or paragraphs of text on a page; the limit is 1024 characters of text.
The Flash Text can be modified with many of the same tools used in text editing; for example, the Properties panel has Bold, Italic, and Alignment buttons. In addition, you can alter the text color using the color picker. All modifications you make to the text applies to the entire paragraph. That is, if you select the Bold button, all of the text will be bold; if you change the color to #FF22AA, then all of the text will change color. You do not see the changes in the Text window, the changes are only presented when you select OK and view the Flash Text on your page. Don't do that just yet; let's look at some of the other features.
The Font Advantage
The advantage you have with Flash text over conventional HTML text is two fold: you can use any font and any font point size.
The drop down Font list displays all of the fonts registered to your computer. As you choose a font you will see the text in the text area change to the style of the new font (deselecting the Show Font check box turns this feature off). Feel free to try any font. They all work!
As we all know, HTML does not allow for much Font control. Flash Text alleviates this problem by not only allowing you to select any font, but by also allowing you to select the exact size of the font. In Figure 3, you see that the Size is set to 30, which translates to 30 points on the Web page. This cannot be done with HTML without leveraging Cascading Style Sheets.
The Interactive Options
A big win for me is the ability to make my Flash Text interactive. Below the Text area you can add a link to another Web page using the Link text box. It is useful to be able to add links to the text. As Flash is a plug-in tool, you cannot apply a Web link to the entire movie as you can with a JPEG or GIF image. Notice that there is no underline added to the Flash Text when you apply the link. Your cursor will change to the "hand" cursor to represent the link. Feel free to either type in the link or select the Browse button and choose a link from your website. You will find the control is very similar to the Browse for File feature used for text and graphics on the Properties panel. In addition, if your website is "frame" based you can direct your link to open in a Target window through the Target drop down box. This works and behaves exactly the same way as the Target window on the Properties panel.
By default, the background color for all of the Flash movies is white; however the Bg Color option can change this to almost any color. Selecting it opens the color palate from which a color can be chosen.
A website is created with a collection of files. There are graphics files (GIF and JPG), Web pages (HTML) and now you have Flash Movies. Each Flash movie ends with the suffix of .swf (pronounced SWiF). The Flash Text must be in this format for it to be viewable in a Web page. To do this, type the name and location of the saved SWF file into the Save As text box (or choose the Browse button, as described with the Link text box).
By default, the first Flash Text you create will be called text1.swf. If you do not change the name of the text and decide to add a second Flash Text movie to the page, the second movie will be called text2.swf. The third will be text3.swf, etc. Rename your file words.swf, select OK, and view your text on the page. To test the link you may have added to your Flash Text you will need to either preview the page in your Web browser or play the movie by selecting the green arrow Play button on the Properties panel.
Flash Text Properties Panel
The Properties panel is slightly modified for the specifics of Flash Text in Dreamweaver. Figure 4 shows the features specific to the Flash Text Properties Panel.
)
Figure 4 The Flash Text Properties panel.
On the whole, the panel looks very similar to the Flash Properties panel. This is because we are working with a Flash movie. The most significant difference is the Edit button. Selecting the Edit button opens the Flash Text dialog box filled out with all of the options you have selected. You can modify the text, font, or any of the options and then click OK to resave the file. The changes are immediate.
Are you wondering why this is so exciting? Because the Flash SWF file format is a locked format. That is, when the SWF file is created you cannot modify it. The original source file used to create the SWF has to be modified. Dreamweaver gets around this knotty problem by utilizing Flash Generator to build and modify the SWF files. With this you can then create and edit your Flash Text very easily.