Intranet Journal
The online resource for intranet professionals

Fireworks and Flash Tips Straight from the Developers

11/26/03

Macromedia's online development tools are big guns in any intranet developer's arsenal. Last month, we brought you useful tips for Dreamweaver MX 2004 that were contributed by Dreamweaver's actual developers, and we're glad to say the response was positive. This month we continue with more insider tips, this time on Fireworks MX 2004 and Flash MX 2004. Read them to get the most from your time and work like a pro.

Import It Right
When importing an external graphic into Fireworks, it can be a pain to go back and resize the graphic to the appropriate size. To solve this problem, tell Fireworks to resize the image at import.

Select the File/Import command and choose the image you want to import. Once you confirm, you will see a right angle icon indicating the upper left hand corner of the image. Simply click down and drag with the mouse. You will see a dotted rectangle forming to indicate the new size of the imported image. When you release the mouse, Fireworks will automatically resample the image to the size that you have selected.

Masks Made Easy
Learning to mask an element can be tricky, but it doesn't have to be. In fact, many Fireworks users are unaware that even text can be turned into a mask — and still remain editable.

Start by creating text that you want to use as your mask. Import an image to be masked. Place the image directly on top of the text you created, and, once it's in position, use the Edit/Cut command to remove it from your document. Now use the arrow tool to select the text. With the text selected, choose Edit/Paste Inside. Voila! You've created a mask. To reposition the pasted image inside the text, click and drag the diamond icon in the middle of the mask.

Export Just a Piece
If you'll only need a small section of a large graphic in your project, save space by only exporting the desired area. Choose the Export Area tool, which is located under the Crop tool. Using it, drag select the area you want to export. Once you have the area defined, doubleclick inside that area to bring up the Optimize window. From there, you can select export options.

Export to CSS
With all the new cascading style sheet (CSS) features in Dreamweaver, people want to know when Fireworks will start supporting CSS. The answer is that Fireworks has supported CSS since the last version.

Start by exporting a graphic as you normally would. In the Save as Type dropdown menu of the export dialogue box, select CSS Layers. Your slices will export as absolutely positioned layers instead of table cells.

Other HTML Export Options
If you don't want to export CSS, but do want to customize the tables generated by Fireworks, click the Options button in the Export dialog to access HTML options. From there you can adjust everything from the contents of empty table cells (inserting a spacer gif, non-breaking space, or nothing at all), to the HTML style (HTML or XHTML) and the auto-generated file names.

Flash Tips

We also asked the developers of Flash for their best hidden timesavers, useful to both newbies and pros alike, and here's what they said.

Hiding a Screen
When building a forms-based application in Flash MX Professional 2004, you can make a form not visible at run-time. Select the screen in the screens browser and click on the Parameters tab in the upper-right-hand corner of the property inspector. You'll be able to set the "visible" (not to be confused with "_visible") property to false.

Keep in mind that right-clicking on the screen in the forms browser and selecting Hide only hides the screen in Flash for design-time purposes.

Quick Access to the ActionScript Editor
It's not a new tip, but you'd be surprised how many people don't know it. Use F9 to toggle the ActionScript window (always undock it) and F1 to toggle the Help window (also undock it).

Scripts at Your Fingertips
When writing a lot of code, you often need to refer back to your movie or application to see what name you've assigned a given element or variable. However, when you click on anything onstage, the ActionScript Editor defaults to the code for that object, so the code you were working on is no longer displayed.

To solve this problem, Flash MX introduced the ability to "pin" a script to keep it in focus even when you select another object. With Flash MX 2004, you can even pin multiple scripts and change between them using tabs in the ActionScript editor.

To pin a script, open the ActionScript editor and select the object by clicking the pin icon next to the tab at the bottom. Next, select an additional object or slide containing code that you want quick access to. Repeat the process of pinning the script by clicking on the pin icon. You now can select other objects on stage and still return to the code for the objects you've pinned by clicking their tabs in the ActionScript editor.

Editing Graphics
One of the most useful elements of Studio MX 2004 is the way that the different applications support each other. For example, if you import an image into Flash but then discover you need to edit it, simply right-click on the image (either on stage or in the Library), and choose the Edit in Fireworks command. Flash will startup Fireworks MX 2004 and open the graphic with a live link back to Flash. Once you've completed the edits, click Done to return to Flash with your newly updated image.

Quick Switching
When you have multiple documents open in Flash MX 2004, you can quickly move between documents by using the keyboard shortcut CTRL+TAB.

Quick Access to Your Tools
All of the tools in the Flash MX 2004 toolbox have keyboard shortcuts that are visible next to the name of the tool when you hover over it with the mouse. One of the most useful shortcuts is using the Q key to switch the transform modifier. Anytime you have an object you want to resize on stage, simply select the object and then press Q. This will immediately switch the current tool to the Transform tool and place transformation handles on the selected object.