Over the last couple of years, there has been an increasing amount of overlap in the functionality between Fireworks and both existing and new programs like Photoshop, Illustrator, and Edge Reflow. At the same time we have shifted to focus our engineering teams on building smaller, more modular, tools and services for specific tasks in web design. Due to this overlap and as well as our change in our product development focus, we have decided not to update Fireworks to CC and instead will focus on developing new tools to meet our customers needs.

While we are not planning further feature development for Fireworks, we will continue to sell Fireworks CS6 as well as make it available as part of the Creative Cloud. We will provide security updates as necessary and may provide bug fixes. We plan to update Fireworks to support the next major releases of both Mac OS X and Windows. As more specific details on the next version of Windows and Mac OS X are made available, we may adjust these plans.

We understand that Fireworks has one of the most passionate communities on the web, and that this change will be difficult to accept. Our goal in refocusing our development efforts is to build a new-generation of task focused tools that enable our customers to create great web content.

The Web Platform and Authoring team

Updated Q&A, Tuesday May 7, 2013

We appreciate all the comments following the announcement about the future of Fireworks and would like to answer a few of the common questions that are emerging:

Does Adobe care about Fireworks customers?

Absolutely – we understand that web designers love Fireworks  for it’s unique approach to page-based, stateful interaction design and rapid prototyping, and that it is an essential part of the web design process.

Why isn’t Fireworks being developed further?

Designing for the screen in 2013 is incredibly different to designing for the screen in 1998. As we considered adding new capabilities to Fireworks, we came to the conclusion that creating new, task-focused tools would better enable us to meet the future needs of web designers and developers.

What new tools is Adobe proposing to create for web design?

Adobe has embarked on creating a new collection of tools and services aimed at addressing the needs of today’s web designer – we’ve started with focusing on responsive layout, web animation and HTML, CSS and JavaScript code editing and are delivering new Edge tools to address these use cases. We are actively working on next-generation solutions for screen design and prototyping that we hope our existing Fireworks customers will love.

The show of support for Fireworks from the community has reaffirmed our belief that Adobe should continue to deliver dedicated tools for web designers – what follows Fireworks CS6 will be an revolutionary leap, designed from the ground up with the needs of the modern web designer front and center. To do this we need your help. We’d love to hear about how you work, what challenges you face, where you experience the most pain in your day to day design processes.

If you’d like to join us in the process of creating these new tools then please sign-up here.

Will Fireworks continue to be available?

Yes, Fireworks CS6 will continue to be available as a standalone product and as part of a Creative Cloud membership.

Should I continue to use Fireworks?

Yes, if Fireworks CS6 is part of your current workflow then there is no reason to make any changes to your use of the product. Adobe will continue to provide support for Fireworks CS6

Is Adobe really going to fix any of the existing bugs in Fireworks?

Yes, Adobe is already planning to release an update for Fireworks CS6 in the coming weeks that addresses over 25 reported issues, including the “File not found” issue on Mac OS 10.8 often experienced when exporting from the Image Preview dialog.

Is Adobe proposing that existing Fireworks customers switch to Photoshop?

Photoshop is a major part of the design process, but we know that Fireworks offers something unique that has made it an essential part of the web designer’s toolkit. While Photoshop is continuing to add features and workflows to support web designers, whether or not it is a good replacement for Fireworks will depend on individual needs and preferences.

 Let’s first look at how we can create a jQuery Mobile webpage using Dreamweaver.

1. Launch Dreamweaver CS5.5.
2. Create a new HTML page using File >New. In the “New Document” dialog, select HTML as page type in the Blank Page option.
3. After the blank page is created, choose Insert > jQuery Mobile > Page to insert a jQuery Mobile page. In the jQuery Mobile Files dialog box that appears, retain the default settings and click OK.
4. Save the file to the desired location using the File>Save option.

Using all the exported assets

Now, let’s look at how to link the exported jQuery CSS and Sprites. Follow the steps mentioned below to update the generated CSS and Sprites in a jQuery Mobile web page:

