Create Demo: An Easy Way To Present Adobe Fireworks Design Prototypes

Advertisement

With its structured approach to organizing assets, Adobe Fireworks can be a pleasure for designing and prototyping. But demonstrating your designs on a wide range of devices can be time-consuming and could even require some degree of coding.

The Create Demo1 extension addresses some of these issues. It automatically converts your Fireworks documents into portable presentations, which can then be easily presented in any browser — desktop or mobile.

Overview

Why Is It Needed?

This extension makes the process of preparing and exporting your Fireworks PNG files as presentations quick and painless. It can be used to show multi-page website prototypes, designs and sets of slides.

The only thing you will need to think about is where to upload the presentation (i.e. whether to present it online or on your iOS or Android device). The generated slideshows will render identically on all devices, with automatic thumbnail navigation.

A Bit Of Background

The “Demo Current Document2” used to be a great feature in Fireworks that I often used to show off website concepts and designs to clients. Unfortunately, its reliance on Flash and the success of the iOS and Android platforms means that, today, it cannot be used to reliably present your ideas on every screen and in every situation. We needed to move from Flash to a pure HTML solution if we wanted to have full cross-browser and cross-platform support.

Having read Viktor Goltvyanitsa’s excellent article about the making of the original extension3 and knowing what can be achieved today with the capabilities of modern browsers, we knew it was time to accept the challenge. This is how the Create Demo extension was conceived (you can read more on our blog4).

Installation And Requirements

The extension works with Adobe Fireworks CS3 or later and has been tested extensively on both Mac and Windows platforms.

  1. Download Create Demo5 from Adobe Exchange. The extension is free, but you’ll need an Adobe ID6 in order to download it (if you’ve ever downloaded Adobe software — Fireworks, for example — then you likely already have an ID).
  2. When download is complete, simply double-click the CreateDemo2.0.5.mxp file.
  3. Click on “Accept” when the Adobe Extension Manager opens.
  4. If installation was successful, you’ll see Create Demo listed in the Extension Manager list.

Create Demo installation steps
Installation steps.

Advice to Windows 7, 8 and Vista users: run the Adobe Extension Manager as Administrator to prevent any errors during installation.

Supported Browsers and Platforms

The exported demo files generated by this extension have been tested on a variety of platforms and browsers, including iOS, Android, Windows, Linux and Mac OS X. Tested browsers include Safari, Firefox, Chrome, Opera and Internet Explorer.

How Much Does the Extension Cost?

The extension is absolutely free for everyone and is licensed as “donation-ware”; the only limitation of the free version is a small credit that appears at the startup of every presentation. If you decide to contribute, you’ll have the option to remove this screen, and we’ll personalize the interface with your name (you can choose how much — or how little — to donate, starting from only £5).

licensed version interface (personalized)
Licensed version (personalized).

Last-minute note: If you are a CS6 user, you should know that the process of obtaining and managing your extensions is currently being overhauled. To ensure that we can continue to support and provide updates in the future, we have put the extension in the new Adobe Exchange panel7. For detailed information on installing the extensions using this panel, see our detailed blog entry8 about it.

Create Demo: How To Use It

Basic Use

Once the Create Demo extension is installed, you can access it from the menu: Commands → Web Engineer → Create Demo.

The extension’s interface is grouped into two key sections: settings and pages. Settings can be customized on a per-document basis, so if you change them, you will need to save your Fireworks document to ensure they are not lost.

Settings and Pages tabs
The key sections of the Create Demo extension: settings and pages.

Settings section

The settings panel groups the common general options for exporting your demo. The current version (2.0.5) gives you the following options:

  • Stage
    The color of the area outside your slide.
  • Highlight
    The color of the highlight applied to the selected slide’s thumbnail.
  • Max thumb size
    The width and height of the bounding box within which your slide’s thumbnails will be sized to fit. The thumbnail’s size is not limited, however, for best results, use a thumbnail size that fits your target device.
  • Auto-hide thumbs
    An option to hide thumbnails automatically (handy for slideshows).
  • Click left side to go back
    Navigate both forwards and backwards through the slideshow depending on where you click. When not enabled, a click always advances you forward.
  • Shadow
    Adds a CSS-based shadow to your slide (ideal for presenting photos).
  • Show splash screen (licensed version only)
    Removes the splash graphic on launch.
  • Use export settings
    This will respect the export settings specified in your Fw PNG document. If unchecked, the slides will be exported as high-quality JPEG files.
  • Use HTML5 cache
    Enables your slides to be cached for offline browsing.
  • Enable gestures
    An option to use gestures (flicks) on mobile devices to advance the slides and to show and hide the thumbnails. This works well on touchscreen devices that support it, but the feature is optional and not enabled by default. If you want to experiment, an explanation of the handling of gestures is featured in the third example.
  • Auto-advance
    When set to a non-zero value, this is the delay in milliseconds before the next slide is shown (note that an interaction will restart the timer). 1000 milliseconds equals 1 second, so be sure to input a large enough value.

