Welcome!

Adobe Flex Authors: Liz McMillan, RealWire News Distribution, Maureen O'Gara, Yakov Fain, Keith Swenson

Related Topics: Adobe Flex

Adobe Flex: Article

Macromedia Studio 8 - An Overview

Introducing Studio 8

You can easily import, copy and paste, or export Fireworks vectors, bitmaps, animations, and multistate button graphics for use in Flash. Launch-and-edit functionality also makes it easy to edit Fireworks graphics from within Flash. Top integration features include:

  • Import Fireworks PNG files to Macromedia Flash - Directly import native Fireworks PNG files into Flash. Vectors, shapes, lines, layers, and guides remain editable, and intuitive tools add sophisticated interactivity, effects, and animation. Maintain and take advantage of existing creative assets when importing Photoshop PSD files into Fireworks and save them as layered PNG files for importing into Flash.
  • Export Macromedia Flash SWF files from Fireworks - Fireworks can export native Flash movies. Create animated GIF ad banners and export them as compact SWF files. Copy and paste Fireworks vectors, and quickly repurpose graphics by copying and pasting their paths directly into Flash.
  • Launch and edit in Fireworks - Click the edit button in the property inspector to launch the original Fireworks file or bitmap image; changes will automatically update in Flash.
  • Create custom commands and panels for Fireworks in Flash - Use Flash to create SWF movies in JavaScript and then reuse them as Fireworks commands or panels of commands. The align panel in Fireworks was first built by a customer in Flash then imported as a panel for Fireworks.
  • Mobile interface development - Mock up mobile interfaces quickly with bitmap interface components in Fireworks then export to Flash to add interactivity. Use Flash Professional 8 to design, build, and test content using its advanced authoring environment and interactive mobile emulator for deploying content to mobile phones.
  • Preserve graphical elements and color consistency - Vector attributes, such as fills, strokes, filters, and blend modes are preserved when moving objects between Flash and Fireworks. Fireworks recognizes ActionScript color values when copied from Flash and pasted into Fireworks color value fields.
Dreamweaver 8 and Fireworks 8
More than 75% of professional website developers also create graphics for sites, which makes integration between graphics programs and development tools crucial. The tight integration between Dreamweaver and Fireworks offers the best solution for rapid website development. Top integration features include:
  • CSS pop-up menus - Fireworks 8 uses CSS (Cascading Style Sheet) format to create interactive pop-up menus. The result is clean and easily customizable code that integrates well with sites built in Dreamweaver. Once integrated, use the powerful new CSS panel in Dreamweaver to quickly modify the presentation of the CSS.
  • Integrated Dreamweaver graphics editor - Leverage Fireworks technology to provide basic image manipulation and editing directly within Dreamweaver. Crop, resize, and resample images without leaving the Dreamweaver environment.
  • Roundtrip table editing with Dreamweaver - Fireworks and Dreamweaver facilitate collaboration between designers and developers while protecting each person's work. A designer can output a set of nested tables containing sliced graphics from Fireworks and pass it to a developer, who can edit the tables in Dreamweaver. The developer can then pass the tables back to the designer, who can edit the graphics files and update the tables without overwriting the developer's custom code.
  • Launch and optimize/edit - Double-click on a graphic in Dreamweaver to instantly launch Fireworks for fast editing; single-click to make simple edits without leaving Dreamweaver. Post edits to the web graphic (JPEG or GIF) or to the source image. To optimize site graphics for fastest download, choose optimize image to launch the Fireworks optimization engine.
  • Export as Dreamweaver library from Fireworks - Create a set of common graphics elements such as pieces of a navigation bar, and save them as library items. When exported from Fireworks, these items will automatically appear in the Dreamweaver library. To edit a Fireworks-originated library item, edit the original PNG and re-export it to the Dreamweaver site folder. Dreamweaver will prompt with an option to update the library item and propagate the changes site-wide.
  • Export layers, slices, or frames as absolute positioned Dreamweaver CSS layers - Create Fireworks graphics and place them with pixel-level accuracy on a page comp, and then export the layout, including the graphics, to Dreamweaver using CSS layers. Keep the existing Fireworks layout in Dreamweaver, and easily reposition the CSS layers, or convert them to tables for older browsers.
  • Integrate native behaviors In Fireworks - Create rollovers and sophisticated JavaScript effects as well as the associated source graphics. Then, import the graphics and code into Dreamweaver where the behaviors are recognized and editable as native Dreamweaver code. Edit, update, and manipulate the behavior of Fireworks graphics without interrupting workflow.
  • Auto-insert HTML and graphics - Import graphics, JavaScript, and HTML created in Fireworks directly into Dreamweaver with the one-step insert Fireworks object operation. Dreamweaver will import code created by Fireworks while maintaining precise placement, links, and other image properties.
  • Script the two applications together - Dreamweaver and Fireworks both have JavaScript-based APIs, and Fireworks can be fully automated through JavaScript, C++, or ActionScript, so scripts can drive Fireworks from Dreamweaver. The create web photo album command in Dreamweaver hints at the power available through the APIs. Other scripting examples include batch-processing graphics without leaving Dreamweaver, automatically creating multiple rollovers by defining the text of the rollover in Dreamweaver, and using a single template graphic in Fireworks.
  • Create Fireworks placeholder - In design view in Dreamweaver, insert a placeholder for an image by designating the image's precise size. To create the image, click the edit in Fireworks button to launch with a blank canvas at the correct size. After the image has been created, Fireworks will automatically replace the placeholder with the finished image in Dreamweaver.
  • Shared sites and check-in/check-out - Avoid overwriting shared files, and manage files consistently across applications. Fireworks includes the same check-in/check-out capabilities as Dreamweaver to ensure that no two people are working on the same file at the same time. Upload and download files from a remote server with a single click through FTP.
  • Trace any website graphics comp - Use Dreamweaver page properties to select a tracing image graphic from Fireworks as a guide for final HTML designs, quickly moving from comp to final web page.

More Stories By Charles E. Brown

Charles E. Brown is the former editor-in-chief of MX Developer's Journal. He is the author of Fireworks MX from Zero to Hero and Beginning Dreamweaver MX. He also contributed to The Macromedia Studio MX Bible. Charles is a senior trainer for FMC on the MX product family.

Comments (0)

Share your thoughts on this story.

Add your comment
You must be signed in to add a comment. Sign-in | Register

In accordance with our Comment Policy, we encourage comments that are on topic, relevant and to-the-point. We will remove comments that include profanity, personal attacks, racial slurs, threats of violence, or other inappropriate material that violates our Terms and Conditions, and will block users who make repeated violations. We ask all readers to expect diversity of opinion and to treat one another with dignity and respect.