Alan Musselman: Fireworks Tips Archives

December 12, 2007

Check out The Rissington Podcast

If you havent heard The Rissington Podcast then you gotta check it out. Its really fun to listen to John Oxton and Jon Hicks go off on things that are related to the web industry. In the latest episode, they answered a question from a listener and discussed why they use Fireworks for web design.

The Rissington Podcast
http://therissingtonpodcast.co.uk/

Posted by amusselman at 03:55 PM | Comments (3)

October 19, 2007

Notes on this weeks Fireworks Jam Session

This week we did a demo of the new Fireworks skinning extension that works with Flex 3 Beta. When I updated the button skin, the image didnt update in Flex 3 and threw me off. This happened because when I defined the project, a folder called "src" was automatically created and I was working out of a different folder after I defined the project, bah! I should have been working out of this folder to begin with..well now I know...

I'm soo diggin the new Adobe Media Player in labs! Being able to create one Fireworks PNG that contains all the various assets for skinning the player is fan-tabulous. We would have been using Frames or multiple documents in Fw8 or below. Pages in CS3 give us the ability to create Pages in the same document with various sizes, yah!

Also we demo'd fireworkszone.com's Distrifusion, go check it out when you get a chance.

For those of you that are attending the Fireworks Jam Sessions, I want to say thanks! This really helps me burst out of my internal bubble and be one with the community and learn things together with you all. :)

Posted by amusselman at 02:41 PM | Comments (0)

August 17, 2007

Bridge Home and Fireworks CS3

Anyone see Bridge Home which essentially acts a central hub for content from within Bridge?

It's cool and an easy way to quickly surf tutorials, extensions, community blogs etc.. for our products. With Fireworks, a lot of the information is already on the Fireworks Design and Developer Centers, but its nice to know you can easily access the content while using Bridge.

Posted by amusselman at 09:58 AM | Comments (4)

July 31, 2007

Vector Path rendering in Fireworks

A lot of Fireworks users are not aware of how Fireworks renders paths and assumes what they are running into is a bug. Here's an informative TechNote for you to explore and even download various extensions to aid you when running into a problem where the stroke becomes blurry, fuzzy and aliased to the point you are trying to get the path back to normal. This also typically happens when you zoom into the document to modify vectors.

Vector path rendering in Fireworks
http://www.adobe.com/go/d6f2172a

Posted by amusselman at 01:02 PM | Comments (0)

July 27, 2007

Geek Glue, Flex and Fireworks

Geek Glue is geeking out on the Flex Integration in Fireworks CS3. :-) As they are creating additional components to the standard shipping set, I noticed some good trial and error tips. These posts are a good read on Geek Glue:

Fireworks CS3 : Creating Flex Symbols
http://geekglue.blogspot.com/2007/06/fireworks-cs3-creating-flex-symbols.html

FFC : LinkButton - Tidying Up
http://geekglue.blogspot.com/2007/07/ffc-linkbutton-tidying-up.html

Fireworks Flex Components : Extended
http://geekglue.blogspot.com/2007/07/fireworks-flex-components-extended.html

Fireworks Flex Components : Label
http://geekglue.blogspot.com/2007/07/fireworks-flex-components-label.html

There are also some great articles on Flex/Fw in the Fireworks Developer Center as well.

Posted by amusselman at 11:23 AM | Comments (0)

July 19, 2007

Jedi's Orb + Background + Lights Tutorial

Jedi over at crying-wolves.net created a great tutorial on creating an Orb like object with accurate lighting effects on the background. Check it out when you get a chance, I picked up some good tips on using the Edge property in combination with textures in the Property Inspector.

Posted by amusselman at 04:31 AM | Comments (0)

July 17, 2007

Fireworks Developer Center - Updated!

Two new updates in the Fireworks Developer Center worth mentioning here is Viktor's updated Color Palette panel for Fireworks CS3 which adds a new user experience and some new enhancements that make using the panel that much more enjoyable to work with. Due to popular demand, the other update is the Create Slideshow players source FLAs/AS files have been posted for your own personal enjoyment and customization using Flash CS3. (The HTML/Spry version is straight forward and doesnt require posting the source.)

Posted by amusselman at 03:02 AM | Comments (0)

May 02, 2007

Fireworks Developer Center: Fresh Downloads!

If you haven't seen the new Fireworks Developer Center, I'd suggest taking a peep. We updated the Fireworks Downloads section with 2 fresh Downloads thanks to Steven Grosvenor and Jose Angel Rivera Dominguez!

Steven added a Command Panel called Super Guides 1.0 (Super useful for Isometric Shapes and more) and Jose added a fantastic set of Old Paper Styles for that instant Old Paper effect that is very useful.

Posted by amusselman at 07:05 PM | Comments (1)

April 11, 2007

Extensions to manage Color Palettes across team environments on a per project basis