Pages section

The pages section shows which pages will be exported from your Fireworks document. Simply clicking on a page name will toggle its inclusion.

Fireworks Pages panel (left), Create Demo page selection (right)
Fireworks’ Pages panel (left), and Create Demo page selection (right).

One of most valuable Fireworks features for Web and mobile designers is pages9. Pages essentially enable you to capture your design concepts in one document, with the help of shared layers, states and symbols. The Create Demo extension relies on the pages feature in Fireworks when it prepares your design for exporting as a multi-page presentation.

The Pages panel is usually located to the right of the Fireworks workspace, docked with the Layers panel. If it’s not open, press F5 or go to Window → Pages.

A Note on Locations (for Exported Presentations)

  • If you create a new Fireworks PNG file, save it somewhere in your computer, and run Create Demo, then the extension will suggest to save the presentation in the same location where the Fw PNG file is currently located.
  • If you create a new Fireworks PNG file, save it somewhere in your computer (let’s call it location “A”), export it via File → Export… or File → Export Preview… (location “B”), and run Create Demo, then the extension will suggest to save the presentation to location “B” (and not where the Fw PNG file is located).

This is by design and could save you a few mouse clicks as you prepare your presentation!

Practical Examples

The following series of examples demonstrate the key features of Create Demo. The first slide in each example also shows the settings that were used to create it.

Create Demo (view demo 1)10
Example 1: This is a demo of a website prototype. The page shadow has been turned off, and the background is set to “match.”

Create Demo (view demo 2)11
Example 2: In this demo, the images have been framed with a shadow; large thumbnails have been chosen; and the “auto-hide” option is enabled (i.e. if you don’t interact with the mouse, the thumbnails will be hidden after a short delay).

Create Demo (view demo 3)12
Example 3: This example demonstrates some of the features added in the 2.x release, focusing on HTML5 enhancements (including caching and better device support).

Touch, Keyboard Keys and Mouse

Featuring keyboard control, mouse control and gesture support (iOS only), Create Demo makes navigating your pages both swift and smooth.

keyboard control mapping
Keyboard controls (overview).

You can show and hide thumbnails of your pages for quick navigation. Images are handled with care, with a focus on presenting them efficiently and elegantly. Thumbnails are centered in the view, giving quick access to adjacent pages (making it similar to how Flickr’s navigation works). With a few clicks you can flip through a large number of slides, if the size you selected for the thumbnails is reasonable.

Create Demo: In More Detail

How It Works

The slideshows are created using nothing more than HTML and JavaScript. Create Demo produces configuration files, a manifest file (if the content caching option has been enabled), images, and the script required to create a versatile presentation that will run on a wide variety of devices.

Manifest is part of the HTML5 standard13:

The cache manifest in HTML5 is a software storage feature which provides the ability to access a web application even without a network connection.

Simply put, it gives the browser the complete list of resources that are required to store pages locally. It is associated with the presentation in the HTML by adding the manifest attribute to the document. For example:

<!DOCTYPE HTML>
<html manifest="cache.manifest">
…

The manifest file itself contains the list of resources, which might require you to configure your server to add the manifest MIME type. For those using Apache, a configuration file is automatically exported with your files.

To learn more about the application cache, HTML5 Rocks has a good introduction14. To ensure that users see your latest presentation when the content cache is enabled, clear the browser’s cache or upload the presentation to a new URL.

You can also link to specific pages directly in your presentation simply by adding #X to the end of the URL, where X is the page number that you want the presentation to jump to. This can be extremely useful when you want to email a series of links and annotations to a client to explain a prototype in more detail.

Adapts to the Device

The presentation will adapt to the device (whether desktop or mobile) on which it is being viewed. Depending on the capabilities of the device, the presentation will make the best use of what is available. On the desktop, the fixed positioning helps to keep the thumbnails placed nicely at the bottom of your slideshow, and by adding a margin to the bottom of the page, none of your presentation images will be obscured.

When viewing the presentation on a mobile device, the thumbnails are moved to the top of the screen for easier navigation. The pages are not downscaled to fit the size of the screen, since mobile browsers usually have excellent zoom and pan functionality.

Mobile (left) versus desktop (right)
Mobile view (left) versus desktop view (right).

iOS Application Mode

The presentations created by the Create Demo extension fully support iOS’ application mode. By simply supplying a page with a given name and dimensions, you can automatically export icons and the startup screen directly from your Fireworks file. For icons, simply set the page name to the icon size in pixels, prefixed with @ (currently, 57, 72 and 114 pixel sizes are supported). For the startup page, name the page @startup, and it should match the standard startup image size of 320 × 460 pixels. For a full explanation and example of this in action, see the third practical example15.