• Launch Dreamweaver CS5.5.
• Open an existing site or create a new jQuery mobile Page by following the instructions present at the beginning of this blog (link that moves to the beginning of the blog where the instructions are present).
• In the HTML page, the tag linking the default jQuery CSS to the HTML page is shown below:

<link href=”jquery-mobile/jquery.mobile-1.0a3.min.css” rel=”stylesheet” type=”text/css” />

< include before screenshot>

The href attribute points to the location of the default CSS file. To point to the CSS file exported from Fireworks, point the “href” attribute to the location of the exported CSS file.

• After including the CSS file, apply the CSS to the desired page/elements in the page.

To set the theme for an entire page, include the data-theme attribute and the desired swatch name for the div containing the attribute data-role with the value page. For instance, to apply swatch ‘a’ to an entire page include data-theme=”a” as shown below:

<div data-role=”page” id=”page” data-theme=”a”>

All the assets inside this div will use this data theme which can be overridden by including theme name for individual tags.

You can modify theme of a single element in the page by including the data-theme attribute for the tag containing the element to be modified.

• After making the necessary changes, click on the Live View button to review the updated theme that appears within the Dreamweaver workspace

<screenshot>

Using a single swatch

Let’s link the exported jQuery CSS containing a single swatch. Follow the steps mentioned below to include an additional swatch in the jQuery web page:

• Launch Dreamweaver CS5.5.
• Open an existing site or create a new jQuery mobile Page by following the instructions present at the beginning of this blog.
• In the HTML page, include a tag to link the CSS containing the additional swatch as shown below:

<link href=”jquery-mobile/gSwatch. css” rel=”stylesheet” type=”text/css” />

The href attribute points to the location where the CSS file is located. Modify the href attribute to point to the location where the CSS file for the individual swatch that is exported from Fireworks is present.

• After including the CSS file, apply CSS to the desired page/specific elements in the page. To set the theme for an entire page, include data-theme attribute with the desired swatch name for the div containing the attribute data-role with the value page. For instance, to apply swatch ‘g’ to an entire page include data-theme=”g” as shown below:

<div data-role=”page” id=”page” data-theme=”g”>

All the assets inside this div will have this data theme which can be overridden by including theme name for individual tags. To modify theme of a single element in the page by including the data-theme attribute for the tag containing the element to be modified.

• After making the necessary changes, click the Live View button to review the updated theme that appears within the Dreamweaver workspace.

Sample jQuery Mobile pages with default swatches and modified swatches can be downloaded here(gotham_project_default and gotham_project_revised). You can see the screenshots of the webpages using default swatches and modified swatches below.  Of the two screenshots, the first one shows the sample jQuery web page with the default swatches applied to it and the adjacent screenshot shows the same webpage that uses the two swatches-a ,g, created in this blog series.

Download CSS3 Mobile pack from here.

Article on Creating jQuery Mobile Websites themes in Fireworks using CSS3 Mobile Pack on Adobe Developer Center.

• Export both CSS and sprites at one go.
• Export Sprites or individual swatch CSS.

Export both the CSS and sprites

Select Commands > jQuery Mobile > Export Theme to generate the swatches for all the pages along with the sprites. The CSS file with all the swatches along with the Sprites is exported to the desired location.

Export a specific swatch or sprite individually

Select Export Current Swatch in the jQuery Mobile Theme Preview panel.

The CSS exported for an individual swatch consists of classes related only to a single swatch page. A jQuery page can consist of as many swatches as required. This command is particularly helpful in cases where you already have the webpage built using default jQuery Mobile swatches and you are interested in including few additional swatches (x,y,z,etc.,) for special cases.

Modify and export sprite images

• Select the “Export Sprites” option to export the sprites to a specific location.

This option can be used when you want to modify and export only the sprite images. In the example provided, I wanted 2 back buttons-a yellow and a red. So, I deleted one of the sprite images that wasn’t in use and replaced it with another red back button.

Download CSS3 Mobile pack from here.

Article on Creating jQuery Mobile Websites themes in Fireworks using CSS3 Mobile Pack on Adobe Developer Center.

