Edge and texture styles cannot be applied to a text object simultaneously.

One of the classes in the Exported CSS has incorrect class setting in the exported jQuery Mobile Theme.

PERFORMANCE

Fireworks document containing button symbols on Master page takes a long time to open.

Share on Facebook
]]>http://blogs.adobe.com/fireworks/2013/06/fireworks-cs6-update-12-0-1-is-live.html/feed30The future of Adobe Fireworkshttp://blogs.adobe.com/fireworks/2013/05/the-future-of-adobe-fireworks.html
http://blogs.adobe.com/fireworks/2013/05/the-future-of-adobe-fireworks.html#commentsMon, 06 May 2013 18:55:50 +0000http://blogs.adobe.com/fireworks/?p=341Today at the MAX conference we announced the latest generation of our creative tools now known as CC including Photoshop CC, Dreamweaver CC, Flash Professional CC, Edge Animate CC, and many others. As you may have noticed this announcement did not include updates to Fireworks CS6.

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, Wednesday October 1, 2014

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 today 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 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.

The Fireworks forum will continue to be available to CS6 users. For issues other than those related to product ownership, please post your questions on the Fireworks forum.

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

Adobe released an update for Fireworks CS6 in mid-2013 that addressed over 25 outstanding 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.

Share on Facebook
]]>http://blogs.adobe.com/fireworks/2013/05/the-future-of-adobe-fireworks.html/feed1205Workaround for Illustrator file open and import issue in Fireworks CS6http://blogs.adobe.com/fireworks/2012/08/workaround-for-illustrator-file-open-and-import-issue-in-fireworks-cs6.html
http://blogs.adobe.com/fireworks/2012/08/workaround-for-illustrator-file-open-and-import-issue-in-fireworks-cs6.html#commentsWed, 22 Aug 2012 08:24:38 +0000http://blogs.adobe.com/fireworks/?p=314Some of the Fireworks CS6 users are facing compatibility issues with Illustrator on Windows 7 platform.Opening or importing Illustrator files would throw Internal error.Issue seems to be due to incompatiblity with the Apple quick time application present in the machine.As a workaround for this issue , users can uninstall and reinstall Apple Quick time application and then import or open Illustrator files in Fireworks CS6.
Share on Facebook
]]>http://blogs.adobe.com/fireworks/2012/08/workaround-for-illustrator-file-open-and-import-issue-in-fireworks-cs6.html/feed8Using the generated CSS and Sprites in a jQuery HTML pagehttp://blogs.adobe.com/fireworks/2012/02/using-the-generated-css-and-sprites-in-a-jquery-html-page.html
http://blogs.adobe.com/fireworks/2012/02/using-the-generated-css-and-sprites-in-a-jquery-html-page.html#commentsThu, 02 Feb 2012 08:23:12 +0000http://blogs.adobe.com/fireworks/?p=291In earlier posts, we learnt how to export all swatches and sprites, and export individual swatches/sprites. In this post, we’ll link an entire jQuery CSS along with sprites and link individual swatches to a mobile website.

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

Launch Dreamweaver CS5.5.

Create a new HTML page using File >New. In the “New Document” dialog, select HTML as page type in the Blank Page 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:

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:

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.

Share on Facebook
]]>http://blogs.adobe.com/fireworks/2012/02/using-the-generated-css-and-sprites-in-a-jquery-html-page.html/feed11Generating jQuery CSS and Spriteshttp://blogs.adobe.com/fireworks/2012/01/generating-jquery-css-and-sprites.html
http://blogs.adobe.com/fireworks/2012/01/generating-jquery-css-and-sprites.html#commentsTue, 24 Jan 2012 07:49:22 +0000http://blogs.adobe.com/fireworks/?p=275In this post let’s generate the jQuery CSS and sprites from the skinned jQuery templates. There are two options available to export the required assets.

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

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.

Share on Facebook
]]>http://blogs.adobe.com/fireworks/2012/01/generating-jquery-css-and-sprites.html/feed1Preview the modified jQuery mobile templatehttp://blogs.adobe.com/fireworks/2012/01/preview-the-modified-jquery-mobile-template.html
http://blogs.adobe.com/fireworks/2012/01/preview-the-modified-jquery-mobile-template.html#commentsFri, 20 Jan 2012 09:14:10 +0000http://blogs.adobe.com/fireworks/?p=263Preview your design in a browser before finalizing a design. Individual themes can be previewed in the jQuery mobile theme preview panel. All the swatches created in the template can be previewed at one go using the option to preview in a browser.

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.

Share on Facebook
]]>http://blogs.adobe.com/fireworks/2012/01/preview-the-modified-jquery-mobile-template.html/feed1Creating a jQuery theme templatehttp://blogs.adobe.com/fireworks/2012/01/creating-a-jquery-theme-template-2.html
http://blogs.adobe.com/fireworks/2012/01/creating-a-jquery-theme-template-2.html#commentsWed, 11 Jan 2012 07:08:19 +0000http://blogs.adobe.com/fireworks/?p=250The jQuery Mobile theme Skinning feature in Fireworks includes a template with default sprite images and a set of swatches. This extension lets you modify default sprites and swatches in the template. You can create additional swatches by duplicating an existing page and customizing it. The swatch name is inherited from the page name in the exported CSS.

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.

Share on Facebook
]]>http://blogs.adobe.com/fireworks/2012/01/creating-a-jquery-theme-template-2.html/feed1jQuery Mobile Theme Skinninghttp://blogs.adobe.com/fireworks/2012/01/jquery-mobile-theme-skinning.html
http://blogs.adobe.com/fireworks/2012/01/jquery-mobile-theme-skinning.html#commentsTue, 03 Jan 2012 08:18:14 +0000http://blogs.adobe.com/fireworks/?p=232This blog is the first in series of five blogs dedicated to “jQuery Mobile Theme Skinning”, a new feature in Fireworks CS5 that is part of the CSS3 Mobile Pack extension.

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.