Known Issues

The extension has had a number of updates. I plan to develop and improve it further in the future.

Currently, only a few limitations are known:

  • If Google Chrome is your default browser on OS X, then when you launch the presentation as an export from Fireworks, the browser ends up with an extra / in the URL. I believe this is a known issue with Fireworks (and will hopefully be fixed in a future release by Adobe).
  • Gesture support for Android has been removed due to issues with scrolling. Touch and gesture support will likely be reviewed and updated in future releases of the extension.
  • The current exporting format is not suitable for large presentations (i.e. large images), but whether this should be supported at all is questionable.

Download A Fireworks PNG Template For iOS

I have created a simple template containing icons and a startup screen. It contains four pages and provides a handy starting point for creating your presentations. The icons all share the same symbol, so they can be edited in one place, with the rest updating automatically. The icons and startup images are named and sized correctly and will automatically be converted on export (although that they won’t be shown as pages included in the output of the final presentation). This demo does not include a design concept because it’s meant to be a starter file.

Download a Fw PNG demo16
Download17 the template Fireworks PNG file (ZIP, 650 KB).

After downloading, simply unzip the file, and open it in Fireworks. You can then assemble your presentation, add and edit pages, and customize the icons. This template is not required by the extension; it’s intended merely to save you a little time when you want to quickly create the full set of iOS icons and a startup screen.

Note: You’ll need to first add pages to the Fw PNG template; after that you can run the extension.

If you no pages are in your document (other than the icons and the splash screen) and you try to export the demo, you’ll see a warning, and a blank index.html file will open.

If the document misses pages, a warning will be shown
This message will appear if you try to create the presentation without having actual pages in the Fw PNG document.

Quick Demo

This very simple example of a presentation was automatically created with the help of the iOS Fw PNG template. It contains three content pages, navigation with thumbnails, an iOS startup page and three icons.

Click or scan to view demo18
Click the link (or scan the image using your mobile device) to view the demo.

Conclusion

I’ve attempted to keep this extension robust in order to solve a simple problem, which is to quickly and reliably present multi-page Fireworks designs on any device. The key was to make it easy to use; it shouldn’t leave you puzzled and desperately looking for a manual. We’ve found this extension to work well for our team, and I hope it works well for you, too.

You can follow the Adobe Fireworks Exchange19 for update notifications. I’d also love to see how this is being used, and we welcome feedback and comments. You can also follow me on Twitter20 for the latest updates.

Feedback

Have an idea for improvement or a new feature? Found a bug? Don’t hesitate to contact us21 or leave a comment here.

Further Reading

(al) (mb)

Footnotes

  1. 1 http://www.adobe.com/cfusion/exchange/index.cfm?event=extensionDetail&loc=en_us&extid=2560022
  2. 2 http://www.adobe.com/devnet/fireworks/articles/demo_current_document_command.html
  3. 3 http://www.adobe.com/devnet/fireworks/articles/demo_current_document_command.html
  4. 4 http://codex.web-engineer.co.uk/2012/02/demo-document-fireworks-extension/
  5. 5 http://www.adobe.com/cfusion/exchange/index.cfm?event=extensionDetail&loc=en_us&extid=2560022
  6. 6 https://www.adobe.com/cfusion/membership/index.cfm?loc=en_us&nl=1
  7. 7 https://www.adobeexchange.com
  8. 8 http://codex.web-engineer.co.uk/2012/08/demo-document-2-fireworks-extension/
  9. 9 https://www.adobe.com/devnet/fireworks/articles/pages_states_layers.html
  10. 10 http://provide.smashingmagazine.com/create-demo-extension-examples/demo1/
  11. 11 http://provide.smashingmagazine.com/create-demo-extension-examples/demo2/
  12. 12 http://provide.smashingmagazine.com/create-demo-extension-examples/demo3/
  13. 13 https://en.wikipedia.org/wiki/Cache_manifest_in_HTML5
  14. 14 http://www.html5rocks.com/en/tutorials/appcache/beginner/
  15. 15 http://provide.smashingmagazine.com/create-demo-extension-examples/demo3/
  16. 16 http://provide.smashingmagazine.com/create-demo-extension-examples/create-demo-template.zip
  17. 17 http://provide.smashingmagazine.com/create-demo-extension-examples/create-demo-template.zip
  18. 18 http://provide.smashingmagazine.com/create-demo-extension-examples/smashing/
  19. 19 http://www.adobe.com/cfusion/exchange/index.cfm?event=extensionDetail&loc=en_us&extid=2560022
  20. 20 http://twitter.com/web_engineer
  21. 21 http://web-engineer.co.uk/#/the_team
  22. 22 http://fireworks.smashingmagazine.com/2013/01/11/ios-prototyping-adobe-fireworks-tap-part1/
  23. 23 http://fireworks.smashingmagazine.com/2012/07/03/interactive-prototypes-timesavers-adobe-fireworks/
  24. 24 http://fireworks.smashingmagazine.com/2012/08/28/fireworks-extensions-for-better-workflow/

