Welcome to Firewoiks
An Adobe Fireworks design oriented blog by web designer, Matt Stow.
Adobe Feature Request/Bug Report Form
Posted: November 29 2008
For those who of you who aren't aware, any bugs you encounter in Adobe software can be reported through their Feature Request/Bug Report Form.
So if you find a bug, don't just keep it to yourself. Remember, the more people that log the same bug, the more likely it is to get fixed in the next release - or with a patch if we're really lucky.
Creating standards-compliant web designs with Fireworks CS4
Posted: November 19 2008
For years, Fireworks has played a huge role in my workflow from design to finished page. However, there was an obvious gap where I had to manually write the markup and CSS after slicing and exporting the relevant images. The Fireworks CS4 team and I realised this obstacle and set out to address the issue with its CSS Export feature.
As a Fireworks and web standards evangelist, I decided to work with the Fireworks team to help produce an enhanced version of the CSS Export feature, which empowers you to create better, standards-compliant web pages.
Read the full article in the Adobe Fireworks Developer Center
How to Create Circular Arrows
Posted: July 06 2008
A user in the Fireworks Support forum wanted to know how to create circular arrows.
NOMUS: All Hail The Mouse King
Posted: July 01 2008
Who knows what mouse arm is? Raise your mouse arm. Nobody? Unfortunately, I do. I've got it.
I never would have thought it, but after all these years spent in front of the computer, with my right hand firmly on the mouse - my body finally had enough.
After months of suffering with a dropped shoulder, pains in the neck, shoulder and arm, numb fingers, lots of physiotherapy, and not being able to do much work, drive, garden, or even play the Wii, I've finally found the answer. The NOMUS ergonomic mouse by Sun-Flex. Hallelujah!
The NOMUS is not like any other mouse, being described as an ergonomic wrist support with an intergrated mouse function. It's the size of a standard keyboard, most of it padded wrist support, but in the middle is the magic. It's hard to describe, so these images should help.
The central control function gives the arms an inwardly-rotated working position and the wrist support keeps your wrists straight. This reduces the load on muscles and the muscle attachment points in the wrists, forearms, shoulders and neck. Basically, it means it's good for you. I'm proof.
The three most common problems associated with mousing are reaching, gripping and overuse. The NOMUS addresses all of these issues.
Because it sits in front of your keyboard, reaching is eliminated and, as both hands are used to operate the mouse, the workload is shared whilst both hands are kept in a neutral position.
One hand operates the roller bar to move the cursor whilst the other is responsible for clicking. As the buttons are set up for left or right hand use, it is easy to alternate tasks, thus distributing the workload on each hand.
Controlling the mouse pointer is responsive and effortless. It takes minutes to get accustomed to. As a designer, I regularly need to press keys (like Shift) while using the mouse. Although is becomes a bit more difficult not having one hand "free" so to speak, it is worth the time trying to adjust. You may work slightly slower at times, but it's better than not being able to work at all.
The only minor downsides with the NOMUS are that it's a bit pricey, the scroll feature isn't smooth, and there's no middle mouse button feature. But I can live with that.
So, for anyone suffering similar symptoms to me, I urge you to visit the website, learn all about it, and then give it a try. For those not suffering yet, still give it a go. And all of you, watch your posture!.
Matte Images Made Easy
Posted: May 06 2008
A matte image? What's that? Hopefully this image should explain…
And why would you want to do this? By cutting out an image fitting to its pixel boundaries, you have more flexibility in terms of its position within a complicated background. It also allows for smaller file sizes - as the transparent matte image has fewer colours.
So how do you go about creating one? Easy!
- Download Create Matte Image v1.1 command pack
- Extract the two commands to your /Configuration/Commands folder
- Select whichever objects you wish to create a matte copy of
- Run the Create Matte Mask command. A new object, Matte Mask, will be created
- Select all of the objects to create the matte from, including backgrounds and the Matte Mask
- Run the Create Matte Image command.
Voila! Your Matte Image will be created
Please note that the Create Matte Image command currently has problems where sub-layers are involved.
Designing and Implementing a Spry menu with Fireworks and Dreamweaver CS3
Posted: April 14 2008
With the release of the Spry framework and its integration into Adobe Dreamweaver CS3, it's now very easy to rapidly develop Ajax-powered web pages.
In this article I'll demonstrate how to insert a Spry menu bar into an existing HTML document, design and export a new skin in Adobe Fireworks CS3, and implement this skin into the Spry menu bar using CSS.
After completing this sample project you will have learned a variety of skills for both Fireworks and Dreamweaver, how to write CSS, and best practice techniques to create an accessible menu system that also supports text resizing in the browser.
To read this article in full, please visit the Adobe Dreamweaver Developer Center.
WCAG Colour Contrast Analyser v1.0
Posted: March 15 2008
Checkpoint 2.2 of the Web Content Accessibility Guidelines (WCAG) requires that foreground and background colour combinations provide sufficient contrast when viewed by someone having colour deficits or when viewed on a black and white screen.
To assist designers with meeting this requirement, I have created two commands that allow you to compare the contrast of the fills of two vector objects, or compare two colours chosen from the colour picker.
Fit Canvas and Trim Canvas v1.0
Posted: February 18 2008
I use Fireworks' native Fit and Trim Canvas functions very regularly. However, they're dangerously flawed as they bizarrely select every object on the canvas, regardless of whether they're hidden or locked, and allow them to be moved!
So I thought it was time to create improved versions of these commands, that respect your current selection, and restore it after fitting or trimming the canvas.
My good friend and programmer extraordinaire, Amos Robinson, helped with these commands, writing some awesome classes that manage your selection.
Download Fit and Trim Canvas command pack.
I'd suggest re-assigning Ctrl+Alt+F and Ctrl+Alt+T (Win) to these commands to take immediate advantage of them.
Copy Colour to Clibpboard v1.2
Posted: February 17 2008
This minor revision copies the hex code as plain text.
Paste Attributes on Slices
Posted: February 16 2008
Natively, Fireworks does not let you copy the attributes (file format, palette type, transparency etc) of one slice, and paste it on to another. This has forced me to create commands to replace the standard Copy and Paste Attributes functions.
Aside from adding the ability to Paste Attributes on slices, they function almost identically to the native functions. An unfortunate limitation of running a FW command will lose any selected text in a text object, but this is a minor issue in my opinion - and can sometimes be beneficial.
I'd suggest just re-assigning Ctrl+C and Ctrl+Alt+Shift+V (Win) to these commands to begin taking advantage of them straight away.
Copy Colour to Clibpboard v1.1
Posted: January 20 2008
Inspired by similar commands by Dustin Dupree, this new set of commands can improve a user's workflow by allowing automatic copying of colours in a FW document to your clipboard.
The command pack includes:
- Copy Colour From Picker - Opens a colour picker dialog at the bottom-right of the window for the user to pick any colour in the document.
- Copy Fill Colour - Automatically copies the fill colour of any vector object to the clipboard. Prompts the user to choose a colour if a Gradient or Web Dither fill is used. Does not work with Pattern fill.
- Copy Stroke Colour - Copies the stroke colour of a vector object to the clipboard.
- Copy Colour Preferences - Allows the user to persistently change how colours are copied: Copy hex codes in upper or lower case, copy using shorthand notation (where appropriate), and with or without the hash (#) symbol. By default, the commands copy in lowercase, using shorthand notation, and with the hash symbol.
When assigned to keyboard shortcuts, these commands can greatly improve a user's efficiency - especially when taking the design to the XHTML/CSS build stage.
Please let me know if you find them useful, find any bugs or have suggestions for improvement.
Space Objects Evenly v1.1
Posted: January 13 2008
Fireworks comes with functions already built in to the Align panel that apparently space objects evenly - but they're pretty useless.
So, I've created two commands to space selected objects evenly on the canvas, both horizontally and vertically respectively.
The user has two choices when using these commands: to specify the spacing in pixels, or let it space the objects depending on the size of the selection bounds.
I'm pretty confident that unlike the Space Evenly commands in the Align panel - my commands actually… Space Evenly!
For accuracy, the spacing of each object takes in to account any strokes and effects applied to an object - and not just it's actual selection bounds.
One example usage is for creating composite images to be used for CSS backgrounds.
Pixel Transform Mode For Symbols!
Posted: January 4 2008
Fireworks' vector anti-aliasing is unfortunately not as smooth as it is with bitmaps. This is especially noticeable with rotated vectors. One workaround is to convert your objects to symbols and create a bitmap copy of the vectors within the symbol as I did in my last tutorial.
However, I've never been happy with that extra step, and have just discovered that symbols can be set to use "Pixel" mode when transforming - so no more converting to bitmaps. How awesome!
The property isn't changeable natively in the UI, so I have created two commands to do it for you. They change a symbol's tranform mode to Paths or Pixels respectively, and append the current mode to the instance name so you know at a glance which setting it's on.
It's important to note that with a symbol set to Pixel transform mode, scaling it up will cause pixelation.
Let's hope the anti-aliasing algorithm is improved, and that this option makes it in to the UI for CS4.
Download Set Symbol Transform Mode pack in the meantime.
Using Symbols to Create a Quick and Easily Updatable Photo Montage
Posted: December 22 2007
With the introduction of the Swap Symbol feature in CS3, Fireworks has given us an incredible flexibility to exchange objects quickly. One particular use is for a photo montage for your website as shown below. One can be created within minutes, and updated ridiculously easily, whenever the need arises.
Fire on the Bay Launches New Site
Posted: December 19 2007
Fire on the Bay, an Adobe Fireworks User Group serving the San Francisco Bay Area, has just launched its new website. Designed by Aaron Beall, with the XHTML/CSS built by me and ColdFusion development by Luke Kilpatrick, the new website showcases just what's achievable when two Fireworks Gurus and a ColdFusion Guy collaborate.
Visit Fire on the Bay to see how awesome it is ;)
Rich Arrow - Arrows Made Simple
Posted: November 24 2007
Fireworks is an awesome tool for most jobs, but diagramming isn't really one of its strong points.
A common request is a decent arrow tool. While FW ships with the Add Arrowheads command, it is quite limited:
- Using this command, arrowheads can only be applied to lines. I personally hate lines. Their pixel location on the canvas and poor anti-aliasing mean I never use them - rectangles are my best friend.
- You cannot resize a grouped arrow without it distorting, unless you convert it to a symbol with 9-slice scaling enabled.
- You cannot use the command to change or remove a particular arrowhead. You have to ungroup, delete, and then re-run the command.
So I thought I'd delve into Rich Symbols, to see if these could help to alleviate some of the problems. It turns out they can, and we now have Rich Arrow :)
Rich Arrow has the following properties/benefits:
- Fill Colour
- Shaft Size: 1 to 5 (2 & 4 anti-alias)
- Start Arrow Type - None, 1 to 17
- End Arrow Type - None, 1 to 17
- 9-slice scaling enabled so the arrow heads won't distort when resizing
To use Rich Arrow, simply download the zip file below and extract the two files (Rich Arrow.graphic.png & Rich Arrow.jsf) in:
- Windows: <user settings>\Application Data\Adobe\Fireworks CS3\Common Library\Custom Symbols
- Mac: <user name>/Application Support/Adobe/Fireworks CS3/Common Library/Custom Symbols
Then just drag it on to the canvas from the Common Library, and open the Symbol Properties panel to change any of the above properties.
Various Extension Updates
Posted: October 01 2007
Here's some new and updated commands…
Make Guides from Selection v1.5 - NEW
Based on Kleanthis Economou's command from 2001, my version is a little more useful.
Guides will be placed more intelligently around objects, including their strokes and effects if you choose. For text objects, guides will be placed around the actual text, and not its bounding box. The command will also correctly draw guides around masked objects, symbols and groups.
Guides can be placed at each edge of a selection, through the middle in either direction, or any combination of your choice.
Download Make Guides From Selection command
Set Primitive Rectangle Corner Radius v1.3 - UPDATE
An update to this popular command gives the user the ability to apply different pixel radii to multiple selected rectangles. I've also fixed a bug where the radius couldn't be set to 0.
Download Set Corner Radius command
Brush and Stroke Commands v1.4 - UPDATE
This update allows you to use the Brush Size - Increase command on an object with no stroke, to set it's stroke to the default 1px black soft-line.
Download Brush and Stroke commands package
Change Blend Mode Commands v1.2 - UPDATE
This update fixes a bug where changing the blend mode didn't work correctly when a mask was selected.
Download Change Blend Mode commands package
A big thank you goes out to Aaron Beall, for without his help and his FWAPI Inspector panel, none of these would have been possible.
The Rectangle Ain't So Primitive Now
Posted: September 10 2007
I've always been disappointed by the fact that the Primitive Rectangle tool used percentages for its corner roundness. I'm not sure what the reasoning behind it was, but I'm pretty sure it's not what most users are looking for.
The Rounded Rectangle Autoshape improves on the primitive in a lot of ways - but it also has some serious downsides.
So anyway, I thought I've give Fireworks users an opportunity to use the Primitive Rectangle and specify pixel corner radii.
Download Firewoiks Set Corner Radius command
Just pop it in your /Configuration/Commands folder.
To accompany my new command, I have also updated my Resize Objects commands pack to version 1.2. This update incorporates the technology found in Set Corner Radius, to allow you to resize rectangles by 1 or 10 pixels in any direction and maintain the same corner radius in pixels.
Creating Snake Loading Animations
Posted: August 01 2007
Following cold on the heels of my article, Creating Ajax loading animations in Fireworks, comes a new tutorial on how to create the "Snake" style loading animations. The results of which are far better than what can be created at (insert bias here) www.ajaxload.info.
Take a look and bask in its delights…
Change Blend Mode Commands v1.1
Posted: June 02 2007
In Photoshop, the user can cycle through Blend Modes using Shift+- & Shift+= (or Shift+Num - & Shift+Num +), which also has the added benefit of jumping back to the start when you move on from the last blend mode available. And now, so can Fireworks :)
As FW CS3 added a number of new blend modes, these commands are designed primarily for this version. However, with a little (read: a lot of) help from Carly Lyddiard, they work on FW 8 and hopefully any version prior also.
It's important to note that blend modes cannot be applied independently to multiple objects. Using these commands on multiple objects will change them all to the blend mode of the highest object in the stack.
Once installed, the commands can be accessed through the Commands > Firewoiks menu.
Change Opacity Commands v1.0
Posted: June 01 2007
I've created some commands to individually increase or decrease the opacity of any selected objects by either 1 or 10 percent.
Since making them a few weeks ago (and assigning them to keyboard shortcuts), I use them everyday in my work. They're very handy when I'm coding the html of a design…
As I build the html, I regularly take screenshots and overlay them against the original FW design to ensure all of the measurements are perfect. With these commands, I never have to leave the keyboard. Awesome!
Once installed, the commands can be accessed through the Commands > Firewoiks menu.
Safari CSS Background Bug
Posted: May 30 2007
I've just discovered that Safari has a bug that incorrectly repeats non-repeating CSS background images where the image used is larger than the element itself.
The workaround is to give the background extra white-space so the user can't see the repeating. It's a shame, because having multiple "states" in a background image is very common practice, and I'd prefer to not have to waste valuable bytes… but oh well.
Anyways, with this new-found knowledge, I have "fixed" my animated download background images , so any Safari users should now have a flawless experience on the site :)
However, if you come across any other issues, please don't hesitate to let me know.
Fade Image Command for Fireworks CS3
Posted: May 18 2007
Unfortunately, as a result of the default linear gradient being changed from Horizontal to Vertical with the release of Fireworks CS3, Joseph Lowery's excellent and much used Fade Image Command no longer works correctly… until now.
Not content with waiting for an official release or patch, I decided to fix it myself. And I have improved upon it too, by ensuring a stroke isn't ever applied to the mask also.
Download my updated Fade Image command, extract the swf to your /Configuration/Commands/Creative directory, and relax.
Harry's head priced at $625,000
Posted: April 29 2007
NEWS.com.au reports "a bounty of $625,000 has been put on the head of Prince Harry once he lands in Iraq"
.
It's all just media-grabbing, meaningless propaganda, so thought I'd lighten the mood with this rather inappropriate image…
Resize Objects Commands v1.1
Posted: March 20 2007
This set of commands can be used to quickly change the height and width of any object by either 1 or 10 pixels. The package contains…
- Height - Decrease
- Height - Decrease 10
- Height - Increase
- Height - Increase 10
- Width - Decrease
- Width - Decrease 10
- Width - Increase
- Width - Increase 10
The commands can be accessed through the Commands > Firewoiks menu.
Brush and Stroke Commands v1.3
Posted: March 10 2007
Here's a new set of commands that allow you to Commands to quickly change the size & edge softness of the Brush tool and strokes of multiple vector objects. The package contains…
- Brush Size - Decrease
- Brush Size - Increase
- Brush Softness - Decrease
- Brush Softness - Increase
I'd suggest assigning them to keyboard shortcuts and using the Shift key as the modifier so as not to take the focus from the selected tool or object.
The commands can be accessed through the Commands > Firewoiks menu.
Frame Commands v1.1
Posted: February 25 2007
I've created a series of Frame commands that should hopefully improve Fireworks users' workflow. The package contains…
- Add Frame
- Duplicate Current Frame
- Go to Previous Frame
- Go to Next Frame
- Set Frame Delay - All
- Set Frame Delay - Current
The Go to… commands are especially useful because they wrap around to the first/last frame in the document.
The commands can be accessed through the Commands > Firewoiks menu and can of course be assigned to keyboard shortcuts.
Creating reusable, flexible, custom Ajax loading animations in Adobe Fireworks
Posted: February 22 2007
Everybody's seen them. The nice swirly loading animations that accompany many Ajax web
applications. But just how easy is it to create your own? With this technique, you'll be creating one for
every project in a matter of minutes using Fireworks® 8.
To read this article in full, please visit the Adobe Fireworks Design Center.