Have you ever worked on a project and kept asking others for a current color palette to import and stay consistent with everyone else? Well, if you have expreienced this pain point there are two simple extensions for Dreamweaver and Fireworks that Developers in the trenches created to enhance their existing workflow. While they are not bug free and as robust as they could be, its interesting to see how team members utilize the extensibility layer in Fireworks, Dreamweaver and Flash (and now Photoshop via John Nack) to improve their workflow without expecting us (Adobe) to resolve the workflow issue in the next version.

Remote Color Swatch Extension for Fireworks:
http://www.robertgoerke.com/colorpanel.html

Color Palette Extension for Dreamweaver:
http://bnewtz.cannet.com/wp/

Now, whats in the back of my mind lately is how to effectively build a robust panel that can span across multiple apps in the suite to help developers manage colors on a per project basis. For now, I like to think about Fireworks cause its easier to solve our own worflows and its my favorite app out of the suite, but spanning a remote color swatch panel across teams that use various apps to get the job done could be very rewarding and increase overall team productivity, no? How do you manage working with various Color Palettes in a team environment?

Posted by amusselman at 01:22 PM | Comments (0)

December 20, 2006

Taking a Fireworks comp to a CSS-based layout in Dreamweaver

Sheri German and Gordon MacKay have whipped up a 3 part article series on working with a design comp in Fireworks and converting it to a CSS based layout in Dreamweaver. Best of all, its free and on the Fireworks Developer Center!!

Taking a Fireworks comp to a CSS-based layout in Dreamweaver

Part 1: Initial design
http://www.adobe.com/devnet/fireworks/articles/web_standards_layouts_pt1.html

Taking a Fireworks comp to a CSS-based layout in Dreamweaver

Part 2: Markup preparation
http://www.adobe.com/devnet/fireworks/articles/web_standards_layouts_pt2.html

Taking a Fireworks comp to a CSS-based layout in Dreamweaver

Part 3: Layout and CSS
http://www.adobe.com/devnet/fireworks/articles/web_standards_layouts_pt3.html

Thanks to Sheri and Gordon for sharing these helpful techniques with the community and we also can't forget about our wonderful in-house Fireworks Developer Center Editor and more, Stefan Gruenwedel. :)

You can also find more work by Sheri and Gordon at CMX!

Posted by amusselman at 11:24 AM | Comments (4)

November 20, 2006

Fireworks Design Center now live!

Adobe Fireworks has a wonderful home in the Design Center!

Thanks to all the hard work the Web team and others have made to implement the additional Design Center it is a refreshing change for Fireworks users beginners to advanced alike to enjoy this new center.

The Fireworks Developer Center will also be able to focus on Developer centric articles going forward.

If you are feeling motivated to post a Tip or Trick, please lemme know!

Posted by amusselman at 11:32 AM | Comments (0)

October 18, 2006

Gordon's FW Symbol Library

Just found some nice PNGs and Symbol Libraries for Fireworks at Gordon's site. Enjoy:

http://gordonmac.com/downloads/?type=fireworks

Posted by amusselman at 01:15 PM | Comments (1)

August 25, 2006

New forum dedicated to Adobe Fireworks

There's a new Fireworks forum dedicated to Adobe Fireworks topics and anything relating to Adobe Fireworks such as integration with Dreamweaver or Flash. Check it out when you get a chance:

FireworksGuru Forum
http://www.fireworksguruforum.com

Posted by amusselman at 12:42 PM | Comments (6)

June 29, 2006

Using Fireworks, Flash or Photoshop to design skins for Flex 2 applications

Narciso Jaramillo released an informative article on the Flex Developer Center with various ways to customize the new Halo Aeon Theme using Fireworks, Photoshop or Flash. NJ also has a blog and focuses primarily on Flex topics so be sure to keep an eye on it for more tips and tricks with Flex!

I've also seen a Fireworks AutoShape prototype that will allow you to export your graphics for use in Flex as 9-slice. Stay tuned for more information on this mysterious AutoShape. ;-)

Posted by amusselman at 09:54 AM | Comments (0)

February 27, 2006

Modifying HTML Output with HTML Styles in Fireworks

Fresh off the press, that's Trevor's latest article released on the Fireworks Developer Center. For those of you that didnt know, Firework's HTML/CSS output is externalized for all to modify till their hearts content using JavaScript.

With Trevor's latest article you'll be able to understand and learn how the HTML output works inside Fireworks so you can start making your own to stay in-line with todays ever-changing standards.

Modifying HTML Output with HTML Styles in Fireworks
http://www.macromedia.com/devnet/fireworks/articles/fw_html_styles.html

Posted by amusselman at 03:32 PM | Comments (0)

June 29, 2005

New Fireworks tutorials, articles and extensions for the month of June

Macromedia.com

