はてなブックマーク

Fireworks is a great tool for building and laying out the elements of an Edge Animate project, but until now you've had to manually export individual images and then recreate your layout in Edge. The Export to Edge command will do this for you, exporting your Fireworks document as a collection of HTML and JS files that can be opened by Edge Animate. All of the elements on the first state of the fi

CSS allows a different width and color to be applied to the border on each side of an HTML element, but Fireworks' rectangles are limited to a single border color and thickness. The Multi-Border Rectangle auto shape addresses this limitation, making it easy to mock up CSS-style borders. Changing border sizes Drag any of the blue control points to change the corresponding border's width. As you dra

The Tables panel enables you to quickly mock up HTML-style tables without having to laboriously position each cell or border. Although it's relatively straightforward to arrange elements in a grid using Fireworks' alignment and distribution commands, as soon as the table contents change you'll need to reposition everything manually. The Tables panel automates this tedious process. Unlike the table

When creating mockups, you may need to take a screenshot of an existing dialog or webpage and then modify it for a new design. You'll probably also have to paint over an existing element in the screenshot, like a button label, to replace it with new text. So you select a portion of the background pixels in the screenshot, copy them, paste them, stretch them over the element you want to replace, an

The Commands panel was the first Flash panel I created for Fireworks, almost 10 years ago. The original panel has always worked fine on Windows, but with the last couple releases of Fireworks, it's been causing problems on OS X. This new version is a complete rewrite, built from the groupnd up using Flex 3, and should work on both Windows and Mac. This panel provides quick access to your favorite

When creating sketches and early mockups, it's often useful to draw image placeholders instead of including actual photos, icons, ads, etc. in the layout. The Placeholder auto shape makes this a snap. To create a Placeholder shape, find it in the Auto Shapes panel and drag it to the canvas. The shape's default size is 100 x 100 pixels, but you can drag any of the 8 yellow control points along its

While the Roundness option of the rectangle tool is handy, it's not very flexible. Once you've created a rectangle with rounded corners, you can't easily resize the rectangle without distorting the roundness of the corners. You can scale the rectangle proportionally, but then the corners will have a different radius, which is generally not the desired effect. Or you can sub-select the corner point

For example: dialog.open({ title: "My First Dialog", size: "300x200" }); This opens an empty dialog that's 300px wide and 200px tall. Due to a limitation in how Fireworks opens Flash dialogs, it's not possible to support arbitrary sizes. But it's easy to add new fixed sizes to this list, so let me know which other sizes would be useful. The maximum size of a Flash dialog in Fireworks is 500x375. d

The "Level Horizon" command helps you, um, level the horizon in crooked photos. Simply open the photo, draw a straight line along a part of the image that should be perfectly horizontal, and run the command. The photo will be rotated so that the line is horizontal and the now crooked corners of the image will be cropped to keep it rectangular. You can also draw a line along part of the image that

The Export as Favicon command creates a favicon file from the current document, which must be 16px by 16px. You can create a document of this size with the New Favicon - 16X16 command. If you want to create a favicon that also contains a 32px version of the icon, the document must have a second page with a size of 32px by 32px. The easiest way to create this is with the New Favicon - 16X16 and 32X

A collection of free productivity-enhancing extensions that I've built for Adobe Fireworks using JavaScript, ActionScript and Flex. The most recent ones include: Page Commands The commands in this extension make working with pages in Fireworks more efficient and convenient. The "New Page" dialog makes it easy to create a new page while simultaneously changing its size or background color and givin

fireworks These Adobe Fireworks extensions are mainly productivity tools. They won't help you make better-looking pictures; rather, they'll help you use Fireworks more efficiently. And if you're an extension developer yourself, some of them will help you build your own commands and Flash panels. Download them all for free! Questions or comments? Ping me at fw at johndunning dot com. Or follow me o