Free Fireworks CS5 Scroll Bar and Scroll Panel Toolkit for use in prototypes, but optimized for FXG export to Flash Catalyst CS5.
The following download contains:
- 14 sample Vertical and Horizontal Scrollbars.
- 3 sample Scroll Panels.
Download [download id=”6″], unzip and view in Fireworks; navigate the Pages Panel in to toggle the samples.
What is it?
Four page sample containing Scroll Bar (Vertical and Horizontal) and Scroll Panel components for general use in Fireworks designs, but they are optimized for use in the FXG export process for Flash Catalyst projects.
Page 1 and 2 contain sample vertical and horizontal scrollbars with the necessary Flash Catalyst CS5 corresponding (scrollbar) component elements: namely, Thumb, Track, Up and Down Buttons.
Page 3 and 4 contain sample Scroll Panel designs corresponding to the Flash Catalyst CS5 Scroll Panel elements: namely, Scrolling Content, Scrollbar (samples from page 1/2).
Each Layer (object) is properly named so that it will be easy to target when converting it to respective wireframe component in Flash Catalyst CS5.
How to use it?
Exporting Scrollbar Artwork to Flash Catalyst
From Fireworks CS5:
- Select a scrollbar artwork Layer and it’s contents;
- File > Export > Fxg and Images: Selected Objects in Current Page;
To Flash Catalyst CS5:
- Choose From FXG File on the main splash page, if no current project file is open; otherwise, choose File > Import > Adobe FXG File to import the component to the current project;
- Select the imported Layer contents, then Modify > Convert Artwork to Component and from the HUD: Choose Component > Vertical Scrollbar;
- Choose Edit Parts from the HUD (Heads Up Display Panel); Select each (named) Layer element and target/activate the corresponding required HUD component element; Once the component is complete go to Modify > Exit Editing menu command, then File > Run Project to preview the interactive vertical scrollbar in your browser;
Exporting Scroll Panel Artwork to Flash Catalyst
From Fireworks CS5:
- Select a Scroll Panel artwork Layer and it’s contents;
- File > Export > Fxg and Images: Selected Objects in Current Page;
To Flash Catalyst CS5:
- Choose From FXG File on the main splash page, if no current project file is open; otherwise, choose File > Import > Adobe FXG File to import the component to the current project;
- An FXG Scroll Panel component requires a Scrollbar sub-component to exist within it. So be sure to follow the above proceedure to select/convert scrollbar artwork to vertical scrollbar component.
Once the vertical scrollbar is created, select all the Artwork on the canvas then Modify > Convert Artwork to Component > Scroll Panel.
Choose Edit Parts from the HUD (Heads Up Display Panel); Select each (named) Layer element and target/activate the corresponding required HUD component element.
Once the component is complete go to Modify > Exit Editing menu command, then File > Run Project to preview the interactive vertical scrollbar in your browser.
Scrollbar UI Toolkit created in Adobe Fireworks for Adobe Catalyst.