Fireworks Exchange

Pattern Frenzy V1.0

CommunityMX

Fireworkszone

New extensions added

If you know of anything you may have created for Fireworks, please let me know as I dont want to leave anything out.

Thanks!

Posted by amusselman at 09:57 AM | Comments (0)

June 21, 2005

Exploring the Path Scrubber Tools in Fireworks

I often get asked how to use the Path Scrubber tools and find myself forgetting how to use them properly since I often use a tablet to control the various elements for sensitive strokes. The trick is to go into the Stroke's Advanced Options and add pressure and other options. You'll discover unique combinations with all the options once you start to experiment with creating custom strokes.

Understanding the Path Scrubber tools:

Create a new document
Using the Vector Path tool (P), create a stroke on the canvas.

Note: The tool's effect works better when applied to strokes larger than 4pts and only on pressure sensitive strokes such as:
- Air Brush
- Line tool
- Bamboo
- Calligraphy
- Pencil
Select the stroke and go to:

Property Inspector > Stroke type > Stroke Options > Advanced...
Move the “Edit Stroke” panel to the side of the stroke you created on the canvas which will allow you to tweak the appearance real-time.
Add 76% for the pressure and 100% for speed or adjust how you see fit, click Ok when you’re finished modifying the stroke’s appearance.
Before closing the Stroke Options pop up panel, save the stroke style by clicking the “Save” icon in the lower-right corner. You might accidentally change the stroke so this way you can select the stroke anytime without re-creating it. (At least this happens to me when using the tablet on occasions. :S )
Select the [+] additive or [-] subtractive scrubber tool and brush or tap around on the stroke

Tip: By default, the scrubber tools do not have a keyboard shortcut. Add the key "7" to both scrubber tools in "Edit > Keyboard Shortcuts..." to flip back and forth while scrubbing the paths to create a more realistic stroke effect.

Posted by amusselman at 11:54 PM | Comments (0)

June 14, 2005

Extract textures directly into Fireworks using Extension Manager

Its definitely not rocket science so if you have textures to share, I'd recommend you to create an extension and share them with others. Here's the MXP so you can install it and see how it works.

First create an MXI file, list your textures, description, UI access etc.., and then package the MXI file in Extension Manager to produce the MXP file. One benefit for creating texture extensions is they easily be turned off or on when you want from extension manager without deleting the textures. This is one way to manage a ton of textures.

For others wanting to find in-depth information about MXI files, they can review the PDF on our site.

Personally, I prefer to start with a text file and rename it as ext_name.mxi, but others prefer to use the MXI Creator or MXI Wizard which guides you through the MXI creation process. I'll have to admit I like the MXI Creator better than the MXI Wizard, but try both of them and see which one works better for you.

When your finished editing the MXI file by adding textures and changing the description and UI access information, open Extension Manager if its not already open and go to:

File > Package Extension
Browse and select the MXI file (note the MXI file needs to be in the same directory as the textures to work)
Name your MXP file and save it.

Here's what the MXI file looks like below. Feel free to use the template and replace the textures with your texture names.

<description>
<![CDATA[
Textures system 1<br>
24 original Fireworks Textures<br>
www.fireworkszone.com
]]>
</description>

<ui-access>
<![CDATA[
Select textures from Textures drop-down menu.
]]>
</ui-access>

<license-agreement>
<![CDATA[

]]>
</license-agreement>

<configuration-changes>
</configuration-changes>
</macromedia-extension>

Thanks to Thierry at fireworkszone.com for providing the textures and MXP.

Posted by amusselman at 02:23 PM | Comments (3)

June 08, 2005

CMX JumpStart Vegas

This CMX JumpStart kit is fully baked and ready for your de-constructing pleasure. Designed by Fireworks guru Linda Rathgeber, and coded by CSS guru Stephanie Sullivan, this JumpStart kit will get your gears in motion as well as discovering new tips and tricks like:

Adding the FlashObject Javascript

Using sIFR for custom fonts

Customizing your slideshow, or using a static image instead

Understanding how the page was built in Dreamweaver

Understanding the hacks needed to ensure consistent rendering in multiple browsers

Adding your own masks to the Fireworks source png

Understanding the skip to content link

Working with Linda Rathgeber's Fireworks source png file and slicing/exporting images

Wow, they really thought this one out from beginning to end, so head on over to Community MX and read the full article.

Good job community MX players, I look forward to seeing what you guys come up with next!

Posted by amusselman at 06:15 PM | Comments (3)

May 31, 2005

Does Fireworks control your color palettes or do you?

As I sit here at the local laundry mat watching my clothes spin endlessly in the void of suds and dirt, I was thinking to myself "How many people really export their color palettes for later use in Fireworks"?

Do you export your color palettes? Why?

Do you save a copy for every client project you do in FW? Have a palette for every mood your in when you design mocks? Collect various palettes for various projects?