↑ Back to topShare on Twitter

Craig enjoys producing usable and friendly sites that look great and function well. He often also experiments with workflow automation and owns and runs web-engineer.

Advertising

Note: Our rating-system has caused errors, so it's disabled at the moment. It will be back the moment the problem has been resolved. We're very sorry. Happy Holidays!

  1. 1

    Fireworks is seriously underrated. Great article!

  2. 2

    Fireworks is seriously unknown.

  3. 4

    Pixel perfect, easy to use, best for webdesign…
    I learned to work with it in 3 hours or less. Basics of course…

  4. 5

    Upon trying to install your extension, I get a message stating that I need Fireworks 9 or greater…I am running FW CS5. Any suggestions? Is this a unique problem (if it is, I will look for a solution elsewhere).

    • 6

      It shouldn’t be a problem – try downloading the version on the clasic exchange – if you still have trouble feel free to contact me and I’ll take a look at repackaging (if adobe are still accepting submissions on the classic exchange)

  5. 7

    Adobe Exchange is charging $9.99 USD for this.

    • 8

      If you visit the classic exchange the donation ware version is still available.
      http://www.adobe.com/cfusion/exchange/index.cfm?event=extensionDetail&loc=en_us&extid=2560022

      On the “new” exchange (which was in Beta when this article was originally drafted) does not support donation-ware as a licence model, however if you look carefully you will see a “free trial” which is exactly the same as the free version available before (listed as “Create Demo Trial”)- it is not time limited and has the exact same limitation of a sponsor credit at the start. The price set was based on the average donation received when this was sold as donation-ware on the classic exchange.

      I would have much preferred to release this in the same way on the new adobe exchange but I was told this was not possible as an extension in the new exchange can only be free or commercial – note this is only the case if you use the new exchange in CS6.

  6. 9

    People still use Fireworks?

  7. 12

    Still work with Fireworks? OMG. Everybody who uses Photoshop for Webdesign is a fool. Adobe is making a real bad marketing for Fireworks.

    Have a look at this http://www.reinegger.net/50_reasons_not_to_use_photoshop_for_webdesign.html

  8. 13

    There’s a typo here: “a handy starting pointy for creating”. Should be point.

  9. 15

    Thank you for the article. In the past I’ve simply done an export to HTML/CSS and demoed that. It’s proven useful for showing dropdowns and hover effects, and even creating a click through of a a few different pages.

    This, however, is a much needed ‘presentation layer’ for my prototypes where it can be easy and intuitive to navigate through the demo. Extremely cool and absolutely awesome job. Thank you for making Fireworks even better.

  10. 16

    CorelDraw is ALSO very underrated

    I think people dont know how to switch to RGB

  11. 17

    :( I’m a webdesigner and I don’t use Fireworks. Reading this post and your comments I’m thinking I should… It’s true that adobe is making a bad marketing for Fireworks. I’ll try to use it for my next project. This post is very interesting thank you

  12. 18

    I am a big fan of Fireworks.

    With that said, what do you guys think about proto.io as an alternative to Fireworks for gesture-based prototypes ? Easier workflow ? Not enough features ?

    Look forward to your feedback

    Thanks

    Ahmed

  13. 19

    Both Photoshop and Fireworks are poor tools for web design. We need a design tool that works fast with features of both programs, plus design elements that directly relate to their CSS counterparts. I am completely surprised that these have not been added to Fireworks yet. Border styles, CSS TEXT SETTINGS!!!!!! Come on! We need pixel and em and percentage spacing in these programs to accurately replicate what will be in the final developed site!
    Why has no one done this yet!?!

    • 20

      I just discussed this exact problem this morning with my colleagues. More and more are designing straight in the browser, just for these reasons. Fireworks is my preferred tool at the moment, but I hate the GUI. Then I just found that Adobe has developed Edge Reflow, which seems to solve most of these issues. Take a look at it, I highly recommend it.

  14. 21

    This is really helpful. Thanks.

  15. 22

    I don’t seem to be able to find the extension, the links appear to be dead. Do you need to have been a developer on this to be able to download?

  16. 23

    I love Fireworks!

  17. 24

    This is really helpful. Thanks.

  18. 25

    Adobe Exchange doesn’t even list Fireworks as an option to find things. So I guess no one can get hold of this tool anymore. Wow.

Leave a Comment

Yay! You've decided to leave a comment. That's fantastic! Please keep in mind that comments are moderated and rel="nofollow" is in use. So, please do not use a spammy keyword or a domain as your name, or else it will be deleted. Let's have a personal and meaningful conversation instead. Thanks for dropping by!

↑ Back to top