Install the DOM Inspector panel, and then select the text object that represents the “Move” code (or any text object). Make sure that the drop-down menu at the top of the DOM Inspector panel is set to fw.selection
. You should see an expanded [object Text]
in the Inspector, along with all of its properties and values.
From the drop-down menu, I can select between viewing the contents of four objects:
fw.selection
An array of currently selected elements on the canvas
fw
The Fireworks object
dom
The DOM of the currently active document (which we will discuss next)
dom.pngText
A property of the currently active document (available for us to write to so that we can save data to the current document and retrieve it even after restarting Fireworks)
Document DOM
In the DOM Inspector panel, we can switch to the documentDOM
and explore its state. We can also access the documentDOM
via JavaScript with the getDocumentDOM()
method, as we did with the “Move” command:
fw.getDocumentDOM().moveSelectionBy({x:10, y:10}, false, false);
The getDocumentDOM()
method invocation returns only the DOM object of the currently active document, rather than the entire Fireworks DOM, and allows us to manipulate that document via its properties and methods. For example, the moveSelectionBy()
method (which the History panel taught us about) does the work of moving elements around the document’s canvas.
Selection Bias
Acting on the current selection is a common pattern when developing Fireworks extensions. It mirrors the way that the user selects elements on the canvas with the mouse, before performing some action on that selection.
fw.getDocumentDOM().moveSelectionBy({x:10, y:10}, false, false);
The document DOM’s moveSelectionBy() 22 function takes a JavaScript object as a parameter:
{x:10, y:10}
Given an origin in the top-left corner, this tells Fireworks to move the selected object by x
pixels to the right and by y
pixels down.
The other two boolean parameters (false
, false
) indicate to move
(as opposed to copy
) the selection and to move the entire element
(as opposed to a sub-selection
, if any exists).
Like the moveSelectionBy()
method, many other Document DOM methods 23 act on the current selection (cloneSelection()
and flattenSelection()
, to name two).
Expand Your Horizons (And The Canvas)
Using what we have learned so far, let’s write a simple command that will expand the size of our canvas.
Canvas Size
To increase the size of the canvas, we need to know the current size. Our panel can call the JavaScript below to access the canvas’ current dimensions:
var = canvasWidth = fw.getDocumentDOM().width;
var = canvasHeight = fw.getDocumentDOM().height;
Now, let’s see how to change these dimensions.
Setting the Canvas’ Size
To set the canvas’ size, we call the setDocumentCanvasSize()
method 24 of the Document DOM.
fw.getDocumentDOM().setDocumentCanvasSize({left:0, top:0, right:200, bottom:200});
The method takes a “bounding rectangle” as a parameter:
{left:0, top:0, right:200, bottom:200}
The size of the rectangle will determine the new size of the canvas:
right - left = 200
bottom - top = 200
Here, the rectangle is bounded by the object; therefore, the canvas is 200 × 200 pixels.
Increasing the Canvas’ Size: A Simple Command
Let’s create a simple command that will double the canvas’ size automatically.
Instead of going through the Modify → Canvas → Canvas Size
menu and then figuring out a width and height to input and then pressing “OK” whenever we want to increase the canvas’ size, we can combine the two code samples from above to create a quick shortcut to double the canvas’ size.
The code might look something like this:
// Double Canvas Size command, v.0.1 :)
var newWidth = fw.getDocumentDOM().width * 2;
var newHeight = fw.getDocumentDOM().height * 2;
fw.getDocumentDOM().setDocumentCanvasSize({left:0, top:0, right: newWidth, bottom: newHeight});
I’m working on a Mac, so to make this command available from the “Commands” menu in Fireworks, I could save the code above as double_size.jsf
in the following location:
/Users/<MYUSERNAME>/Library/Application Support/Adobe/Fireworks CS6/Commands/double_size.jsf
(Check the beginning of the article to see where to save your .jsf
commands if you are on a different OS.)
I leave it as an exercise for you to write and save a simple command that cuts the canvas’ size in half.
Conclusion
We’ve covered quite a few things in this article:
With the help of the History panel, we’ve seen the JavaScript that makes Fireworks run.
We’ve broken down the JavaScript code needed to move a text element on the canvas, learned about the Fireworks DOM and seen how to manipulate it.
We’ve gone over how the Console panel executes and tests our JavaScript code. We’ve learned how to debug an extension by logging to the JavaScript console
object that the panel introduces into Fireworks’ global namespace.
We’ve covered the DOM Inspector panel and how to use it to check the properties and values of various parts of the Fireworks DOM.
We’ve written a simple command to change the canvas’ size automatically.
Of course, we’ve just scratched the surface. These are just the basics to help you get started with developing Fireworks extensions. Use the techniques and resources in this article as a springboard to make more sophisticated extensions that will help you in your daily design work.
Another great way to learn more about Fireworks extensions is by deconstructing other extensions. Because Fireworks commands are simple JavaScript files, you could learn a lot by studying the code of other developers. I’d especially recommend the extensions created by the following people:
(The Project Phoenix 30 extensions, recently rebooted by Linus Lim 31 , are also worth mentioning. They include Font List, Super Nudge, Auto Save, Rename, Transform, Alignment Guides, Perspective Mockups, Retina Scaler, Layer Commands, Used Fonts and many others.)
Finally, below you’ll find an incomplete list of resources to help you along the way. If you think I’ve missed something important (or if you have any questions), let me know in the comments. I’d be happy to help.
Further Reading
(al, mb, ml)
Footnotes
1 http://www.smashingmagazine.com/2012/05/25/blueprints-for-the-web-specctr-adobe-fireworks-plugin/
2 http://www.smashingmagazine.com/2013/12/19/present-future-adobe-fireworks/
3 http://johndunning.com/fireworks/
4 http://fireworks.abeall.com/extensions/
5 http://mattstow.com/
6 http://johndunning.com/fireworks/about/SVG
7 http://fireworks.abeall.com/extensions/commands/Export/
8 http://johndunning.com/fireworks/about/GenerateWebAssets
9 http://mattstow.com/css-professionalzr.html
10 https://helpx.adobe.com/fireworks/learn/tutorials/how-to/extract-css-properties.html
11 http://www.bohemiancoding.com/sketch/
12 https://en.wikipedia.org/wiki/Application_programming_interface
13 http://help.adobe.com/en_US/fireworks/cs/extend/index.html
14 http://en.wikipedia.org/wiki/ActionScript
15 http://johndunning.com/fireworks/about/GroupCommands
16 http://fireworks.abeall.com/extensions/commands/Layer/
17 http://www.adobe.com/devnet/fireworks/articles/creating_panels_pt1.html
18 http://help.adobe.com/en_US/fireworks/cs/extend/WS5b3ccc516d4fbf351e63e3d1183c94856c-7c8c.html
19 http://johndunning.com/fireworks/about/FWConsole
20 http://en.wikipedia.org/wiki/JSON
21 http://fireworks.abeall.com/extensions/panels/#DOM-Inspector
22 http://help.adobe.com/en_US/fireworks/cs/extend/WS5b3ccc516d4fbf351e63e3d1183c94856c-7c8c.html
23 http://help.adobe.com/en_US/fireworks/cs/extend/WS5b3ccc516d4fbf351e63e3d1183c94856c-7ffe.html
24 http://help.adobe.com/en_US/fireworks/cs/extend/WS5b3ccc516d4fbf351e63e3d1183c94856c-7a9e.html
25 http://johndunning.com/fireworks/
26 http://mattstow.com/fireworks.html
27 http://fireworks.abeall.com/extensions/
28 http://www.senocular.com/fireworks/extensions/
29 http://orangecommands.com/
30 http://www.projectphoenix.io/
31 http://twitter.com/chunwui
32 http://help.adobe.com/en_US/fireworks/cs/extend/index.html
33 http://help.adobe.com/en_US/fireworks/cs/extend/WS5b3ccc516d4fbf351e63e3d1183c94988d-7ff7.html
34 http://www.fireworksguruforum.com/
35 http://twitter.com/fwextensions
36 http://twitter.com/stowball
37 http://www.fireworksguruforum.com/index.php?showforum=8
38 https://github.com/fwextensions/fwjs-errata
39 http://johndunning.com/fireworks/about/FWConsole
40 http://fireworks.abeall.com/extensions/panels/#DOM-Inspector
41 http://www.adobe.com/devnet/fireworks/articles/creating_panels_pt1.html
The post Introduction To Developing Fireworks Extensions (They’re Just JavaScript!) appeared first on Smashing Magazine .