In the earlier blog, we learnt how to modify swatches and include additional swatches. You can download a copy of the template with modified assets here. The steps to preview the revised jQuery template are:

• Open the jQuery template “gotham_project” in Fireworks and browse to the swatch page “g” in the Pages panel.

• Select Windows > Extensions > jQuery Mobile Theme Preview, to preview a single theme inside the Fireworks workspace.

• The Preview panel appears and displays a sample webpage with the current swatch applied to it.

• To preview all the swatches along with the sprites inside a browser, select Commands > jQuery Mobile > Preview Theme. The following screenshot shows swatch “a” that was modified in the first blog.

Click the tabs to preview the respective themes.

Download CSS3 Mobile pack from here.

Article on Creating jQuery Mobile Websites themes in Fireworks using CSS3 Mobile Pack on Adobe Developer Center.

Let’s jump in and create a new jQuery Mobile Theme in Fireworks (CS5 and later versions).

• Download and install the CSS3 Mobile Pack.
• Select Commands > jQuery Mobile > Create New Theme

This command creates a jQuery template consisting of five default swatch pages (a,b,c,d and e), a global styles/assets page and an instruction page.

You can modify the default theme by making the necessary changes to the default swatch pages and the sprites page according to design/branding requirements. To create additional swatches, duplicate an existing swatch page.

• To duplicate a swatch page, open the Pages panel, right-click the swatch page, and select the “Duplicate Page” option.
• After duplicating the page, rename the page to the swatch name that will be used in the exported CSS. jQuery suggests that you use one of the 26 alphabets(a-z).

Modifying and updating existing templates

 Let’s look at an example where we’ll be modifying one of the default swatches in the template and including an additional swatch.

• Create a jQuery template in Fireworks by selecting Commands > jQuery Mobile > Create New Theme. You’ll see a new jQuery template created in Fireworks as shown in the following screenshot:

• Open the Pages panel. Observer that the first page named “Global Assets and Styles” is followed by 5 pages named a-e. Page “Global Assets and Styles” includes the default sprites and other global styles such as roundness, active button color, icon background, etc., which are used across all the swatches. Pages a-e are the default swatches provided in the template.

• Let’s modify swatch ‘a” Click on the swatch page ‘a’ and modify the assets present on the canvas. You can modify the colors, change text styles, apply gradient, add roundness, apply effects such as drop shadows, or make other modifications as desired. You can see the modified swatch page “a” in the screenshot shown below:

• Let’s add additional swatch pages. To do this you duplicate an existing swatch page. Right-click the swatch page and select the duplicate page  option as shown in the following screenshot:

• The swatch name is inherited from the page name. To rename the page, right-click the duplicate page and select Rename Page. Since jQuery recommends that we use one of the alphabets, let’s rename our swatch page to “g”.

• We’ll now modify the swatch page as we did for the swatch “a”. The following screenshot shows the modified swatch page “g”.

• Let’s modify jQuery sprites that we’ll be using in our jQuery webpage. Browse to the page “Global Assets and Styles” in the Pages panel and change the color of the sprites. Global styles such as roundness, background color for the icons,etc., have also been modified. In the following screenshot, you can see the modified sprites and global styles present in the template. Global styles such as roundness, links, etc., are used across all the swatches.

• You can now save a copy of the file at your desired location by clicking on File>Save option.

Download CSS3 Mobile pack from here.

Article on Creating jQuery Mobile Websites themes in Fireworks using CSS3 Mobile Pack on Adobe Developer Center.

1. Introduction to jQuery Mobile Theme Skinning extension and jQuery Mobile framework
2. Creating a new jQuery template
3. Previewing the jQuery Mobile design
4. Exporting the design to CSS
5. Creating a jQuery Mobile webpage in Dreamweaver and using the exported CSS file in the new web page

jQuery Mobile Theme Skinning

The jQuery mobile theme skinning is part of the CSS3 Mobile Pack extension for Fireworks. This extension enables you to create or update the theme of a jQuery Mobile website using Fireworks.

