A Key Fireworks Extension Development Technique


Without a doubt, the Fireworks extensibility model is quite robust. What's the best way to get a handle on it all especially for someone coming from a Dreamweaver background? Short answer: the History panel. The History panel in Fireworks records actions taken to create Fireworks graphics. Like Dreamweaver's History panel, selected steps can be saved as a command to be executed at will. More importantly for our purposes, selected steps can also be copied to the Clipboard and then pasted into a text editor for examination and modification. I use this technique to create most of the core Fireworks routines for my extensions.

How do you apply this technique? As an example, let's say that as part of a new extension, you want to create a star-shaped graphic with a variable number of points. Here's how I would approach the problem:

  1. Create a blank document to start with an uncluttered workspace.

  2. Remove any existing History panel steps by choosing Clear History from the History panel options menu.

  3. Select the Polygon tool from the Tools panel.

  4. In the Property inspector, set the Shape to Star and the Sides to 5. (With a star shape as opposed to a polygon, the Sides option specifies the number of points.)

    You'll notice that no steps have yet to appear in the History panel. As in Dreamweaver, Fireworks does not record mouse movements or tool selections. Setting an object's properties also will not be recorded unless an object is selected. A key exception to the last statement is modifying the Fill color ; this always generates a History panel step.

  5. Draw a star on the page.

    The History panel displays the step Polygon tool .

  6. Choose the Polygon tool step in the History panel.

  7. Copy the step either by choosing Copy Steps from the History panel options menu or by selecting the Copy Selected History Steps to the Clipboard button.

  8. Open a text editor and paste in the contents of the Clipboard.

    The code posted will look like this:

     fw.getDocumentDOM().addNewStar(5, -1, true,  {x:323, y:168}, {x:323, y:105}); 

    If you examine the addNewStar() function description in the Extending Fireworks documentation, you'll see that the first argument is the number of points.

  9. To begin the process of parameterizing the points value, add a variable statement before the addNewStar function call, as in this example:

     var the Points = 8; 
  10. Now substitute the new variable for the points value, like this:

    graphics/07icon16.gif

  11. To test your routine, save the text file with a .jsf extension. Then return to Fireworks to delete the existing star; Fireworks will insert the new star in the same location. It's better to see the changes this way.

  12. Choose Commands, Run Script and locate the just saved .jsf file.

    Your new star with the desired number of points should appear.

To test a series of different values without modifying the .jsf file each time, set your variable to accept a prompt value, like this:

 thePoints = prompt("Enter the number of points",""); 

This results in a prompt dialogFireworks' only native method of accepting user input outside of its new Flash user interface commandsas shown in Figure 7.8.

Figure 7.8. Prior to Fireworks MX, user interfaces for native Fireworks commands were limited to simple prompts like this one. In Fireworks MX, commands may employ a Flash user interface.

graphics/07fig08.gif

Any of the addNewStar() function's arguments can be set up for user interaction as seen in Figure 7.9.

Figure 7.9. Test your Fireworks functions interactively by setting a parameter equal to a prompt() function call. This page shows three stars created by using the command described in this sectionwith five, six, and seven points respectively and the preparation for a fourth star with eight points. The gradient fill is picked up from a previous selection; however, the drop shadow effects were added later.

graphics/07fig09.gif

Not all arguments are as straightforward as our example, however. The star's position is given as the object's center point, rather than the top-left corner of the bounding rectangle shown in the Property inspector or the Info panel. Still, with a little effort, you can control virtually every aspect of Fireworks' drawing tools, which can add significantly to Dreamweaver's functionality.



Joseph Lowery's Beyond Dreamweaver
Joseph Lowerys Beyond Dreamweaver
ISBN: B000H2MWYS
EAN: N/A
Year: 2001
Pages: 87
Authors: Joseph Lowery

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net