New Feature: Playlist Center! Pick a topic and let our playlists guide the way.

Start learning with our library of video tutorials taught by experts. Get started

Fireworks CS5: Rapid Prototyping
Illustration by John Hersey

Fireworks CS5: Rapid Prototyping

with Jim Babbage

Video: Welcome

Hi! I am Jim Babbage, and welcome to Fireworks CS5 Rapid Prototyping. As a web designer and teacher, I know how important it is to get the job done on time and to spec. The best way I know how to expedite this process is through prototyping. You can get customer sign-off before a lot of work has been done. You can also change directions more easily earlier in the process. Now, if you are new to Fireworks CS5, I recommend taking my Fireworks CS5 Essential Training course first before you get started here, as this course assumes you already know the basics.
Expand all | Collapse all
  1. 1m 47s
    1. Welcome
      1m 22s
    2. Using the exercise files
      25s
  2. 16m 5s
    1. Using PDFs for wireframe and design feedback
      2m 37s
    2. Understanding storyboard concepts
      56s
    3. Viewing the HTML prototype
      3m 0s
    4. Viewing the AIR prototype
      51s
    5. Looking at mobile apps
      2m 19s
    6. Using Share My Screen
      6m 22s
  3. 1h 51m
    1. Understanding wireframes
      3m 5s
    2. Planning a wireframe
      2m 50s
    3. Using document templates for wireframing
      8m 28s
    4. Creating custom wireframe symbols
      9m 56s
    5. Creating a wireframe
      19m 24s
    6. Adding greeked text
      8m 0s
    7. Adding a master page and subpages
      9m 59s
    8. Adding navigation
      15m 13s
    9. Saving time with button symbols
      11m 28s
    10. Adding a data table
      6m 43s
    11. Building a contact form
      10m 18s
    12. Exporting wireframes
      5m 44s
  4. 30m 37s
    1. Making a wireframe realistic
      1m 8s
    2. Using the Kuler panel for color choices
      7m 14s
    3. Importing ASE files
      1m 24s
    4. Importing graphics into the storyboard
      11m 29s
    5. Adding design variations
      4m 0s
    6. Using Demo Current Document
      1m 58s
    7. Emailing deliverables
      3m 24s
  5. 35m 35s
    1. Adding a new page
      6m 7s
    2. Sharing assets to pages
      11m 21s
    3. Editing component symbols
      6m 50s
    4. Adding basic interactivity
      8m 14s
    5. Exporting storyboards as PDFs
      3m 3s
  6. 32m 46s
    1. Exploring the completed prototype
      4m 9s
    2. Creating an interactive calendar from an Auto Shape
      8m 35s
    3. Mocking up a pop-up window
      10m 55s
    4. Exporting an HTML prototype
      9m 7s
  7. 10m 26s
    1. Embedding an iframe into a Fireworks HTML prototype
      4m 53s
    2. Embedding an SWF file into a Fireworks HTML prototype
      5m 33s
  8. 27m 58s
    1. Understanding AIR
      55s
    2. Examining the structure
      2m 46s
    3. Adding rollovers
      2m 38s
    4. Adding events
      2m 34s
    5. Adding pages
      5m 28s
    6. Troubleshooting
      7m 24s
    7. Creating the AIR prototype
      6m 13s
  9. 23m 45s
    1. Working with Fireworks and Flash Catalyst
      2m 5s
    2. Sending Fireworks files to Flash Catalyst
      4m 26s
    3. Understanding FXG 2.0
      3m 13s
    4. Exporting as FXG 2.0
      7m 38s
    5. Creating a scroll panel
      6m 23s
  10. 12m 9s
    1. Using Fireworks for mobile design
      1m 9s
    2. Generating layouts from Device Central
      3m 26s
    3. Previewing mobile designs in Device Central
      2m 36s
    4. Using a mobile design template
      1m 8s
    5. Customizing a mobile design template
      1m 27s
    6. Testing a mobile project
      2m 23s
  11. 31s
    1. Goodbye
      31s

Watch this entire course now—plus get access to every course in the library. Each course includes high-quality videos taught by expert instructors.

Become a member
please wait ...
Fireworks CS5: Rapid Prototyping
5h 2m Intermediate Oct 05, 2010

Viewers: in countries Watching now:

In Fireworks CS5: Rapid Prototyping, author Jim Babbage demonstrates how to create wireframes and prototypes for web sites, mobile devices, and rich internet applications. This course details the design process from start to finish, offering tutorials on creating custom wireframes, enhancing storyboards by adding graphics, creating custom swatch themes with the Kuler panel, adding interactivity to prototypes, exporting the final product, and testing mobile designs in Adobe's Device Central. Exercise files accompany the course.

Topics include:
  • Planning and creating wireframes
  • Storyboarding
  • Creating multi-page mockups
  • Adding interactive calendars and pop-up windows
  • Embedding SWF files into an HTML prototype
  • Creating AIR prototypes with rollovers, events, and pages
  • Exporting to FXG 2.0
  • Integrating with Flash Catalyst
  • Creating customized mobile designs in Device Central
  • Testing a mobile project
Subjects:
Web Web Graphics Interaction Design Prototyping Web Design
Software:
Fireworks
Author:
Jim Babbage

Welcome

Hi! I am Jim Babbage, and welcome to Fireworks CS5 Rapid Prototyping. As a web designer and teacher, I know how important it is to get the job done on time and to spec. The best way I know how to expedite this process is through prototyping. You can get customer sign-off before a lot of work has been done. You can also change directions more easily earlier in the process. Now, if you are new to Fireworks CS5, I recommend taking my Fireworks CS5 Essential Training course first before you get started here, as this course assumes you already know the basics.

In this course, we'll deconstruct a completed wireframe and then build these deliverables, and much more, from scratch. We'll look at some great time-saving features in Fireworks, such as document templates, to help you hit the ground running, symbols - so you don't have to re-create your artwork every time you need it, and we'll make use of excellent third-party extensions to help you get things done faster. Along the way, I'll talk about advanced topics, such as exporting your designs to Flash Catalyst, using text in prototypes, creating simple and complex rollovers, and manipulating Fireworks HTML for a more realistic user experience.

In short, I'll show you how to make your life easier by saving time and cutting down on the frustrations of miscommunication and last-minute changes. So, let's kick back, get comfortable, and watch some Fireworks.

There are currently no FAQs about Fireworks CS5: Rapid Prototyping.

 
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.
Upgrade now


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

join now Upgrade now

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Fireworks CS5: Rapid Prototyping.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Are you sure you want to delete this note?

No

Notes cannot be added for locked videos.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.