In Fireworks, a template with all the modifiable design aspects for jQuery Mobile is provided. After modifying the themes present in the template, you can preview the look and feel of the themes using an in-app preview or a browser, and export the corresponding CSS code along with the sprite assets.

jQuery Mobile Framework

The jQuery Mobile Framework is a JavaScript framework that allows you to quickly build websites for mobile devices. It is a touch-optimized web framework designed for smartphones and tablets.

jQuery Mobile works on the vast majority of all modern desktop, smartphone, tablet, and e-reader platforms. The jQuery Mobile Framework is easy to use and includes web-specific controls such as buttons, sliders, list elements, and many more.

When you build mobile websites with the jQuery Mobile Framework, you can leverage the default theme set provided with the framework. To learn more about how the default theme works, read the jQuery Mobile Framework Theme Documentation.

Themes and Swatches

jQuery mobile pages consist of a set of design objects that can be modified before they are used in a web page. For example, bars, buttons and body are design objects whose styles can be modified. Styles for design objects such as lists, slider, select menus are derived from one of these design objects.

A theme includes a collection of swatches. Each swatch consists of styles for a bar, content block and various button/list interaction states. You can mix and match the bars, blocks, and buttons among the swatches on a page for more combinations. By default, design objects in a jQuery mobile page use different styles for different objects. For example, the body is uses swatch “c” and button uses swatch “a”.

Note: jQuery recommends that you limit the number of swatches to 26 (a-z).

Benefits of the jQuery Mobile framework

• jQuery Mobile uses CSS3 properties to create rounded corners, box and text shadows, and gradients. Using CSS3 properties instead of images is advantageous because it reduces the size of the theme file and the number of server requests.
• Themes include multiple color swatches, each consisting of a header bar, content body, and button states that you can freely mix and match. These swatches enable you to create visual textures and richer designs.
• Open-ended themes support up to 26 unique swatches per theme. This makes it possible to add almost unlimited variety to your designs.
• All backgrounds now use CSS3 gradients to dramatically reduce the file size and number of server requests to improve performance.
• To reduce image size, a simplified icon set includes elements most commonly used for mobile in a sprite.

Resources

• To view the ADC article regarding creation of jQuery themes using the CSS3 Mobile Pack, see http://www.adobe.com/devnet/fireworks/articles/css3-mobile-pack-jquery.html
• To view websites created with jQuery Mobile, see http://www.jqmgallery.com
• For an understanding of CSS3 Mobile pack that contains CSS properties and jQuery Mobile theme skinning, see http://www.peachpit.com/store/product.aspx?isbn=0132979780
• For resources (books, themes, tutorials, and so on) on jQuery Mobile Framework, see http://jquerymobile.com/resources/

This mobile pack contains following feature.

• CSS Properties panel
  - Extract your design comp to CSS code
•  jQuery Mobile theme skinnig feature
  - Creative your owm jQuey swatch, include custom icons, or modify default theme

Video: Using CSS3 Mobile Pack

You can download this extension from Adobe Labs

Enjoy!

More Bug fixes and stabilize application. Use AAM(Adobe Application Manager) or download from here.

http://www.adobe.com/support/fireworks/downloads_updaters.html

You can find the detail of bug fixes on the older post.

http://blogs.adobe.com/fireworks/2011/04/fireworks-cs5-1-in-creative-suite-cs5-5.html

Enjoy,

Fireworks Team

http://www.mattstow.com/

Matt Stow is a web and user interface designer who specialises in designing and developing accessible, standards-compliant websites. From conception to completion, Fireworks and Dreamweaver are his most important companions. Matt is a Fireworks evangelist and can often be found championing its abilities.

His recent invention is Math resize extension.

This extension allow user to resize an object as mathematically. I’s really useful to resize an object exact value without distortion. For example if you create rounded corner rectangle resize object via scale tool, the corner will be distorted. You need to use 9-slice scale tool to avoid problem or simply type exact value in PI W, H field. However, using this extension, it will help you to simple calculation to resize object.

Give it a try!