Archive for May, 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:

  1. Import any image you want to extract the color information out of
  2. Open the Optimize panel (Window > Optimize)
  3. Select GIF, Colors: 256
  4. Click the "Rebuild" button (Snags the most popular colors from the image)
  5. Open the Swatches panel. (Window > Swatches)
  6. Select "Clear Swatches".
  7. 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:

  1. Open the Swatches panel
  2. 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.
  3. 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.

Create animated blur effects in Fireworks

Enjoy the extension, I’ll release the FLA once I clean it up a bit. ;)

motionFX was created to ease the repetitious pain of going to each frame and incrementing the blur’s percentage for an animation. The motionFX extension allows you to create a sequence of bitmaps that are ready to be imported into Flash for rollover effects or any objects.

Download motionFX (2.0)

Access the motionFX panel by: Window > motionFX

Sample Tutorial

  1. Create a new document: 300w x 300h, 72dpi
  2. Create a text block called "motionFX" at 35pts or whatever you want (Company Logo etc..)
  3. With the Text Block object selected, open the motion FX panel (Window > motionFX) and select Zoom Blur from dropdown menu.
  4. Click the "Create" button and it will take a few seconds depending on your processor speed to render the animation.
  5. Open the Frames panel and observe the frames it created. (To learn how to use the frame panel, look up "Frames Panel" in the Help menu)
  6. Preview the animation by using the Frames "stop/play" buttons at the bottom of the canvas
  7. Insert a slice, open the optimize panel and change the settings to PNG 32, Matte: transparent / Change Canvas color to transparent
  8. Right-click the slice and select "Export Selected Slice…"
  9. Create a new folder on your HD somewhere to place the animation.
  10. Within the Export dialog, change name, and navigate the "Save as Type" drop-down menu to "Frames to Files" (This will export out the PNG Sequence for best results in Flash) Click "Save"
  11. Open Flash 2004 and Create a new Movie Clip.
  12. Import file of the PNG sequence (File > Import) into the empty MC
  13. Preview! (ctrl-enter)

A big thanks goes out to:

  • Brian Edgin
  • Hiroshi Miyazawa
  • Thijs Triemstra

for giving me guidance, ideas and helping me write cleaner ActionScript!

Of course, please let me know if you find bugs.

Want to start creating custom commands or SWF panels?

The Fireworks API (PDF with methods/propertys) gives you the ability to develop SWF panels, commands and Auto Shapes that designers/developers can use in Fireworks on a day to day basis. One of the things that amazes me the most about developers integrating Flash panels in Fireworks or custom commands is the fact it improves your workflow or gives you new ways of looking at the User Interface in Fireworks.

If you want to improve the FW interface to your liking or add new functionality, this would take a decent knowledge in ActionScript and/or JavaScript, but its not difficult to get started developing your own panels/commands.

Here’s a couple resources in case you decide to take on the challenge and manipulate or add new abilites to Fireworks.

Check out Steven Grosvenor’s excellent craftmanship at Phireworx. The Batch process panel (Image Editor Pro) is something else.

Senocular.com and Fireworks, perfect match?

Some say Senocular is a super-humanoid while others report beast-like creature sightings in and out of the East Coast. I’ll have to admit, crossing paths with this magnificent beast is truly amazing.

Heck, if you cant do it, Senocular will probably create a custom command or Flash panel so you can get the design/production work done..speaking of which, don’t forget to download Senocular’s Fireworks extensions, there’s lots of nifty gadgets floating around there.

Enjoy!

Senocular’s Fireworks Forum:

Fireworks related links:

Thank you Senocular!

Man, I look forward to seeing what you come up with next!

Check out the Fireworks “Geek Forum”

I gotta tell you…I’ve never seen so many hardcore Fireworks gurus in one place.

This Fireworks forum has got to be one of the best around with FW users from all over the world sharing tips, techniques, debates, improving workflows and best of all, creating a synergy for others to learn from their trial and errors. Since Fireworks is all about…well web graphics, its nice to see members can upload PNGs/JPGs directly to the threads. This feature makes the process easier for everyone to understand what the thread creator is talking about and particitpate actively.

I poked around on it yesterday and found myself diving into the "galaxies,vectors,tech interfces" thread. Sheesh…talk about some stellar creations, I decided to participate myself. I noticed no one was using the Star Auto Shape for lens flares and I gotta tell you, its pretty simple to create a flare once you learn how to interact with the Auto Shape..so…I got side-tracked with my design and created a "Lens flares using the Star Auto Shape" tutorial so others can learn how to create Flares using an Auto Shape. There’s also a custom command that generates a Star background, check it out.

I’m not sure if Geek Forums has gotten a Thank you from a Macromedian before, but here’s mine, "THANK YOU". You guys soo rock over there and keep up the great threads. I’ll stop by more often and offer my expertise and assistance when I can.

 

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.

  1. Create a new document (500×500, canvas color #000000)
  2. 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)
  3. With the Star selected, click and drag up the lower-left yellow node to 20 points
  4. Locate the top-center node and expand the length of all the points to the edge of the canvas
  5. Locate the center node and decrease the diameter of the center
  6. 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
  7. Select the flare and convert (F8) it into a Graphic Symbol
  8. Name it "Flare001"
  9. Duplicate the flare (ctrl-c/ctrl-v)
  10. With the top flare selected, add a Live Effect by clicking the Effects: [+] button > Blur > Gaussian Blur (11.0)
  11. Switch the 2 layers so the blurred flare is on the bottom. (name the layers accordingly "Flare", "Flare blurred")
  12. Duplicate both Flares ("Flare", "Flare blurred")
  13. Make these sets of Flares 60% smaller than the main Flares
  14. Rotate them so the points show in the middle of the main Flares points
  15. 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:

  1. Create a new document (500×500, canvas color #000000)
  2. 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)
  3. With the Star selected, click and drag up the lower-left yellow node to 20 points
  4. Locate the top-center node and expand the length of all the points to the edge of the canvas
  5. Locate the center node and decrease the diameter of the center
  6. 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
  7. 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.

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.

Flash SlideShow from within Fireworks?

Export your design mocks as a Slideshow to show the team with a few clicks. This Fireworks extension allows you to create a slideshow based upon how many frames you have in the PNG file.
Viktor also developed a Color palette for use in Fireworks. Be sure to check out the Blender tab to create blends between 2 colors with a quickness. Both of these extensions have been released to the FW Exchange this month as well as others.
Viktor’s site: http://www.zaporozhye.org/dreamworld/
Thanks Viktor!

Ah..The sweet aroma of the first entry ~

Welcome!
I am pleased to share with you my thoughts, FW shaolin techniques, new findings with technology and science, and industry opinions while working at Macromedia.
My passion at Macromedia is to be the best I can be while helping customers find a solution to fix the issue their experiencing with one of our products specifically the Studio MX 2004 products and also Contribute and Contribute Publishing Services. I’ll mainly focus my entries towards using Fireworks MX 2004 and expose helpful tips for everyone to enjoy.
I am a strong believer that Fireworks has the best workflow and will save you time and money when developing websites for clients.
I survived for many years using DW/FW/FL as my tools of the trade and I feel its time for me to give back to the community what you gave me to get where I’m at today.
Before working at Macromedia, I was (and still am) a Web Designer / Developer “Deseloper” as (Jen DeHaan calls it) for 11 years of my life. I survived the dotcom bomb days and was fortunate to have a job when the industry became overly saturated with developers. It was a challenging time for all of us. Only the strong survive and the weak find another gig.