One of the main reasons I keep custom color palettes handy is so I can access any color from the popup color wells in the toolbox or property inspector. You'll understand more once you try out the steps below:

You dont have any custom colors? (Skip this part if you do) Here's a quick trick to gather color cubes from an image.

Steps to extract color information from an image:

Import any image you want to extract the color information out of
Open the Optimize panel (Window > Optimize)
Select GIF, Colors: 256
Click the "Rebuild" button (Snags the most popular colors from the image)
Open the Swatches panel. (Window > Swatches)
Select "Clear Swatches".
Click the icon in the top-right corner of the panel and select "Current Export Palette".

Now you should have some custom colors in the Swatches panel.

Save the palette somewhere useful. We'll use it for the following steps.

Customizing the color palettes:

Open the Swatches panel
Click the icon in the top-right corner of the panel and select "Add Swatches", find the .act file we created earlier and select it.
You'll notice by default, the custom colors were dumped right into the Swatches panel (Color Cubes), now open up the color well on the PI or toolbox and you'll notice the custom colors are added there as well.

There's a couple ways to do this technique, but experiment and see which works best for you.

Posted by amusselman at 08:48 PM | Comments (1)

May 28, 2005

Lens flares using the Star Auto Shape

Creating a lens flare in Fireworks is fairly simple with the proper use of Symbols and the Star AutoShape. The flare I'll show you how to create isnt neccessarily the most complex flare (sample) you'll ever see, but at least it will advance your lens flares skills. The best part is you can update the amount of points, sizing, live effects, or color values anytime by modifying 1 symbol.

Create a new document (500x500, canvas color #000000)
In the Vector section of the toolbox, select the Star Auto Shape and create one in the middle of the canvas. (defaults to 5 points)
With the Star selected, click and drag up the lower-left yellow node to 20 points
Locate the top-center node and expand the length of all the points to the edge of the canvas
Locate the center node and decrease the diameter of the center
With the flare selected, add a radial gradient with #FFFFFF being the center color fading into #FFFFFF transparency, and adjust the flare's gradient fill handles so the flare tips slightly disappear into the void
Select the flare and convert (F8) it into a Graphic Symbol
Name it "Flare001"
Duplicate the flare (ctrl-c/ctrl-v)
With the top flare selected, add a Live Effect by clicking the Effects: [+] button > Blur > Gaussian Blur (11.0)
Switch the 2 layers so the blurred flare is on the bottom. (name the layers accordingly "Flare", "Flare blurred")
Duplicate both Flares ("Flare", "Flare blurred")
Make these sets of Flares 60% smaller than the main Flares
Rotate them so the points show in the middle of the main Flares points
Lower the transparency level on the smaller flare sets (40%)

You should be able to see where Im going with using symbols and the Star AutoShape by using one symbol to update all the Flare's properties. To change the amount of flare points, simply open the "Flare001" symbol and modify the flare shape there. Once you click "Done", all the flares will adjust accordingly.

Another Flare method is:

Create a new document (500x500, canvas color #000000)
In the Vector section of the toolbox, select the Star Auto Shape and create one in the middle of the canvas. (defaults to 5 points)
With the Star selected, click and drag up the lower-left yellow node to 20 points
Locate the top-center node and expand the length of all the points to the edge of the canvas
Locate the center node and decrease the diameter of the center
With the flare selected, add a radial gradient with #FFFFFF being the center color fading into #FFFFFF transparency, and adjust the flare's gradient fill handles so the flare tips slightly disappear into the void
Add a "Zoom Blur" Live Effect to the Flare by clicking the Effects: [+] button in the PI > Blur > Zoom Blur (100,100)

Note: If you apply a Gaussian Blur with the quality set to 100%, there might be a slight performance issue when moving it around on the canvas. To prevent this from happening, turn the blur effect off in the PI or add it at the end when you get to the tweaking point of your design.

Bonus: Download the Custom Star command that will generate basic Stars for you. It doesnt randomly generate stars, but that will be the next upgrade if peeps find this useful. Once installed, apply the command to a "rectangle" object matching the size of your canvas, then adjust the "level" properties in the PI to increase or decrease stars.

Posted by amusselman at 07:29 PM | Comments (1)

May 25, 2005

Great resource for Fireworks Tips!

Thanks to Thierry Lorey for creating a site devoted to Fireworks Tips http://fireworkstips.free.fr, with an archive full of juicy tidbits of helpful information to improve your skills in Fireworks.

Be sure to surf the left-hand nav to view the various categories.

His main resource which I forgot to mention is Fireworkszone

I would highly suggest checking out both sites if you're looking for new ideas/techniques. Personally, I really dig Thierry's pattern techniques, he's got quite a style to share with the community.

Posted by amusselman at 10:49 PM | Comments (3)