| 00:00 | Fireworks is optimized to create
screen graphics and as such it's the ideal
|
| 00:04 | application for creation
of Flash platform assets.
|
| 00:07 | Fireworks CS5 supports the latest FXG
2.0 format, allowing you to easily export
|
| 00:12 | multi-page designs or individual
objects as editable FXG elements for use in
|
| 00:16 | software such as Flash Catalyst CS5.
|
| 00:18 | Now, let's try exporting a
single object for Flash Catalyst.
|
| 00:21 | So here I've got a vector design,
a whole series of different assets and
|
| 00:25 | they've all been grouped
together into individual sets.
|
| 00:27 | So here's my little bottles down here.
|
| 00:29 | We're going to export
this out as a single object.
|
| 00:32 | So I'm just going to select it, go to
File > Export, and I want to make sure
|
| 00:37 | that I'm in a folder.
|
| 00:38 | I've created the folder called fxg.
|
| 00:40 | I'll just utilize that folder for
this export and I'm going to name it.
|
| 00:43 | Leave it named as Bottles.
|
| 00:44 | I want to export as FXG and Images and
the real key one here is I want to make
|
| 00:49 | sure I've chosen Selected
Objects in Current Page.
|
| 00:52 | So this will just export what's
currently active inside the design.
|
| 00:55 | So I'll just click Save and
it's a pretty quick process.
|
| 00:59 | We'll hop over to Flash Catalyst, and
we'll choose to go to File > New Project
|
| 01:04 | from Design File, and I'll go to my folder.
|
| 01:09 | And inside that fxg folder you'll see
my bottles.fxg file and you'll also see
|
| 01:13 | another folder here.
|
| 01:14 | This folder is empty, but normally if
you had files that had to be exported out
|
| 01:18 | as bitmaps they would end up
inside of that specific folder.
|
| 01:21 | So we're just going to choose the
bottles.fxg file and open that up.
|
| 01:27 | We're inside Flash
Catalyst and there's my graphic.
|
| 01:30 | Now it's a complete vector
graphic. I can select it.
|
| 01:33 | I can go ahead and scale
this significantly larger.
|
| 01:36 | Not getting any breakdown in quality.
|
| 01:38 | It's all basically converted to vector graphics.
|
| 01:41 | So I will undo those steps.
|
| 01:42 | Let's go back to my original here and
one of the things to note here is that
|
| 01:46 | this original graphic in Fireworks was grouped.
|
| 01:48 | It was a set of vectors
that were grouped together.
|
| 01:50 | So if we look in the Layers
panel all we see is Selection.
|
| 01:53 | So what we're going to do is we're
going to right-click on that selection and
|
| 01:56 | we're going to choose to
break apart the graphic.
|
| 01:59 | It takes a couple of seconds and what
happens is that Flash Catalyst breaks
|
| 02:02 | apart all the vectors into their
individual sets and you can see as I click on
|
| 02:06 | them in the Layers panel,
they're being selected on the canvas.
|
| 02:09 | So I can now, if I want to select an
individual element, like the path that's
|
| 02:13 | working as the background and I
could go ahead and change that color.
|
| 02:15 | So select it here. I could go ahead and
change that to a different color, make
|
| 02:19 | it a little bit darker yellow for
example and I've got that complete
|
| 02:22 | capability for editing.
|
| 02:24 | Now if I want to do more than just
some basic changes like this, if I want
|
| 02:28 | to edit the graphic and have a
little more control over it, I can
|
| 02:31 | right-click on the actual bottle's
name in the Layers panel and choose to
|
| 02:35 | edit in Adobe Illustrator CS5 and that
will take me out to Illustrator where
|
| 02:38 | I can do some more advanced editing
and then I can return back to Flash
|
| 02:42 | Catalyst with those changes in place.
|
| 02:45 | By the way, if you prefer to work in
Photoshop, FXG support will be available as
|
| 02:48 | an extension that you can
download from Adobe Labs. All right.
|
| 02:51 | So there's one object exported out.
|
| 02:53 | Let's take a look at this
from sort of a larger scale.
|
| 02:56 | We're going to hop back over to
Fireworks again and I have another file open
|
| 03:00 | here called olive_tour and this,
if I switch to my Pages panel, has a whole
|
| 03:05 | series of individual pages, basically
mocking up an entire interactive tour.
|
| 03:10 | If I hop back to my Layers panel again,
you'll notice I've got quite a few layers going on.
|
| 03:14 | I've got Navigation, Logo, Content,
Background. In many of these I have
|
| 03:19 | additional sub-layers.
|
| 03:20 | So there's quite a bit of hierarchy going
on and a lot of organization to the file.
|
| 03:23 | Now what we're going to do in this case
is we're going to export out the entire
|
| 03:27 | mockup into Flash Catalyst.
|
| 03:29 | So again, I'm just going to go up to
my File menu and choose Export and
|
| 03:33 | I'll stay inside my fxg folder.
|
| 03:35 | I'll keep the name as olive_tour but the
thing I want to change is the Pages selection.
|
| 03:41 | I want to export All Pages.
|
| 03:43 | This will export every single
page in the design as an FXG file.
|
| 03:46 | So I'll just click Save.
|
| 03:48 | This one takes a little longer because
there's a few more pages, a bit more work
|
| 03:51 | involved here and when we're done,
we can just hop over to Flash Catalyst and
|
| 03:56 | I'll just choose again File >
New Project from Design File.
|
| 03:59 | I'm not going to save the changes I
made to my original olive oil bottles.
|
| 04:03 | You'll see inside that fxg folder,
I now have olive_tour and you'll also
|
| 04:08 | see another folder here that's
storing the bitmap images that were part of
|
| 04:11 | this original file.
|
| 04:12 | So I'm just going to go ahead and choose
olive_tour and this is a pretty complex design,
|
| 04:18 | so you'll get a message here
from Flash Catalyst saying there's a lot of
|
| 04:21 | vectors, possibly a lot of bitmaps and
you may want to optimize some of these
|
| 04:24 | graphics once you open it
up inside of Flash Catalyst.
|
| 04:27 | There we go, the file is open.
|
| 04:28 | You can see that all the different pages
we had in Fireworks are now represented.
|
| 04:32 | We've got our main page, we've got our
growing page, our picking page and so on.
|
| 04:38 | They're all there and what's
really neat about this is if you take a look
|
| 04:41 | over in the Layers panel again, you'll
see that we've got again the structure
|
| 04:44 | for each of the pages.
|
| 04:45 | So I'm currently on the extracting page,
so if I click inside there and expand
|
| 04:49 | that page down, you'll see all
the different layers are still there.
|
| 04:54 | We've got the same hierarchy.
|
| 04:55 | We've got a whole bunch of
elements here that are selectable.
|
| 04:58 | For example, we've got some
various different bitmaps like our
|
| 05:01 | centrifuge placement image.
|
| 05:02 | If I just move this kind of the way
we've got another option here for our logo.
|
| 05:06 | We can select that.
|
| 05:07 | That's a bitmap as well.
|
| 05:08 | We've also got text. So if I just
deselect everything, I can click right inside
|
| 05:12 | this text block and I can
actually select it and edit it.
|
| 05:15 | It's all straightforward text.
|
| 05:17 | So I've got a lot of control there.
|
| 05:19 | The hierarchy I created
inside of Fireworks is supported.
|
| 05:22 | My pages are all supported.
|
| 05:23 | I've got quite a bit of
control here over the overall design.
|
| 05:27 | So you can see that Fireworks pages
and layers translate directly to Flash
|
| 05:30 | Catalyst pages and layers.
|
| 05:32 | And as a designer, you can build out
your mockup for rich media application
|
| 05:35 | within Fireworks and then export the
file as an FXG document and pass it on
|
| 05:39 | to the developer.
|
| Collapse this transcript |
