IntroductionWelcome| 00:04 | Hi! I am Jim Babbage, and welcome to
Fireworks CS5 Rapid Prototyping.
| | 00:08 | As a web designer and teacher, I know
how important it is to get the job done
| | 00:12 | on time and to spec.
| | 00:14 | The best way I know how to expedite
this process is through prototyping.
| | 00:17 | You can get customer sign-off
before a lot of work has been done.
| | 00:20 | You can also change directions
more easily earlier in the process.
| | 00:23 | Now, if you are new to Fireworks CS5,
I recommend taking my Fireworks CS5
| | 00:28 | Essential Training course first
before you get started here, as this course
| | 00:32 | assumes you already know the basics.
| | 00:34 | In this course, we'll deconstruct a
completed wireframe and then build these
| | 00:37 | deliverables, and much more, from scratch.
| | 00:39 | We'll look at some great time-saving
features in Fireworks, such as document
| | 00:43 | templates, to help you hit the ground
running, symbols - so you don't have to
| | 00:47 | re-create your artwork every time you
need it, and we'll make use of excellent
| | 00:51 | third-party extensions to
help you get things done faster.
| | 00:54 | Along the way, I'll talk about advanced
topics, such as exporting your designs to
| | 00:58 | Flash Catalyst, using text in prototypes,
creating simple and complex rollovers,
| | 01:04 | and manipulating Fireworks HTML
for a more realistic user experience.
| | 01:09 | In short, I'll show you how to make
your life easier by saving time and cutting
| | 01:13 | down on the frustrations of
miscommunication and last-minute changes.
| | 01:17 | So, let's kick back, get
comfortable, and watch some Fireworks.
| | Collapse this transcript |
| Using the exercise files| 00:00 | If you have access to the exercise
files for this course, you can put them on
| | 00:04 | your desktop, as I've done
here, or anywhere else you want.
| | 00:07 | Now, the main folder contains a
series of subfolders, which contains the
| | 00:11 | exercise files for each of the
different lessons inside the course.
| | 00:14 | In many cases, I've included the final
versions of the files you'll been working
| | 00:17 | on so you've got something to compare to.
| | 00:19 | Now, if you don't have access to these
files, you can follow along with your own
| | 00:23 | files as we proceed through the course.
| | Collapse this transcript |
|
|
1. Rapid Prototyping Options in FireworksUsing PDFs for wireframe and design feedback| 00:00 | Creating deliverables doesn't just help
open or maintain communication between
| | 00:04 | the designer and the client;
| | 00:05 | they can also act as billing markers.
| | 00:07 | Once a deliverable has been submitted
and approved, it marks a point where the
| | 00:10 | project can move forward, and because
you've to supply a tangible product,
| | 00:14 | it's a great point at which to submit an
interim invoice and keeps that cash flow flowing.
| | 00:19 | As web sites and other applications
increase in complexity, it's critical to
| | 00:23 | make sure that everyone understands the
flow and function of the project being
| | 00:26 | built before the project
entered the design or coding stages.
| | 00:29 | Now, a wireframe gives you the chance to
test out functionality without worrying
| | 00:34 | about all the pretty stuff.
| | 00:35 | Some visual items might be addressed in the
wireframe, such as the location of navigation,
| | 00:40 | but a wireframe itself is not meant to
get into the nitty-gritty of design, such
| | 00:43 | as cover choices and imagery.
| | 00:45 | Once a wireframe has been completed - and
you will have your chance in lesson two,
| | 00:49 | don't worry - exporting as a PDF is an
excellent way to get the wireframe into your
| | 00:54 | client's hands for review.
| | 00:56 | In the wireframe sample in the Chapter
1 folder, the navigation area has already
| | 01:00 | have been made interactive by
using rectangular hotspots.
| | 01:02 | You can see over here on the
screen these light blue rectangles.
| | 01:06 | There are all
interactive web objects, or hotspots.
| | 01:09 | If I click on one of these, you can
take a look down in the Properties panel
| | 01:12 | you'll see there's a link to a very
specific web page, in this case toursMain.htm.
| | 01:17 | It ties in directly with the
pages we have in our Pages panel.
| | 01:21 | In fact, there it is: toursMain as a page.
| | 01:23 | I can click there you can see
what that's going to look like.
| | 01:25 | So, all the
interactivity has been added for us.
| | 01:27 | All I want to do at this point is be
able to share a PDF with the client, and
| | 01:31 | it's a pretty easy process.
| | 01:33 | We'll be going through it in much more
detail down the road, but I just want to
| | 01:36 | show you the end result, after I have
export it as a PDF file. Here we go.
| | 01:41 | Inside of Acrobat reader, this is our PDF file.
| | 01:44 | You can see, as I move my mouse over the
different navigational elements, you get
| | 01:48 | the little pointy finger icon.
| | 01:50 | I can click on these, and I actually
go to the pages that are part of that
| | 01:54 | navigation structure.
| | 01:55 | So, I can see all the different
proposed elements of the wireframe.
| | 01:58 | Now, once the PDF has been created,
you can e-mail it off to the client.
| | 02:03 | They can open it up in
Acrobat reader and go through it.
| | 02:06 | But as the designer, if you
have a copy of Acrobat Pro handy,
| | 02:10 | you can actually open up the PDF in
Acrobat Pro first and enable commenting so
| | 02:14 | that the client can not only look at the
pages, but they can put direct feedback
| | 02:18 | on the pages, which gives you, again, a
chance to keep that communication going
| | 02:24 | between you and the client.
| | 02:26 | By the way, while I have used a
wireframe for my example, there is nothing stopping
| | 02:30 | you from generating a PDF full of
storyboards, or logo ideas, or just general
| | 02:35 | design concepts.
| | Collapse this transcript |
| Understanding storyboard concepts| 00:00 | We've looked at gaining direct feedback
with a client or design team using the
| | 00:03 | Share My Screen function and also how
Fireworks can generate an interactive PDF file.
| | 00:08 | In this lesson, a few storyboards
have been created, and before I get into
| | 00:11 | full-blown prototype development, I
want the client to have a look and
| | 00:13 | share their thoughts.
| | 00:14 | Now, this can be done using
Export to PDF, or even Share My Screen,
| | 00:19 | but I thought this is a great
opportunity to share with you another option
| | 00:22 | called Demo Current
Document, which is a snap to use.
| | 00:24 | Now, here's the end result of the demo feature.
| | 00:27 | Basically, what I'd have to do with
this is upload it to a server for the client
| | 00:30 | to review, but you can see I've
got my screen showing up here.
| | 00:33 | If I mouse down at the bottom, I can
actually click through different designs,
| | 00:37 | and they can see all the different
storyboards that have been created so far.
| | 00:42 | Really quick and easy, and
not interactive like the PDF
| | 00:45 | was in the sense of clicking on
navigation, and certainly not interactive like
| | 00:48 | an HTML prototype would be.
| | 00:50 | So, while it's not as interactive,
| | 00:51 | it is a quick way to put your ideas
up online and allow you to share them
| | 00:55 | with the client.
| | Collapse this transcript |
| Viewing the HTML prototype| 00:00 | Now, once all the wireframes and
concepts and storyboards have been completed
| | 00:04 | and approved, it will be time to move on
to the prototype itself, and then create
| | 00:08 | an interactive version
that the client can test out.
| | 00:11 | This is where the HTML Export
feature in Fireworks comes in handy.
| | 00:15 | Now, this feature has been around for I
think as long as Fireworks has been around.
| | 00:18 | What it does is it creates a rigid,
table-based HTML layout, complete with
| | 00:22 | JavaScript behaviors for rollover events
and hyperlinking from one page to another.
| | 00:28 | The final product created by this export
is not suitable for a production web site.
| | 00:32 | Every element on the page is sliced up
and turned into a graphic, including text,
| | 00:36 | and placed into a table so rigid that
removing graphics from it or adding any to
| | 00:40 | the layout can actually break the design.
| | 00:42 | But that doesn't mean this
option is useless - far from it.
| | 00:45 | In many ways, HTML and images export
has gain new power as a deliverable for
| | 00:49 | web site prototypes.
| | 00:51 | If embellished enough, you can
provide your client with an accurate user
| | 00:54 | experience of the site's design and
flow, without having to code a single thing.
| | 00:57 | Now, there will be a lot more
in this in chapters 5 and 6.
| | 01:00 | For now, let's just have a
quick overview of the process.
| | 01:04 | Here is our completed prototype. Multiple
pages, as you can see over here in the Pages panel.
| | 01:09 | Range of different, layouts has been set up.
| | 01:12 | We've got interactivity placed inside
the navigation over here, and the process
| | 01:16 | for creating the HTML
prototype is pretty straightforward.
| | 01:19 | You just go to File > Export and choose
HTML and Images as your export option.
| | 01:25 | As I said, we are going to go through
this process in much more detail later on.
| | 01:28 | Let's have a look at the final
product though, to give you a sense of what
| | 01:31 | you can end up with.
| | 01:33 | This is our series of pages in a browser.
I'll just scroll up and down a little bit
| | 01:37 | here so you can see the whole thing.
| | 01:39 | As I mentioned, this is
interactive, so I can click on tours.
| | 01:42 | You'll notice I am not only getting a
change in pages; I am seeing changes in states.
| | 01:46 | So, as I roll over links like Mission,
you'll see that the covers are changes, so I
| | 01:49 | am getting an accurate representation
of what the design is supposed to look like.
| | 01:53 | If I go back to tours here for a second
and scroll down, and I can actually see
| | 01:59 | even further into this.
| | 02:00 | I am going to go and click on learn
more for Taste of California, so I can see
| | 02:04 | now how breadcrumbs are going to be
created, and these breadcrumbs are
| | 02:07 | actually interactive.
| | 02:08 | You can see, as I move my mouse
over them, I am getting the option to
| | 02:11 | click through them.
| | 02:12 | Scroll then a little bit lower and again
we see a whole range of different tours.
| | 02:16 | But right down at the bottom here, we
can also learn more about the tour itself,
| | 02:20 | and if we are really sold on it, we can
click on the book now button and go right
| | 02:25 | to the booking page.
| | 02:27 | So, I have essentially created here a
very realistic rendition of the final web
| | 02:31 | site, but it's all in graphics.
| | 02:33 | None of this is interactive.
As realistic as this form may look,
| | 02:36 | it's really just a bunch of images.
| | 02:38 | So, there's nothing here,
other than just graphics.
| | 02:41 | But from the standpoint of user testing,
from the standpoint client feedback, and
| | 02:46 | from just the perspective of having
something completed in the sense so that
| | 02:50 | you've got the approval to move
forward on the final project where all the
| | 02:53 | coding going to take place,
| | 02:55 | the HTML prototype is a
really excellent tool to use.
| | Collapse this transcript |
| Viewing the AIR prototype| 00:00 | As a design tool, Fireworks is eminently
capable of creating mockups for AIR applications.
| | 00:05 | While not true applications in
themselves, the designer can create a realistic
| | 00:10 | prototype of a proposed AIR application
for client review. And much like an HTML
| | 00:14 | prototype, the AIR prototype can be interactive.
| | 00:18 | Here we have an example of our
finished AIR application prototype.
| | 00:22 | We can move this around on the screen,
we can select individual images inside
| | 00:26 | of our application, and we can even
check out more information about the photo
| | 00:31 | that we are looking at.
| | 00:33 | Then we are done, we can just close
the AIR application prototype down.
| | 00:39 | So, this is, yet again, another
excellent option for prototyping.
| | 00:42 | Instead of showing a web site, in this
case, or a PDF file, you're actually able to
| | 00:46 | emulate a functional
application running on somebody's desktop.
| | Collapse this transcript |
| Looking at mobile apps| 00:00 | Last in our list are
prototype options is Device Central.
| | 00:03 | Now Device Central integration is new to
Fireworks CS5, and in my opinion, it's long overdue.
| | 00:08 | What better place to build
screen-based applications, be they for
| | 00:11 | smartphones, netbooks, game consoles,
than in an application designed for
| | 00:15 | creating screen graphics.
| | 00:17 | You can use Device Central to pick a
device and then move right into Fireworks
| | 00:21 | to build the design. But in this
overview, I just want to show you the preview
| | 00:24 | option, where a design has already been
created, and you just want to check it
| | 00:27 | within a device profile.
| | 00:28 | So you can see here, I've got
a little mobile application.
| | 00:31 | It's got a whole series of different pages.
| | 00:34 | And all I want to do is see how this
is going to behave or look inside of a
| | 00:38 | designated type of device.
| | 00:39 | So I'm going to go to File and
choose Preview in Device Central.
| | 00:46 | Device Central boots up, and whatever
the last device was to be used inside of
| | 00:49 | the application shows up
in the Emulate Image window.
| | 00:52 | We're actually dealing with a device
that's got the same screen resolution as my
| | 00:55 | actual mobile application.
| | 00:58 | And I can play around with things in here.
| | 00:59 | It's not interactive.
| | 01:00 | It's really just more of a previewing option.
| | 01:03 | You can see here, as I move through
here, we can't actually do any interaction,
| | 01:06 | but I can go into my display options here,
| | 01:09 | see what this device will look
like with different types of Reflections,
| | 01:14 | play with the Backlight feature,
even play with gamma and contrast.
| | 01:20 | So it gives me a good sense of how the
application is going to appear onscreen.
| | 01:23 | Now, as I mentioned, this preview is static.
| | 01:26 | If I want to see a different screen
from my design inside of Device Central, I will
| | 01:30 | have to go back to Fireworks and
pick a new screen and view that.
| | 01:34 | So just a quick process here.
| | 01:35 | I'm going to go to File > Return to Fireworks,
| | 01:38 | I'm going to pick a different screen here, and
go back again, File > Preview in Device Central.
| | 01:46 | And that loads very quickly because
Device Central is already running.
| | 01:48 | So again, we can see the differences here.
| | 01:50 | There is a great little tie-in between
Device Central and the HTML and images
| | 01:54 | export in Fireworks.
| | 01:56 | All we're seeing here, really, is
just essentially the image itself, no
| | 01:59 | interactivity, but I can use the HTML
images export feature inside of Fireworks
| | 02:03 | to export out a whole series
of HTML files and images.
| | 02:06 | And then I can load those files into a
device inside of Device Central and end
| | 02:11 | up with what appears to be an
interactive mobile application.
| | 02:14 | That's a pretty cool feature, and we'll
be looking at that workflow later in the
| | 02:18 | Device Central lesson.
| | Collapse this transcript |
| Using Share My Screen| 00:00 | Let's say you have couple
design variations for a project.
| | 00:03 | You want to have some discussion in
real-time with others involved in the
| | 00:05 | project where you are all looking at the
same thing, but you can't physically meet.
| | 00:09 | The Share My Screen command lets you
open up a mini-connect meeting where you
| | 00:12 | can share your screen
with two other participants.
| | 00:14 | While it's not really a prototyping
tool, sort of in the spirit of collaboration
| | 00:19 | and getting client feedback, it
can be a really helpful feature.
| | 00:22 | So let's take a look what we got here.
| | 00:24 | Onscreen, I have a Fireworks document,
with three different variations on the
| | 00:30 | same web site project.
| | 00:31 | Now the client has already seen these
things, and what we want to do at this point
| | 00:35 | is just quickly review them with the
client and then get an approval as to which
| | 00:39 | way they want us to go before we
get any further in the design stage.
| | 00:41 | Now, I've already e-mailed the
client Tom and basically set up a time for
| | 00:46 | meeting to go over these things
to get the final sort of go ahead.
| | 00:50 | So what I'm going to do here is go to
File, and just over halfway down in the
| | 00:54 | File menu, you'll see Share My Screen.
| | 00:56 | I am going to launch that.
The browser is going to open up.
| | 01:00 | We're going to need to sign in.
| | 01:04 | Now, in order to sign in, what you
need is an Adobe ID, and they're free.
| | 01:09 | So they're very handy for things like
this and lots of other features that
| | 01:14 | you'll find inside the Adobe web site.
| | 01:19 | I am just going to go ahead and
go to my Meetings section here.
| | 01:25 | And you'll see, in this little window,
we've got Start a meeting, My meeting
| | 01:28 | Room, and that's the actual URL that
the client needs, so they can actually get
| | 01:32 | in and share the screen with
you and see what you're doing.
| | 01:35 | So I'm going to go to My Meeting Room.
| | 01:36 | Like I said, I have already sent Tom
the URL, and he'll be joining me shortly.
| | 01:43 | And once the meeting room shows up, you
can see here I've got a couple of windows
| | 01:46 | and is that welcome screen.
| | 01:47 | Again, there is the URL.
| | 01:49 | I get another chance to send
e-mail invitations if I want.
| | 01:52 | We don't need to worry too much about that.
| | 01:53 | I'm just going to close that window, and
before I get started, I'm going to put
| | 01:58 | some notes here in this panel
over here on the right-hand side.
| | 02:02 | Now, Shared Notes are kind of nice
because not only can I contribute to this,
| | 02:05 | but anybody else participating in
the meeting can also contribute here.
| | 02:08 | And I can also save these notes as a
Word document later on, sort of to act as
| | 02:13 | minutes for the meeting.
| | 02:14 | So I'm just going to type
in a couple of things here.
| | 02:16 | I'll start off with "Three versions of
design, mostly color variations, third
| | 02:26 | concept has a layout change."
| | 02:32 | And then the last, little bit for my
minutes here, "Need to confirm which concept
| | 02:39 | to move forward with."
Little errors happened so there we go.
| | 02:47 | So those are the things I
just want to cover off with Tom.
| | 02:49 | We'll do a quick review of the
different designs as well.
| | 02:53 | All right, so now I'm just
waiting for - ep, there he is.
| | 02:56 | There is Tom, and I'm going to accept his
request, and while that's sort of booting up,
| | 03:02 | I'll turn on Share My Screen, and what I'm
going to do here is share the entire desktop.
| | 03:07 | And you'll see a little window telling
you what you're going to see and what
| | 03:10 | visitors will see as well. I'll click OK.
| | 03:12 | Now, we're basically screen sharing.
| | 03:15 | So I'm just going to
minimize the Connect window there.
| | 03:17 | And in the chat window here, I've
got it over on the left-hand side.
| | 03:21 | I'm going to type in a greeting.
| | 03:36 | So there is our first design.
| | 03:38 | Second design, just make a note here,
| | 03:40 | note the color changes.
| | 03:53 | And then the third one, we got a major
layout change, removed all the sidebar
| | 03:56 | information from the left-
hand side over to the right.
| | 03:58 | Now while Tom is looking at that, I
just want to point out this little pod that
| | 04:08 | we see here is adjustable.
| | 04:10 | We can move it around,
place it anywhere we want.
| | 04:12 | And we can also compress these different pods.
| | 04:17 | I can minimize them.
| | 04:18 | I can maximize them.
| | 04:19 | Again, there is actually one for webcam as well,
and I can even turn them on and turn them off.
| | 04:24 | I can literally hide and show them, but in our
case here, they will be fine the way they are.
| | 04:28 | If I want him to have a little more
space so I can just sort of drag the entire
| | 04:33 | container and then wait for
Tom to tell me what he thinks.
| | 04:38 | And let's see here. There we go.
| | 04:41 | Well, Tom is a great
client. He likes everything I do.
| | 04:44 | We've narrowed it down to one design.
That's going to be of the very first one in
| | 04:48 | the list here, index number 1.
| | 04:50 | So I'm going to go down to my Shared Notes.
| | 04:53 | I'm going to add in one more:
"Tom has approved index 1 concept."
| | 05:03 | And I'm just going to select that
and make it bold so it stands out.
| | 05:08 | And the other nice thing about these
notes, as I mentioned earlier, is I can
| | 05:12 | actually save them as a Word document.
| | 05:14 | So I can click on the little Save icon,
| | 05:16 | and I can go and just say
meeting with tom and Save that file.
| | 05:25 | And I am just going to thank Tom.
| | 05:34 | And we can basically close the
screen sharing down. There we go.
| | 05:38 | So we shut that back down.
| | 05:40 | We will close down connect,
and we're back to Fireworks.
| | 05:45 | So you can see this can be a
really handy feature for getting some
| | 05:48 | confirmations, some feedback, and not
only is the client seeing exactly what
| | 05:52 | you're seeing, it gives you a
chance to converse in real-time.
| | 05:56 | And if you do need to make changes,
you've got the file right in front of you.
| | 05:59 | We actually have the working Fireworks file here.
| | 06:02 | So if the client did want to see
something like a different color for text,
| | 06:05 | we could have added that kind of thing in,
and it could have updated right onscreen.
| | 06:09 | So they're seeing that information immediately.
| | 06:12 | So there we have share my screen,
| | 06:13 | pretty easy to use as you can see.
| | 06:15 | And it's hopefully saves you a bit of
time and makes meetings possible that you
| | 06:19 | might not have been otherwise able to do.
| | Collapse this transcript |
|
|
2. WireframingUnderstanding wireframes| 00:00 | Wireframes are an important
visualization tool for web developers,
| | 00:04 | presenting proposed function, structure,
and content of a web page, or web site
| | 00:08 | without being concerned
about graphical treatments.
| | 00:10 | The idea behind a wireframe is that
it can be quickly created and just as
| | 00:13 | quickly disposed of when it's no longer needed.
| | 00:15 | A typical wireframe might include key
page elements and their locations, such as
| | 00:19 | header, footer, navigation, content
objects, branding elements, grouping of
| | 00:24 | elements, such as sidebars,
navigation bars, content areas, labeling, page
| | 00:28 | title, navigation links, headings to
content objects, and placeholders for
| | 00:32 | content text, and images.
| | 00:34 | Using Fireworks makes wireframing a snap.
| | 00:36 | There are many prebuilt symbols,
which can be dropped in, and you can
| | 00:39 | also create your own custom symbols, which
you can repurpose for use in other projects.
| | 00:43 | As you'll see in an upcoming lesson,
you can even use the Document Template
| | 00:47 | feature to speed up your wireframe development.
| | 00:49 | I've got the wireframe_final.fw.
png file opened onscreen right now.
| | 00:55 | Various content areas are all
created from a short list of custom symbols.
| | 00:58 | The shapes are very simple.
Remember, you're not focusing on statics here;
| | 01:02 | you're focusing on the
function and placement of objects.
| | 01:04 | So we can take a look through here, just
| | 01:06 | scan through some of these pages.
| | 01:08 | You'll see, I'll zoom out a little bit,
you get a real good, instant idea of how
| | 01:15 | these pages are going to relate
to each other and how they flow.
| | 01:19 | Now, the trick to creating a good
wireframe is to have a good sense of the
| | 01:22 | project, in terms of
content and, to a degree, layout.
| | 01:26 | I also make use of two special autoshapes in
this wireframe, Greek text by John Dunning.
| | 01:31 | And you see that on the
screen right now, our index page,
| | 01:34 | all these blocks here, these black lines,
represent textual content without any
| | 01:39 | actual text in them.
| | 01:40 | It comes in really handy for a just
sort of showing where copy is supposed to go
| | 01:44 | but not having to worry
about the copy itself at this point.
| | 01:47 | Now, you could also use Lorem Ipsum for
dropping and placement text, but I think
| | 01:52 | the Greek text autoshape is even more
in keeping with the goals of a wireframe.
| | 01:57 | By the time I get to the storyboard
stage, almost likely out for Lorem Ipsum text.
| | 02:01 | Now, the other autoshape I use in here,
scroll down a bit in my toursDetail
| | 02:06 | page, is this one right down at the bottom here.
| | 02:09 | This is the grid autoshape by Aaron Beall.
| | 02:11 | We'll be looking at this again in more
detail later on, but it's a really handy
| | 02:16 | little autoshape for creating
essentially series of grids or a table.
| | 02:20 | So if you need to drop in a data table,
it's something Fireworks doesn't do by
| | 02:23 | itself particularly easily.
| | 02:25 | This autoshape can save you a lot
of time, and as in the case of both of
| | 02:28 | them, they're both free.
| | 02:29 | Now, if you take a look at the top left,
you'll see our navigation. Hotspots
| | 02:34 | have added to the navigation button so
the user can actually move from page to page.
| | 02:38 | If I click on any of these individual pieces,
| | 02:40 | you will see a link down on the Properties panel.
| | 02:42 | So they're all ready to go.
| | 02:44 | Now, what we'll be doing in the course
of this chapter is starting out with a
| | 02:47 | Fireworks document template, setting
it up to the right dimensions for our
| | 02:51 | wireframe, heading in some custom
symbols that we're going to create, and then
| | 02:55 | adding interactivity, and eventually
we exporting this out as an interactive
| | 02:59 | PDF that the client can review.
| | 03:01 | So get ready; we're about to get started.
| | Collapse this transcript |
| Planning a wireframe| 00:00 | In a real project, before you begin your
wireframe, you should have had at least one
| | 00:04 | meeting with the client and have a clear
understanding of the project's scope and goals.
| | 00:08 | In our case, you'll be following along
with me as we build significant parts of
| | 00:11 | the wireframe for the Explore California web site.
| | 00:14 | Anytime you wish, you can always
refer to be completed wireframe,
| | 00:17 | wireframe_final.fw.png, in the chapter 2 folder.
| | 00:22 | Now before you even begin with a new
document, what you want to do is create a
| | 00:26 | list of the content
categories necessary for the web site.
| | 00:29 | This is going to help you establish
your basic navigation, at the very least.
| | 00:33 | You can scratch this out on paper, or
you can make a list in a Word processor, or
| | 00:37 | my favorite, use sticky
notes - whatever works for you.
| | 00:41 | The process can be really helpful
when you're brainstorming the content.
| | 00:44 | Now, we're going to be
starting with the homepage.
| | 00:47 | So here is a list of the things we need
to include in that first wireframe: areas
| | 00:52 | such as navigation, main
content, secondary content, footer.
| | 00:59 | Now, I'm going back up to the top
here. We talked about some of the
| | 01:02 | content areas, a little more
specific. Our navigation area has our main
| | 01:06 | navigational components.
| | 01:07 | All the different elements are listed: Tours,
Mission, Contact, Resources, and Explorers.
| | 01:13 | Now, we do have subnavigation coming into play
later on, but that's not part of the index page,
| | 01:18 | so we're not going to worry about that right now.
| | 01:20 | You can see, as well, all the different
content areas are pretty obvious, even if
| | 01:24 | we don't know exactly what they are
just yet. It's pretty easy to discern where
| | 01:27 | different types of content are being placed.
| | 01:29 | Another thing we want to think about are
page titles, and that's really more for
| | 01:32 | the Pages panel, over on the
right-hand side of the screen.
| | 01:36 | You'll see each of the pages inside
this Wireframe have a different name, so
| | 01:40 | it's really easy to
identify those different pages.
| | 01:44 | And again, while we don't need it on
the on the index page, as you move further
| | 01:46 | into some of the pages, you'll want to think
about things such as top-level headings.
| | 01:51 | So it makes it really easy to
understand where you are inside the wireframe.
| | 01:55 | Now, you may also want to indicate
where the fold is - by that, I mean how much
| | 01:59 | content will appear in the initial
browser screen based on assumptions such as
| | 02:03 | screen resolution and viewport size?
| | 02:05 | And you can do that literally by just
drawing a straight horizontal line through
| | 02:09 | that specific dimension.
| | 02:11 | Basically, the more
information you have, the better.
| | 02:14 | Even though the wireframe is a simple
construction, it should be as accurate as
| | 02:18 | possible in terms of representing content.
| | 02:21 | Now with all this information gathered
together, it's a matter of creating a new
| | 02:25 | document and coming up with a layout system.
| | 02:27 | Now, grid layout systems are really
popular these days, especially the 960 grid
| | 02:32 | style for web sites.
| | 02:34 | The Fireworks engineers and other
third-party developers, such as the people
| | 02:38 | at 960.gs, have made it much easier to
build layouts based on this common grid format.
| | 02:44 | In the next lesson, you'll create a
new wireframe document using one of
| | 02:47 | Fireworks' grid templates.
| | Collapse this transcript |
| Using document templates for wireframing| 00:00 | Document Templates, which are new to
Fireworks CS5, can be a real timesaver,
| | 00:05 | whether you want a little inspiration,
or a way to skip over some of the basic
| | 00:08 | drudge work of setting up a new document.
| | 00:10 | Let's have a look at the Template feature.
| | 00:12 | There're three different ways you can
access the templates. Right from our
| | 00:16 | welcome screen over here on the right-
hand side, in the Create New column, you'll
| | 00:19 | see an option for From Template.
| | 00:22 | We can also go into the File menu.
| | 00:23 | In the File menu, we have the obvious
New from Template option, and then the
| | 00:27 | not so obvious New.
| | 00:29 | If I click on New, you'll see here
in the New Document window, we have a
| | 00:33 | link into the templates.
| | 00:34 | So I'm going to click on that,
and there's the Templates folder.
| | 00:38 | We've got five main categories of
templates, and you might be thinking, because
| | 00:42 | we're building a wireframe, but we will
be going into the Wireframe folder, and
| | 00:47 | that's good thinking, but in
this case, it's not what we want.
| | 00:50 | The wireframe samples are actually completed
wireframe and while they're a great reference
| | 00:54 | tool and learning tool,
| | 00:56 | you'll probably spend more time
adjusting them to get what you want than you
| | 01:00 | will if you build something from almost scratch.
| | 01:03 | So where we're going to go
is the Grid systems folder.
| | 01:08 | The Grid systems folder has a variety of
different 960 pixel-based grids that you
| | 01:13 | can work with, from Grid 4
all the way up to Grid 16.
| | 01:17 | The greater the number of columns, the
narrower the columns are, which allows
| | 01:21 | for more accuracy and
flexibility for intricate layouts.
| | 01:25 | For our sample, we'll be
using the 16-column grid.
| | 01:28 | So, I'm just going to go ahead and
select Grid 16, and click Open, and I'm going
| | 01:32 | to zoom out a little bit, so
we can see this a bit better.
| | 01:37 | Now if I hop over the Layers panel,
just minimize my Optimize panel there,
| | 01:42 | we've already got three layers in this
design, and that's because we're pulling
| | 01:45 | in from this template.
| | 01:46 | These all essentially pre-built elements.
| | 01:48 | We've got Grids, Side bars and Leading.
| | 01:51 | We'll take a quick look at each of these.
| | 01:53 | Now the Leading basically controls, or
gives you a guide for line spacing for text.
| | 01:58 | So if I hide that Leading layer, turn
it back on, you'll see those faint blue
| | 02:03 | horizontal lines will disappear and reappear.
| | 02:06 | The Leading lines are using an 18 pixel-
based line, which is a pretty common way
| | 02:10 | to space out your text inside of a
web page and maintain its readability.
| | 02:15 | Next one down is Side bars, so
again, I will hide those, and you'll see
| | 02:18 | that little gray stripe on the left and
right sides of the design appears and disappears.
| | 02:23 | Basically that sort of indicates the
stopping point for your 960-pixel width.
| | 02:28 | Anything within those gray
bars is part of a 960-pixel grid;
| | 02:31 | anything outside of it is just
basically more browser viewport area.
| | 02:35 | The last one here we have is the Grids.
And again, I'm going to hide them and
| | 02:40 | show them, and these ones are pretty obvious.
| | 02:43 | You can pick up pretty
quickly where they're coming from.
| | 02:45 | Those are those actual thin
columns that we see throughout.
| | 02:49 | Now, there's one other element here,
which currently isn't visible, but if go
| | 02:52 | up to my View menu, go to Guides, so
this is another really important component
| | 02:57 | to the Grid System.
| | 02:58 | These templates come with
pre-build grid arrangement.
| | 03:01 | So you're not having to painstakingly
draw in all your vertical grid lines,
| | 03:05 | which can take a while and be little
bit of an exercise in frustration.
| | 03:09 | So it's already built for us, and
you can see, with these brought in,
| | 03:13 | we're getting our column areas, our
gutter spacing between the columns, and so on.
| | 03:18 | So these grid templates have actually
been thought out pretty well, and should
| | 03:21 | speed up our development of our wireframe.
| | 03:23 | Now there are a couple of issues
we're going to adjust before we get into
| | 03:27 | creating any artwork for our wireframe.
| | 03:30 | First thing to note is that
this document is 1040 x 1040.
| | 03:34 | In our case, if you remember back to our
final wireframe that we were looking at
| | 03:38 | earlier, it's a pretty long page.
| | 03:40 | So that dimension is not
really going to work for us.
| | 03:43 | So before I get into building any other
wireframe pages, I want to set my document size.
| | 03:47 | So I'm going to go over to my
Properties panel and click on the Canvas Size
| | 03:52 | button, and I'm going to change the
height to 1990, and I'm going to set the
| | 03:58 | Anchor to the top center anchor.
And this will force all the new canvas area to
| | 04:03 | be pushed to the bottom of the
document, and I'll just click OK.
| | 04:06 | You won't see too much at this
magnification, but if I zoom out, like we holding
| | 04:11 | down the Ctrl key and the Minus key,
you'll see that we've got significantly
| | 04:15 | more space to our design.
| | 04:17 | You'll also see that our Leading and
our Side bars and our Grids stop at 1040
| | 04:23 | because they're all vector shapes;
| | 04:25 | they aren't going to
expand with the canvas size.
| | 04:27 | So we're going to make a couple of
changes, just to fill in the entire
| | 04:30 | wireframe with our grid.
| | 04:32 | One of the ones we've got to work with
is the Leading, so I'm going to unlock
| | 04:35 | the Leading layer, expand it down.
| | 04:37 | You'll see we have a rectangle here.
| | 04:38 | I'll take a close look at that
rectangle shape on the canvas, and you'll see, in
| | 04:44 | the middle, two little arms. And if I
zoom in, see the arm is a bit better.
| | 04:49 | What this is identifying is the fact
this rectangle's filled with a pattern, and
| | 04:53 | that pattern is that 18-pixel baseline.
| | 04:56 | In fact, if you look down the
Properties panel, and you'll see Baseline 18.
| | 05:00 | Now I want to scale this leading, in
case I need it later on, but I want to be
| | 05:05 | very careful about this too, because by
default, when you scale a vector, the fill
| | 05:09 | of that vector also gets scaled.
| | 05:11 | So we need to make a little
change before we do anything else.
| | 05:14 | I'm going to go to my Edit menu, go to
my Preferences, and you'll see here in
| | 05:19 | the General category where it says Scale
strokes and effects, that currently is selected.
| | 05:25 | What this means is that if I resize that
rectangle, the actual grid that's being
| | 05:29 | used for my leading is going to
resizes as well, which we don't want.
| | 05:33 | We don't want additional
space between each of those lines.
| | 05:35 | So, I'm going to deselect that and then
click OK, and I'm going to zoom out a little bit.
| | 05:42 | Now I need to scale this.
| | 05:44 | There's several different ways I can do this.
| | 05:46 | I can use the Scale tool and drag by eye,
which may not give me an accurate setting.
| | 05:52 | We'll just escape out of that.
What's even faster and a little more accurate,
| | 05:58 | because we're dealing with just a
plain-old rectangle here, is rather than doing
| | 06:02 | any scaling by hand, go down to the
Properties panel and change the height to
| | 06:08 | 1990, and I press the Tab key. And while
it's a little hard to see there, the
| | 06:15 | leading actually increased.
| | 06:16 | I'll zoom in a bit, so you
can see this a bit better.
| | 06:18 | You can see there's our
leading, all the way down now.
| | 06:23 | Now you might be noticing what appears
to be some odd gaps between some of the
| | 06:28 | leading, and to be honest this is
strictly the magnification factor.
| | 06:32 | When we go up to 100%, that
leading shows up on every single line.
| | 06:37 | Okay, just when you zoom out a
little bit, it starts to break up a bit.
| | 06:42 | So just keep in mind they are
there, just not that easy to see when
| | 06:45 | you're zoomed too far out.
| | 06:46 | So, I'm going to lock the Leading
layer again and Side bar is the next one.
| | 06:52 | I'm going to unlock that.
| | 06:53 | I'm going to click on the Side bar layer,
and you'll see it grabs both rectangles.
| | 06:58 | If I take a look inside of that layer,
you'll see I do have two paths that
| | 07:03 | basically are acting as my side bars.
And again, just like before, I'm going to go
| | 07:07 | into my Properties panel, and just type
in "1990," and that will extend the side
| | 07:12 | bars all the way down the design.
| | 07:15 | Lock that up and collapse it.
| | 07:17 | Last but not least is the Grid.
| | 07:19 | Now the Grid is, as we see here
inside the Layers panel, a blue rectangle.
| | 07:25 | If I select it, there're all the columns.
And it's basically a composite path.
| | 07:29 | It's essentially a whole series of
rectangles that have been grouped together
| | 07:33 | as one single path.
| | 07:34 | So again, what I want to do here is
extend these columns all the way down.
| | 07:38 | So, I'm going to my height and change
it to 1990, and that extends everything.
| | 07:47 | So we're looking pretty good there.
| | 07:48 | All right, one last little check here.
| | 07:50 | I'm going to go back in my View menu.
| | 07:52 | I'm going to go to Guides. I want to make
sure that Guides are showing up. We know that.
| | 07:56 | But I want to make sure they are
also locked, so that I don't get moved by
| | 07:59 | accident, and my snapping feature is
turned on which will allow me to snap to
| | 08:03 | the guides as well.
| | 08:04 | All right, so there we go.
| | 08:06 | We've gone from nothing to a brand-new
document, generated by a document template.
| | 08:13 | We've customized the document
template, customize the elements within the
| | 08:17 | document template, so that our
grid fills the entire canvas area.
| | 08:21 | In the next movie, we're going to be
creating some custom symbols that we're
| | 08:24 | going to be using on a regular basis
throughout the creation of the wireframe.
| | Collapse this transcript |
| Creating custom wireframe symbols| 00:00 | In the last movie, we set up our
brand-new document using a document
| | 00:04 | template and customized it a bit so
that it suits our - what's going to
| | 00:08 | become our wireframe.
| | 00:10 | In this lesson, we're going to be adding
in some custom symbols, and we're going
| | 00:15 | to make these symbols available to any
design that we plan to work on down the
| | 00:19 | road by saving them to the common library.
| | 00:21 | Now, while the wireframe is a simple
construction, there are going to be shapes
| | 00:25 | I'm going to use over and over again,
such as a shape to indicate an image or a
| | 00:29 | container or maybe even a
navigation, that kind of thing.
| | 00:34 | So it makes sense to create some
symbols to represent these elements,
| | 00:37 | so I don't have to keep creating
them over and over again or copying and
| | 00:40 | pasting them, and so on.
| | 00:42 | The bonus is that when I'm using symbols,
I can change properties of the symbol,
| | 00:45 | and I can update all the
instances at the same time.
| | 00:48 | So I don't have to go and deal with
things on an object-by-object basis.
| | 00:52 | Now I want each shape to have a
different color, or shade, so they are easy to
| | 00:56 | identify and separate from each other.
| | 00:58 | But I also want to keep the shapes neutral.
| | 01:00 | I don't want any concerns about color
entering into my client's mind at this point.
| | 01:05 | So, I'm going to be working with shades of gray.
| | 01:07 | So, I'm going to have a few
different shapes here: one for the main site
| | 01:11 | background, one for the content groups,
be a slightly darker gray, another one
| | 01:16 | for navigation, and then another one for images.
| | 01:20 | So let's go ahead and
start putting these together.
| | 01:23 | Again, we're keeping this really simple.
| | 01:25 | So, I'm going to go over to my
Vector tools, to select the rectangle.
| | 01:28 | Now before I start drawing anything,
just want to point your attention over to
| | 01:31 | the Layers panel again. Remember that
when this document was created, we have all
| | 01:35 | these locked layers that handle our grid.
| | 01:38 | If we start drawing shapes right now,
they're going to get dropped into one of
| | 01:41 | these locked layers, which we don't want
because then they're not easy to access.
| | 01:45 | I'm going to go ahead and create a
brand-new layer, and that way everything I
| | 01:48 | draw, it's put into that one layer.
| | 01:50 | I'm going to worry about naming it,
and you'll find out why in just a minute.
| | 01:53 | So I'm going to select my Rectangle tool,
and I'm going to change the color of
| | 01:57 | that rectangle from blue to a light
gray, and I'm just going to draw a box.
| | 02:03 | I'm not even really worry about the size,
but I do want to make sure that the
| | 02:07 | dimensions are easily divided by a factor of 10.
| | 02:10 | So, down here in my width and height,
width of 160, I can work with that, height
| | 02:15 | of 300, so I've got easy-
to-work-with numbers there.
| | 02:20 | So that's our first shape.
| | 02:21 | Now I need to create a
couple of more rectangles.
| | 02:24 | Wireframes are really just a
bunch of boxes, in many cases.
| | 02:27 | So, we're going to be
working with a few of them.
| | 02:29 | Now I could go back to the Rectangle
tool, and I could draw another rectangle,
| | 02:33 | but what's a little bit easier, I'm
going to select my Pointer tool, and I'm
| | 02:37 | going to hold down my Alt key, and I'm
going to press any one of the four arrow
| | 02:41 | keys on my keyboard.
| | 02:42 | As soon as I do that, even though you
don't really notice too much going on on
| | 02:46 | the canvas, take a look
over in the Layers panel.
| | 02:49 | We've now got two rectangles.
| | 02:51 | So, I'm going to hold down my Shift
key this time and tap my arrow key a few
| | 02:55 | times to separate those two
rectangles from each other.
| | 02:59 | Exactly the same size and exactly
the same color; they're basically
| | 03:02 | duplicates of each other.
| | 03:03 | So I want to change the color of this one.
I want this to be my content rectangle.
| | 03:08 | So, I'm going to change
this from a lighter gray,
| | 03:11 | I'm going to go ahead and set this to be 999999.
| | 03:17 | So, a slightly different color, again
easy to separate from everything else.
| | 03:21 | I need at least one more of these things,
and this is going to be for my navigation.
| | 03:24 | So again, going to hold down my Alt key
or the Option key on the Mac, press the
| | 03:30 | arrow key once, and we have a third rectangle.
| | 03:33 | I'll just hold down the Shift
key and separate that one as well.
| | 03:36 | Now, in this case here, this is
going to be for my navigation.
| | 03:39 | So I'm going to change this to plain old white.
| | 03:42 | Now I've got the three shapes drawn,
| | 03:45 | I want to convert them to symbols.
| | 03:47 | I can start with a navigation.
| | 03:48 | That's already selected. All I've got
to do is press F8, and I want to give the
| | 03:53 | symbol a name that's useful to me.
| | 03:55 | Now, I don't want to call it just
"navigation" because that makes me think of
| | 03:58 | there being navigation in there.
| | 04:00 | So, I'm going to going to
call this nav_container.
| | 04:04 | I want it to be a graphic symbol,
and I don't need to worry about 9-slice
| | 04:09 | scaling because this is a plain old rectangle.
| | 04:11 | But that second option, Save to Common
Library, this is going to come in handy.
| | 04:16 | The reason being that if I save these
different symbols to the Common Library,
| | 04:19 | they're going to be available to any
design I create, now or in the future.
| | 04:24 | If I don't save them to the Common
Library, they're going to be what I refer to
| | 04:28 | as document-specific symbols, meaning
that when you open up this one document,
| | 04:31 | they'll be there, but you won't be
able to get them as easily and use them in
| | 04:35 | other files without exporting them, and so on.
| | 04:37 | We're going to make sure we
save this to the Common Library.
| | 04:43 | Fireworks brings you to
the Custom Symbols folder.
| | 04:45 | This is where you'll store any
symbols you create that are going to be
| | 04:47 | accessible to other documents
that you create inside of Fireworks.
| | 04:51 | Down at the bottom where the File
name window is, you'll see it says
| | 04:54 | nav_container and then .graphic.
| | 04:58 | The nav_container is what we call the
symbol. The .graphic, tells Fireworks that
| | 05:04 | this is a Graphic symbol rather than
an Animation symbol or Button symbol.
| | 05:07 | So we're going to leave all those
settings as they are and click Save.
| | 05:12 | Now, you'll notice, on the canvas, the
shape's gone, and that's what happens when
| | 05:16 | you save a brand-new file as a symbol
to the common library. It automatically gets
| | 05:20 | removed from the document and
just saved into the common library.
| | 05:24 | We'll take a look for that in just a minute.
| | 05:26 | Next one up, same idea,
select the rectangle, press F8.
| | 05:31 | This is going to be my content
symbol, and again, I want it to be a graphic
| | 05:35 | symbol, and we're going to
save it to the Common Library.
| | 05:37 | We'll accept the defaults.
| | 05:40 | You'll see, there's the nav_container graphic.
| | 05:42 | This is going to be our content.graphic,
save that. And then the last one is
| | 05:47 | going to be for our web page background.
| | 05:49 | You can think of it maybe as a wrapper,
and that's what I'm going to be calling it.
| | 05:52 | So press F8 again, and I'm going to
call this wrapper, and Save to Common
| | 05:59 | Library and click OK, and again, just
accept the defaults. And so all three of
| | 06:04 | these symbols are now
part of the common library.
| | 06:07 | In fact, if I go to my Common
Library panel, open up my Custom Symbols
| | 06:11 | folder, there they are. There's content.
| | 06:14 | There's nav_container -
| | 06:16 | you can't see it because it's white
on white, and then there's wrapper.
| | 06:19 | So those guys are all good.
| | 06:21 | Now we need add in one more symbol, and
that symbol is going to be for the images.
| | 06:26 | We want to have some basic image placeholder.
| | 06:28 | I'm going to go ahead and draw a
rectangle, and I'm going to give this a width
| | 06:36 | of 600 and a height of 300, and I want to
differentiate this symbol a couple of different ways.
| | 06:44 | I again want to change the color a
little bit, but I also want to put some
| | 06:50 | diagonal lines through this, to help
represent more along the lines of an image
| | 06:54 | placeholder, rather than just another box.
| | 06:57 | So make things a little bit easier for myself,
| | 06:59 | I'm going to go up to my View menu, and I'm
going to hide my guides for the time being.
| | 07:04 | Makes it a little easy to see the
rectangle, and I'm going to zoom in a bit
| | 07:07 | by pressing Ctrl+Plus.
| | 07:09 | I need to make my document active
again. Okay, I'm going to click on the
| | 07:15 | Vector Line tool, and I'm going to
go ahead and place my cursor in the
| | 07:19 | upper-left corner and drag straight
down to the bottom right, and I want to
| | 07:24 | change the color here.
| | 07:25 | I'm going to make this into a medium
gray and add in one more line on the other
| | 07:30 | side, going from the upper-
right down to the bottom-left.
| | 07:38 | So there are those elements in place.
Now, I'm going to grab my Pointer tool.
| | 07:42 | One of the things you want to watch with this,
because you're drawing these diagonal
| | 07:44 | lines, is that they can be a little off.
And we're going to zoom in specifically
| | 07:49 | by clicking and dragging with the Zoom
tool around the bottom-left corner and
| | 07:53 | sure enough it's sticking out of
little bit from the bottom edge.
| | 07:56 | So, I'm going to select that line, and
I'm just going to shift it up by one.
| | 08:01 | Now you might notice that I'm having a
little bit difficulty getting that lined
| | 08:04 | up exactly the way I want.
| | 08:06 | That's the case because of my guides.
| | 08:09 | I've still got the Snapping options
set here, so I'm going to deselect
| | 08:12 | Snapping, and there we go.
| | 08:15 | That's making life a little easier.
Go over to the bottom right, same idea with
| | 08:20 | this guy there, and same idea in the
upper-right corner. I just want to keep
| | 08:29 | everything contained inside the rectangle.
| | 08:32 | Then scroll over to - okay,
the upper-left corner is fine.
| | 08:35 | All right, so we've got those three
elements there, we're going to zoom out a
| | 08:40 | little bit, and I think also I want
to make that background for the image a
| | 08:44 | little bit brighter.
| | 08:45 | So I'm going to select that rectangle.
And I'm already at the lightest shade of
| | 08:50 | gray in my grayscale bar,
| | 08:52 | so I'm going to go ahead and click on
the color picker and just go up a couple
| | 08:56 | shades in the gradient ramp, just to
make it a little bit brighter, and we can
| | 09:01 | always change this again later on, too.
| | 09:03 | This also has to be converted to a symbol,
| | 09:05 | so I'm going to hold down the Shift key,
I'm going to click on the two diagonal lines, the
| | 09:10 | rectangle was already selected a
minute ago, and I'm going to press F8.
| | 09:14 | Call this one "image placeholder" and
again I want this to be a graphic symbol,
| | 09:20 | save it to the Common Library.
| | 09:21 | This is one I think I'll be using a lot.
| | 09:24 | So I'm going to click OK, and I can
stick with the default settings here, click
| | 09:29 | Save, and there we go.
| | 09:31 | It is now part of the Custom Symbols.
| | 09:34 | You can see it here over
on the Common Library panel.
| | 09:36 | There is the image placeholder, just like that.
| | 09:39 | Okay, just to summarize here, we've
created four symbols that we're going to be
| | 09:43 | using for the wireframe. Very likely
we're going to be creating more as we go.
| | 09:47 | But this is a good starting point,
especially for our first page.
| | 09:51 | In the next movie, we'll begin
assembling at very first wireframe page.
| | Collapse this transcript |
| Creating a wireframe| 00:00 | In the last movie, we created a new
document from a document template and built
| | 00:05 | some symbols to help speed up
the creation of our wireframe.
| | 00:08 | In this movie, we'll put those symbols
to work creating the wireframe for the
| | 00:11 | homepage. Now, before we drop any of
these symbols onto our wireframe, let's set
| | 00:15 | up a bit of structure here.
| | 00:17 | I like to think of my potential div
structure that I will be using for the final
| | 00:21 | web site layout, even in the wireframe level.
| | 00:23 | So we are going to create a series of
layers to help organize our content, which
| | 00:27 | will emulate the final div-based
content areas for the web page.
| | 00:32 | So the first thing I am going to do is
switch over to my Layers panel and give
| | 00:36 | myself a little bit of room here.
From the last movie, we have that empty
| | 00:40 | layer at the very top, and we have also got
our three locked layers that make up our grid.
| | 00:44 | The first thing we are going to do is move
this empty layer down to the bottom, and
| | 00:49 | the reason for that is that I want the
grid to sort of be superimposed on top
| | 00:53 | of everything I do.
| | 00:54 | I can always turn it off later on, but
this way the layers themselves and the
| | 00:57 | content aren't obscuring the grid if I need it.
| | 01:00 | So the layers we are going to be
creating are the header, the nav, the main
| | 01:04 | content, the sidebar,
the footer, and the wrapper.
| | 01:08 | So we'll start off by just
renaming this empty layer from layer 1 to
| | 01:14 | "wrapper," and I have started at the
bottom of my list of layers, for this
| | 01:20 | very simple reason.
| | 01:21 | When I get a layer selected and click
on New layer, it automatically appears
| | 01:27 | above the selected layers.
| | 01:28 | So I am going to go ahead and rename
this one "footer," and I will keep going on
| | 01:34 | with that process, "sidebar," and just
double-clicking on each of these layers, so
| | 01:42 | that I can rename them, "main content,"
and this is going to be "nav," and finally
| | 01:56 | header, so we have got
all of our layers in place.
| | 02:00 | The actual structure that I have set up
here is kind of important, because some
| | 02:03 | of the elements in these different
layers are going to overlap, so make sure
| | 02:07 | that your layer structure mimics mine
when you are creating this, so that things
| | 02:11 | overlap the way they're supposed to, rather
than covering up things they are not supposed to.
| | 02:14 | It can be pretty easy to put objects
in the wrong layer if you're building
| | 02:18 | quickly, so a good way to avoid this is
to lock all the layers, except the one
| | 02:23 | you're going to work with.
| | 02:24 | And we are going to
start with the wrapper layer.
| | 02:27 | So I am going to select it, and then
there's a really cool little shortcut to
| | 02:30 | lock everything else.
| | 02:31 | Go up to my Commands menu, go to
Document and choose Lock Other Layers, and this
| | 02:37 | locks everything that's not currently selected.
| | 02:40 | And one other layout tool I want to
use as I go through positioning different
| | 02:44 | elements are my rulers. And they are
not currently available, so I am going to
| | 02:48 | go to my View menu and choose Rulers,
and we see we got our pixel-based rulers
| | 02:53 | along the sides and the top.
| | 02:55 | I also want to customize the Ruler
settings so that they tie in a bit more with
| | 02:59 | the actual width that I am
going to be working with.
| | 03:01 | If you notice right now our zero point
running across starts at the very edge
| | 03:05 | of the document where the sidebar is, but our
document actually starts a little further in.
| | 03:10 | So we are going to reset the rulers,
and that's actually really easy to do.
| | 03:14 | I'm just going to go at the top of my
document, and I'll just drag that little
| | 03:20 | icon over, and you can see I am
getting my horizontal and vertical rulers
| | 03:24 | showing up. And what I want to
do here is do a basic setting.
| | 03:27 | I want to reset my edge of my grid, my
zero point to the part where the actual
| | 03:32 | 960 grid starts, and I'll leave the
top edge of the document as zero as well.
| | 03:37 | So just go ahead and set that into place,
like so, and you'll see the changes are made.
| | 03:44 | Now I am going to zoom in a little bit,
because the whole idea behind this is to
| | 03:47 | be a little more accurate.
| | 03:48 | So I want to make sure I am actually in
the right spot, and the great thing is,
| | 03:52 | if I zoom in enough and scroll,
you can sort of see what's happening.
| | 03:59 | So you can see if everything matches up
okay, and we're doing pretty good.
| | 04:04 | There's my zero point running across,
my zero point running down, so that's
| | 04:08 | exactly where I want it to be.
| | 04:09 | So I am going to zoom back by
pressing Ctrl+Minus or Command+Minus a few times.
| | 04:13 | Now let's start putting stuff in.
| | 04:15 | I am going to go over to our Common
Library where we put in our custom symbols a
| | 04:19 | while ago, and I am going to
open up the Custom Symbols folder.
| | 04:22 | And the first thing I want to drop in is
going to be for that wrapper. So I have
| | 04:27 | got a wrapper symbol here.
| | 04:28 | I am just going to drag it, drop it on
to the canvas, and I am going to zoom out
| | 04:32 | a little bit more so we can get
a better sense of the whole page.
| | 04:35 | Now I can position and scale
this a couple of different ways.
| | 04:37 | I can do it visually by using the
transform tool and dragging it around, but
| | 04:42 | if I want to be a little more accurate with
things, I am going to select the pointer tool.
| | 04:46 | I am just going to get a rough
placement for it, and then I'm going to go down to my
| | 04:50 | Properties panel and set the values
right inside of the Properties panel. So I
| | 04:54 | want to set my width and height.
| | 04:57 | My width is going to be 930.
| | 05:01 | My height is going to be 1900.
| | 05:04 | My X value is going to be zero. And a little
thing to note here: notice where it's being placed.
| | 05:12 | It's going to be based on the new ruler
settings, so that's a good start, and then
| | 05:16 | we are going to view our Y value of
45, and we are almost there, so 45.
| | 05:23 | That positions it roughly what I want it.
| | 05:25 | I am going to zoom in a little bit more,
take a quick peek, and it looks like I
| | 05:31 | need to make a little bit of an adjustment here.
| | 05:33 | I want to have this
background centered inside the design.
| | 05:38 | So I'm going to grab my Pointer tool,
and I am just going to hold down my Shift
| | 05:41 | keys, use my arrow keys, and take a
look and see what I'm doing here.
| | 05:48 | I am balancing this out on either side,
so we essentially have 15 pixels of
| | 05:52 | margin on either side. So the actual
final setting for that div wrapper is 15
| | 05:59 | across and 45 down, and that
makes it look a little more centered.
| | 06:02 | So I have set this object first so
that I have a real good sense of my working
| | 06:06 | space, the area that I want
to place the rest of my layout.
| | 06:08 | So I am going back to my Layers panel,
I am going to collapse down my styles
| | 06:15 | here, give myself a little more working room,
and I am going to lock the wrapper layer.
| | 06:21 | We are done with that for now, and we are
going to go over to our navigation layer.
| | 06:24 | So I am going to deselect that, and
I'm going to be dropping in here the
| | 06:29 | containing element for my navigation.
| | 06:31 | So again, back to my Common Library, and
look for my nav container. Just select it,
| | 06:38 | drag it on to the canvas. And you can
see, because I have the nav layer selected,
| | 06:42 | the object gets automatically
dropped into that specific layer.
| | 06:46 | Now in this case, we are going
to be repositioning this as well.
| | 06:49 | So I am going to move over to the
edge of my design. I just want to hide
| | 06:59 | everything there. And we are going to
extend this out a little bit, so I'll use
| | 07:03 | the Transform tools for this.
| | 07:06 | My tooltips are up, so I can see
exactly how much width I am working with.
| | 07:09 | I want to go for roughly five columns
of width here, so around there, 274, 275,
| | 07:16 | in that range, and I can always make
minor adjustments to that. And I am going
| | 07:20 | to make it a bit longer too. And you
can see this where these tooltips come in
| | 07:25 | really handy because you can see exactly how
big your getting with certain objects here.
| | 07:33 | So about 740, double-click, and again,
if I'm not 100% on, you can see here in
| | 07:40 | my Properties panel,
measurements are little off,
| | 07:42 | I can go ahead and change the 274 to 275.
| | 07:44 | 740 is fine, and I will set my X value to
15, so every thing locks into place there.
| | 07:51 | And if I zoom out a
little bit, and see there it is.
| | 07:55 | It extends right to the edge of my
wrapper, which is exactly what I want.
| | 08:00 | We are going to lock the nav layer
for now, and we are going to unlock the
| | 08:03 | sidebar. And here we're going to
drop in some pods for maybe some teaser
| | 08:08 | information, and I am going to make
use of my content sample for this.
| | 08:14 | So I'll make sure my sidebar is
unlocked and selected, and I will just drag
| | 08:18 | a couple of these in. So we will start off with one
of them, get that one sized, and again, same kind of thing.
| | 08:23 | We can work with the Transform tools,
we can work numerically in the Properties
| | 08:27 | panel, whatever you feel is most
suitable for what you're doing. Especially when
| | 08:31 | you're starting out, you are probably
going to do more of this by eye than you
| | 08:34 | are going to be by numbers, so that's okay.
| | 08:37 | In our case here, we got some things to
work with, so I can give you the values
| | 08:40 | to get things rolling.
| | 08:42 | So we are going to set this to a width
of 240, a height of 400, long sidebar,
| | 08:52 | and X value of, start off with 90 and see
how that looks, and our Y value of 1240.
| | 09:01 | That's a bit lower than I wanted it to be.
| | 09:03 | So I am going to go ahead and
reposition this a little bit.
| | 09:05 | The idea I want here is that this
sidebar, it's a little narrower than the
| | 09:09 | navigation, but I want it to line up
with the right edge of my navigation, so
| | 09:16 | you can see how they're tied in fairly well.
| | 09:17 | And again, if you're not sure, you can
select the zoom tool to zoom in a bit,
| | 09:22 | And yeah, they're lining up
quite nicely along that gridline.
| | 09:25 | I will zoom back out again. And I
want to bring in another one of these, a
| | 09:30 | smaller one, so rather than go back to
the Common Library and drag another one
| | 09:34 | on, I am just going to grab my pointer
tool, hold down my Option key or my Alt
| | 09:39 | key, and press the down arrow key once,
which gives me a duplicate, and then I
| | 09:43 | will just hold the shift down and my
down arrow key and just reposition this one
| | 09:49 | somewhere around there.
| | 09:51 | This one here doesn't need quite as long.
| | 09:53 | I'll make this a bit of a shorter version.
| | 09:56 | So again, I want to make sure that
I've got the right height for this. I am
| | 10:01 | going to go to about 190 with this one,
and I'll lock down my sidebar, and I am
| | 10:08 | going to collapse the navigation in the
sidebar, so we can see the rest of our
| | 10:10 | layers fairly easily.
| | 10:13 | The next area to concentrate
on is the main content area;
| | 10:16 | this is really where a lot of
the elements are to come together.
| | 10:19 | Now the index page will, by far, be
the most visually interesting page.
| | 10:22 | By that I mean it will have visual
treatments that a lot of the other pages
| | 10:26 | won't have, just to help set the mood
for the web site. And while I don't want
| | 10:29 | to worry about specific imagery at this point,
| | 10:32 | I want to give an
indication of what I'm visualizing.
| | 10:35 | In this case here, what I'm thinking
is that we are going to have a fairly
| | 10:38 | strong background image that extends
across the width of the page design, and on
| | 10:42 | top of that, there will be a bit of
introductory text, maybe highlighted by its
| | 10:45 | own specific box, so that it
stands out from the background image.
| | 10:50 | I think I also want to see that background
image, ever so subtly, underneath our navigation.
| | 10:55 | So we are going to make some
alterations here and add in some elements to sort
| | 10:58 | of make this come to life.
| | 11:00 | So starting off, I am going to make
sure my main content layer is unlocked.
| | 11:04 | I am going to go and grab my image
placeholder symbol from the Common Library,
| | 11:08 | drag that on, and there it is there.
| | 11:10 | And I am just going to make a few
settings here numerically, so I want this to
| | 11:13 | be 930 pixels wide and 740 pixels high.
| | 11:19 | I am going to set the X value to 15
and the Y value to 45. So you can see it
| | 11:27 | lines up with the navigation area, sort
of ends with navigation ends and fills
| | 11:32 | the entire width of the page.
| | 11:34 | Now I mentioned, as well, that I want to
give an impression that you'll be able to
| | 11:37 | see this image underneath the navigation area.
| | 11:40 | So I am going to temporarily unlock my
Navigation layer, and I am just going to
| | 11:44 | go ahead and select that navigation panel,
and I am going to set transparency of
| | 11:48 | that to about 70%. And that still
makes it visible, but you can sort of see a
| | 11:53 | ghost of the background image sort
of bleeding through a little bit.
| | 11:56 | So it just gives me an
indication of what's going on.
| | 11:59 | I am going to relock that
navigation layer, before I forget.
| | 12:03 | I also mentioned something about this
intro text, that I want it to be really
| | 12:06 | easy to read and sitting on top of the
background image but separated as well.
| | 12:10 | So we are going to add in another
content area here, and play around with its
| | 12:15 | features as well, so that we can get
a slightly different look to things.
| | 12:18 | So I am going to go back to my content
symbol. Now, you notice I am still on the
| | 12:23 | Common Library here. I'm just going to
show you what happens when you drag in the
| | 12:26 | same symbol a second time
from the Common Library.
| | 12:30 | You get this message from Fireworks:
you can't have two of the same thing
| | 12:34 | inside the document library, so it's
asking if you want to replace or if you
| | 12:37 | want to not replace.
| | 12:39 | So I am just going to cancel out of this,
and I am going to switch back over to
| | 12:41 | my Document Library, grab my
content symbol from there, and drag it on.
| | 12:47 | Now in this case here, we are going
to set this up so it sort of butts up
| | 12:51 | against the navigation.
| | 12:52 | I am going to zoom in a little bit, so
that we can see this a bit better, and I
| | 12:55 | am just going to reposition this, so
it literally just sits right against the
| | 12:59 | navigation. And I am going to give this
a width of about 620 pixels, so that it
| | 13:07 | extends across. And the height of
300 is actually fine the way it is.
| | 13:13 | In terms of the distance from the
top, I think we are pretty good.
| | 13:17 | It's roughly centered, and
that's kind of what I want.
| | 13:20 | I'll just take a quick peek here, maybe
I'll move it down a little bit, 225, so
| | 13:28 | that's that little bit in place.
| | 13:30 | I want this to stand out a bit, and it
does a pretty good job as it is, but if
| | 13:34 | I wanted to make an adjustment to this
particular instance, changing maybe its
| | 13:39 | color value, for example, with it
selected, I can go into my live filters in
| | 13:44 | the Properties panel, and I can go into
something like Adjust Color and choose Color Fill.
| | 13:50 | Now this is going to get pretty bright
for a minute, so bear with me. That's the
| | 13:54 | default color, so we are going to change that.
| | 13:57 | I am going to go and again,
select a slightly lighter color.
| | 14:01 | So we have got a slightly different
box there, so we can again get a sense of
| | 14:05 | the fact that it's
separate from everything else.
| | 14:07 | If I scroll down a little bit, you see
we still had a lot of empty space down
| | 14:11 | here, and this is really where the main
elements for the main content are going to be.
| | 14:15 | So I am going to zoom out a little bit
more. And I want to designate the area
| | 14:20 | where the main content is going to be.
| | 14:21 | I want to keep things connected between
the top and the bottom part of the page,
| | 14:24 | so I am going to grab my content div
again, drag it in, and I want this to
| | 14:30 | slightly overlap everything else.
| | 14:33 | So you can see how they're just sort of
overlapping the background image, and so on.
| | 14:37 | I am going to give this a width of about
570, and a height of about 730, and I'll
| | 14:46 | position it at around 350. And as far
as the height is concerned, from this in
| | 14:54 | the top, let's set that to
around the 700 range, so I'll go with 705.
| | 14:57 | So we get a nice, obvious overlap. And I
am going to zoom in just a little bit,
| | 15:05 | so I can see what's happening with my guides.
| | 15:08 | I have got a nice, obvious gutter between
my sidebar elements, my navigation, and
| | 15:14 | that content area. And I think the only
other thing I want to check, I want to
| | 15:17 | make sure these elements are lining up
as well, up here where that pod is going
| | 15:21 | to be for my text, and down below.
There is some slight difference in terms of
| | 15:26 | the dimensions there.
| | 15:27 | So I think what I'll do is I am just going
to resize that so it lines up. That's better.
| | 15:31 | All right, so that's that area there.
| | 15:34 | I want to add a little bit more depth to the
design, or what the design is going to be like.
| | 15:39 | So I am going to have sort of an
instant sort of navigational point to get
| | 15:42 | people right to the tour section
of this Explore California web site.
| | 15:46 | So I am going to just put another
indicator in here of another placement
| | 15:50 | element, so one more image placeholder.
| | 15:52 | Just drag that in. And this is going
to be a bit big at the moment, so we are
| | 15:57 | going to do some resizing here as well.
| | 15:59 | So this is going to be about 290
pixels wide by 70 pixels high. And let's
| | 16:07 | position that at about 700 from the left.
| | 16:12 | Just notice how it's lining up with the
edge of my 960 grid, and about 70 from
| | 16:18 | the top, that kind of range there.
| | 16:21 | And again, you notice how things
are kind of blending together here;
| | 16:23 | the background image is
blending in with this image here.
| | 16:25 | I am going to go back in to my filters,
Adjust Color, and we'll choose Color Fill again.
| | 16:33 | It's going to get really scary for a second.
| | 16:34 | We will just change that to a light gray.
| | 16:37 | We get a little bit of separation,
and that's what I'm going for here.
| | 16:40 | Now the other element I want to add in
is going to be the footer area, as well
| | 16:43 | as the header area.
| | 16:45 | So I am going to lock my main content,
unlock my header, and this is a quick one.
| | 16:50 | We're just going to go ahead and grab
the image placeholder, drag it in, and
| | 16:54 | again, we are going to reset the size for this.
| | 16:56 | It's going to be about 200 pixels wide
by about 210 high. And I am just going
| | 17:04 | to reposition that so it's somewhat centered,
but basically reaching up to the top of the page.
| | 17:10 | So it's going to connect with the top
of the page. So it's centered inside the
| | 17:13 | navigation, but it's not
right inside the navigation.
| | 17:16 | So again, we get that kind of a layering
effect going on. And I can lock that up
| | 17:21 | and go down to my footer, and its a
last little bit here, and I just want to
| | 17:27 | indicate the fact that some image is
going to be placed in here that I was
| | 17:30 | mentioning earlier about that
graphic of the State of California.
| | 17:34 | So I am going to go ahead and drop in
one more image placeholder into my footer,
| | 17:39 | and again, this guy is going to extend
across the bottom, in terms of width.
| | 17:43 | So I will arrange there and just
going to reposition this, so he sits
| | 17:47 | right inside my wrapper.
| | 17:51 | That's actually starting to come together.
| | 17:53 | If I zoom out a little bit, and let's
hide some various other elements here, my
| | 17:59 | leading and my grid elements, and I'll
hide my guides as well, and you can start
| | 18:05 | to see that it's starting to take some form.
| | 18:08 | The last little step I want to do here is
adding in just the navigation elements.
| | 18:12 | Now I don't want to worry about styling,
links, or buttons, or anything at this
| | 18:16 | point in the game, but I do want to put
in something that represents, accurately,
| | 18:20 | what the different main navigation elements are.
| | 18:23 | So we can type the stuff in, but I
actually have a file we can import, and
| | 18:27 | we are going to go ahead and do that right
now. Make sure that my navigation is unlocked.
| | 18:32 | We go to File > Import, and you will
see here one called main nav, and that was
| | 18:39 | all the text from the main navigation.
Click Open, and we will just import that
| | 18:44 | one specific file on to the current
page, and you don't see it at the moment,
| | 18:48 | because I got put in the
wrong spot. Take a look down.
| | 18:52 | It actually got dropped in the footer
for some reason. So not a big deal, just
| | 18:55 | grab it, and the fastest way to move
something from one layer to another is
| | 18:59 | select it, grab the radio button and then just
drag it to the designated layer. There we go.
| | 19:04 | That's a little better. Sort of center it
up, there we go, and a little bit higher up.
| | 19:10 | So that's starting to take some shape.
| | 19:12 | The actual copy for the web site is not
yet ready, but I want to indicate
| | 19:16 | where text is going to be placed.
| | 19:18 | So in the next movie, we are going to
make use of a very handy autoshape called
| | 19:21 | Greeked text to fill in the gaps.
| | Collapse this transcript |
| Adding greeked text| 00:00 | In the last movie, we built the basic
structure for the home page wireframe.
| | 00:04 | In this movie, we're going to flesh
things out a bit with a special autoshape
| | 00:08 | called Greeked Text.
| | 00:09 | But before we do that, I just want
to mention a couple of things here.
| | 00:12 | I'm working with a new file called
wireframe_greeked.fw.png, and I've made a
| | 00:17 | few changes to the layout, mostly
to make it easier to see things.
| | 00:22 | I've hidden all of my grid elements,
my three layers that control the grid:
| | 00:26 | Leading, Side bars and Grids;
| | 00:28 | they're hidden from view for the time being,
and I've also made a couple of other changes.
| | 00:32 | I've set the canvas color to a darker
gray so things separate a bit better, and
| | 00:36 | I've customized the color of the box
for my intro text, and also for my little
| | 00:41 | tag navigation item.
| | 00:43 | I've changed the color there again to
make them stand out a bit more, and I've
| | 00:47 | done that just simply using some live filters.
| | 00:49 | So, just want to keep things really
easy to see, more than anything else.
| | 00:54 | Now as I mentioned, we're going to be
using an autoshape called Greeked Text.
| | 00:57 | This is as a third-party
extension for Fireworks.
| | 01:00 | It's created by our fellow named John Dunning.
| | 01:02 | He's got on a ton of different
extensions available for Fireworks. And a couple of
| | 01:06 | great things about this extension.
| | 01:08 | First of all, it's free.
| | 01:10 | Second of all, it's a great way to sort
of speed up the process of wireframing.
| | 01:14 | You don't have to worry about
dropping and Lorem Ipsum Text, or putting
| | 01:17 | in actual real text.
| | 01:18 | This basically simulates the effect of body
copy without having any text at all involved.
| | 01:23 | Now, I've already installed the
extension, and you can access it a
| | 01:26 | couple different ways.
| | 01:28 | If you go up to the Commands menu, you'll
see an option here called Greeked Text,
| | 01:32 | and this basically allows you to
insert Greeked text, add some defaults.
| | 01:36 | It also allows you to reset elements
for the Greeked text autoshape as well.
| | 01:41 | That's one way to get at that
particular shape, but the most common way is
| | 01:46 | through the Auto Shapes panel.
| | 01:47 | So, I'm just going to open up the Auto
Shape panel, and you'll see here it is
| | 01:50 | here. It's just about halfway down,
through all these different autoshapes.
| | 01:54 | Everything you see in here, with the
exception of Greeked text is installed with
| | 01:58 | Fireworks, and there's the
Greeked text autoshape right there.
| | 02:00 | Now we're going to be adding this
into a few different areas inside of the
| | 02:04 | wireframe to emulate text placement.
| | 02:07 | Now, the first thing I want to do is
make the proper layer available.
| | 02:11 | I'm going to be doing a lot of
this work in the main content layers.
| | 02:14 | I'm going to unlock that layer, and I'm
going to go back in here and find that
| | 02:18 | Greeked text autoshape. And all I've got
to do is drag this on my canvas, and
| | 02:32 | there you see, there it is.
| | 02:34 | Now I'm going to zoom in a little bit on
this, so we can get a better look at it.
| | 02:39 | One of the things about autoshapes is
they are kind of a unique type of graphic.
| | 02:43 | They're not just a vector object.
| | 02:44 | They're a vector object
controlled by JavaScript.
| | 02:47 | So, you see all these little
yellow diamonds all around this shape.
| | 02:51 | You will see actually a couple that are
blue and yellow, if you look really closely.
| | 02:55 | These are all control points for the
shape. It allows me to customize the shape
| | 02:59 | based on certain JavaScript
functions that have been programmed into it.
| | 03:02 | Now, as well as being able to do things
with it programmatically, I've also got
| | 03:07 | access to some of the basic
settings I'd have with any vector shapes.
| | 03:11 | So, for example, if I want to change
the color of that auto shape, I can just
| | 03:14 | go down to the Properties
panel and pick a new color.
| | 03:17 | I'm going to stick with black, but
I can pull in whatever color I want.
| | 03:21 | And typically the auto shape will
take on whatever color was last used in
| | 03:24 | the Properties panel.
| | 03:25 | So, you may bring it in, and it may be
lighter gray, or it may be a different color.
| | 03:30 | To reset it, just go into that
Properties panel and make that change.
| | 03:34 | Now I'm going to reposition this over to
the side a little bit, and I'm going to
| | 03:39 | grab one of these little
control points and just drag across.
| | 03:42 | You can see, as I'm dragging, the auto
shape itself is randomly changing the
| | 03:47 | line length, so it's simulating text.
And I'm going to drag it down as well, and
| | 03:54 | we had more lines that way,
automatically generated, and that gives me a good
| | 03:59 | sense of some body copy.
| | 04:00 | Now I'm going to bring in one
more of these, to act as a heading.
| | 04:03 | So I'll drag one more on top, like so, and
in this particular case, I don't need a
| | 04:08 | lot of lines. It's going to be a single heading.
| | 04:09 | So, I want to do two things here.
First of all, I'm going to make this a little
| | 04:13 | bit shorter, something around that range there.
| | 04:16 | So we've got one line. But if we zoom
in a little bit more, just to make it
| | 04:20 | easier to see these,
| | 04:22 | you've got two other little control
points here. These little blue and yellow
| | 04:26 | diamonds control the actual spacing between
the lines and the thickness of the lines as well.
| | 04:32 | So if I grab the top one, the one that says
line height, I can drag this down and
| | 04:36 | increase the size of that line. And if
I zoom back out, you can see that it
| | 04:41 | starts to take on slightly
different characteristics.
| | 04:43 | I'll just line that up with my other
autoshape, maybe make it a little bit
| | 04:48 | longer, and maybe I will make
it just a bit bigger. There.
| | 04:58 | So now I've got what looks like a
heading and also it looks like some body copy.
| | 05:01 | Pretty quick and easy to do.
| | 05:03 | I also want to incorporate this
Greeked text autoshape a few other places,
| | 05:07 | specifically down in the main
content area, probably in the footer where
| | 05:11 | we're going to see some three
columns of text, maybe drop in some over on
| | 05:14 | these sidebar as well.
| | 05:16 | We're going to concentrate
here on the main content first.
| | 05:18 | So again, I'm going to drag one more of
these in, resize it, make it a little bit
| | 05:25 | taller, and you can create duplicates
of this pretty much the same way you can
| | 05:31 | with any other object inside
of Fireworks, with one exception.
| | 05:35 | I've been using the shortcut of
holding down the Alt key and then dragging, or
| | 05:39 | the Option key on the Mac and dragging.
| | 05:41 | You can't do that with autoshapes
because it reaches inside the group of the
| | 05:45 | vectors and can cause a lot
of trouble with the autoshape.
| | 05:48 | So you're either going to do copy,
paste, or you can go and do Ctrl+Shift+D
| | 05:54 | or Command+Shift+D for duplicate, or
you go up to your Edit menu and choose
| | 05:58 | Duplicate or Clone.
| | 06:00 | Clone just gives me exact copy,
in exactly the same place.
| | 06:04 | So I can select that. Here we are.
Drop in a second one, and then I think
| | 06:10 | I'll grab one more.
| | 06:11 | Put that down near the bottom, and I
want to just sort of flesh out that content
| | 06:19 | area a little bit more.
| | 06:20 | So, I'm going to go into my Document
Library, grab my image placeholder, drag
| | 06:26 | that on, and we're just going to
reposition this a little bit, scale it down.
| | 06:34 | I'm not too worried about how much
space these elements take up, really, at
| | 06:38 | this point because chances are really good
the actual images are going to be different.
| | 06:44 | So it just gives me a sense of what's happening.
| | 06:47 | In this case here, I can hold down the
Alt key. I will create a couple of more
| | 06:51 | copies, scale this one, bring that up
into place. And I'm just going to make
| | 07:03 | that a complete square so I'll go down to the
Properties panel, and I'll make it 140 x 140.
| | 07:10 | I've got my one little photo there and,
hold down my Alt key, drag down, create a
| | 07:17 | second one, and do it
again for now at the bottom.
| | 07:19 | So, we're really speeding up the
process here of containing everything, and I'm
| | 07:23 | just going to make a couple of other
little minor adjustments to this copy,
| | 07:26 | the one overlapping the photo quite so much,
and then I will line these guys up
| | 07:35 | a little bit better with
that other placement photo.
| | 07:38 | We've really, really quickly
fleshed out most of this wireframe.
| | 07:42 | Now we can go ahead and add an
additional Greeked text into the sidebar areas as
| | 07:47 | well in the footer areas.
| | 07:49 | You kind of get the idea of
what we're going for here.
| | 07:52 | So, I'm going to leave that up to you.
And when you come back in the next movie,
| | 07:56 | it'll all magically be present if
you want to work with my working file.
| | Collapse this transcript |
| Adding a master page and subpages | 00:00 | In the last movie, we pretty much finalized the
overall layout for our index page of the wireframe.
| | 00:06 | In this movie, we're going
to start extending this.
| | 00:07 | We want to build a little master
page and create some sub pages.
| | 00:10 | Now a lot of the work we're going to be
doing is going to be within the Pages panel,
| | 00:14 | so if you don't see the Pages panel
over here in the panel doc, go up to your
| | 00:18 | Window menu and locate Pages.
| | 00:22 | Now what I also like to do in this
case, because I'm starting to work
| | 00:24 | between layers and pages, is give myself
separate working areas for both of these elements.
| | 00:29 | Right now, you can see the
Layers, States and Pages;
| | 00:32 | they are all grouped
together in the same location.
| | 00:35 | So I'm going to grab my Pages tab,
and I'm just going to drag, it ever so
| | 00:39 | slightly, and you can see, if you look
really closely there, you can see a little
| | 00:43 | faint blue line between the Optimize
panel group and the Pages panel group.
| | 00:47 | When I let go the mouse, that'll put
the Pages into its own group, rather than
| | 00:52 | having them all together inside of
the one location. And typically, as I get
| | 00:56 | further and further into wireframing
and prototyping, I start breaking out
| | 00:59 | these panels and making it a little
easier for me to get at each one of them,
| | 01:03 | because in many cases I need to see both the
Pages panel and the Layers panel at the same time.
| | 01:08 | So we've got the two of them broken out,
and what we're going to do here, is a lot
| | 01:12 | of what is going to be on
every page is going to be common,
| | 01:16 | things like navigation, things
like the header, the footer, Side bar
| | 01:20 | information to a degree.
| | 01:21 | It's all going to be very
similar from page to page.
| | 01:24 | So rather than have all this
information duplicated across every page and
| | 01:28 | basically make them all separate graphics,
| | 01:31 | we're going to establish a master page.
| | 01:33 | Now the master page is quite handy
for elements on a page that aren't going to
| | 01:37 | change in terms of there physical location.
| | 01:39 | You can turn a master page off on
specific sub pages if you like, but generally
| | 01:45 | speaking, a master page is best used
for elements that are going to be in the
| | 01:48 | same place all the time;
| | 01:50 | they are not going to be
moving up and down or side to side.
| | 01:53 | Now that we've built out the index page,
it's actually a fairly straightforward
| | 01:56 | process to generate the master page.
| | 01:58 | I'm going to go over my
Pages panel where I see Page 1.
| | 02:01 | That's the one we've been working on
all along. And I'm just going to take that
| | 02:05 | page, and I'm going to drag it down to
the New and Duplicate Page icon, and that
| | 02:10 | gives me an exact copy.
| | 02:12 | So I basically have two
pages that look exactly the same.
| | 02:14 | Now the first thing I want do is
I want to rename these pages.
| | 02:17 | So I'm going to go ahead
and choose the Page 1 Copy.
| | 02:20 | I'm going to rename that index.
| | 02:22 | Now the other page is going
to become our master page.
| | 02:25 | The trick with the master page is
making sure that you've removed all the
| | 02:28 | elements from your sub pages that are
going to become part of the master page.
| | 02:31 | So let's just do a quick
identification of what's going to be a part of the
| | 02:34 | master page and what's not.
| | 02:36 | So on my index page, I've currently
got - I am just going to move my panels
| | 02:41 | around a little bit here -
| | 02:43 | I've got my header, my navigation, my main
content, my Side bar, my footer, and my wrapper.
| | 02:49 | Now most of these are going
to be the same on every page.
| | 02:52 | Now that we've got our separate page, let's
remove some of these pages from our index page.
| | 02:56 | All right, so I'm going to
unlock everything, for the time being.
| | 03:01 | These elements here I'm keeping them invisible.
| | 03:03 | That's our original grid.
| | 03:04 | You can certainly remove these from
your design if you want, they may not be
| | 03:08 | necessary anymore, or you can keep them
just hidden from view, in case you want
| | 03:12 | to bring them back anytime.
| | 03:13 | The header is one of the elements
that's going to be on every page, so we're
| | 03:17 | going to select the header, and we're
going to delete it from the index page.
| | 03:20 | You may notice here that I clicked
on the trashcan, which got rid of the
| | 03:24 | graphic, but it didn't
get rid of the header layer.
| | 03:26 | So click on it the second time,
the actual layer is removed.
| | 03:29 | Navigation is actually a slightly trickier one.
| | 03:31 | We have got the element that's
going to be common on every page.
| | 03:34 | That's the background panel or box.
| | 03:36 | But the actual navigation itself is
going to change from page to page, depending
| | 03:40 | on what sub page you're on.
| | 03:42 | So, some of this is common, some of it's not.
| | 03:45 | So we're going to be keeping this one
inside of our sub page, but we're also
| | 03:49 | going to be having a master page
version of it as well, and I'll show you how
| | 03:52 | that's going to work in just a minute.
| | 03:54 | Main content, that's where pretty much
everything is going to change from page to page.
| | 03:57 | So that's going to stay
on our index page as it is.
| | 04:00 | The sidebar, we're going to assume that's
going to be pretty consistent from page to page.
| | 04:06 | So as a result, we're not going to
keep a sidebar on our sub pages.
| | 04:10 | So I'm going to go and delete that one as well.
| | 04:12 | Now we've got one little leftover here.
| | 04:14 | It got buried in the footer somehow so
we'll be getting rid of that too. There we go.
| | 04:18 | Last little bit here is the wrapper,
and again the wrapper, and the footer
| | 04:23 | actually for that matter, are both going
to be fairly consistent between the pages.
| | 04:26 | So these can also be considered
to be part of the master page.
| | 04:30 | So I'm going to select the footer, and
I'm going to delete it, and one more time,
| | 04:36 | here we go, and select the
wrapper and do the same thing.
| | 04:40 | So now we're left with these elements.
| | 04:42 | These are the elements that are going
to possibly change from page to page.
| | 04:46 | This is where it gets kind
of cool with the master page.
| | 04:48 | I am going to hop back up to my copy here.
| | 04:51 | You'll see, it still has everything on it.
| | 04:53 | Now in this case here, we have a
couple of other things to remove.
| | 04:55 | Again, we're going to unlock our pages,
and I'm going to select the main content
| | 05:02 | area, and that's not going to be
necessary inside the master page.
| | 05:06 | That stuff is going to be just
basically part of the individual pages.
| | 05:10 | I'm going to delete that. All we're
left with, at this point, is the footer,
| | 05:15 | sidebar, and the navigation.
| | 05:16 | As I mentioned, with the navigation,
the actual navigation itself is going to
| | 05:21 | change from page to page, so
| | 05:22 | we'll pull it off of our master page.
| | 05:25 | So we have all these elements here.
The main content folder is still there, I'm
| | 05:29 | just going to get rid of that.
| | 05:30 | So we have Header, Navigation,
Sidebar, Footer and Wrapper.
| | 05:33 | These guys are all consistent.
| | 05:35 | They're going to be the same across every page.
| | 05:37 | Now here's the trick.
| | 05:38 | We can go to our Pages panel
options and choose Set as Master Page.
| | 05:45 | Now you don't see anything happen
right now on the Master Page, but remember
| | 05:48 | what our index page looked like a minute ago.
| | 05:51 | Now, we can see everything showing up.
| | 05:53 | Notice that all the elements are there,
including the background elements, all
| | 05:57 | the consistent elements.
| | 05:58 | We do have one little hiccup, and
that's the header. You'll notice it's being
| | 06:01 | hidden, and the reason for that is, if I
take a look in my navigation, remember
| | 06:06 | that I kept the original navigation container.
| | 06:09 | Now when I delete that extra nav_
container, that solves part of the problem.
| | 06:14 | You'll notice our background
image is still overlapping.
| | 06:17 | So we're still not seeing our navigation area.
| | 06:19 | We're dealing with a wireframe here.
| | 06:21 | We can cheat a little bit.
| | 06:22 | I'm just going to resize that
background element, just so it gets out of the
| | 06:28 | way, and that brings us back to the point
where we can see the Navigation panel as well.
| | 06:34 | Things are coming together fairly well.
| | 06:35 | We've got our master page basically established.
| | 06:38 | All I want to do is rename this master page
from Page 1 to common, it contains all
| | 06:44 | the common elements.
| | 06:46 | The next step is to start expanding on
this, adding in the other sub pages that
| | 06:51 | are going to be part of this final wireframe.
| | 06:54 | Now I can do this right from
the Pages panel, and it's a pretty
| | 06:57 | straightforward process.
| | 06:58 | All I've got to do is click on the New/
Duplicate Page icon, and you'll see a new
| | 07:04 | page appears at the very top because
the last page that was selected was the
| | 07:07 | common, or the Master Page.
| | 07:08 | So I'm just going to make a couple of
little adjustments here, and drag that one
| | 07:12 | down below. And one of the things
you'll note with this page is because
| | 07:18 | everything from the master
page is in its own layer,
| | 07:20 | when the new page is generated, we only
have this one editable layer 1 available.
| | 07:25 | If you look at the index page, we
actually had navigation and main content.
| | 07:29 | So we're going to need to add
in a couple of more things here.
| | 07:31 | What we're going to do is we're going
to rename this layer, because now we're
| | 07:35 | getting into the sub pages.
| | 07:36 | I want to have a bit of a
tracking mechanism, a sub head.
| | 07:40 | So I'm going to rename this "sub heading,"
and I'm going to create another layer
| | 07:46 | here as well, and that's going to be
for my main content because all the
| | 07:51 | other pages are going to
have main content as well.
| | 07:53 | So there is our two layers we're
going to use on a fairly regular basis
| | 08:01 | for these sub pages.
| | 08:02 | Now let me show you a cool trick here.
| | 08:04 | I've got that page generated.
| | 08:06 | All I'm going to do now that I've got
the other layers added in, I'm just going
| | 08:11 | to drag that page down to the
New Page icon, create another copy.
| | 08:16 | Now what's interesting about this is
because I've created a duplicate, I've
| | 08:18 | still got my elements in here.
| | 08:20 | Now we're going to go to the History
panel, and I'm going to go down at the
| | 08:25 | bottom of History panel, the last
thing we did was Duplicate Page.
| | 08:28 | I'm going to select that option, and
I'm just going to Replay that, three
| | 08:34 | more times for the main navigation,
and I've also got some plans for doing
| | 08:38 | some elements for the tour pages, sort of a
detail page, an order page, that kind of thing.
| | 08:43 | So I'm going to add in a couple more
from there, so, and what I've done by just
| | 08:48 | clicking on that Replay button, if I
close down my History panel, you'll see I've
| | 08:53 | now got a whole series of copies the
have the same layer structure, which saves
| | 08:59 | me little bit of time.
| | 09:00 | I'll probably be adding the odd
layer here and there, but this is a
| | 09:04 | good starting point.
| | 09:05 | Next step, I'm going to rename these layers.
| | 09:08 | Our next one down on the list is going
to be tours, and I mentioned earlier that
| | 09:12 | I want to do some sub pages for the tours.
| | 09:14 | I'm going to call this toursMain, and
next one is going to be tourDetail, and the
| | 09:21 | next one down from that is going to be
bookTour, and then I've got my mission
| | 09:28 | page, my contact page, my resources
page and lastly, my explorers page.
| | 09:44 | So now we've got the basic hierarchy of
our wireframe, all the way down through
| | 09:49 | all these different pages.
| | 09:51 | They're all essentially, at this point,
identical, with the exception of the index
| | 09:54 | page, because it's fully stocked.
| | 09:55 | But we'll be adding in some
things in the upcoming movie.
| | Collapse this transcript |
| Adding navigation| 00:00 | In the last movie, we expanded on the
wireframe by creating a master page and
| | 00:04 | then adding the basic sub pages.
| | 00:07 | Now, it's time to add some interactivity.
| | 00:09 | We're going to start with the index page,
which already has some stand-in text
| | 00:12 | for the main navigation.
| | 00:14 | We're not too worried
about rollover effects here.
| | 00:16 | It's only a wireframe.
| | 00:17 | So we're just going to work with hotspots.
| | 00:20 | I've got two main web
objects inside of Fireworks.
| | 00:22 | We've got slices and hotspots.
| | 00:24 | Hotspots are great for
adding plain interactivity.
| | 00:28 | They don't affect the documents itself.
| | 00:29 | They don't cut up the area underneath
into a separate graphic at all, whereas
| | 00:33 | slices allow you to do things like rollovers.
| | 00:35 | They essentially cut up the area
underneath the slice into a separate graphic
| | 00:39 | when you export it.
| | 00:40 | So for our purposes here, we're
going to work mostly with hotspots.
| | 00:43 | Now with the exception of button symbols,
web objects are not physically linked
| | 00:48 | or attached to the object they're on top of.
| | 00:51 | Basically, the web object, whether
it's a slice or a hotspot, just sits
| | 00:55 | above the image area.
| | 00:57 | That means if you move the image, you
also have to move the hotspot as well.
| | 01:01 | Now we're going to create the
hotspots for the main navigation area.
| | 01:04 | So I'm going to go over to my Tools panel.
| | 01:07 | You'll see, in the Web tools area
here, we've got two icons up here.
| | 01:12 | The one with the little
X-Acto knife is the slices.
| | 01:14 | The other one with the
chain link is for hotspots.
| | 01:16 | So I'm going to going to select that.
| | 01:19 | I think I'll zoom in a bit too to make
it a little easier to see what I'm doing.
| | 01:22 | I'm just going to go ahead and draw one hotspot.
| | 01:28 | It doesn't really matter where I draw it.
| | 01:30 | I'm going to pick the largest word, so
that I know that whatever box I use,
| | 01:33 | it's going to cover everything up.
| | 01:35 | Again, I'm trying to
save myself some steps here.
| | 01:38 | So I'll draw my hotspot and just take a
quick peek over here in the Layers panel
| | 01:44 | and see what's going on.
| | 01:45 | As soon as you draw that hotspot,
whether it's a slice or a hotspot, all the web
| | 01:49 | objects are added into the Web Layer.
| | 01:51 | I've just given it a generic name of Hotspot.
| | 01:53 | You can certainly rename them if you like.
| | 01:56 | Now in my case here, I've got the one
hotspot, and what I need is I need one for
| | 02:01 | each of the different links.
| | 02:02 | So now that I know I've got one that's
big enough to cover everything, I'm just
| | 02:06 | going to go ahead with my little
shortcut of Alt+Arrow key or Option+Arrow key
| | 02:11 | on the Mac, do that four times,
| | 02:16 | I create four more hotspots.
| | 02:18 | Then I can just use the Shift key and
the arrow keys to reposition these hotspots.
| | 02:22 | I've just got to make sure that I
click on the hotspot I want to move before I
| | 02:31 | go any further and one more for Explorers.
| | 02:38 | Now that the hotspots are in place, we
need to basically create interaction.
| | 02:42 | So I'm going to click on Tours.
| | 02:43 | If you take a look down in the
Properties panel, you'll see a bit of information
| | 02:47 | about the hotspot, first of all, the Shape.
| | 02:50 | We've got three different shapes:
| | 02:51 | Rectangle, Circle, and Polygon.
| | 02:54 | Now we're going to stick with the
rectangle here, for a very specific reason.
| | 02:57 | Down the road, we're going to be
exporting this as a PDF file, and the rectangle
| | 03:00 | hotspot is the only hotspot that
Acrobat recognizes as an interactive element.
| | 03:05 | If I use circles or polygons,
we're going to run into problems.
| | 03:08 | So we're going to stick with the rectangle.
| | 03:11 | My link options are over here.
| | 03:12 | I'm just going to click
on the Link dropdown menu.
| | 03:15 | You'll see, there's links to all the
different pages that have been created.
| | 03:18 | You'll notice we've got all of them in here.
| | 03:20 | You'll also notice, at the very
top, there are little sort of dashes.
| | 03:23 | There is nothing above that at the
moment, but as you start adding links,
| | 03:27 | Fireworks will sort of generate a
history of the links you've been using, and
| | 03:30 | they'll show up above this dividing line.
| | 03:33 | It's really important that when you're
creating brand-new links that you always
| | 03:36 | grab from the link list
below that dividing line.
| | 03:40 | So in case of Tours, we're
going to go to toursMain.
| | 03:41 | That's that one, and I'm going to go to Mission.
| | 03:45 | Let's select mission.htm,
Contact, Resources, and Explorers.
| | 03:57 | If I just click through
these guys to double-check,
| | 04:02 | you'll see that they've all got
their interactive elements there.
| | 04:04 | So that's pretty good.
| | 04:06 | So those elements are in place.
| | 04:08 | You've noticed that we've got
significantly more pages than we do have hotspots.
| | 04:12 | Don't forget that we're going to have
some sub-navigation on the Tours page to
| | 04:15 | lead after things like the
Booking page and the Detail page,
| | 04:19 | so that's where those will come in later on.
| | 04:21 | Now in many cases, common navigation
like this could have been added to the
| | 04:25 | master page, but in our case, that's not
going to work for us because we do have
| | 04:29 | some pages that have different navigation.
| | 04:32 | Now remember, that master page
shows up on every single page.
| | 04:35 | So in this case here, we want to share
this navigation, and we want to share
| | 04:39 | these hotspots to specific pages in the design.
| | 04:43 | This is where sharing layers comes into play.
| | 04:46 | It's a really, really handy feature.
| | 04:48 | So I'm going to go back to my index page here.
| | 04:50 | I'm going to hide my slices, just for a minute.
| | 04:53 | From the Web tools section of the
toolbar, just click on the Hide Slices option.
| | 04:58 | I'm going to scroll down a little
bit here, to my navigation.
| | 05:03 | Now right now this
navigation is only in one place.
| | 05:05 | It's on the index page.
| | 05:07 | If I move down to say the Mission page,
there is no navigation; contact, same thing.
| | 05:14 | So what we're going to be doing is
we're going to be repurposing this
| | 05:17 | navigation across multiple pages, so we
don't have to keep adding it in over and
| | 05:21 | over and over again.
| | 05:22 | We only want it on certain pages.
| | 05:25 | This is where sharing
layers to pages really shines.
| | 05:27 | So I'm going to go up to my Layers Options.
| | 05:30 | I'm going to choose Share Layer To
Pages and the Share Layer To Pages
| | 05:35 | dialog box is coming up.
| | 05:37 | Over here on the left-hand side are all
the pages that aren't sharing, and over
| | 05:40 | here on the right-hand side
are the pages that are sharing.
| | 05:43 | So we're going to select mission.
| | 05:45 | I'm going to hold down my
Shift key and click on explorers.
| | 05:48 | I can grab all if them at same time, that way,
and just add them to the list and click OK.
| | 05:54 | When I switch back to my pages, and I go to
mission, you can see there is my navigation;
| | 06:03 | same thing with contact, and resources, et cetera.
| | 06:07 | This is a two-stage process.
| | 06:08 | Remember, I mentioned earlier that the
hotspots themselves aren't physically
| | 06:11 | attached or linked to the areas underneath.
| | 06:14 | So while we've shared the actual
navigation text, we actually haven't shared the
| | 06:18 | hotspots themselves.
| | 06:20 | So we'll back up to the index page.
| | 06:23 | You'll see here in the Web Layer,
there is all of our hotspots.
| | 06:26 | Now you can share a version of the
Web Layer to other pages as well.
| | 06:29 | There's a little trick to it.
| | 06:31 | It requires you to create a
sub layer inside the Web Layer.
| | 06:35 | So what we're going to do is just
click on the Web Layer and then down at the
| | 06:39 | bottom of our Layers panel, we're
going to choose to insert a new sublayer.
| | 06:43 | So we have a new web sublayer in there.
| | 06:45 | Now that's currently empty.
| | 06:46 | What I want to do is select my hotspots,
and just like I do with regular images,
| | 06:53 | if I want to move them one layer to another,
| | 06:56 | if I've got all of these guys selected,
| | 06:57 | all I need to do is move
them into that sublayer.
| | 06:59 | So I'm just going to take those five
hotspots and drag them into the sublayer, like so.
| | 07:04 | You'll notice they appear to vanish.
| | 07:07 | What's happened, really, is they've
been put inside the web sublayer.
| | 07:11 | Again, that little sublayer
indicator is not particularly obvious.
| | 07:15 | So if you're not sure if you've put
things in the right place, just expand
| | 07:17 | the layer, and if you see your objects show up,
you know you've put things in the right spot.
| | 07:21 | All right, so now they're in the web sublayer.
| | 07:24 | I'm going to make that Web Layer visible again.
| | 07:26 | We're going to do the same process.
| | 07:28 | Make sure that sublayer is selected.
| | 07:31 | Go to our Options, choose Share
Layer To Pages, go to mission, click on
| | 07:36 | explorers by holding down the Shift key,
grabbing all of them, click Add, click OK.
| | 07:42 | Now, if I scroll through my pages a
little bit more, here is my mission page,
| | 07:47 | you can see there are the hotspots,
same thing with contact and resources.
| | 07:50 | We've taken all of this artwork from one
spot and shared it across specific pages.
| | 07:56 | This is the great thing
about sharing layers to pages.
| | 07:58 | Unlike the master page, where it's
either on or off on every page, here I can
| | 08:03 | pick specific pages that
this information shows up on.
| | 08:07 | It gives me a lot more
flexibility in what I'm planning to do.
| | 08:12 | Now we've got the navigation all set up for
the main pages, the Tour page, and the sub-pages.
| | 08:17 | We have different navigation,
and we're going to add that now.
| | 08:19 | So I'm going to go to toursMain.
| | 08:21 | What we don't have in the
toursMain page is a navigation layer.
| | 08:26 | So I'm going to go ahead and create a new layer.
| | 08:28 | I'm going to put them at the top of
my page for the time being. Oops!
| | 08:32 | You've got to watch when you're dragging
things to make sure you don't nest them
| | 08:35 | inside of other layers.
| | 08:36 | I'm going to call this one "nav" as well.
| | 08:40 | In fact, you know what, I
think I'll differentiate this.
| | 08:42 | I'll call this "full nav," just to make
it a little easier differentiate between
| | 08:47 | the other navigation.
| | 08:48 | Nothing in that layer at the moment.
| | 08:50 | So I'm going to go ahead and choose to import.
| | 08:55 | Inside the ch02 folder, I
have a PNG file called full_nav.
| | 09:00 | I'm going to open that up.
| | 09:03 | It's only a single page.
| | 09:05 | I'll just choose Import.
| | 09:07 | Then I'll just go ahead and click in the
general area that I want to position it.
| | 09:11 | There we go.
You can see this is a little bit different now.
| | 09:13 | We've got subcategories in here.
| | 09:16 | So I'm just going to reposition this so
it's a little more centered. It's not too bad.
| | 09:22 | I can just flip back and forth
between the pages and see how they look, in
| | 09:26 | terms of positioning.
| | 09:27 | You'll notice there is some slight differences here.
The Tours heading has been put off to the
| | 09:31 | side, and then we've got the
subcategories here as well.
| | 09:34 | Now we're going to be doing the same
kind of thing with the hotspots for
| | 09:38 | the full navigation here, but I
don't want to make you draw all these
| | 09:42 | things all over again,
| | 09:43 | so we're going to save a little bit of time.
| | 09:45 | We're going to hop back to the index page.
| | 09:47 | I'm going to go ahead and select
the hotspots that we created earlier.
| | 09:55 | I'm going to copy them.
I'm going to go over to my tours page.
| | 09:59 | Then I'm going to paste them.
| | 10:02 | You'll see they all get pasted in.
| | 10:04 | Now they're not in exactly the right
spot, but we didn't have to draw them so
| | 10:07 | hey, you know, it saved you a bit of time.
| | 10:09 | You'll see they're inside the main Web
layer for the toursMain page, and that's fine.
| | 10:13 | Just click away.
| | 10:14 | You'll notice that not only did we copy over
the hotspot, but we copied over the interactivity.
| | 10:19 | So just a way to save a little bit of time.
| | 10:25 | Now, just select the bottom four and
reposition those guys in place, make a
| | 10:32 | slight adjustment to the Tours button.
| | 10:35 | Then the last thing we have to do is just add
in a couple hotspots for the sub navigation.
| | 10:39 | So I'm going to zoom in a bit, a
little bit easier to read this.
| | 10:43 | In this case, I will make you draw more shapes.
| | 10:46 | So we will draw one more hotspot here.
| | 10:47 | I'm not too worried about these go into
specific pages, other than one destination.
| | 10:54 | So I'm just literally going to draw
the hotspot over the one object and then
| | 10:58 | link it to the tourDetail page.
| | 11:02 | Then if I want to fill the rest of
it in, they'll all go to the same page
| | 11:05 | anyway, but it'll be fine for the wireframe,
| | 11:08 | I'll just go ahead, grab my Pointer tool,
select the hotspot, Option+Down Arrow
| | 11:14 | key or Alt+Down Arrow key three times,
and then I can reposition those hotspots.
| | 11:23 | So a pretty quick way of
getting those things in place.
| | 11:26 | Now we've got some sharing of layers to do.
| | 11:28 | You'll notice, again, there's my
Web Layer, with all the hotspots.
| | 11:32 | I want to add a new sublayer there.
| | 11:37 | I want to make sure that those
hotspots are inside that sublayer.
| | 11:42 | You saw how they just slightly indented there.
| | 11:44 | That gives you another indication
that they're now part of the sub layer.
| | 11:47 | I'm going to go ahead and share that
sub layer, click on my Options, go to
| | 11:51 | Share layer To Pages.
| | 11:53 | In this case, all I want share to are
the tourDetail and the bookTour pages, add
| | 11:59 | those, click OK. And the same
process goes for our full navigation.
| | 12:04 | The text itself has to be
shared to those pages too.
| | 12:06 | So we'll select out full nav layer,
click on the Options, choose Share Layer To
| | 12:12 | Pages, select tourDetail and
bookTour, add those, click OK.
| | 12:19 | So now, if I page down - I'll zoom out,
| | 12:25 | so there's a little more impact with this -
| | 12:28 | as we go through them, you'll see
that we get the navigation we need for
| | 12:31 | each specific page.
| | 12:33 | That didn't actually take too long to do.
| | 12:35 | So we've got our main navigation.
| | 12:37 | One last little bit before we wrap up,
and that's just I want to put a link
| | 12:41 | back to the index page.
| | 12:42 | We'll use the header graphic, or
the header placeholder for that.
| | 12:45 | Now that's on the master page.
| | 12:49 | I'm going to go ahead and
select that image, right-click on it.
| | 12:56 | Another way to add in a slice or a
hotspot, if you want it to conform to a
| | 12:59 | specific object, is to select the
object first, right-click on it, and then
| | 13:04 | inside the context menu, you'll
see Insert Hotspots and also Insert
| | 13:07 | Rectangular Slices.
| | 13:09 | Now like I said, we can work just with
hotspots for this completely, but just to
| | 13:13 | prove the point that both hotspots
and slices do work in that PDF export,
| | 13:17 | we're going to make this one a slice.
| | 13:20 | So you'll see it looks a bit different.
| | 13:21 | It's green, rather than blue.
| | 13:23 | Select the slice, and same
kind of concept applies.
| | 13:26 | We get a couple variables here because
it is a slice rather than a hotspot, but
| | 13:31 | all I want to do is click on the Link
box and choose from the list below that
| | 13:36 | divider, really
important distinction, index.htm.
| | 13:41 | That adds in the majority of our interactivity.
| | 13:44 | Our navigation is ready to go.
| | 13:46 | How ready to go, you might ask?
| | 13:48 | Well, let's just give it a try.
| | 13:49 | We're going to go to our File menu,
and choose to Preview in Browser.
| | 13:53 | Now we have a lot of pages in this wireframe.
| | 13:55 | So it's really important that we
choose the option to Preview All Pages.
| | 13:58 | You'll see the default
browser, in this case Firefox.
| | 14:01 | So we'll select that option, and Fireworks
will generate pages based on the wireframe.
| | 14:07 | It'll load it up into the
browser, and there we see it.
| | 14:09 | You can see, as I move my mouse over
the navigation areas, they have a little
| | 14:16 | pointy icon for indicating
that we have interactivity.
| | 14:19 | I move it over to other areas,
| | 14:20 | we don't have that. So click on Tours.
| | 14:23 | There you can see all of our
different Tour menu options there.
| | 14:27 | I can click on one of these guys here.
| | 14:30 | You'll see that if you look in the Address
bar, we're actually going to a different page.
| | 14:33 | We don't have a lot of
content in these pages yet.
| | 14:35 | We will add that
information in a little bit later on.
| | 14:38 | Click back on the logo.
| | 14:40 | That takes me back to the index page.
| | 14:41 | So we know the hotspots and slice all
work, that our pages are interactive.
| | 14:45 | All right, so we've basically got, to
a degree, a blank slate of wireframes.
| | 14:52 | While we're going to be creating and
fleshing out some of these pages more
| | 14:55 | together, and I'll be adding some pages
for you, now is a great opportunity for
| | 14:59 | you to test out some of the
things you've been learning.
| | 15:02 | So between now and the next movie,
why don't you try opening up the Mission
| | 15:05 | page or opening up the tourDetail
page, and adding in your own wireframe
| | 15:10 | elements, and see how you do.
| | Collapse this transcript |
| Saving time with button symbols| 00:00 | Welcome back, and thanks to the
miracles of modern technology,
| | 00:04 | we've now got a wireframe that's
partially completed with no effort on your behalf.
| | 00:09 | Now let's take a quick look at what's
happened since we were last here, and then
| | 00:13 | we'll pick up and add in a bit more information.
| | 00:17 | So I am just going to page down.
| | 00:18 | You see the index page, pretty
much the same as it was before.
| | 00:21 | The only addition is I've added a
hotspot to our little tag up here.
| | 00:25 | That's going to go right to the tours page,
sort of a call the action type of thing.
| | 00:28 | If I page down, you see
the toursMain page is empty;
| | 00:33 | same with the tourDetail page.
| | 00:35 | We'll be actually working on those ones
ourselves. But pages like the bookTour,
| | 00:40 | has been filled out, and in this
case here, I'll zoom in a bit, so you can
| | 00:43 | see this a little bit better,
| | 00:45 | we've added a complete booking form.
| | 00:48 | So we've got lots of information here.
| | 00:51 | We've used another neat little
autoshape called the grid autoshape to sort of
| | 00:55 | emulate the form fields in this case,
and we've got various form elements.
| | 00:59 | These are all added in using Fireworks
Component Symbols, which can save a lot of time.
| | 01:04 | You don't have to mock up
the graphics from scratch.
| | 01:06 | You can just drag them in, and use
them, and we'll be making use of some of
| | 01:09 | these in our contact form. So don't worry.
| | 01:12 | You'll get a chance to play around with them.
| | 01:13 | Page down a little lower
and zoom back out again.
| | 01:15 | There is our mission page.
| | 01:17 | It's been fleshed out as well, just
to sort of giving indication of how the
| | 01:20 | copy might flow there.
| | 01:22 | Our contact page, still empty, because
we are going to be working on that one
| | 01:25 | ourselves, and then there is our
resources page, which basically has a listing
| | 01:29 | of resources, maybe a dropped
in image, that kind of thing.
| | 01:33 | Then lastly our explorers page, so
just different mockup layouts for
| | 01:37 | each individual page.
| | 01:38 | Now one thing that's not on any of
these pages, really, is any indication as to
| | 01:44 | where we are, unless we are
looking at the actual Pages panel.
| | 01:48 | So, one of the things I want to do
with you, before we get any further, is I
| | 01:52 | want to go ahead and create a
couple of symbols that allow us to have,
| | 01:57 | essentially, a breadcrumb, or
a marker for where we are.
| | 02:00 | So we are going to need two of these,
because some of the pages have sort of
| | 02:04 | internal navigation like the tours page,
and some pages, like our mission page,
| | 02:09 | are just the mission page.
| | 02:10 | They don't have any
significant sub-navigation added to them.
| | 02:13 | So we'll start off with the mission page.
| | 02:15 | Here, I am going to zoom in, near the top.
| | 02:20 | What we are going to do is
just adding a bit of a subheading.
| | 02:22 | Now I am going to work with this
as a symbol for a specific reason.
| | 02:26 | I want to repurpose this
thing over and over again.
| | 02:28 | We're actually going to use a button symbol,
and we'll see why in just a few minutes.
| | 02:34 | To start off, we need to
actually create the graphic.
| | 02:36 | So I am going to grab my Rectangle tool,
and I am going to draw a rectangle to
| | 02:41 | start with that, make it a bit lighter.
| | 02:46 | I want this to be about 600 pixels wide
by 70 pixels high, just give me a big
| | 02:54 | block for dropping this in.
| | 02:56 | I'll just reposition this a little bit,
so it sort of lines up with our heading.
| | 03:02 | What I want to do with this,
as well, is adding some text.
| | 03:05 | So I am going to go ahead, and grab my
Type tool, and click here, and I am just
| | 03:10 | going to type in the
words "Sub Heading" for now.
| | 03:14 | Now it's awfully small.
| | 03:16 | We want this to stand out a bit better.
| | 03:18 | So I am going to double-click.
| | 03:19 | That selects all the text inside the text block.
| | 03:22 | I am going to beef this up. Let's go,
| | 03:25 | let's try 28, and let's make it bold.
| | 03:31 | Font choices aren't a big deal here.
| | 03:32 | You just want something that's readable.
| | 03:34 | So I am going to stick with the default here.
| | 03:37 | I think I'll make it a bit larger though, and I
am just going to reposition this a little bit.
| | 03:41 | I'll put it up a little higher, like so.
| | 03:44 | Now I want to reverse this out, so
that it stands out against that backdrop.
| | 03:49 | So I am going to change the color to
white, and I think I will make it a
| | 03:53 | little bit bigger, around 40 pixels. And at
that size, I really don't need to have bold.
| | 04:00 | So I am just going to go back to regular.
| | 04:02 | All right, so we've got these two elements.
| | 04:05 | This is going to act as a
subheading for the pages that don't have
| | 04:08 | any breadcrumb trail.
| | 04:09 | I want to turn this into a
symbol, and I'll show you why.
| | 04:12 | I am going to select both of these
objects here, and I am going to press F8.
| | 04:18 | I am going to call this "sub heading."
| | 04:21 | I am going to have a couple of these, so
I'll just leave this one as sub heading.
| | 04:26 | The trick here with this one, I am
going to turn into a Button symbol.
| | 04:30 | I don't know if I'll use this over and over
again, so I am just going to leave it as it is.
| | 04:33 | I won't bother saving it to the
Common Library just this time. Click OK.
| | 04:37 | What we have now is an object that
I can customize my headings for.
| | 04:42 | You can see, it still say Sub Heading
right now, but this is the cool thing.
| | 04:45 | I can go down to my text in my Properties
panel, and I can change this to Mission.
| | 04:53 | So this means I can use this one symbol
over and over again, and have different
| | 04:56 | labels on it, which is kind of helpful.
| | 04:58 | I am not having to create
all these additional objects.
| | 05:01 | So, for example, let's go to contact.
| | 05:04 | Actually, we'll copy this first.
| | 05:06 | So Ctrl+C or Command+C, go to contact, and
there is my sub heading layer right there.
| | 05:11 | I'll just press Ctrl+V. It comes in
as Mission, but not a big deal; just go
| | 05:16 | ahead and change that text to Contact.
| | 05:22 | Couple of other ones that are going to be
useful in this way as well, resources.
| | 05:25 | You can see resources is pretty
completed, except for that sub headings,
| | 05:29 | we'll paste that in, and actually,
make sure we pasted in the right place.
| | 05:33 | I was not careful there,
and it's now my main content.
| | 05:36 | So I am just going to drag it into my
sub heading layer, and explores, the same
| | 05:41 | thing, and I'll just rename these guys as well.
| | 05:45 | So, Explorers and Resources needs to be renamed.
| | 05:54 | I do want point out one thing:
because I am using a Button Symbol, Button
| | 05:57 | symbols are programmed
to have a rollover effect.
| | 06:00 | There is no way to edit that out.
| | 06:01 | So if I was to preview this, or
export this out as an HTML mockup, here is
| | 06:06 | something that's going to
happen to that rollover effect.
| | 06:09 | It disappears, because we
have nothing in that over state.
| | 06:13 | So we'll do one more quick
thing to this little symbol.
| | 06:15 | Double-click on it to go into Editing
mode, and you'll take a look down in
| | 06:19 | the Properties panel,
| | 06:20 | you'll see we're currently in the up state.
| | 06:23 | Notice also that nothing
is selected on the canvas.
| | 06:26 | If I select anything inside the symbol,
I'll lose that indicator of what state we are in.
| | 06:30 | So nothing selected, I'll go to my up
state, I'll choose over, and I'll just
| | 06:35 | choose to copy the up graphic,
and we need it exactly the same.
| | 06:39 | I don't care about a rollover effect here.
| | 06:41 | I just don't want it vanishing on me by accident.
| | 06:43 | Double-click, we're back to our original
space, and then if I do a quick preview
| | 06:47 | again, you'll see nothing appears to change.
| | 06:50 | So because we have the exact same
objects in the two states, even when we mouse
| | 06:55 | over it, it doesn't disappear.
| | 06:57 | It doesn't change in any way.
| | 06:58 | That's the beauty of Button symbols
from the standpoint of using them for
| | 07:01 | navigation is you've got that
up to four states to work with.
| | 07:04 | In this case, we're kind of
using it for a different purpose.
| | 07:06 | All right, so that's given us
our navigation for those elements.
| | 07:11 | We're going to add in one more of these,
and this is going to be for our tours page.
| | 07:15 | Now these are the pages
that have some subnavigation.
| | 07:17 | Again, I want to give the client a bit
of an indication of how these different
| | 07:23 | subheadings are going to behave.
| | 07:25 | So I want to work with the same kind of
concept, but I want to add some elements into it.
| | 07:29 | So what we are going to do to speed
things up a little bit is I am going to make
| | 07:34 | sure I am in the sub heading layer.
| | 07:37 | I am going to paste again.
| | 07:38 | That brings me my original symbol.
| | 07:40 | I brought this in because I want to
keep some of the elements that are here.
| | 07:43 | I just want to make some changes.
| | 07:45 | So I am going to go ahead and
remove the symbol properties from this.
| | 07:48 | All I've got to do in order to do
that is right-click, go to Symbol, and
| | 07:54 | choose Break Apart, and that converts
it back to its original actual objects.
| | 07:59 | We got text that currently grouped
together, so if I ungroup them by
| | 08:03 | pressing Ctrl+Shift+G or
Command+Shift+G, you'll see there is my text, and
| | 08:08 | there is my rectangle.
| | 08:09 | I want to add in that breadcrumb component.
| | 08:12 | I wanted this to be somewhat generic,
| | 08:14 | so I am not going to put in
specific breadcrumb listings here.
| | 08:17 | I am just going to give the
indication of what's going to happen.
| | 08:19 | So I am going to go ahead and add in
just some text to indicate breadcrumbs.
| | 08:24 | So I'll grab my Type tool,
go inside of the box area.
| | 08:28 | I am going to reduce the size of this
down to bit smaller, let's say 24 for now.
| | 08:33 | I am just going to type in here
"breadcrumbs," just to give an indication.
| | 08:46 | I think that's still a little bit too big.
| | 08:48 | Just triple-click, and then I'll select the
entire paragraph, and I'll knock this down.
| | 08:52 | No, it's not too bad.
| | 08:55 | So that gives me by subheading.
| | 08:57 | The trick with this, again, is
we're going to convert it to a symbol.
| | 08:59 | So Shift+Click, all three pieces, F8,
and this one is going to be "sub head with
| | 09:12 | breadcrumbs, and button symbol," click OK.
| | 09:18 | There is my basic sub heading.
| | 09:20 | I am going to double-click
on this like we did before,
| | 09:23 | go to my over state inside the Symbol
Editing mode, and then just copy the
| | 09:27 | up graphic, and then double-click
outside the canvas area to go back to
| | 09:31 | my original version.
| | 09:33 | So there is my symbol. In that sense, I
can copy that, and I'll just go ahead to
| | 09:37 | my Detail page, and paste it in,
and the same thing for the Tours page.
| | 09:42 | So now I've got customized subheadings
for every single one of them, and again,
| | 09:46 | notice that it just starts
off with a generic heading,
| | 09:48 | so I can go back in here, and oh,
look at what we've got going on here.
| | 09:55 | Notice how when I did this
I've got two lines of text.
| | 09:59 | Now this is something to watch out for.
| | 10:00 | I've seen people on the user forums run
into this issue when they use Button symbols.
| | 10:04 | There is one limitation to a Button
symbol, and you're seeing it right here.
| | 10:07 | It's limited to one string of text,
and we have two strings of text.
| | 10:11 | So we need to make one more change.
| | 10:13 | Now again, not a big deal,
because we are working with a symbol.
| | 10:17 | So I am going to go back, edit the symbol.
| | 10:20 | I am going to select the text.
| | 10:22 | We don't care what that says.
| | 10:23 | We want to be able to
customize this piece here.
| | 10:25 | So I've got that text selected.
| | 10:27 | I'm going to go up to my Text menu, and
I am going to convert that text to paths.
| | 10:33 | I am going to go into my over
state, and do the same thing.
| | 10:39 | It's no longer text; now it's just vectors.
| | 10:41 | So now when I go back out to my symbol
on my main canvas and click, you'll see
| | 10:46 | that Sub Heading is now available for
editing, and this was my Book Tours, so I
| | 10:51 | am going to change the label there.
| | 10:52 | If I go to my tourDetail, again, the
same situation. So I am going to change
| | 10:58 | that from Sub Heading, and then my main tours.
| | 11:04 | Get back out of there,
and just set that to Tours.
| | 11:09 | So that gives me, again,
another way to play around with this.
| | 11:12 | So that's another little addition to
the page, making things a little more
| | 11:16 | flexible, and giving yourself sort of
up trail for each of the pages that's
| | 11:20 | visible on the page.
| | 11:22 | In the next movie, we are going to use
another third-party autoshape to create
| | 11:26 | the look of a data table.
| | Collapse this transcript |
| Adding a data table| 00:00 | We're getting down to the nitty-gritty.
| | 00:01 | We've got a couple more pages
we're going to finalize together;
| | 00:04 | one of them being the toursMain page,
which basically is going to be a
| | 00:08 | listing of different tours.
| | 00:10 | Now in order to create that tabular look,
we're going to call in another pretty
| | 00:13 | cool autoshape, called the grid autoshape.
| | 00:15 | Now, this is another third-party extension.
| | 00:18 | It's created by Aaron Beall, a very
talented Flash and Fireworks Designer, and
| | 00:22 | it does something that
Fireworks just doesn't do on its own.
| | 00:25 | There is no magic button in
Fireworks that allows you to make a table.
| | 00:29 | This autoshape actually does it for you.
| | 00:31 | Now I've already downloaded and installed it.
| | 00:34 | We're going to drop it into place.
| | 00:35 | So I want to make sure I
am in my main content layer.
| | 00:37 | I'm going to collapse my other layers here.
| | 00:40 | Make sure I'm in the right spot.
| | 00:41 | I'm going to go to my Auto
Shapes panel, and there it is there:
| | 00:48 | the grid autoshape.
| | 00:50 | So I am just going to click and
drag and drop it on the screen.
| | 00:53 | Now you notice that I brought my
guides back in, just to help me position
| | 00:57 | things a little bit.
| | 00:58 | The grid autoshape, very much like
other autoshapes, has its own little magical
| | 01:03 | set of control handles.
| | 01:06 | So we can set the number of rows, the
number of columns, we can even adjust the
| | 01:09 | spacing between the columns, and we
can also adjust the actual colors.
| | 01:15 | By default, what you'll see
here is alternating row colors.
| | 01:18 | Now in my case, I just want a single
color running all the way down, with a
| | 01:22 | little bit of a gap between each of the rows.
| | 01:24 | So I am going to do a couple of things here.
| | 01:26 | I am going to go to my Rows control
handle, down here where it says Rows.
| | 01:30 | I am just going to drag upwards, and as
I drag upwards, you'll see some changes
| | 01:33 | to the autoshape itself, and also to
the little tooltip that's part of the
| | 01:37 | control handle, up one more.
| | 01:39 | I am set up for one row.
| | 01:41 | We are going to do the
same thing with the columns.
| | 01:43 | I only want one column as well.
| | 01:45 | So I am going to drag that inwards.
| | 01:47 | So I have one row, one
column - looks like a big box.
| | 01:50 | The next thing I am going to do
with this is change the color.
| | 01:54 | So I want something that's going to
stand out a little bit from the background.
| | 01:59 | It's now that I've got the
shade of gray that I want,
| | 02:01 | I want to add back in the rows.
| | 02:03 | The reason I went back to one single
row is this will force all the rows to
| | 02:07 | have the same color.
| | 02:08 | So I am going to zoom out a little bit
here, so I can get a bit space to drag with.
| | 02:12 | I am going to hide my guides, make
it a little easier to see things.
| | 02:18 | I am just going to go ahead and
drag that Row Control button downwards.
| | 02:22 | You see, as I am dragging it
down, I am getting more rows.
| | 02:25 | So I think I'll go down to about,
looks like I've got about eight rows there,
| | 02:29 | and see them all subdivided nice and neatly.
| | 02:33 | Now I am going to resize it.
| | 02:34 | The reason I did the rows before I
resized it was that it makes it a little
| | 02:37 | easier to drag that little control handle.
| | 02:39 | So let's resize this, turn my guides
back on, and we just want to make that a
| | 02:46 | little bit wider, and
then drag it straight down.
| | 02:52 | As I drag it down, the rows
increase in size. So there we go.
| | 02:58 | I've got my whole series
of table elements there.
| | 03:03 | So I am going to go ahead and hide my
guides again, because they get a little
| | 03:07 | bit confusing there. So there we go.
| | 03:09 | So there is the basic table layout.
| | 03:11 | We are going to add in a couple more
objects, just to flesh out that first row.
| | 03:15 | So I am going to go to my Document Library,
and we're going to add in a couple of things here.
| | 03:20 | Now, you might notice there is quite a
few more symbols in here than before,
| | 03:23 | because of the other pages that have been
added in and all the content for those pages.
| | 03:27 | So what I need is my image
placeholder, just drag that in.
| | 03:32 | I am just going to make this 40, 40.
| | 03:38 | Now, it's not big enough, so we'll do
a bit larger, more like 80; there we go.
| | 03:41 | I am going to reposition this over
here on the side, maybe a little thumbnail
| | 03:50 | graphic, and we're going
to work with our autoshape.
| | 03:52 | We're going to work with our Greek text
symbol as well again, just drop that in,
| | 03:56 | and set the color to that to black, so
it stands out, run that across, a little
| | 04:04 | bit of descriptive text in place.
| | 04:06 | I think maybe I'll make that
button a little bit bigger.
| | 04:12 | One other nice feature I've got with
Fireworks CS5 is the ability to constrain
| | 04:16 | proportions for an object.
| | 04:17 | So if you look down the Properties
panel, I've been changing things width and
| | 04:21 | height pretty much independently,
because in most cases I want to create a
| | 04:24 | customized dimension.
| | 04:25 | But in this case here, I am going
to choose Constrain Proportions.
| | 04:28 | I am going to change that value to 100,
and you see it automatically updates the
| | 04:33 | other value as well.
| | 04:34 | So I'll just beef it up
one more time. There we go;
| | 04:37 | 100 x 100.
| | 04:40 | The last little bit we're going to
add into this is a little submit button.
| | 04:43 | I am going to go ahead and
pull this from Common Library.
| | 04:50 | There is a whole set of what
are called component symbols here.
| | 04:53 | There are actually many different places
to define them, but the ones I am going
| | 04:57 | to work with are in the HTML folder.
| | 04:59 | You'll see there is a button for
the Mac, and a button for Windows.
| | 05:04 | I am going to grab the Windows button
and just drag it onto my canvas.
| | 05:10 | I am going to zoom in a bit.
| | 05:13 | We can see there is the button.
| | 05:15 | Notice it just says Label at the moment.
| | 05:17 | What I am going to do is change that Label.
| | 05:20 | So right now it says
plain old basic information.
| | 05:24 | Component Symbols are kind of
like autoshapes. They're special.
| | 05:28 | They're controlled not just by working
with them on the canvas, and working with
| | 05:31 | properties there, but you've got
special properties called Symbol Properties.
| | 05:36 | In this case here, one of the things
I can change is the name of the Label.
| | 05:40 | So in this case, I am going to
change it from Label to Learn More.
| | 05:45 | Now I've got a customized button.
| | 05:46 | I can also change things like the
font, and font size, and various
| | 05:50 | other elements there too.
| | 05:51 | But that's enough for what I need here.
| | 05:53 | I am going to zoom back out again.
| | 05:54 | I am just zoomed in enough, so I can
see the divisions between my tables.
| | 05:59 | I am going to Shift+Click to
select all three of those elements.
| | 06:03 | I am going to press Ctrl+C to Copy,
make sure these guys are all selected, and
| | 06:07 | then Ctrl+V to Paste, and
that gives me another set.
| | 06:13 | I can continue on with that process all
the way down, just to populate that table.
| | 06:21 | There we go! We've mocked-up a data table, listing of
various tour packages, or whatever it happens to be.
| | 06:26 | So it's really obvious to the user
that what we've got here is basically a
| | 06:30 | tabular layout for this information to
pull from a database, that kind of thing.
| | 06:35 | In the next movie, we are
going to create a contact form.
| | 06:38 | We're going to make a lot more use
of component symbols in that lesson.
| | Collapse this transcript |
| Building a contact form| 00:00 | In this movie, we are going to begin
the creation of an online form wireframe.
| | 00:04 | Now we are not going to put in every
single field, because it gets a little
| | 00:08 | repetitive after a while.
| | 00:09 | But I am going to show you the basics,
and then you'll have a chance, after the
| | 00:13 | lesson's done, to experiment on your own as well.
| | 00:16 | So I have already got us rolling here.
You'll see inside the main content layer,
| | 00:20 | I have created a new sub-layer called form and
inside there I have dropped in a grid autoshape.
| | 00:25 | Now the reason I have used that is to
sort of emulate field sets in an online form.
| | 00:30 | So we have got three
different distinct areas for content.
| | 00:33 | And we are going to really focus
primarily on this first area up in here, which
| | 00:37 | is the basic contact information.
| | 00:38 | We are going to be using something
called a component symbol, actually we are
| | 00:42 | going to be using several component
symbols to make this part of the form and
| | 00:46 | component symbols are pretty neat feature.
| | 00:48 | They are kind of like autoshapes in the
sense that they are pre-built graphics,
| | 00:52 | and they have programmatic control over
them, and you can adjust things like the
| | 00:56 | label or the state and things along those lines.
| | 00:59 | So let's get a sense of how this works.
| | 01:01 | Originally, all the component symbols
I used came from the Common Library, and
| | 01:06 | specifically in the HTML folder.
| | 01:10 | So we have got quite a few here to pick
from, Buttons for both Mac and Windows,
| | 01:13 | CheckBoxes, Comboboxes, Headings,
Links, List Items, TextAreas, and so on.
| | 01:21 | We are going to use a few of these,
primarily in this first part of the form, we
| | 01:25 | are going to be using the TextField.
| | 01:26 | We are going to be using
RadioBoxes, CheckBoxes, and a ComboBox.
| | 01:30 | It will give us a chance to experiment with
them and see how to customize them a little bit.
| | 01:34 | Now as I said, I have already got most
of this inside the Document Library, so
| | 01:39 | if you take a look here, you'll see
quite a few of these elements are already in
| | 01:41 | place, and the first thing we are
going to work with is the TextField.
| | 01:45 | It's probably one of most
common form elements around.
| | 01:48 | So I am going to drag this onto the canvas,
and I want to make a little point about this.
| | 01:53 | I am going to zoom in a little
bit for you to see this closer.
| | 01:56 | You notice that the text label
is outside the text field area.
| | 02:01 | I have actually customized this
field a little bit, so that the text field
| | 02:04 | does sit outside of it.
| | 02:05 | If we go back to the Common Library
for a minute and open up the HTML folder
| | 02:10 | again, you will see that the TextField
symbol, the original symbol has the text
| | 02:15 | label inside the field.
| | 02:17 | I kind of like them on the outside. It makes it look
a little more realistic, as far as I am concerned.
| | 02:20 | Now I'll show you what I did with
that a little bit later on. And before we
| | 02:25 | add too many of these, let me just show you
what I did to create this customized look.
| | 02:29 | Remember this is a symbol, so I can
double-click on it, and I will be brought
| | 02:33 | into Symbol Editing mode and here
are the elements used to create in that
| | 02:36 | text field. See there is my little text
area up here, and then I have got a box
| | 02:41 | down here, and essentially, all I did to
customize this was I grabbed my text field,
| | 02:46 | and I physically moved it up a
little bit higher, just above the box.
| | 02:50 | If we zoom in a little bit more, the
text itself is sitting just above the
| | 02:54 | actual box, the text block is
overlapping the text field a little bit.
| | 02:57 | The main reason I left it like this
because I didn't want a big gap between my
| | 03:01 | text and the text field.
| | 03:03 | Now the other thing you'll notice here
are these little blue and white line.
| | 03:06 | These are what are
referred to as 9-slice guides.
| | 03:09 | So this particular symbol has been set up to
scale without any distortion in the outer corner.
| | 03:14 | So over here, over here, down in the
bottom-right, down in the bottom-left.
| | 03:20 | And you'll notice it's running through
my text area here, so that may or may
| | 03:25 | not cause problems.
| | 03:26 | I am not too worried about in this
case because I am not going to be making
| | 03:29 | these text fields any wider.
| | 03:31 | But if you find that you start making
the fields wider, and you are running into
| | 03:35 | problems with the text stretching out,
you can pop in here and make adjustments
| | 03:39 | to the actual 9-slice guides
and eliminate that problem.
| | 03:44 | So let's go back to our canvas.
| | 03:45 | There we go, and I will
zoom back out a little bit.
| | 03:52 | So we have got one text area here.
| | 03:54 | I want to bring in a couple more.
| | 03:56 | I am just going to position this one
towards the upper-left corner. And again,
| | 04:02 | these are grouped objects, so I am
just going to press Option+Arrow key or
| | 04:05 | Alt+Arrow key, and that will give me a
copy, and I'll do the same thing again,
| | 04:12 | create another copy. I want three of
these to run across the top, and I want to
| | 04:15 | line them up rather nicely.
| | 04:17 | So I am going to get this final field
in the right a little closer to the
| | 04:21 | edge, and I am going to hold down the
Shift key and select the other two, and
| | 04:25 | then if I go up to my Align panel, I
can click on Distribute Horizontal Center,
| | 04:30 | and that will give me even spacing
between each of the fields, which is nice
| | 04:34 | and quick and easy to do.
| | 04:37 | One of the neat things about these
symbols, as I mentioned, as they can be
| | 04:40 | controlled at the instance level.
| | 04:41 | So I am going to deselect all of them,
click on the first one, and you might
| | 04:45 | think, well, I just double-click and
change the text, and actually, that's not
| | 04:49 | going to work; going back into the
symbol is not going to have any effect on the
| | 04:52 | overall individual symbols.
| | 04:54 | Now you might think you can just double-
click on the symbol, edit the text and
| | 04:57 | actually that's not going to work too well.
| | 04:58 | You will just end up changing the
text label for all three symbols.
| | 05:02 | What we want to do is go to this other
properties panel called Symbol Properties,
| | 05:06 | and in there we see a value for
text and currently it says Text.
| | 05:11 | I am going to change it to First Name.
| | 05:14 | You can see the label updates.
| | 05:17 | Do the same thing for the other two.
| | 05:19 | This one is going to be Address, and
the last one is going to be Phone, and I
| | 05:29 | need to add in a few more of these.
| | 05:31 | So I am going to speed up my process
by Shift+Clicking on all three of them,
| | 05:35 | hold down the Alt key or the Option
key on the Mac, press the arrow key once,
| | 05:38 | and then I can just create a copy, really fast.
| | 05:42 | Obviously, I need to rename these.
| | 05:44 | So I am going to go and
select them individually.
| | 05:46 | This one is going to become Last Name,
middle one is going to become City, and
| | 05:57 | the far right one is going to become Mobile.
| | 05:59 | And I am going to add in a couple more
of these text fields, again, just to sort
| | 06:04 | of complete the personal information.
| | 06:06 | So grab those two on the left,
Alt+Click, and these ones are going to be
| | 06:18 | Email and Postal/Zip.
| | 06:26 | I want to add in a couple of more
typical form elements here, some check boxes
| | 06:29 | and the radio buttons and even a
combo box. And we'll start over on the
| | 06:33 | right-hand side, but I want to add in
here some radio buttons to basically ask
| | 06:36 | permission for the user
to be contacted by Phone.
| | 06:39 | So I am going to go ahead back to my
Document Library and if I scroll down here,
| | 06:43 | you'll see I have got a radio button
symbol already in place of my Document
| | 06:47 | Library, so I am going to drag that in,
and again, Alt+Click to create a copy.
| | 06:52 | I need two of these, and I also want the
text label to go above these Radio buttons.
| | 06:56 | I want the same kind of text
that I am seeing in my fields.
| | 07:00 | So if I take a look over in the Symbol
Properties, I see that I have got a font
| | 07:04 | that's Arial-Helvetica-sans-
serif and a size of 12 pixels.
| | 07:07 | So I am going to grab my Type tool,
and I am going to switch over to my
| | 07:12 | Properties. And there we have - already
set to go, actually - I got lucky,
| | 07:16 | Arial-Regular, 12 pixels and Black.
| | 07:19 | Now the other thing to note is the labels
with the text fields are all anti-aliased to text.
| | 07:23 | So I want to make sure that we
have No Anti-Alias selected as well.
| | 07:28 | I will go back over, and I will type
in here, "May we contact you by phone?"
| | 07:36 | Grab my Pointer tool, just line that up
with the edge of my other form elements,
| | 07:41 | and I will just reposition my radio buttons.
| | 07:44 | We put in simple answers
read to these radio buttons.
| | 07:47 | Symbol Properties, I am going to change
the label value for the first one to Yes,
| | 07:51 | and one other thing that's worth
noting here, within the text, is we have got
| | 07:55 | other things we can control, and I
want to make this particular radio button
| | 07:59 | selected prior to the user giving
their input. So I'm going to go down.
| | 08:03 | You will see here in the Symbol
Properties the option for State.
| | 08:08 | It's currently set to Normal.
| | 08:09 | Let me click on that little arrow.
| | 08:12 | I can go ahead and choose Selected.
| | 08:15 | So that button is now selected, and you'll
see a lot of the different elements in here;
| | 08:19 | the text, the size can be changed
numerically, but the style, and the weight
| | 08:23 | and so on can all be controlled by
these little menus, as you see over here on
| | 08:27 | the right-hand side.
| | 08:28 | So those three things are in place.
| | 08:30 | I want to add in two more bits.
| | 08:32 | We are going to add in a check box, so
I'll drop this over as well, and in this
| | 08:38 | case here, and the label is going to
be "Join our newsletter" and again, much
| | 08:44 | like the CheckBoxes I can change the
State, so I am going to turn this into a
| | 08:47 | Selected check box, and then go back
with my Pointer tool, just line it up nice.
| | 08:53 | And the last bit of information I want to include in
here is a way to choose your state or province.
| | 08:58 | So I am going to work with a
ComboBox or a dropdown menu for that.
| | 09:01 | So we see here, we have got a ComboBox.
| | 09:02 | I am going to select that, drag it
onto my canvas, and this isn't an
| | 09:08 | interactive ComboBox, by any means.
| | 09:10 | You won't be able to click on it and get
other choices, but at least it gives us
| | 09:13 | the appearance, again, of a real form.
| | 09:16 | So I am going to change the label in
this case to Province/State, and there is
| | 09:23 | my ComboBox for that element.
| | 09:25 | I am going to zoom out a little bit.
| | 09:27 | See, all these guys have all
been aligned up rather nicely.
| | 09:31 | I have got two more areas in here to fill in:
| | 09:34 | an area that asks about the tours and
also one area down below that is sort of a
| | 09:39 | survey about the web site itself.
| | 09:41 | It's basically using the same
principles that we used up here, these elements
| | 09:45 | here are going to be reused, and we are
going to add in a couple things. In fact
| | 09:48 | the only things that would be done for
these two areas that haven't already done
| | 09:52 | is adding in a TextArea and adding in
a Submit button, and what I am going to
| | 09:57 | have you do is take the time to practice
your use of these symbols and play around with
| | 10:02 | them, drag in the different symbols,
experiment with them, scale them if you
| | 10:05 | want to, work with the labels, work with
the customization and Symbol Properties
| | 10:09 | and when we see you in the next movie,
we are going to be taking this entire
| | 10:12 | thing completed, and we are going to
be exporting it out as an interactive PDF.
| | Collapse this transcript |
| Exporting wireframes| 00:00 | The moment is at hand.
| | 00:02 | We're going to export out this entire
wireframe as a secure, interactive PDF file.
| | 00:07 | Now, just a little quick mention here.
| | 00:09 | We've spent a lot of time
building this wireframe.
| | 00:12 | You may think, well, geez!
| | 00:13 | We spent a lot of time building this wireframe.
| | 00:15 | How are we saving time here?
| | 00:17 | Keep in mind a couple of points here.
| | 00:19 | Probably you're first time doing
this, and we're going through it in a
| | 00:21 | fairly detailed manner.
| | 00:23 | Second of all, it's a
pretty elaborate wireframe.
| | 00:26 | It's not just a couple of
boxes and a couple of text links.
| | 00:28 | We've got some pretty elaborated layouts here.
| | 00:30 | So they've taken a while to put together.
| | 00:33 | I think though, in the long run, this
will be very beneficial for your workflow
| | 00:38 | because you'll be ironing out a lot of issues
well before you get even into the design stage.
| | 00:44 | So just keep that in mind, and
let's move on with our export to PDF.
| | 00:50 | The process is pretty simple.
| | 00:51 | We'll go to File > choose Export.
| | 00:56 | What we want to do here is
select from the Export menu, Adobe PDF.
| | 01:01 | You'll see we can rename the file if we want.
| | 01:04 | We can also determine what
pages we're going to export out.
| | 01:07 | So we can do All Pages,
Current Page, or Selected Pages.
| | 01:11 | Now, the Selected Pages is actually
a new feature inside of Fireworks.
| | 01:15 | We're actually going to make use of that.
| | 01:18 | I'm just going to quickly cancel out of here,
and we're going to go into our Pages panel.
| | 01:23 | The reason I want to select pages is I
don't need the master pages part of my PDF.
| | 01:27 | It's just going to be
confusing because it looks empty.
| | 01:29 | So I'm going to select my Index Page,
hold down my Shift key, select the
| | 01:34 | Explorers page, so all those pages are selected.
| | 01:37 | Then we're going to go to File > Export again,
and we're going to set that to Adobe PDF.
| | 01:43 | We're going to choose Selected Pages.
| | 01:47 | We'll leave the check box active
for viewing the PDF after export.
| | 01:51 | We're going to go into our Options menu.
| | 01:52 | Now, here's where we have a
little control over security.
| | 01:55 | We can password-protect the document
in general, so you can't open it without
| | 01:59 | a specific password.
| | 02:00 | We can even password-protect certain tasks.
| | 02:03 | Now for our purposes, we're just going to
go ahead and use a password to open the
| | 02:07 | document, and I'm going to
be really high-security here.
| | 02:10 | I'm going to type in "test."
| | 02:13 | One other thing to point
out about these passwords:
| | 02:15 | you can't use the same password
for opening the document as you use
| | 02:19 | for restricting tasks.
| | 02:21 | So if you decide you want to restrict
specific tasks, you'll need a different
| | 02:24 | password for that area.
| | 02:26 | So I'll click OK, and I
think we'll just rename this
| | 02:34 | explore_CA_wireframe and click Save.
| | 02:41 | The process will take a few seconds
or a few minutes, depending on how
| | 02:44 | complicated the file is.
| | 02:46 | But once the Fireworks is done,
the file opens up inside of Acrobat.
| | 02:51 | We have to enter in our password,
click OK, and there's our file.
| | 02:58 | I'm going to zoom out a little bit so
we can see more of the whole page here.
| | 03:02 | I'm going to click on my Index Logo link here.
| | 03:07 | It takes me out to the Index page.
You can see our main navigation is all clickable.
| | 03:13 | I can go to Mission.
| | 03:15 | I can go to Contact.
| | 03:16 | I can go to Resources.
| | 03:18 | I can go to Explorers.
| | 03:20 | Now, if I go back to Tours, I've actually
added in a bit more interactivity for you.
| | 03:25 | You move your mouse over
that first button in our table.
| | 03:28 | You can click on that.
| | 03:28 | It'll take you to the Tour Details
page, and if you look down a little lower,
| | 03:32 | you'll see here where it says Packages,
you can actually click on these little
| | 03:37 | buttons as well, so I can either learn
more, or I'm so sold, I can click on Book
| | 03:42 | Tour and I go right to the Book Tour page.
| | 03:44 | Aside from being able to view this
offline, it makes it really easy for the
| | 03:48 | client to review this.
| | 03:49 | When they don't have an Internet
connection, they just go through the
| | 03:52 | file, which is great.
| | 03:54 | The other nice feature, if you've
got Acrobat Pro, is that you can enable
| | 03:57 | commenting for the file, so that not
only can the client look this thing over,
| | 04:02 | but they can actually apply
specific comments to specific pages.
| | 04:06 | In order to do that, you've got to go
up to your Comments menu, and choose
| | 04:11 | Enable for Commenting and
Analysis in Adobe Reader.
| | 04:15 | Now, when we do this, Acrobat is
going to want to resave the file.
| | 04:19 | I'm just going to overwrite the
original file, say Yes to that.
| | 04:24 | With this done, what it means is I can
e-mail this to the client, and they can
| | 04:28 | add in their own comments
on a page-by-page basis.
| | 04:31 | So, just as we would normally do here
in Acrobat, I can click on Comments, add a
| | 04:35 | sticky note, place it anywhere I want on
the page and type in whatever comment I want.
| | 04:44 | When the client saves the file and e-mails
it back to me, these comments are kept with it.
| | 04:48 | So I can go into the PDF file and
look at specific questions related to
| | 04:53 | specific elements of the wireframe.
I think it's a really handy feature there.
| | 04:57 | So even if you can't meet by phone or in-
person, you'll still get their comments,
| | 05:01 | and rather than describing where the
concern is, they can actually drop in a
| | 05:05 | sticky note, and let you know
exactly what their concern is.
| | 05:09 | We started off this lesson
with essentially an empty page.
| | 05:12 | We created a brand-new document from
the document templates and over a series
| | 05:16 | of lessons, we fleshed this out into a
full-fledged interactive PDF that we can
| | 05:21 | send off to the client.
| | 05:23 | We've done a lot of work here, and many
of the things you've learned and worked
| | 05:27 | with, such as working with symbols,
working the component symbols, working with
| | 05:30 | grids, document templates, things
along those lines, these are very common
| | 05:34 | elements to working in a
Fireworks a document in general.
| | 05:37 | So you can take this information and
apply it in pretty much anything you do
| | 05:41 | inside of the Fireworks application.
| | Collapse this transcript |
|
|
3. StoryboardingMaking a wireframe realistic| 00:00 | In the last chapter, we built an
interactive wireframe of our final web site
| | 00:05 | project for the Explore California web site.
| | 00:08 | In the final lesson in that chapter,
we exported out the wireframe as a
| | 00:11 | secure, interactive PDF.
| | 00:13 | The wireframe step is an important one,
because we can nail down flow, function,
| | 00:17 | and general layout of our design
without worrying about how pretty things are.
| | 00:20 | Now we're going to assume that the
client has reviewed the wireframe, and that
| | 00:24 | their only comment was that they
can't wait to see what the site really is
| | 00:28 | going to look like. Yeah.
| | 00:30 | Wireframes can generate that response.
| | 00:33 | Our next step in the prototyping
process is to build out the design or a series
| | 00:38 | of design variations.
| | 00:39 | The wireframe has helped us figure out
where the various elements of the design
| | 00:43 | are going to be placed.
| | 00:44 | So now it's a matter of making
things look much more realistic.
| | 00:48 | Much as the wireframe helped us organize
and structure the site, the storyboards
| | 00:52 | will make the site come alive, and
because we are in a design application, rather
| | 00:55 | than a coding environment, making
changes to a design will be easy.
| | 00:59 | Our goal is to, by the end of
this lesson, go from this to this.
| | 01:04 | We will begin by picking a
color theme in the next movie.
| | Collapse this transcript |
| Using the Kuler panel for color choices| 00:00 | Picking a color theme can be a
daunting task, even for an experienced
| | 00:03 | professional, and we've been
very lucky with this client.
| | 00:05 | They've actually supplied us
with a corporate color style guide.
| | 00:09 | If you can get your hands on
something like this from your client,
| | 00:11 | it can save you a lot of time, because you
already know the color schemes to aim for.
| | 00:15 | With Fireworks new support of formats
like the Adobe Swatch Exchange, you can
| | 00:20 | even plug that ASE file right into Fireworks.
| | 00:24 | But what if you don't have that luxury
of getting a style guide like this we
| | 00:28 | have onscreen right now?
| | 00:30 | Well, there are lots of options
online for creating color schemes.
| | 00:34 | One of the ones that I use
quite a bit is Adobe Kuler.
| | 00:37 | Let's take a look at the web site
version of this and then see how that
| | 00:40 | relates to Fireworks.
| | 00:42 | Adobe Kuler is basically a community
driven web site where individuals can go
| | 00:47 | and create their own color
themes, and they can share them.
| | 00:49 | They can edit other color themes,
and save new versions, a whole range of
| | 00:53 | different things that can be done.
| | 00:55 | Like pretty much any Adobe service, you
need to have an Adobe ID in order to get
| | 00:58 | into the site and actually do anything useful.
| | 01:00 | I have already logged in, and I am just
going to walk through a couple of things
| | 01:04 | we can do here before we
hop back over to Fireworks.
| | 01:07 | Take a look over here in the Create section.
| | 01:10 | You'll see Themes, Newest, Most Popular,
and so on just, below that, a whole range
| | 01:15 | of different services.
| | 01:16 | But in Create, we get the option to
create from a color or from an image.
| | 01:23 | Colors are great if you've got,
again, the swatch file to work with.
| | 01:26 | But creating from an image can be
kind of fun as well, and it actually can
| | 01:30 | produce some pretty decent results.
| | 01:32 | I'm going to choose from an image here.
| | 01:34 | You get a default image that Kuler
pulls in, and it shows you the color palette
| | 01:38 | that it's selected based on the
predominance of color in that image.
| | 01:42 | What we're going to do is
we're going to upload a file.
| | 01:44 | I'm going to go into my exercise files,
and I'm going to grab the company logo,
| | 01:55 | open that up, and it uploads pretty quick.
| | 01:57 | It's a fairly small file.
| | 01:59 | But you can see right away that that
one image has been analyzed, and the five
| | 02:04 | most predominant colors have been
selected, which is kind of handy.
| | 02:08 | If you've got a piece of letterhead, you
can only scan it as an image, upload it
| | 02:12 | to Kuler, and it will pull the colors from that.
| | 02:14 | You can also customize these.
| | 02:16 | You can literally move the colors around,
change the values, and you can see as
| | 02:20 | I move one of these targets, you can
see the one of the swatches is updating,
| | 02:24 | which is pretty neat as well.
| | 02:25 | Now once you've picked a color set
that you like, you can give it a name.
| | 02:29 | I'm just going to call this Explore California.
| | 02:35 | I can give it some tags.
| | 02:36 | I'll type in "California" and "logo," so it can
be searched based on those things as well.
| | 02:42 | It'd be helpful if I spelled
California correctly. There we go.
| | 02:45 | Once you've done that, you can save it.
| | 02:50 | Now you can also set colors to be
public or private, so if you don't want to
| | 02:54 | share your color schemes, maybe you are
working on a corporate project, and you
| | 02:57 | don't want that to get out there, you can
set it to private so only you will see it.
| | 03:01 | So I'll click Save.
| | 03:03 | I'm brought back over to my Kuler window,
and you'll see I've actually already
| | 03:07 | done this a couple of times here.
| | 03:08 | There is my original one, Explore Cali.
| | 03:11 | What's really interesting about this,
to be honest, is the fact that the color
| | 03:14 | scheme is identical.
| | 03:15 | So I pulled up that same image a
couple of times and Kuler pulls in the
| | 03:19 | same predominant color.
| | 03:20 | So it's not a random thing.
| | 03:22 | It actually is analyzing the image.
| | 03:24 | Now once you've got a color value here,
you can do a few different things with it.
| | 03:28 | You can add it to your
favorites, so it's quick to access,
| | 03:31 | you can download it as a Swatch
Exchange file, you can edit the color theme,
| | 03:35 | and play around with the color values that
are there, or you can completely get rid of it.
| | 03:39 | So there're quite a few different
features in here that you can work with.
| | 03:41 | While the web site is great, and
it's a great way to generate colors
| | 03:45 | very interactively -
| | 03:46 | it's kind of fun to play with, to be honest -
| | 03:49 | I want to focus a bit more on
what Fireworks can do from its end.
| | 03:52 | I am going to hop back over to
Fireworks, and inside of Fireworks, inside the
| | 03:57 | Window menu, we have a menu item called
Extensions, and you'll see three items in here.
| | 04:03 | The one I really want to focus on here is Kuler.
| | 04:05 | We actually have a Kuler panel
that can launch inside of Fireworks.
| | 04:10 | This panel will connect
directly with the Kuler web site.
| | 04:12 | Again, you'll have to log in, so if you don't
have an Adobe ID, you'll need to create one.
| | 04:18 | Now, if you haven't used this
panel before, here is a quick overview.
| | 04:21 | We have three main choices, three main
buttons. We can go to About, which just gives
| | 04:25 | you a little information About Kuler,
Browsing allows you to search for specific
| | 04:29 | colors based on names or keywords, and
you've also got the option to Create.
| | 04:33 | You can pull in your own colors from
there, or you can edit an existing palette
| | 04:37 | that you download.
| | 04:38 | So if I go back to Browse
here, let's do a quick search.
| | 04:41 | I'm going to type in "explore Cali."
| | 04:45 | This is my first attempt at creating my palette.
| | 04:50 | You'll see that comes up.
| | 04:51 | Now, if you add a brand-new theme,
don't expect to be able to find that through the
| | 04:55 | Kuler panel in the next five minutes.
| | 04:57 | It may take a little while for
that to become part of the database.
| | 05:00 | But for the time being, I found the
one of them, you can see here, we've got
| | 05:02 | that range of colors.
| | 05:04 | And if move over to the far end of the
Kuler panel, you can see the name of the
| | 05:08 | theme, who created the theme,
and when it was created.
| | 05:10 | that gives me a bit of information there.
| | 05:13 | Down at the bottom, if I had multiple
themes, I could scroll up and down to see
| | 05:18 | all the different themes that were available.
| | 05:20 | I can refresh the themes
by clicking on this button.
| | 05:23 | I can go ahead and edit the theme, if I
like the starting point for this but want
| | 05:26 | to make alterations.
| | 05:27 | Now, if I think the five colors I see
in this theme are going to be enough for
| | 05:30 | my web site, I can add them to my
Swatches palette or create a brand-new
| | 05:34 | Swatches palette that has
just these colors in it.
| | 05:36 | So I'm going to go over to my
swatches, double-click on it.
| | 05:39 | You see I have all the current default colors.
| | 05:41 | I'm going to go and clear those.
| | 05:43 | So I have no swatches in my Swatches palette.
| | 05:46 | I'm going to go back to my Kuler panel,
and I'm just going to add that theme
| | 05:50 | to my Swatches panel. Pretty easy!
| | 05:53 | Pretty easy indeed!
| | 05:55 | There's the five colors.
| | 05:56 | I have now got a custom palette that
I can work with for my site design.
| | 05:59 | Now if I want to share this particular
color palette with other designers, all
| | 06:03 | I've got to do is go into my Options
and choose Save Swatches, and this will
| | 06:09 | allow me to export this out as a
Swatch Exchange file, which I can use in
| | 06:13 | Photoshop, or Illustrator, and I believe in
InDesign as well, or I can save it off as an ACT
| | 06:18 | file. An ASE files is going to be
little more popular withinside the Adobe
| | 06:22 | suite of products though.
| | 06:23 | So I can just select that, and I can
type in here "explore_Cali_logo," just so I
| | 06:32 | know what color scheme that's coming from.
| | 06:35 | I'll go ahead and go back to my
desktop, to my exercise files, and save that
| | 06:40 | inside of my exercise files, and click Save.
| | 06:44 | So now I have got that
palette available for other people.
| | 06:48 | If I want to pass it around for my
Photoshop designers or my Illustrator
| | 06:52 | designers, they've got it
available, and they can work with it.
| | 06:55 | A Kuler theme can be a great start, but
as you can see, each theme is limited to
| | 07:00 | a range of five colors.
| | 07:02 | With a large site, you may want a greater
range of harmonious colors. Or, as in our
| | 07:06 | case, you may have been supplied
with a full-blown color style guide.
| | 07:10 | In the next movie, we will have a
closer look at Fireworks' support for the
| | 07:12 | ASE format.
| | Collapse this transcript |
| Importing ASE files| 00:00 | We saw in the last movie how we
could take an image and generate a color
| | 00:03 | theme inside of Kuler and
| | 00:05 | then take that color theme and bring in as
a custom set of swatches within Fireworks.
| | 00:09 | But what if the five colors that
you get from Kuler aren't enough?
| | 00:12 | Well, designers can generate a color
palette in Photoshop or Illustrator, and
| | 00:16 | then export out that
Color palette has an ASE file.
| | 00:20 | Because Fireworks supports the ASE
format, we can bring that Color palette
| | 00:24 | right into Fireworks.
| | 00:25 | Let's see that workflow.
| | 00:26 | I'm going to go back over
to my Swatches panel here.
| | 00:29 | Here are my five colors from my logo theme.
| | 00:31 | I'm going to get rid of those.
| | 00:32 | I am just going to go ahead and clear
things again, so we start with an empty panel.
| | 00:37 | I'm going to go back to my options here,
and I'm going to choose to add swatches.
| | 00:41 | I'll go into my exercise files,
and I have two ASE files here:
| | 00:47 | the one I created in Fireworks, and
also this other one called colors_web.
| | 00:51 | That's the one I want.
| | 00:53 | I'm going to open that up.
| | 00:55 | Really quickly, we get a brand-new
palette with an extended range of colors,
| | 00:58 | well beyond the original
five we had from the color logo.
| | 01:02 | So this gives us a lot more options.
| | 01:04 | For color choices, we've got a
professionally designed set of colors, and we can
| | 01:07 | pull on those for the web site.
| | 01:09 | As you can see, those colors you see in
the Swatches panel look awfully similar
| | 01:13 | to the color file or the style
guide that we see onscreen right now.
| | 01:17 | Okay, so we've got our color swatches.
| | 01:20 | In the next movie, we're going to start
putting together our first storyboard.
| | Collapse this transcript |
| Importing graphics into the storyboard | 00:00 | All right, so we've got a custom
palette created by importing an ASE file
| | 00:04 | right into Fireworks.
| | 00:05 | Our next step is to actually start
fleshing out this wireframe into a storyboard.
| | 00:11 | Now the client has been kind enough
to supply us with several graphics, and
| | 00:14 | several of which I've also
created inside of Fireworks as well.
| | 00:19 | Before we get started, I've prepared
a quick demo file TO show you the
| | 00:22 | progression in creating the first storyboard.
| | 00:24 | Let's have a quick look at that and
then get on with the real construction.
| | 00:28 | So here we've got our original wireframe.
| | 00:32 | If I page down through our different
pages here, there is an example of it with
| | 00:38 | the common elements, like the actual
browser background, our elements for the
| | 00:42 | footer, some sidebar elements, and so on.
| | 00:46 | Going forward, moving, and adding
the containers for main content.
| | 00:50 | And then finally, fleshing it out with
the bit of text and a few more images.
| | 00:54 | So that's kind of the flow we'll be going in.
| | 00:56 | Now what we're going to be doing is
we're going to be adding in some of these
| | 00:59 | elements for this first storyboard.
| | 01:02 | They're pretty much all ready to
roll inside the Chapter 3 folder.
| | 01:05 | We'll be doing a bit of importing to
sort of flesh out parts of this storyboard.
| | 01:10 | So I'm going to close down the demo.
| | 01:13 | We're going to have our
storyboard_start file here.
| | 01:16 | Now, you may be wondering, why are
we looking at the wireframe again?
| | 01:19 | A couple of reasons here.
| | 01:21 | The first reason is we did spend quite a
bit of time creating it to block out the
| | 01:25 | elements that are going to
be inside the storyboard.
| | 01:28 | Secondly, a lot of the layers that we
used in the wireframe are going to be
| | 01:31 | useful for us in
creating the storyboard as well.
| | 01:33 | So rather than start from a
completely empty document, we can work with the
| | 01:37 | wireframe to act kind of as a template
as we build, and things should go a
| | 01:41 | little bit faster because of it.
| | 01:43 | Now if we take a look in our Layers
panel, you'll see very common layers we
| | 01:47 | had in the wireframe: header, navigation,
sidebar, main content, footer, and wrapper.
| | 01:52 | I want to add in one more layer here;
| | 01:54 | that's for the page background itself.
| | 01:56 | So I'm just going to call it background.
| | 02:00 | Make sure that it's at the
bottom of the layer stack.
| | 02:02 | That's where our gradient is going to reside.
| | 02:05 | Now another thing you might notice, if
you look up in the Pages panel, is I've
| | 02:08 | condensed everything down to
one single page in the wireframe.
| | 02:11 | There is no master page here.
| | 02:13 | The reason being is that I'll
probably be producing a couple of different
| | 02:16 | variations for the client to see.
| | 02:18 | So the elements that will be on the
master page might be differ on each page.
| | 02:22 | So, not much point of having a master
page, because it has to be the same for
| | 02:25 | every page in the design.
| | 02:27 | I'll typically produce two, maybe
three variations for client, just to really
| | 02:31 | refine their choices,
| | 02:33 | make sure they're really happy with
the design before I move forward into
| | 02:36 | prototyping and into designing
the site itself in Dreamweaver.
| | 02:40 | All right, so we're on the background.
| | 02:42 | We're going to bring in our first
element, which is the page background.
| | 02:46 | I'll zoom out a little bit, so
we can see this a bit better.
| | 02:49 | I'm going to be making use of the
Import feature quite a bit here.
| | 02:51 | The reason for that is that we've
got a lot of pre-built graphics.
| | 02:55 | So there is my page background.
| | 02:56 | I'm going to open that up.
| | 02:58 | You'll notice little Import dialog box.
| | 03:00 | That's because this is a Fireworks PNG file.
| | 03:03 | Fireworks automatically show you a
preview, in case there are multiple pages
| | 03:07 | inside the document.
| | 03:08 | In our case, it's just the single page.
| | 03:09 | So we'll choose Import,
| | 03:12 | bring my cursor over to the zero points in
the upper-left corner, and click to Insert.
| | 03:18 | Now you may find, if you're on the Mac,
that you have to click twice for Import,
| | 03:22 | because you got to bring
the canvas back into focus.
| | 03:24 | All right, so there is our graphic.
| | 03:26 | It's just a plain old
rectangle with a linear fill.
| | 03:30 | You can customize linear
fills really easily in Fireworks.
| | 03:34 | Here is our background element.
Next is our wrapper.
| | 03:36 | Now this is an example of something
we can do with the existing assets.
| | 03:40 | We have that rectangle
sitting in here, called main.
| | 03:43 | That's just basically filled
main part of the web page itself.
| | 03:46 | So rather than bringing a new shape,
I'm just going to change the color.
| | 03:50 | I'm going to choose my Color
Options here in the Properties panel.
| | 03:53 | Go over to my custom
palette, pick that dark blue.
| | 03:57 | Just like that, it's in place.
| | 03:59 | Not too shabby there.
| | 04:00 | It went pretty quickly.
| | 04:01 | Now just collapse that and the background.
| | 04:03 | Next up is the footer.
| | 04:05 | Now the footer already has
those placeholder elements in there.
| | 04:07 | These are things we're not
going to use in the wireframe.
| | 04:09 | So I'm just going to
select them, and press Delete.
| | 04:12 | We're going to import the
final footer. There it is there.
| | 04:17 | It's an Illustrator file.
| | 04:18 | It's a vector file, which we can open
up quite easily inside of Fireworks.
| | 04:23 | We'll get a little dialog box,
allowing us to make some changes.
| | 04:26 | Fireworks does a pretty good job
of importing Illustrator files.
| | 04:29 | One thing I recommend though, is that
you don't try scaling the file while
| | 04:33 | you're in this dialog box.
| | 04:34 | Sometimes things, especially
with text, can go a little wonky.
| | 04:38 | So import the file, and then if you need
to, resize it from there. I'm going to click OK.
| | 04:41 | I'm just going to click
down in the footer area here.
| | 04:47 | That brought in all the elements.
| | 04:49 | In fact, you can see there are quite a few
different little bits of vector in there.
| | 04:53 | If we take a look over in the Layers
panel - another interesting point to note -
| | 04:56 | even though we had selected the footer
layer to begin with, because this was an
| | 05:00 | Illustrator file with its own set of
layers, Fireworks imported it independently
| | 05:04 | from everything else.
| | 05:05 | So what I want to do
here are a couple of things.
| | 05:07 | I'm going to select all the objects
that are part of that footer, and just by
| | 05:12 | pressing Ctrl+G or Command+G on the
Mac, I'm going to group them together.
| | 05:16 | This makes it a lot easier to move them around.
| | 05:18 | There they are there.
| | 05:19 | I'm going to rename this to "footer group."
| | 05:23 | I leave the word group in there just so I
remember that it is actually a group of objects.
| | 05:28 | I want to drag this into my footer layer.
| | 05:30 | So I'll grab the radio button, and
drag down and drop it into the footer.
| | 05:36 | Now the original Illustrator
layers, we don't need these anymore.
| | 05:39 | So we're going to just select that
parent layer, and just click on the trash
| | 05:42 | can, and that gets rid of those.
| | 05:43 | Now you might notice that the footer is
not quite exactly where I want it to be.
| | 05:47 | It's a little bit low down.
| | 05:48 | So I'm going to select that group.
| | 05:49 | This is where grouping makes things really easy.
| | 05:52 | All the objects are part of that group.
| | 05:54 | So as I move things around,
it becomes really quite simple.
| | 05:58 | I don't have to worry about
leaving anything behind. So there we go.
| | 06:01 | That's the footer dropped into place.
| | 06:03 | Now you can see the wrapper background
showing up underneath the footer.
| | 06:08 | So we'll make a quick change there.
| | 06:09 | We'll just go ahead and scale that wrapper.
| | 06:13 | It's just a solid color anyway.
| | 06:16 | So something around that
range should do the job.
| | 06:19 | So it basically ties in
with the edge of the footer.
| | 06:20 | All right, a couple of more things I'm
going to do here in the main content area.
| | 06:25 | There is a lot of stuff in here, and a
lot of that we don't really need, again,
| | 06:29 | because we're replacing it
with more realistic content.
| | 06:32 | For example, here in this main content
container, all the symbols for the Greek
| | 06:38 | text and the images are not necessary.
| | 06:40 | So I'm going to delete those.
| | 06:42 | The actual box though, I do have
a separator box for that content,
| | 06:46 | so I'm just going to go
ahead and change the color.
| | 06:49 | Now this was originally a
symbol inside of the wireframe.
| | 06:52 | So I'm going to convert this to
a regular, plain-old shape again.
| | 06:55 | So I'm going to go to Symbol.
| | 06:57 | I right-clicked on my shape,
choose Symbol, and choose Break Apart.
| | 07:01 | That removes the symbol status from the graphic.
| | 07:04 | It still keeps it as a group.
| | 07:05 | So if you had multiple objects in
the symbol, they'll be kept together.
| | 07:08 | I'm going to a press Ctrl+Shift+G or
Command+Shift+G to ungroup the rectangle.
| | 07:13 | Now we've got the plain-old actual shape.
| | 07:15 | I can go ahead and set my color.
| | 07:18 | I also want to scale this a little bit
too, so that it's in line with the footer.
| | 07:22 | I'm going to do two more things
before we wrap this little thing up.
| | 07:27 | I want to actually bring some
more information into my footer.
| | 07:30 | So I'm going to go back to the footer again.
| | 07:33 | I forgot about my text.
| | 07:34 | So one more time here: File > Import.
| | 07:36 | I actually have a file called footer_text.
| | 07:39 | You're not going to see much in the
preview, because the text is white.
| | 07:42 | So I'm going to click on Open.
| | 07:43 | Again, we'll see that Import dialog box.
| | 07:47 | We'll just click and drop that in.
| | 07:50 | I'll zoom in a little bit, reposition
all this, so that it's sort of sitting more
| | 07:56 | accurately where I want it to be.
| | 07:58 | Something around there looks pretty good.
| | 08:00 | Okay, now this was all Fireworks PNG.
| | 08:02 | This was all real text.
| | 08:03 | It just was saved as a PNG file in Fireworks.
| | 08:06 | So all the formatting was
retained and everything.
| | 08:08 | I've got a couple of other little options here,
| | 08:11 | elements like the sidebar
that are getting in the way.
| | 08:12 | So I'm just going to delete that for now.
| | 08:16 | One more bit we'll do in
here is bring in some real text -
| | 08:18 | yes, an actual text file.
| | 08:21 | So I'm going to choose File > Import,
and scroll down here, until I can find my
| | 08:31 | Tour Spotlight information,
| | 08:33 | there we go, and open that up.
| | 08:36 | This is an actual text file I'm bringing in.
| | 08:38 | You can see its real text.
| | 08:39 | I can double-click inside of
it and select it, and so on.
| | 08:42 | I'm going to zoom in.
We'll do a little bit of formatting with this.
| | 08:44 | I'm going to select my heading.
| | 08:46 | I'm going to set that to Chaparral, bold.
| | 08:52 | I'm going to change the color to our deep blue.
| | 08:57 | I'm going to change the size to
44 pixels, so it really stands out.
| | 09:05 | Okay, now the text that we have
here, convert that to Georgia.
| | 09:09 | I'm just going to increase the leading here.
| | 09:15 | I'm going to go to about 140%, just want
a bit of breathing room, so that we can
| | 09:21 | see things a little bit better.
| | 09:23 | We also want to compress
this a little bit too, I think.
| | 09:27 | I'll grab my Pointer tool.
| | 09:35 | I can make major basic changes to sizing,
| | 09:38 | just make that a little bit shorter.
| | 09:40 | The Tour Details information here,
I'm going to select that, and we're going to
| | 09:44 | change that as well.
| | 09:45 | We're going to make that a little bit
bigger in Georgia as well. Select Georgia.
| | 09:50 | Make this about 20.
| | 09:53 | We'll set the color here
to that nice, golden brown.
| | 09:57 | I think I'll also hit the Return key a
couple of times, just to sort of make
| | 10:02 | that spaced out a little bit more.
| | 10:04 | I've got an extra gap in here from a
paragraph break, so I'm just going to delete that.
| | 10:08 | It looks like we've got
one more then. There we go.
| | 10:13 | So that's a really quick
way to bring in your text.
| | 10:15 | So if your client is going to supply
you with copy, you can bring in RTF
| | 10:20 | documents, you can bring in text
files, and you can also copy and paste
| | 10:24 | Word documents as well.
| | 10:25 | A little tricky there.
| | 10:26 | If there is odd formatting in the
Word document, sometimes a copy and paste
| | 10:29 | isn't come over quite so well.
| | 10:31 | But the RTF files and the text files
work quite easily, especially the RTFs,
| | 10:35 | because it kind of
maintain some of the formatting.
| | 10:38 | So that's a little bit of what we're doing.
| | 10:40 | Now pretty much everything else
we'll be doing to this page is kind of a
| | 10:44 | wash-rinse-repeat kind of format.
| | 10:46 | We'll import specific elements,
position them, and delete the old wireframe
| | 10:50 | elements in their place.
| | 10:51 | So rather than have you go through all
of this right now, we're going to be fast-
| | 10:55 | forwarding to a finished
version of the storyboard.
| | 10:58 | But keep in mind that everything I'm
doing, and all the assets that I'm using
| | 11:01 | are part of the Chapter 3 folder.
| | 11:03 | So if you want to try
building this out yourself, you can.
| | 11:06 | In some cases, things like the sidebar,
backgrounds were just making use of the
| | 11:10 | shapes again, like we did
for the wrapper, and so on.
| | 11:13 | But everything else is pretty much
there and ready for you to experiment with.
| | 11:17 | If you want to learn more about the
imaging techniques that you've seen
| | 11:19 | being used here, sort of the
process of doing things like gradients and
| | 11:23 | things like that, be sure to check
out my Fireworks CS5 Essential Training
| | 11:26 | title at lynda.com as well.
| | Collapse this transcript |
| Adding design variations| 00:00 | Okay, we've got our
first completed concept here.
| | 00:03 | It looks very much like the original
wireframe, except it's a whole lot prettier.
| | 00:08 | Now, I want to talk a bit about some
of these terms that I've been tossing
| | 00:11 | around, concepts, and storyboards, and
prototypes, just sort of to give you my
| | 00:16 | perspective on these things.
| | 00:17 | From my way of thinking, with concepts
you're still in that kind of deciding stage.
| | 00:22 | You might be wanted to have different
color treatments, or maybe making some
| | 00:25 | changes to the layouts a little
bit, to come up with different ways of
| | 00:28 | approaching the same content.
| | 00:30 | You're not at the point where
you've decided on a final design.
| | 00:34 | In our example here, I've got
three concepts of the index page.
| | 00:38 | The first one here is the
one we're working with earlier.
| | 00:40 | Another example here where we've
changed the gradient that's in the background,
| | 00:45 | so it fades in the opposite direction.
| | 00:46 | We've made some other significant
color changes to the design as well.
| | 00:49 | And then the third option, just to
throw in a completely different look,
| | 00:53 | we've radically altered the layout in this
case, and again, also changed colors as well.
| | 00:57 | So these are kind of ideas that I'm
tossing out to the client, sort of to see
| | 01:01 | what they feel, with their reactions are.
| | 01:04 | It gives me chance to sort of, again, just
sort of further nail down some of the details.
| | 01:09 | Now storyboards, on the other hand, are
where the design has pretty much been
| | 01:13 | finalized, in the sense of the color
treatments and so on, where you really what
| | 01:17 | you're doing is you're showing the client,
how other pages in the web site might look.
| | 01:21 | You're not, by any means, building the
entire site graphically at this point.
| | 01:25 | But you want to show different treatments.
| | 01:26 | So, for example, take a look at
that first index page for a minute.
| | 01:30 | Then we hop down to the mission page,
| | 01:33 | where we see the same kind of
color treatments, but we're also seeing how
| | 01:37 | an interior page is being handled,
| | 01:41 | then a little more in detail here
another type of page where in this case, I've
| | 01:46 | got a data table being represented.
| | 01:48 | So I'm showing the client how different
types of content are going to be handled
| | 01:52 | visually in the design.
| | 01:55 | The last step in this series
would be the prototype itself.
| | 01:59 | That's where things get interactive.
| | 02:01 | We start adding in things like rollover
effects, where we start linking from page to page.
| | 02:05 | In fact, there is where we'll flesh out
a lot more of the top level pages, and
| | 02:09 | probably some of the sub pages as well,
to really give a good user experience, so
| | 02:13 | that the prototype can literally be
used as a testing tool for the client, or
| | 02:18 | for maybe even a focus group.
| | 02:19 | So, a couple of things to keep in
mind here, a couple of points I want you
| | 02:23 | to try to remember.
| | 02:24 | You don't want to provide
too many choices for anything.
| | 02:27 | Keep your concepts, your
design variations to a minimum.
| | 02:30 | If you would provide too many choices,
it's going to look like maybe you weren't
| | 02:34 | clear on what you were supposed to be
doing, or maybe the client might even feel
| | 02:38 | you weren't paying
attention when they were talking.
| | 02:40 | As much as it's tempting to show how many
great ideas you come up with, keep it focused.
| | 02:45 | Don't go too far all over the place,
because then the client will think, you
| | 02:48 | really don't know what you want to do.
| | 02:50 | As far as storyboards are concerned,
keep the storyboards limited to
| | 02:54 | major layout changes.
| | 02:56 | Generally, anytime my page layout
differs greatly, and I don't mean by
| | 03:00 | specific photographs, or specific text,
but I mean in terms of placement or
| | 03:04 | handling of those objects,
| | 03:05 | that's when I'll produce a different storyboard.
| | 03:08 | Chances are a lot of your pages will
look very similar with the exception of the
| | 03:12 | fact that the content is going to be different.
| | 03:14 | So you don't need seven storyboards for
seven pages that look the same, except
| | 03:18 | for the actual specific
text that's going into them.
| | 03:21 | You just don't want to inundate
the client with too many choices.
| | 03:25 | Yes, they are the boss, and their
decisions are what you adhere to, but
| | 03:28 | too many options can make the whole process
confusing and make it take longer than it needs to.
| | 03:34 | The last thing to consider when you're
dealing with storyboards, or for concepts
| | 03:37 | is keep the interactivity to a minimum,
or don't use any interactivity at all.
| | 03:42 | We're not at the point where we need to
see how you move from page to page, or
| | 03:46 | things along those lines.
| | 03:47 | That can be handled much later in the prototype.
| | 03:51 | So those are some terms to consider,
A little bit of advice for you.
| | 03:54 | We're going to be looking at ways to
deliver these concepts and storyboards to
| | 03:58 | the client very shortly.
| | Collapse this transcript |
| Using Demo Current Document | 00:00 | With all these concepts and
storyboards floating around,
| | 00:02 | it's about time we got this in front
of the client so they can give their two
| | 00:06 | cents on what they think.
| | 00:07 | Now, we've got no interactivity
between these pages at this point.
| | 00:10 | So, we could export this out
as a PDF. That's one option.
| | 00:14 | But my preference at this stage is
to work with Demo Current Document.
| | 00:17 | This is a great little feature for
creating a flash-based slideshow, so they can
| | 00:21 | just sort of see each page very quickly.
| | 00:24 | Because we are showing off different
concepts, it's a good sort of interactive
| | 00:27 | way to present your ideas.
| | 00:28 | Not only do you get a simple linear
slide show, but clicking on any page in the
| | 00:33 | presentation will launch an
HTML version in the browser.
| | 00:36 | So, let's have a look at the workflow here.
| | 00:38 | We've got our five pages.
| | 00:40 | Our option for creating this demo is
in the Commands menu, and you'll see
| | 00:43 | here Demo Current Document. Select that option,
and you get a little dialog box coming up.
| | 00:49 | So, you can actually pick which
pages you're going to include.
| | 00:52 | In our case, we want to
include all of them, so that's fine.
| | 00:55 | The command will automatically pull
the existing background canvas color.
| | 00:59 | We are going to choose Create Demo, and here
we are going to do is create a new folder.
| | 01:03 | I am going to call it demo, open
that up, and select that folder.
| | 01:09 | Once the command is finished, it will
automatically launch the demo inside of
| | 01:13 | your default browser.
| | 01:14 | So, we can see here, there's
the first page in our series.
| | 01:17 | If I look, move my cursor down to the
bottom of the screen, you can see I can
| | 01:20 | click through the different design
variation and storyboards that are here.
| | 01:24 | I can even maximize the screen if I
want, so I can see the full screen area.
| | 01:30 | If I click on the individual pages,
it'll bring up a JPEG file of that
| | 01:34 | individual file, and from there, I can
right-click on it and save it to my
| | 01:37 | desktop if I want to.
| | 01:39 | So it gives you a way to show these
ideas, these concepts, without having to
| | 01:45 | worry too much about the
interactivity at this point.
| | 01:47 | It's quick, it's easy. You can get
things in front of your client quite fast.
| | 01:51 | Now, there are other options for
getting these deliverables in front of your
| | 01:54 | client, and we'll be looking at
some of those options in other lessons.
| | Collapse this transcript |
| Emailing deliverables| 00:00 | Now, another option for getting your
design ideas in front of the client is by
| | 00:04 | exporting out full JPEG
files of individual pages.
| | 00:08 | This is actually pretty
easy to do inside of Fireworks.
| | 00:11 | Our client has gone through and
looked at some of our concepts, and they've
| | 00:15 | nailed down the look that they want.
| | 00:17 | But they still want to have a couple
of samples of the sort of the finalized
| | 00:20 | versions that they can pass around to
other decision makers in the office.
| | 00:24 | Basically, they want to see our index
page - the very first one, our mission page,
| | 00:28 | and our tourSpecific page.
| | 00:30 | Those are the three that they want, one
last go-at before we commit to
| | 00:33 | the final prototype.
| | 00:35 | So, what I am going to do here is
I am going to select my index page.
| | 00:39 | I am going to hold down my Ctrl
key or the Command key on the Mac.
| | 00:43 | I can Shift+Click to select the other pages.
| | 00:46 | I want to make sure that these are
going to be exported out as pretty
| | 00:49 | good quality images.
| | 00:50 | So, I can do this a couple of ways.
I can go to my Optimize panel, or I can go
| | 00:54 | right down in my Properties panel
| | 00:55 | here, and you'll see there is the current
compression setting, so I am going to click on that.
| | 00:59 | You'll see I've got a few basic choices
in here, and actually JPEG-Better Quality
| | 01:03 | is just I what I need.
| | 01:04 | So, I am just going to make sure
that's chosen. And by selecting that option,
| | 01:07 | it means that all the selected
pages will basically be given that
| | 01:11 | optimization setting.
| | 01:12 | So, I've set that JPEG format
before I've gone any further.
| | 01:15 | I am going to my page options here
and choose Export Selected Pages.
| | 01:21 | From here, all I need to do is
pick what it is I want export, what
| | 01:24 | formatting, and so on.
| | 01:25 | So, I am going to go from HTML and
Images just to Images Only. I just
| | 01:29 | want graphics here.
| | 01:30 | You will notice the JPEG extensions
have been left in place, and I think I'll
| | 01:34 | also create a folder for these.
| | 01:37 | I'll call it final_storyboards, and save
them in there, and you notice here I've
| | 01:45 | got the option for Pages.
| | 01:47 | I can override my original choice here.
| | 01:49 | I can choose to export All Pages, the
Current Page or Selected Pages, and that's
| | 01:53 | what we want is the Selected
Pages, and I'll click Save.
| | 01:56 | So, in a few seconds,
Fireworks generates those JPEG files.
| | 02:01 | If I went into my File menu, go to Open,
go to my Chapter 3 folder, there is my
| | 02:11 | final_storyboards, and there they
are: index 1, mission, and tourSpecific.
| | 02:16 | It's also nice to note that Fireworks
is naming them based on the page names, so
| | 02:21 | we have a sense of context there as well.
| | 02:24 | So, there you have yet another way
to deliver material to the client.
| | 02:28 | You can e-mail these files,
| | 02:29 | you could upload them to your web server
and provide URLs - whatever works for you.
| | 02:34 | The point is you've got multiple ways
to keep the client in the loop and to
| | 02:38 | quickly gain approvals or change
requests before you hunkered down for coding, or
| | 02:41 | in our case, the final prototype.
| | 02:43 | Now, while I've used a web
site here as the example,
| | 02:46 | remember, you are not
limited to this particular medium.
| | 02:49 | You could just as easily be building an
interface for a desktop AIR application
| | 02:53 | or a mobile device application.
| | 02:54 | The same concepts apply, perhaps even
more so, because unlike a static web site,
| | 03:00 | AIR and Flex applications
require actual programming.
| | 03:02 | So, you want everything nailed down as
much as possible before you get to the
| | 03:06 | stage where you're coding.
| | 03:08 | To top it all off, once I've got an
approval on this, from the standpoint of my
| | 03:12 | business end of things,
| | 03:13 | I can submit an interim invoice and
start moving forward on the prototype,
| | 03:17 | confident that the client is happy with
what we are doing, and that we are not
| | 03:21 | going to be making any
major revisions down the road.
| | Collapse this transcript |
|
|
4. Multi-Page MockupsAdding a new page| 00:00 | Previously, we've created several
storyboards for our client to review,
| | 00:04 | including some color variations.
| | 00:06 | In the exercises in lesson four, we'll
be fleshing out the storyboards into a
| | 00:10 | set of prototype pages so that the
client has a realistic user experience.
| | 00:15 | Now, I've got the prototype_start.fw.png
file open, and the client has approved
| | 00:19 | a color theme and layout.
| | 00:21 | So, this file only includes
storyboards which match that theme.
| | 00:24 | But if you have a look at the wireframe
again, you'll notice that we have a lot
| | 00:28 | of work ahead of us.
| | 00:31 | Let's do some housekeeping on the file first.
| | 00:32 | I want to check and make sure
that my layers all suitable here.
| | 00:36 | I am just going to expand my Layers panel.
| | 00:39 | I have got my header, my nav, my
content, my footer, wrapper, and
| | 00:43 | background. That's all good.
| | 00:45 | The other pages have an additional
element here, the subnav, which is basically
| | 00:50 | the little header up in here, and
I'll see that in a couple of places.
| | 00:54 | Now, what's worth noting on these
designs is that there's been a lot more work
| | 01:00 | done inside the individual layers.
| | 01:03 | So, if we take a look, for example, in
the tourSpecific layer, and we look inside
| | 01:07 | of our main content,
| | 01:08 | you'll see, because we've got a lot of
information going on, it's been broken
| | 01:12 | out into a sublayer.
| | 01:15 | So, although we've got things a little
bit separated, different pages will have
| | 01:19 | different elements here, the sidebar,
for example, has a trivia section, and it
| | 01:23 | just helps us sort of break
things out more specifically.
| | 01:25 | Now, the first thing I want
to do is set up a master page.
| | 01:29 | We are going to have a variety of pages
in this final prototype, and I want to
| | 01:34 | put the common elements into that master page.
| | 01:36 | Now, in all honesty, I must see the master page
won't contain a lot of information this
| | 01:40 | time around because I want to have the
pages fluid in terms of their vertical
| | 01:45 | dimensions, so some pages will be
shorter, some pages will be longer.
| | 01:49 | So, we won't be putting too much in there;
| | 01:51 | things like the footer, for
example, will be part of each page.
| | 01:53 | Now, that doesn't mean we are going
to have multiple versions of the same
| | 01:57 | object on different pages.
| | 01:58 | We'll be using some other a little
technique, like sharing layers, to keep our
| | 02:02 | asset management under control.
| | 02:05 | So, let's begin this process
of working with the master page.
| | 02:09 | I am going to go up to my index page
and really, the main element here that we
| | 02:13 | want to share is that background.
| | 02:15 | So, I am going to go ahead and create a
duplicate of my index page, and on that
| | 02:22 | duplicate, I am going to change it to
"common" as a name, and I'm really literally
| | 02:29 | going to get rid of
everything except for the background.
| | 02:32 | So, I am going to go into each of these
layers, and I am going to go ahead and
| | 02:35 | remove all the artwork.
| | 02:39 | Kind of a scary concept, but necessary.
| | 02:50 | I will go back to my content.
I've got some sublayers in here so.
| | 02:57 | One of the nice things about selecting
the layers, even with their sublayers, is
| | 03:00 | it will only deletes the
element inside the layer itself.
| | 03:04 | It's kind of a double-edged sword
there. It allows you to delete specific
| | 03:07 | elements or specific
content and specific layers,
| | 03:10 | but when you're dealing with a layer
that has sublayers in it, you are going to
| | 03:14 | have to go into them one of the
time to remove that information.
| | 03:17 | So, we are down to our background.
That's all that we need in there.
| | 03:21 | I am going to collapse all these fellows down.
| | 03:25 | Now, because the background
really is the only element we need,
| | 03:28 | the actual layers are not going to be
utilized inside the master page either, so
| | 03:32 | we are going to get rid of those guys as well.
| | 03:36 | Keep it nice and simple.
| | 03:37 | Now, all I am going to do is convert
this to a master page. There we are.
| | 03:49 | Now, on the other pages, I am going to
hop in here, and we need to do a little bit
| | 03:53 | of housekeeping here, too.
| | 03:54 | Now, you'll notice all of a sudden we
have a Master Page layer on these pages.
| | 03:58 | As soon as you designate a page as a
master page, it automatically gets added to
| | 04:02 | all of your other pages.
| | 04:03 | So, in this case here, there is my background,
| | 04:05 | I am going to delete that background
layer, do the same thing for my mission
| | 04:10 | page, and we have a slightly
different variation on that.
| | 04:15 | So, we are going to lose one
little element, and that's okay.
| | 04:18 | We'll fix that up in minute.
| | 04:21 | In fact, what I'll do, thinking forward
here, I am going to go ahead and select that
| | 04:26 | white background and copy it, so Ctrl+C
or copy, before I doing any deleting, and
| | 04:34 | then on the tourSpecific
page, I'll do the same thing.
| | 04:37 | There we go. So that gets
rid of that element as well.
| | 04:40 | Now, you know as we lost our
white background. That's okay.
| | 04:43 | We'll be fixing it up in a minute.
| | 04:44 | So, now I've got three pages.
| | 04:48 | I'll rename my index page to just
plain-old index, and I'll move into my
| | 04:56 | mission page, and I'll drop in my
background rectangle inside my main content
| | 05:01 | area, just so I've got it available.
| | 05:04 | Now again, all I need to do to
relocate that in the stack is just hold down
| | 05:09 | the Ctrl key or the Command key on
the Mac, and it will eventually work its
| | 05:14 | way all the way down.
| | 05:15 | Make sure everything is showing up.
| | 05:25 | Then we'll just change places
here with the footer, just like that.
| | 05:29 | Same thing with the tourSpecific page,
go to main content, paste in that
| | 05:35 | rectangle, and we'll just bring it down.
| | 05:41 | In this case, it's actually a bit longer, so
I'll go ahead and scale that. There we go.
| | 05:49 | So, that particular element needs to be
on the individual pages, just so that we
| | 05:52 | can customize the length of the page.
| | 05:54 | All right, master page is in place
- pretty simple one in this case.
| | 05:58 | But at least it covers off that main
common element, which is going to be that
| | 06:01 | gradient background.
| | 06:03 | The next thing we'll be working on is
sharing certain layers to specific pages.
| | Collapse this transcript |
| Sharing assets to pages| 00:00 | With the master page in place one of the
other things we want to try to avoid is
| | 00:04 | having duplicate assets
throughout all of our pages.
| | 00:07 | I want to minimize these elements
because the more assets you have in a page,
| | 00:11 | the larger the file is going to and
the more page level alterations you may
| | 00:14 | need to make if you decide to make a change
to an element that appears on several pages.
| | 00:19 | So, we are going to share some of the
layers that we see in the index page with
| | 00:22 | other pages that are currently in our design.
| | 00:25 | Now, the areas that are going to appear
pretty much everywhere are going to be
| | 00:28 | our header, our navigation, to
a degree, and also the footer.
| | 00:33 | Those elements are all going to be
available on all the different pages.
| | 00:37 | Let's start off by taking a look in
that header layer and see what we have.
| | 00:42 | We have some old design variations on
the logo, and then we have the actual
| | 00:46 | final version, which is visible at the moment.
| | 00:49 | So, we are going to get rid of this sublayer.
| | 00:51 | I won't need that. And this particular layer
is going to be shared to all the other
| | 00:56 | pages we have in the design.
| | 00:58 | Now, we can do this in two different ways.
| | 01:00 | We can share it first and then
make some changes to the other pages.
| | 01:03 | I am going to go ahead and remove the
header layer from the other pages first.
| | 01:06 | It just makes it little
easier to select things.
| | 01:08 | So, I'll go to my mission page,
select my header layer, and trash it.
| | 01:13 | Again, you may have to click more than
once, because the first time you click the
| | 01:16 | trashcan it deletes the contents of the layer.
| | 01:19 | The second time you click it, it deletes
the layer itself. tourSpecific, same thing.
| | 01:24 | Go back up to my index page, go to my
Layer Options and choose Share Layer to Pages.
| | 01:32 | You might remember doing this
when we were working in the wireframe.
| | 01:36 | In this case here, the header needs to
be on every page, so I am just going to go
| | 01:40 | ahead and select both the pages and click Add.
| | 01:44 | When I click OK and I move to my other
pages, you'll see that my logo is back in
| | 01:49 | place, and it's editable and
controllable from any page, unlike elements in the
| | 01:54 | master page, which can only
be edited from the master page.
| | 01:58 | Elements inside of a shared layer can
be selected and edited on any page, and
| | 02:04 | those changes are updated on all
the pages that share that layer.
| | 02:07 | All right, so that's one step.
| | 02:10 | The next one is - go back up to my index page -
| | 02:13 | the next one we want to share is the nav,
which is the elements we have inside it here.
| | 02:16 | So, again I am going to go to my mission
page, and let's see where my navigation is.
| | 02:21 | There it is there. It's got a different name
in this case, but we are going to delete it anyway, so
| | 02:26 | go ahead and get rid of that,
| | 02:28 | and then go to the
tourSpecific page and the same idea here.
| | 02:31 | We'll get rid of that again.
| | 02:37 | On the tourSpecific page, we have a
slightly different setup. You'll notice we have
| | 02:40 | some subnavigation here.
| | 02:41 | We are going to be sharing this layer
eventually as well, but to other specific pages.
| | 02:46 | So, for the time being, I am
just going to leave this alone.
| | 02:49 | What I will do is rename it.
| | 02:51 | I am going to change it from nav bar to
full nav, so at least it differentiates it
| | 02:57 | a bit more accurately from the other pages.
| | 03:00 | Back up to my index page, and I will
make sure that my navigation layer is
| | 03:05 | selected and choose, from the
Options menu, Share Layer to Pages.
| | 03:11 | In this case here, mission is the
only one we are going to be sharing.
| | 03:15 | Click OK. And so now if I hop to mission
you can that it sharing there as well.
| | 03:20 | Now, one of the things to note about
sharing layers is when you share a layer, it
| | 03:25 | basically gets stacked on top of the last layer.
| | 03:27 | So, you notice now my
navigation is kind of obscuring my logo.
| | 03:30 | Not a big deal; these layers work
the same way as traditional layers.
| | 03:35 | I can grab the navigation and drag it down
below, and now I'm back to the way I need to be.
| | 03:41 | The last thing I want to share is the
sidebar, this element right in here.
| | 03:44 | So, if I just go ahead and locate my
sidebar, and in fact, here it actually is
| | 03:50 | buried inside the main
content - tisk, tisk, tisk.
| | 03:53 | Let's see here. Monthly special is okay.
| | 03:55 | It had been dropped in there.
| | 03:56 | So, I am going to go ahead
and separate this out now.
| | 03:59 | The reason I'm doing this is that
sublayers can't be shared independently from
| | 04:03 | the main parent layer.
| | 04:04 | So, while it's nice for organization, if
you are going to share it, it's going to
| | 04:08 | actually be its own parent
layer in order to function that way.
| | 04:12 | So, I am going to go ahead and select
that monthly specials and drag it upwards.
| | 04:16 | I am just going to drop it
between my navigation and main content.
| | 04:21 | So now it's its own layer, and you can
see, the only things that are selected are
| | 04:24 | the elements inside the monthly specials.
| | 04:27 | So I am going to select that.
| | 04:28 | I am going to rename that "sidebar."
| | 04:31 | I am going to go ahead and share that as well.
| | 04:36 | Now this one is going to be pretty
common, so I will go ahead and share this to
| | 04:40 | both of my other pages and click OK.
| | 04:44 | So, those elements are taking care of.
| | 04:46 | Each one of the pages has those elements,
and I am just going to go ahead and check.
| | 04:49 | You'll see, there is my sidebar
there and another sidebar here.
| | 04:54 | I am going to remove that one, and
I am going to go to my tourSpecific,
| | 04:58 | and there it is again.
| | 05:00 | I'll remove it from the design as well.
| | 05:03 | So, now we've got just the one shared layer.
| | 05:07 | It's not too important whether it's
stacking order because it's not overlapping
| | 05:10 | anything to begin with.
| | 05:13 | Now, one last thing I'd like to do,
in the spirit of asset management, is
| | 05:16 | deal with the footer.
| | 05:18 | Right now, the footer is grouped in
terms of the graphics, but all the text
| | 05:22 | elements are all separate pieces here.
| | 05:24 | Now, I am going to be reusing the
footer over and over again, and this is going
| | 05:27 | to appear in different positions on different
pages because the page lengths are going to vary.
| | 05:32 | So, rather than have to worry about
all these individual elements, what I am
| | 05:36 | going to do is convert all the
footer content into a symbol.
| | 05:39 | So, I am going to choose the
footer layer, just like so.
| | 05:42 | Then I am going to go and press F8, and I am
going to call this, pretty obviously, "footer."
| | 05:48 | I don't need to enable 9-slice scaling on this.
| | 05:51 | I don't need to save this
to the Common Library either.
| | 05:53 | It's unlikely I'll use it in
anything but this one specific project.
| | 05:57 | So, I'll just go ahead and
click OK, so now I have got a symbol.
| | 06:00 | What I am going to do is go on my mission page.
| | 06:04 | I am going to select the original
footer information and delete it.
| | 06:08 | I'll open up my Document Library
and drag in my footer symbol and just
| | 06:13 | reposition that wherever
I need to do it, like so.
| | 06:20 | Do the same thing on my index page:
make sure the footer is selected, delete
| | 06:23 | content of the footer,
drag in to my footer symbol.
| | 06:30 | There we go. With the help of smart
guides, I got that lined up nice and neat.
| | 06:34 | Now, we have many other pages that need
to be incorporated into this design, but
| | 06:38 | we are just going to go ahead and
bring in one more at this point, to show you
| | 06:42 | how I am going to import page content.
| | 06:44 | Now, this may sound a little bit
contrived just for the purposes of the lesson,
| | 06:48 | but there are going to be situations
where you're working with other designers,
| | 06:51 | being supplied files, whether it's
artwork or full-page layouts that need to be
| | 06:55 | incorporated into the prototype.
| | 06:57 | So, we'll walk through the process of
importing one of these finished pages and
| | 07:01 | show you what I am going to go
through to get that sorted out.
| | 07:03 | What I am going to do is go to my File
menu and choose Import, and the page I am
| | 07:09 | going to import is called tourMain.
| | 07:10 | It will be basically be adding to the
drilldown hierarchy of our tour section,
| | 07:16 | which has sort of it's own set of subpages.
| | 07:17 | So, I am going to select that file,
and you can see over here in the preview,
| | 07:21 | lots of content, no header, no
sidebar. We still have footer in here,
| | 07:26 | but it will deal with that
when we get the page popped in.
| | 07:29 | So, I am going to choose Open, the
preview box will come up, and it's
| | 07:32 | really important for this process that the
Insert after current page option is selected.
| | 07:38 | We don't want to drop the
stuff into an existing page.
| | 07:40 | We want Fireworks to generate a brand-
new page for us, based on this content.
| | 07:46 | So, I am going to choose Insert, and you can
see it's brought in with the original name of the page.
| | 07:52 | I am just going to change the stacking
order of the pages a little bit so they
| | 07:57 | make a little bit more sense.
| | 07:59 | If we take a look at the page itself,
you can see, there is all our content.
| | 08:04 | No sidebar or header yet;
we'll fix that in a minute.
| | 08:07 | You'll also notice that we have footer in here.
| | 08:11 | Now, as I mentioned, there was
footer in that original design.
| | 08:15 | What's happened is that
this footer is also a symbol.
| | 08:18 | Now, if you take a look over at the
Document Library, you are going to see we now
| | 08:21 | have two footer symbols:
| | 08:23 | one that's called the Graphic
and one that says Graphic Imported.
| | 08:27 | The imported one is not the expensive
European version; it's actually just a copy
| | 08:33 | that came with the file so
it's been labeled as imported.
| | 08:36 | To reduce any kind of confusion over
having multiple symbols with the same name,
| | 08:42 | we are going to select that symbol, and
we are going to trash it, and watch what
| | 08:44 | happens onscreen when I do
this. Delete the symbol,
| | 08:49 | you delete the asset on the page.
| | 08:51 | That's fine. We don't need it in
there. We've got our own version of it.
| | 08:54 | But just remember, if you do delete
symbols from the Document Library, you are
| | 08:57 | also deleting any iterances of them on the pages.
| | 09:01 | So, I am going to drag in my new version
of my symbol here, reposition that, like so.
| | 09:09 | So, now we are dealing with the
same symbol on all those guys.
| | 09:12 | As I mentioned, we've got
some sharing to do here.
| | 09:15 | The header and the sidebar need to go
into this page, as well as some navigation.
| | 09:18 | So, I am going to hop up to my index
page, and I am going to go and locate.
| | 09:22 | I'll just collapse my Document Library,
and there is my navigation, which is
| | 09:29 | going to be a bit different on the tour page.
| | 09:31 | So, we are not going to worry about that
layer, but I do want my sidebar, so I am
| | 09:35 | going to go ahead and select it, go to
my Options menu and choose Share Layer to
| | 09:39 | Pages and add the tourMain to our shared pages.
| | 09:45 | Do the same thing for the header.
| | 09:46 | So now, if I take a look at tourMain
I've got a header, and I've got sidebar.
| | 09:57 | I don't have any navigation yet, and as
I mentioned, the navigation on the tour
| | 10:00 | page this is a little bit different.
| | 10:02 | So, on the tourSpecific page, we've
actually got subnavigation in our
| | 10:06 | main navigation area.
| | 10:07 | I want to share this form of
navigation to my other tour pages.
| | 10:11 | So, I am going to go into my Layers
panel, I am going to select my full nav,
| | 10:15 | and I am going to go ahead and choose
Share Layer to Pages, and we want to
| | 10:20 | share this with tourMain.
| | 10:21 | We'll add that and click OK.
| | 10:25 | So, now if I switch over to
tourMain, there is my navigation.
| | 10:28 | Now, again, we have that stacking issue,
because we added in the full nav last, it
| | 10:33 | basically went to the top of the stack.
| | 10:36 | So, what I am going to do is just
literally drag it down underneath the header.
| | 10:39 | Now, we've got the same look for our header.
| | 10:43 | So, we've gone through the process here
of importing an entire document into our
| | 10:46 | existing Fireworks file.
| | 10:48 | Made some changes to it, customized it
by sharing some layers from our existing
| | 10:51 | document, dropped in the
footer symbol, and so on.
| | 10:55 | The basic process for adding to the
rest of the prototype, if you are dealing
| | 10:58 | with other designers, is
very, very similar to this.
| | 11:01 | So, inside your lesson 4 folder, among
other files, you are going to find these three:
| | 11:08 | mockup_exploreres_final, mockup_
resources_final and mockup_tourWine_final.
| | 11:15 | Take some time between now and the
next lesson to try your hand at importing
| | 11:19 | these files and see how you do.
| | Collapse this transcript |
| Editing component symbols| 00:00 | Thanks to work on my part and yours,
these storyboards are really coming together.
| | 00:05 | Let's take a look at this file and see
what pages we've got to work with so far.
| | 00:09 | Here's our index page, our mission page,
the beginnings of a contact page, a
| | 00:15 | booking page for tours, complete with a
booking form, resources, explorers, and
| | 00:24 | three pages are dedicated to the
touring section, our Main tour page, a more
| | 00:29 | detailed page, and then a very
specific page on one specific tour.
| | 00:33 | So, we've done a really good job here
of addressing all of the main navigation
| | 00:37 | and also some of the subnavigation as well.
| | 00:39 | In this movie, we're going
to be concentrating on forms.
| | 00:44 | Oh, I know what you're thinking, exciting stuff!
| | 00:47 | What designer doesn't just love creating forms?
| | 00:50 | Seriously though, forms can
be a large part of a web site.
| | 00:53 | They add that two-way communication
between visitor and company, and mocking
| | 00:57 | them up into storyboards gives you a
chance to figure out the layout and make
| | 01:01 | sure no form elements are missing
before you spend time coding the forms.
| | 01:05 | Now, you can use the Common Library symbols to
mock up the forms, as we did in the wireframe.
| | 01:10 | You may even want to create your own custom
symbols to address specific form elements.
| | 01:14 | But in our case here, because we
spent such a great deal of time putting
| | 01:19 | together the contact form in the first
place in the wireframe, we're going to
| | 01:23 | use a little bit of a cheat.
| | 01:24 | I'm going to hop over to my wireframe,
and I'm on my contact page at the moment,
| | 01:28 | I'm going to expand my contact form layer here.
| | 01:33 | I'm just going to click once to
select everything that's in the form layer.
| | 01:36 | This is one of the joys of
putting content into specific layers;
| | 01:39 | one click of the actual layer grabs everything.
| | 01:43 | In fact, the only thing I don't need
is the grid autoshape at the bottom, so
| | 01:47 | I'm going to hold down my Ctrl key to
deselect that, and I'm going to press
| | 01:52 | Ctrl+C. Hop back over to my prototype, and
I've already got a form layer plugged in here.
| | 01:59 | So, all I need to do is select it and
press Ctrl+V, and pretty quickly, all
| | 02:05 | those form elements get brought in.
| | 02:07 | They're not in exactly the right spot,
but a lot of the work is already done.
| | 02:11 | So, I'm going to zoom in a little bit
here, and while all these form elements
| | 02:14 | are still selected, I'm going to use
my Shift key, and my arrow keys to put
| | 02:18 | these guys in place.
| | 02:21 | Something along there looks pretty
good, so a real quick way of bringing
| | 02:26 | these elements right into the design
without having to add them in manually
| | 02:31 | or anything like that.
| | 02:32 | So, in a few seconds,
we've got our contact form.
| | 02:35 | Now we're going to take a
look at that booking page again.
| | 02:38 | The reason is, if you think back to the
wireframe, in fact, you can see it right here,
| | 02:43 | we've got these little calendar
symbols that are being used to indicate the
| | 02:47 | start and end dates.
| | 02:50 | This is another example of where the
wireframe has come in kind of handy.
| | 02:53 | We have these little symbols
representing the vacation dates, but there's
| | 02:57 | stuff missing here.
| | 02:58 | There's no way to fill in a date.
| | 03:01 | There's no field left to
actually show a reserved date.
| | 03:05 | So, while the wireframe symbols were
okay, they aren't really complete enough.
| | 03:09 | They're not realistic enough.
| | 03:10 | Normally, you expect to see some kind
of text field where your date is left in.
| | 03:13 | So, we're going to make a couple
of changes here to customize this
| | 03:18 | particular part of the form.
| | 03:20 | So, what we're going to do is get rid
of these two symbols, because they're not
| | 03:24 | really suitable for this storyboard.
| | 03:26 | If we make them really small to act as
sort of icons, they're going to be so
| | 03:30 | hard to read that they're not worth putting in.
| | 03:32 | So, I'm going to delete them.
| | 03:32 | I'm also going to get rid of
my start and end dates here.
| | 03:38 | Again, we're going to rely on some
existing symbols to make life a little easier.
| | 03:41 | I go up to my fields. There we go.
| | 03:44 | I'll just grab the nearest one, my
Email field, and I'm going to hold down my
| | 03:48 | Alt key or my Option key on the Mac,
press the arrow key once, gives me a copy,
| | 03:53 | and I'm just going to shift it all the way down.
| | 04:00 | I'll just do the same thing
with that exact same field,
| | 04:05 | align these guys up, so they
match with the other fields.
| | 04:13 | One other thing I like to do with this is,
obviously, customize these two fields.
| | 04:16 | So I'm going to select it, go to my
Symbol Properties, change the label value to
| | 04:21 | Start Date, change the other one to End Date.
| | 04:32 | I think I'll also select both of
these and make them a little narrower.
| | 04:36 | Now, the reason I want to do that is
very often in any kind of form that uses a
| | 04:45 | calendar, there's some
kind of icon for calendar.
| | 04:47 | So, I want to drop a calendar
icon beside both of these two fields.
| | 04:51 | Now, I could use the grid autoshape
for this, but there's actually a handy
| | 04:55 | little symbol that I'm going to make use
of from one of our wireframe templates.
| | 04:59 | So we're going to quickly go, File >
New from Template > Wireframes > Travel,
| | 05:07 | and we'll open that up.
| | 05:10 | This is one of the reasons it's a
great idea to experiment with the different
| | 05:12 | files or elements that come with
your software, because by just sort of
| | 05:16 | exploring these different things,
I've found, what do you know, I've got a
| | 05:20 | calendar symbol right there.
| | 05:22 | So, I'm going to go ahead and unlock that
area, and select one of those calendar icons.
| | 05:27 | I'm going to copy it.
| | 05:28 | It's currently a symbol.
| | 05:30 | I'll close down my wireframe.
| | 05:32 | I don't need to save it, and I'll just
press Ctrl+V to drop it into my form, and
| | 05:39 | there it is there, pop it in, and
just Alt+Click to create a copy.
| | 05:45 | And now I've got two little icons that
act as my calendar launchers, basically.
| | 05:50 | So, I'm going to go ahead and zoom in
a little bit, just see how we're doing
| | 05:54 | for alignment here.
| | 06:03 | And that looks pretty good!
| | 06:07 | Now I can go further with these.
| | 06:09 | I can open up the symbol itself,
and I can customize a symbol.
| | 06:13 | It's basically a whole
series of vector elements.
| | 06:15 | I can go in here and color-code it so
it matches with my color themes as well.
| | 06:19 | I've got lots of options here, in
terms of what I can do with it.
| | 06:22 | But the great thing is it only took
me a few seconds to put in a customized
| | 06:27 | calendar icon without too much work on my part.
| | 06:30 | My feeling is, whenever you can find a
way to save time and do just as good a
| | 06:33 | job in the process, go ahead and do it.
| | 06:37 | That wraps up this lesson.
| | 06:38 | You've got our storyboard
coming together fairly well.
| | 06:41 | We need to add a bit of interactivity
though, so that we can make the storyboard
| | 06:45 | at least work, to some degree, for the client.
| | 06:47 | And that's what we'll be working on next.
| | Collapse this transcript |
| Adding basic interactivity| 00:00 | We're getting really close to the
point where we're going to be turning this
| | 00:03 | into an interactive document.
| | 00:04 | I want to run this by the client one
more time, but I want to get them somewhat
| | 00:08 | of an interactive experience.
| | 00:10 | So, we're going to go ahead and
address the main navigation area and add some
| | 00:15 | navigation in for this prototype.
| | 00:18 | So we're going to start off with the
header. The logo in the header is going to
| | 00:22 | take us back to the main page at all times.
| | 00:25 | So I'm going to select that and just
right-click and choose Insert Hotspot.
| | 00:30 | I'm not planning on doing any rollover effects
with the logo, so a hotspot will do just fine.
| | 00:35 | Once the hotspot has been added, go
ahead and add the link. Make sure that I'm
| | 00:40 | grabbing a link below the dividing
line, really important to note that.
| | 00:44 | The other thing is that logo is on
all the other pages, and while the logo
| | 00:48 | itself is being shared to these
pages, currently, that hotspot is not.
| | 00:53 | So, before we go much further, I'm going
to go ahead and create a new sublayer in
| | 00:57 | the Web layer, and make sure that that
hotspot is inside the Web layer itself.
| | 01:02 | Now with that in there, we need to go
and tell Fireworks to share it, so we'll
| | 01:07 | choose Share Layer To Pages.
| | 01:11 | Actually, we're sharing this to all the pages.
| | 01:13 | So I'm just going to go ahead and select
all these guys and add them, and click OK.
| | 01:19 | So, that navigational component, you can see
that hotspot showing up on all the pages now.
| | 01:25 | Now the next area is our main navigation.
| | 01:27 | We've actually got the main
navigation on the index and mission page and
| | 01:31 | a couple other pages
| | 01:32 | that looks like we see here,
just the five major links.
| | 01:36 | Then we've also got
navigation on the Tour pages,
| | 01:38 | that has a little more extensive
navigation to it, some subnavigation.
| | 01:43 | We're going to start by adding in
the navigation here on the main page.
| | 01:47 | Now I could just go ahead and add
hotspots to these five links, but I know down
| | 01:51 | the road, I'm going to end up
turning these into rollover effects.
| | 01:54 | So, rather than add hotspots now and
delete them later, just to add in slices,
| | 01:59 | we're going to add in the slices at this point.
| | 02:02 | Because we're working with rollover effects,
the ideal thing to use is a button symbol.
| | 02:06 | Now, when we're dealing with these
particular links - I'm going to zoom in on
| | 02:10 | these a bit, so we can see them a bit better,
| | 02:12 | you notice we've got a main piece
of text and sort of a substring or a
| | 02:16 | subheading for the links.
| | 02:18 | Now, you might recall from working in
the wireframe that button symbols only
| | 02:22 | handle one string of text properly.
| | 02:25 | So, we're going to need
to do a couple things here.
| | 02:27 | We want to have that customized
subtext on every single button.
| | 02:31 | We want to make sure that the main
label is something we can edit and change if
| | 02:36 | we decide to later on.
| | 02:38 | So, we're going to have to create,
believe it or not, a button symbol for each
| | 02:42 | of our main navigation elements.
| | 02:44 | Sounds like a bit more work, because
in many cases, you can use one button
| | 02:48 | symbol to handle all your navigation
needs, but that subtext is what's going to
| | 02:53 | make these a little more challenging.
| | 02:55 | We want to make sure that we've
got control over the main label.
| | 02:58 | So we're going to be creating five main button
symbols, one to represent each of the main links.
| | 03:02 | So, I'm just going to grab my Pointer tool.
| | 03:05 | I'm going to select my Tours button here.
| | 03:10 | You notice at this moment that
everything is currently grouped. And that's fine.
| | 03:12 | We can make some changes
once we've created this symbol.
| | 03:15 | So I've got it selected.
| | 03:16 | I'm going to press F8, and I'm
going to call this "tour button."
| | 03:23 | I want this to be a Button symbol.
| | 03:26 | The options for 9-slice scaling and
Common Library, we're not going to enable
| | 03:29 | either of those because we're not
likely to scale this to begin with.
| | 03:33 | And again, we're not going to
utilize this in any other document.
| | 03:36 | So we're just going to keep it nice and simple.
| | 03:38 | I'm going to click OK.
| | 03:40 | My slice gets added automatically.
| | 03:42 | Now, we've got to go into
the slice and do a bit of work.
| | 03:47 | First of all, I'm going to ungroup this.
| | 03:48 | So Ctrl+Shift+G or Command+Shift+G on the Mac
allows me to ungroup some of the elements.
| | 03:54 | So now I can select that
individual piece of text.
| | 03:57 | You notice it is an individual piece of text.
| | 04:00 | I want to convert this to a path, so we
don't run into any issues with their labeling.
| | 04:04 | So, I'm going to select that, go out to
my Text menu and choose Convert to Paths.
| | 04:09 | All right, so now that's just another
graphic, just like everything else that's
| | 04:14 | inside of this button.
| | 04:15 | I'm going to deselect everything that's in here.
| | 04:18 | I'm going to go down to my
Properties panel and choose the over state.
| | 04:22 | Now, currently, nothing there because
we don't have anything in the over state.
| | 04:26 | It's a brand-new button.
| | 04:26 | So, I'll choose Copy Up Graphic.
| | 04:29 | What I want to do here is change the
color of the label and also the star here.
| | 04:40 | I also like to change the color of this path.
| | 04:42 | Now, notice how each individual piece
is essentially one separate element.
| | 04:47 | So, selecting this could be a little
bit of a challenge, so I'm going to go
| | 04:50 | ahead and select the whole thing.
| | 04:55 | Go to Modify, and join them as one big path.
| | 05:01 | So, now it's one big object,
rather than individual objects.
| | 05:05 | Select Tours, select the subpath,
and select the substring and the star.
| | 05:11 | with those three elements selected,
| | 05:12 | I'm going to go over to my Swatches
panel, and I'm just going to select that
| | 05:16 | bright yellowy-orangey-gold color.
| | 05:19 | That will change those
three elements, just like that.
| | 05:22 | So now, if I go back to my index page,
and if I turn off my slices for a minute,
| | 05:29 | go to Preview, you can see as I mouse over
it, those three elements are changing,
| | 05:35 | which is what I want to see.
| | 05:37 | Go back to my Original view, and you'll
notice inside the Text labeling area in
| | 05:42 | the Properties panel,
| | 05:43 | you see the word "Tours."
| | 05:44 | So I could change the labeling for this
button if I wanted to, to something else.
| | 05:50 | Keep in mind that that's
the only thing that'll change.
| | 05:52 | Remember, follow our bliss.
| | 05:53 | The little substring here is
always going to be the same.
| | 05:56 | That can't be edited.
| | 05:58 | So that's the concept for the symbol.
| | 05:59 | We'll do one more of these together.
| | 06:01 | I'm going to go into my Mission
button, and again, I'm going to press F8.
| | 06:06 | I'm going to call this "mission button."
| | 06:11 | Select Button as the Type, click OK,
double-click on the symbol, and we're going
| | 06:17 | to go ahead and select this.
| | 06:19 | Press Ctrl+Shift+G to ungroup it.
| | 06:22 | Grab my Subselection tool, grab my
little string of text there, and we'll go and
| | 06:28 | convert that to path.
| | 06:32 | Again, notice that
they're all separate elements.
| | 06:34 | So, what I want to do with that, as well,
is go to the Modify menu, Combine Paths
| | 06:39 | > Join, so it's one big path.
| | 06:43 | Then I can hold down my Shift key,
select my word "Mission," and "star."
| | 06:48 | They're all easily selectable. That's fine.
| | 06:50 | So, I'm going to go to my
Over state, Copy the Up Graphic.
| | 06:55 | Select Mission, select the path for the
substring and select the star and fill in.
| | 07:02 | If I go back to index again,
just do another quick preview,
| | 07:05 | there is Tours, and there is Mission,
so the rollovers are working just fine.
| | 07:09 | Now, what I haven't done with these, if I go
back to my Original state, turn on my slices,
| | 07:14 | I haven't added any navigation to them yet.
| | 07:15 | So, I'm going to my Link
box in my Properties panel.
| | 07:19 | The Tours is going to link to the tourMain page.
| | 07:22 | Mission is going to link to the mission page.
| | 07:26 | Because these are all objects that are
on a shared layer, if I move through my
| | 07:30 | other pages, like Mission or Contact,
you'll see that they are also available
| | 07:34 | inside of these pages as well.
| | 07:36 | Where you won't find them at the moment
will be the Tour pages, because remember,
| | 07:39 | we have a separate navigation system there.
| | 07:43 | Okay, I'm going to go back to this.
| | 07:45 | Now, I've done two of them with you.
What I'd like you guys to do is go ahead
| | 07:50 | and convert the other three main
navigation elements to button symbols, just
| | 07:55 | the way we did it here.
| | 07:56 | Then while you're at it, hey!
| | 07:59 | Test your knowledge and your memory, and
go into the Tour pages and see what you
| | 08:04 | can do to create navigation for the
different elements that are in here as well.
| | 08:08 | When we come back, we'll be
turning this into an interactive PDF for
| | 08:12 | client approval.
| | Collapse this transcript |
| Exporting storyboards as PDFs| 00:00 | We're pretty much ready to go here to
convert this into an interactive PDF for
| | 00:05 | our client to review.
| | 00:06 | Just take a quick look at
the pages, see what's happened.
| | 00:09 | On our index page, all of our navigation
has been set to link to different pages.
| | 00:14 | We've also got our logo acting as a
link back to home, and that particular
| | 00:18 | hotspot is shared to all over other pages.
| | 00:22 | You can see that right in here.
| | 00:24 | Here's our shared layer for the hotspot.
| | 00:27 | Now if I move a little lower down to our
Tours section, you can see we've got that
| | 00:32 | navigation in place as well.
| | 00:35 | So, we had a little bit of work to do
here, not as much as you might think,
| | 00:37 | because most of these navigation
buttons, -Mission, Contact, Resources, and
| | 00:41 | Explorers - can be reused from the main
navigation. The symbols are exactly the same.
| | 00:46 | All I had to do was create a new
symbol for my Tours section and also
| | 00:51 | symbols for the subnavigation for the
Tours, and some of those link off to
| | 00:55 | different tour pages.
| | 00:56 | So, we're pretty much ready to go here.
| | 00:58 | I'm just going to go back to my index
page, and we're going to go ahead and
| | 01:03 | export this out as a PDF.
| | 01:05 | So, File > Export. Make sure we've got
Adobe PDF as our choice, and I'm just
| | 01:13 | going to change the name
here, explore_CA_prototype.
| | 01:22 | We're going to go ahead
and export all the pages.
| | 01:25 | For Options, I'm going to make sure
that I've got my password protection on.
| | 01:29 | Click OK and I've also got my
View PDF after Export option checked.
| | 01:34 | So, I'm going to just
click Save. Acrobat opens up.
| | 01:38 | We've got our prompt for a Password. I'll enter
the password, click OK, and there is our file.
| | 01:45 | Now, we can zoom out a little bit,
| | 01:47 | see this a bit better, and there we are.
| | 01:51 | There is our first page.
| | 01:53 | Now, don't expect to see the rollover effect.
| | 01:55 | That color change won't work in the PDF file.
| | 01:58 | I can go ahead and click on Tours.
| | 02:00 | That will take me to the Tours page.
| | 02:02 | We're getting the full image in here the
way Acrobat set up is showing the entire page.
| | 02:08 | So if you want to zoom in, by all means do so.
| | 02:10 | But I'll just click on a couple of
these other options here, like Resources.
| | 02:13 | Here's our Resources page, Explorers,
Contact, and everything seems to be
| | 02:22 | working out quite well.
| | 02:24 | Now, before I send this off to the
client, I've done a test, make sure the
| | 02:27 | navigation is all working, I'm going
to go to my Comments menu and enable
| | 02:32 | Commenting, so that my client can
actually make changes, or make suggestions
| | 02:37 | about the content in the pages.
| | 02:39 | I'm just going to re-save or
overwrite the original file.
| | 02:45 | Once the file is saved, I can e-mail
it off to the client or put it up on
| | 02:48 | acrobat.com for sharing, whatever works for me.
| | 02:51 | All I can do now is wait to
hear back from the client.
| | 02:55 | In the next lesson, we'll respond to any
questions from the client, and we'll be
| | 02:59 | turning this into a fully
interactive HTML prototype.
| | Collapse this transcript |
|
|
5. Adding InteractivityExploring the completed prototype| 00:00 | Previously we added scads of
interactivity to our prototype and exported it out
| | 00:05 | as an interactive PDF for the client to review.
| | 00:08 | Well, the client has had a chance to review
the PDF, and they've got a couple of comments.
| | 00:12 | We are going to take a look at those, right now.
| | 00:14 | Now, the first one you'll see here is on Page 2.
| | 00:16 | There's a little question
here about the rollover colors.
| | 00:20 | And this is my own fault;
| | 00:22 | I forgot to mention to the client they
won't see the rollover effects in the PDF file.
| | 00:26 | Now I don't really need to do anything
special for another PDF here because the
| | 00:30 | rollover effects are already in place.
| | 00:32 | We did that with our button symbols.
| | 00:34 | So when we export an HTML
prototype they'll able to see the rollover
| | 00:37 | effect quite easily.
| | 00:38 | Now there is one other comment here -
we're on Page 4 - which is our booking
| | 00:43 | form for the tours, and the question here is,
what will the scheduling process look like.
| | 00:49 | And this is a really good question.
| | 00:50 | This is an interaction moment
that really needs to be mapped out.
| | 00:54 | What are we going to use? Are we going to
use a pop-up calendar? Those kinds of issues.
| | 00:59 | Now again, we can't build the full
interactivity into Fireworks, but we'll be
| | 01:03 | able to mark this up using some built-
in tools with Fireworks. In fact, I've got
| | 01:08 | just the ticket for creating our calendar.
| | 01:10 | And we've seen it already a little bit,
the original little calendar wireframe
| | 01:14 | that we had inside of this page.
| | 01:17 | So I am going to hop over to Fireworks,
and we're going to go to our bookTour
| | 01:21 | page, and I just want to show you
what this calendar autoshape can do.
| | 01:26 | So I am going to go to my Auto Shapes
panel, and there is that calendar auto
| | 01:31 | shape. And like all that other autoshapes you
just select it and drag it in, and it's in place.
| | 01:38 | Like other autoshapes, we've got
specialized controls here. I am going to zoom
| | 01:42 | in a bit so we can see this a bit better.
| | 01:43 | You'll see all those yellow diamonds
throughout the top part of the calendar,
| | 01:48 | and this is where all the control
is with this particular autoshape.
| | 01:51 | Take a look at what happens when I
move over to the arrow on the right-hand
| | 01:56 | side, where the year is.
| | 01:57 | You'll notice a little tooltip pop-up
that says 2011. And if I click on that
| | 02:02 | diamond, you'll see that the
year changes. Not too shabby!
| | 02:06 | And not only does the year change,
if your watching closely, you'll notice
| | 02:10 | that the numbers for the days change,
so this is actually pointing from a
| | 02:14 | realistic calendar.
| | 02:15 | So what we're going to do here is make
one change to this, just go to September.
| | 02:20 | You can see there is the
September dates, all showing up.
| | 02:23 | And this becomes a really useful little
tool for things like what we're about to
| | 02:28 | do, where we're setting up a booking schedule.
| | 02:30 | The calendar autoshape on its own is
kind of basic. It looks really much more
| | 02:34 | like a wireframe item than anything
else, but we're going to take this basic
| | 02:39 | looking autoshape, and we're going
to customize it so that this is more in
| | 02:42 | keeping with the design of the site.
| | 02:44 | And just to give you a quick taste of
what we can do, customizing wise, I'll grab
| | 02:48 | my Sub-Selection tool, and as I move
my Sub-Selection tool over the calendar
| | 02:52 | shape, you'll notice that all the
different objects are selectable,
| | 02:56 | right down to the numbers and the
individual blocks for the dates. I can select
| | 03:01 | any one of these, for example, I'll
grab them, banner for the year, and at that
| | 03:05 | point, I can go down into my
Properties panel and start making changes,
| | 03:09 | change colors, change strokes, add in
textures - whatever I want to do, and it's quite
| | 03:15 | easy to do, just by sub selecting
different elements inside the autoshape.
| | 03:19 | Now we're going to be, as I said,
customizing this, but before we do that, I want
| | 03:23 | to show you a quick example of what
this is going to look like in the long run.
| | 03:27 | There is kind of our end result.
It looks significantly different from the
| | 03:37 | original auto shape that we see
down here in the autoshapes panel.
| | 03:40 | But that's only a part of it.
| | 03:42 | I am going to turn on my slices.
| | 03:43 | You will notice here I have somewhat
painstakingly added slices over each one of these buttons.
| | 03:48 | Now why, you might be asking, are
we doing that? Well, here's why.
| | 03:50 | I am going to click on the Preview,
turn off my slices, and take a look at what
| | 03:58 | we get, complete interactive
rollover effects for date selection.
| | 04:03 | So we're going to customize our
calendar so that it looks just like this.
| | Collapse this transcript |
| Creating an interactive calendar from an Auto Shape| 00:00 | Last time we reviewed the comments from
our client in the PDF file, and they had a
| | 00:06 | couple of questions. One specifically
was about the interaction for booking
| | 00:10 | tours: what are the steps going to be?
| | 00:11 | How are they to book their dates?
| | 00:14 | So we got a quick solution for this
actually, and that's using an autoshape
| | 00:17 | inside of Fireworks
called the calendar autoshape.
| | 00:19 | Now I've got my final version up here
on the screen, but I am going to show you
| | 00:22 | how to customize the basic autoshape to
look a little bit more like what we see
| | 00:26 | here onscreen right now.
| | 00:28 | So I am just going to go ahead and
press Ctrl+N for a new document. 300x300 is
| | 00:33 | fine in this case. And I am going to
open up my Auto Shapes panel, and there is
| | 00:40 | the Calendar autoshape. I'm just going to
go ahead and drag that on to the canvas,
| | 00:44 | and I'll just reposition this a little bit.
| | 00:47 | I think I'll change my month to September.
| | 00:52 | You notice that the dates all update as
well, so it's kind of a nice little feature.
| | 00:57 | Let's look at a few different elements
for customizing this. The first thing I want
| | 01:01 | to start with is rounding off the corners.
| | 01:04 | I am going to grab my Subselection
tool because we've got whole series of
| | 01:07 | grouped vector objects in here.
| | 01:10 | So I am going to go ahead and select
the top banner. I am going to select that
| | 01:13 | upper-right corner, and
you'll see it goes solid like that.
| | 01:17 | I am going to call on another panel,
the Path panel, help me out with this.
| | 01:21 | Now down about just over halfway
down on the Path panel, you'll see this
| | 01:25 | section called Edit Points.
| | 01:27 | I am going to choose the command at the
very end of the first row called Fillet
| | 01:31 | Points, and this gives me the ability
to set a corner radius, and 10 pixels is
| | 01:37 | pretty good for this, so I am going to click OK.
| | 01:40 | Here you see one of the messages
you'll get when you try to customize an
| | 01:45 | autoshape, like we're doing right now.
| | 01:47 | The fact is that because many of the
vectors inside an autoshape are tied into
| | 01:50 | JavaScript behaviors, making changes to
the vector shapes themselves can cause
| | 01:56 | some issues with either the
presentation of the information, or you may find
| | 02:01 | that things don't behave as you would expect.
| | 02:03 | Fortunately for you guys, I've done the
trial and error with this calendar shape
,
| | 02:08 | and for what we're going to be doing, we
don't need to worry too much about this
| | 02:11 | message, so I am going to go ahead and
click Don't show again and click OK.
| | 02:17 | And if we zoom in a little bit, you can
see that we've got that rounded corner
| | 02:22 | now, here, and it also shows that we
have another container box here, so I am
| | 02:27 | select that one, and basically do the
same thing. Select the rectangle, click
| | 02:31 | on the control point, and then go back
into my Fillet Points and use the same
| | 02:37 | radius, and that's how you
round the corners on this rectangle.
| | 02:41 | Now you do this for all four sides,
obviously, and it gets a little tricky
| | 02:45 | because you have got multiple objects
to be aware of, but I wanted to show you
| | 02:49 | that starting process.
| | 02:50 | Let's take a look at some of the other
shapes that are in here, and see what we
| | 02:53 | can do to customize these as well.
| | 02:55 | The year area and the month area, I
want them to stand out a little bit as well,
| | 03:00 | so I am going to go ahead and select
those, and I'm going to change their color.
| | 03:04 | I pick from my color choices here, from
our custom swatches, and then I am going
| | 03:10 | to go ahead and add some texture to
make this look a little more realistic,
| | 03:14 | a little more organic, and I
am going to go with Swish.
| | 03:18 | So we get a nice little kind
of feel to the banner area.
| | 03:22 | You saw that I selected both of these
elements, and I was able apply basic
| | 03:27 | attributes right from the Properties
panel. The same kind of thing applies to things
| | 03:30 | like these little directional arrows.
| | 03:32 | So if I Shift+Click on all four of
these, I can go ahead and do a few things
| | 03:36 | like, for example, lets get rid of
this stroke in this case, so we get no
| | 03:42 | stroke, and then we'll go ahead
and add in a couple of live filters.
| | 03:47 | I am going to go and add a bevel, Inner
Bevel and maybe set that to about four
| | 03:54 | pixels. And along with that, I am going
to add in Drop Shadow, and we'll reduce
| | 04:02 | the size of that as well, so it
just helps to separate that more.
| | 04:07 | So as you deselect and zoom back out,
you can see these things are starting to
| | 04:11 | tie in much nicer. They're getting a little
more realistic, rather than the wireframe
| | 04:15 | feel that the original calendar shape had.
| | 04:17 | Of course, the big trick with this,
as we saw previously was the fact that
| | 04:23 | when you mouse over these dates, they actually
change a little bit; we get a rollover effect.
| | 04:27 | So let's walk through that process.
| | 04:29 | I am going to go ahead and select the
rectangles that contain the dates for that second week.
| | 04:35 | I'm holding down Shift key to select it,
and you can see, when you got a whole
| | 04:39 | month to worry about, you've got a lot of
selecting to do. So we're just going to cover
| | 04:42 | one week, to show you the basic effect.
| | 04:45 | So with those seven days selected, we're
going to go ahead and change the color
| | 04:49 | of those rectangles.
| | 04:50 | I am just going to go ahead and choose
my sand color here, and I am going to also add
| | 04:56 | some texture here as well, and I think
I'll work with the Sandpaper, and I think
| | 05:04 | the percentage is pretty good.
| | 05:05 | We get a little bit of texture,
nothing too major, and that's fine.
| | 05:09 | So that gives me that row
looking little bit different.
| | 05:12 | The trick here is we're dealing with
a rollover effect, so we got to have a
| | 05:16 | second state for that
rollover effect to occur in.
| | 05:19 | So I am going to go over my States
panel, and I am going to add a duplicate
| | 05:23 | state, basically copying everything
that's on my current state. And I'll just
| | 05:28 | put that after the original state.
So State 1 and State 2 basically look
| | 05:33 | exactly the same right now.
| | 05:35 | In State 2, we're going to make a change.
| | 05:37 | I am going to again Shift+Click to
select the backgrounds for the calendars.
| | 05:42 | Now make sure that you are actually
selecting the rectangles there and not the numbers.
| | 05:46 | If you get too close into the middle of
the date, you might grab the number by
| | 05:50 | accident, so make sure you
grab just the background area.
| | 05:54 | And we'll change that color as
well, something along that line.
| | 05:58 | So now we've got a significant
difference in those two states.
| | 06:04 | The last little bit that we have to
do, one more set of selecting,
| | 06:07 | I am going to Shift+Click to
select those rectangles yet again.
| | 06:11 | While there is a lot of selecting
going on, going this route makes it a lot
| | 06:15 | easier to do some of the things we're doing,
rather than selecting one vector at a time.
| | 06:19 | If we were doing the whole calendar, we
would select all the squares. In this
| | 06:23 | case, we're just going to
worry about the one row.
| | 06:25 | So I've got all those selected.
| | 06:26 | I am going to right-click.
| | 06:28 | I am going to choose Insert Rectangular Slice.
| | 06:31 | Fireworks wants to know if we want one
big slice or bunch of multiple slices.
| | 06:35 | I definitely want multiple slices, and there you
see we've got a slice applied each of the dates.
| | 06:40 | Now they're all still selected, and
this is the trick here to saving some time.
| | 06:44 | If you've got everything selected at
the same time, you can click on the one
| | 06:48 | behavior handle and control the rollover
effect for every slice that's selected,
| | 06:52 | which is kind of cool.
| | 06:53 | So I am going to click on that little
circle in the middle in one of my slices,
| | 06:56 | doesn't matter which one, and I
am going to choose to add Nav bar.
| | 07:01 | And you'll see all the
slices currently selected here.
| | 07:03 | We don't need to make any
changes in this dialog box.
| | 07:06 | We just say OK, and I am going to hide
my slices, and I am going to switch over
| | 07:12 | to Preview mode, and now
when I mouse over, check it out:
| | 07:18 | we now have an interactive calendar.
| | 07:20 | In fact, if I click on a date, it sticks
until I click on another date. Pretty cool!
| | 07:26 | It didn't take a lot of time and
obviously, we've got a bit more work to flesh this
| | 07:30 | out but, feel free to study the completed
version and see how that works out for you.
| | 07:35 | I do want to show you one
last thing before we wrap up.
| | 07:37 | We talked earlier about that warning
message from Fireworks, about editing sub
| | 07:41 | parts of an autoshape.
| | 07:43 | Well, let's just grab the Pointer
tool and see what we get when we try to
| | 07:46 | make some changes here.
| | 07:47 | I'll just show you what may or may now happen.
| | 07:49 | Let's change the month. The month change
worked pretty well - not too shabby.
| | 07:54 | Let's change the year.
| | 07:56 | There was a slight shift in the
position of the year, so just be aware.
| | 08:00 | We didn't have anything too crazy,
but we did get a slight change.
| | 08:04 | So, that's why, especially with the
calendar shape, if you can get your month
| | 08:08 | set first, you're good to go.
| | 08:09 | I am just going to go back to
my 2010 and go back to September.
| | 08:17 | So we've got September of 2010
rollover effects. It's just a matter now, literally,
| | 08:22 | of that old saying, wash, rinse, repeat,
yet again to make all the other changes
| | 08:26 | necessary to flesh out this calendar
and make it look the way you want it to
| | 08:30 | look, based on the site colors you may
be using or the design you are working with.
| | Collapse this transcript |
| Mocking up a pop-up window| 00:00 | Last time, we spent some time
customizing the calendar autoshape so that it's
| | 00:05 | more in keeping with the
design of our current web site.
| | 00:09 | In this lesson, we're going to be
customizing the bookTour page a little bit,
| | 00:13 | adding a couple of extra pages, and
states and interactivity to bring this
| | 00:19 | pop-up calendar to life.
| | 00:22 | Keep in mind, we are dealing with a
prototype, so we don't have to show every
| | 00:27 | single action, especially if they are
going to be essentially the same action for
| | 00:32 | different techniques.
| | 00:33 | So, for example, down here,
I will show you what I mean,
| | 00:37 | we've got our little calendar booking area.
| | 00:40 | I want to make both of these calendar
icons interactive, but they don't have to
| | 00:43 | go off to separate pages or states.
| | 00:45 | We can just repurpose the same rollover
effects that we are going to be using.
| | 00:49 | The first thing I want to do is
add in the extra pages I need.
| | 00:53 | Now, I need to have a page that shows
the calendar, and I need to have a page
| | 00:59 | that shows the dates
filled in, in these text fields.
| | 01:02 | Now you might think we can do this
by just adding a few extra states.
| | 01:05 | If I was concerned about showing that
rollover effect on the calendar that we
| | 01:09 | worked so hard on creating the last time,
then we probably could do it just with states.
| | 01:13 | But because we're dealing with that set
of state changes as well as the changes
| | 01:17 | to the form area where the pop-up
calendar is going to show up and things,
| | 01:21 | it's probably just a bit easier
to work with pages in this case.
| | 01:25 | So what we're going to do, I am
going to zoom out a little bit here.
| | 01:28 | We're just going to create a
couple of copies of the bookTour page.
| | 01:32 | So I am just going to drag it down to the
New Page icon, do this a couple of times.
| | 01:38 | So we've got bookTour.
| | 01:40 | It's our original bookTour
Copy and bookTour Copy 1.
| | 01:45 | So I am going to rename these two copies.
| | 01:48 | This one is going to be "bookTour_
calendar," and then this one is going to
| | 01:55 | be "bookTour_completed."
| | 02:00 | I am keeping the bookTour name just
so that the pages appear to be related,
| | 02:04 | so even at a glance at the Pages panel you get
a sense that these things are all tied together.
| | 02:09 | Go to our bookTour_calendar page, and here
is where we start bringing in our calendar.
| | 02:14 | I am going to go ahead, File > Import.
| | 02:19 | There is my calendar slices, open that
up, and just go ahead and import it.
| | 02:27 | Now once this is imported, you may not
actually drop it in the spot that you want.
| | 02:30 | So if you want to reposition it, there's a
little thing you've got to be aware of here.
| | 02:34 | Remember, we're dealing with slices here,
and the slices are not part of this object.
| | 02:40 | So before we do any movement at all, we
need to take care of our selecting first.
| | 02:45 | So I am going to go into my Layers panel,
and I am just going to minimize some
| | 02:49 | of my other panels, so I
can see all those slices.
| | 02:53 | You can see, as I click on these,
they start showing up on the canvas.
| | 02:57 | So I am going to go to very, very first
slice, and I am going to go all the way
| | 03:01 | down to the bottom slice, like so.
| | 03:05 | There is two things here I want to watch for.
| | 03:07 | Remember, I am dealing with
a shared web layer as well.
| | 03:10 | So as we start adding in all these
subelements or sublayers, we have to be
| | 03:14 | very careful where we're placing things.
| | 03:16 | Right now, these slices are in the
shared web layer, which means they are going
| | 03:19 | to show up on every page.
| | 03:20 | So let's move them first
into the main web layer.
| | 03:24 | Now with those slices still selected,
I am going to hold down my Shift key
| | 03:27 | and select the actual autoshape itself, so
I have got everything grouped together here.
| | 03:33 | I'm going to move these things a
little higher up, something like that.
| | 03:40 | So that's all being grabbed together,
as well as the calendar in this state.
| | 03:45 | We also have the calendar in the other state.
| | 03:47 | So to take a quick look here, I am
just going to click away form everything,
| | 03:51 | select my autoshape, my X
and Y coordinates; 556 x 472.
| | 03:56 | I am going to go into my second
state, and you'll see that things are a
| | 04:03 | little bit off here.
| | 04:04 | So this is why you've got to watch
over this stuff. As you are playing around
| | 04:07 | with this kind of
interactivity, some changes can occur.
| | 04:10 | So I am going to go into that state,
and I'm going to reposition this as well,
| | 04:17 | so that lines up exactly
with the other elements.
| | 04:21 | Let me just double-check: 555 x 473.
| | 04:24 | I believe I was 556 x 472, and we'll just
confirm that by switching back to the other state.
| | 04:36 | So now they're both in the same place.
| | 04:38 | Now, if we take a quick preview and
turn off the slices, we'll see that the
| | 04:45 | rollovers actually work just
the way we expect them to work.
| | 04:49 | So that's the starting point.
| | 04:51 | We've got a little more work to do with this.
| | 04:53 | I am going to get out of my Preview
mode and go back and turn my slices on.
| | 04:59 | So here is the pop-up window.
| | 05:01 | Now, we need to go back to a page that has the
dates filled into the fields that we see below.
| | 05:05 | So I am going to zoom in again, just so
it's easier to see this, and we are going
| | 05:10 | to switch over to our completed page.
| | 05:13 | In the completed page, the calendar is
gone, but the dates need to be filled in.
| | 05:17 | So we are going to go ahead and grab
the Type tool, and let me just check and
| | 05:22 | see what my font uses have been here:
| | 05:24 | 12, Arial, Regular with no anti-aliasing.
| | 05:28 | I am just going to click inside the
Start Date field, and we'll do 09/08/2010.
| | 05:39 | The font needs to be changed here,
| | 05:40 | so we'll switch that back over to
Arial, and we'll set it to 12 pixels.
| | 05:45 | That's the date that I want,
and we'll just pop that in.
| | 05:49 | I am just going to go ahead and
Alt+Click and drag to bring in another version
| | 05:55 | of the date, and we'll
just add a week on to this;
| | 05:59 | rather than 08, it's going to be 15/2010.
| | 06:04 | So those are our dates.
I'll just grab my Pointer tool,
| | 06:07 | make sure these are aligned up nicely together.
| | 06:11 | So those are our completed dates.
| | 06:13 | So we've now got a page that is the
starting point with no dates, another page
| | 06:19 | that has the calendar in it, and a
third page that has the completed dates.
| | 06:22 | Now, there is a bit more interactivity
we have to add in to make all this work.
| | 06:27 | So we're going to hop back over to our
bookTour page, and what I need to do is
| | 06:34 | add some interactivity to
these little calendar spots.
| | 06:37 | These icons need to be able to do something,
| | 06:39 | so I am going to Shift+Click on these, and
we are going to add in a couple of Hotspots.
| | 06:47 | I mentioned earlier in this lesson, we
don't need to create an entire interaction
| | 06:51 | workflow for picking the start
date and for picking the end date.
| | 06:54 | We can make them usable for both cases.
| | 06:57 | We're just kind of demonstrating
how the interaction is going to work.
| | 06:59 | We're not needing to make it
look completely functional here.
| | 07:03 | So those two Hotspots selected, I am
going to link to bookTour_calendar.
| | 07:08 | When we click on those icons, it's
going to take us to the calendar page.
| | 07:11 | Now I am going to go into the calendar
page itself, and here we need to make one
| | 07:16 | more change to our slices for our calendar.
| | 07:20 | What we need to have happen here is we
need to be able to select a date and then
| | 07:25 | go back to the completed dates.
| | 07:27 | Now, we're going to sacrifice a
little bit of visual interactivity here, in
| | 07:30 | that we basically want to be able to click
on a date and then go to the completed page.
| | 07:35 | We're not going to see the
rollover color stick, as we saw earlier.
| | 07:39 | We're just going to be seeing the actual
rollover effect, and then when we click
| | 07:43 | on any calendar date, it's going to
take us to the finished component.
| | 07:47 | So again, I am going to go into my slices,
and I am going to select the web layer.
| | 07:52 | That should grab all of my slices,
make sure nothing else has been grabbed by
| | 07:56 | accident, and we're good.
| | 07:59 | We're going to add in one more
control here, and that's a link.
| | 08:02 | So with all those slices selected, we
go to our Link box, and we're going to
| | 08:07 | choose bookTour_completed.htm.
| | 08:10 | This gives me the ability to go back or
forward, if you want to think of it that
| | 08:14 | way, to the completed version.
| | 08:16 | Now, before we preview all of this,
there is one other step we need to make, and
| | 08:20 | that is making sure that we
can actually get to these pages.
| | 08:24 | The bookTour page isn't
part of our main navigation.
| | 08:26 | So we're going to be stepping back a
little bit into one of the other pages and
| | 08:30 | adding in hotspots that we can
actually get out to the Book Tour area.
| | 08:34 | So I am going to go down to, let's
see, my tourSpecific option here.
| | 08:42 | Let me see here we've got
a little link for book now.
| | 08:45 | So I am just going to go ahead and
scroll down, because we have a winery tour
| | 08:49 | that's already set up as
page. There it is there.
| | 08:51 | So I am going to go ahead and
draw a couple of hotspots in here.
| | 08:54 | Now, I'm drawing these hotspots in
because this entire grid of tours is actually
| | 09:01 | one big flattened bitmap at the moment.
| | 09:04 | This way I can quickly add in a
couple bits of interactivity, and grab my
| | 09:10 | Pointer tool, click on the book now
| | 09:14 | hotspot and choose bookTour.
| | 09:18 | While we're here, click on the learn more
| | 09:20 | Option, and we'll link that off
to the Winery, just so we've got the
| | 09:24 | interactivity added in in both places.
| | 09:27 | It's time to actually Preview this.
| | 09:28 | Now because we're dealing with
multiple pages, the Preview mode in Fireworks
| | 09:32 | isn't going to be very helpful, because that
only previews things like rollover effects.
| | 09:36 | We want to make sure that we
can move from page to page.
| | 09:39 | So we're going to go to our File >
Option and choose Preview in Browser, and
| | 09:45 | the trick here, Preview all pages in firefox.exe.
| | 09:48 | This will basically generate temporary
web pages of all the pages in our mockup.
| | 09:55 | Here is our design that's actually loaded into
the tourSpecific page, which is awfully handy.
| | 10:00 | Now go down to the Week of Wine,
and we'll click on book now.
| | 10:05 | And there's our tour page.
| | 10:07 | I'll move down to our start date, and
when I click on the icons here, we go
| | 10:12 | out to our booking Tour area and see
we can mouse over all our different
| | 10:17 | calendar dates, pretty cool!
| | 10:19 | And then any date that I click
on is going to take me to the
| | 10:24 | tour_completed page.
| | 10:25 | So we've basically mapped out how
the interactivity is going to work.
| | 10:29 | We didn't need to be very specific
as to start and end dates because the
| | 10:32 | process will be the same.
| | 10:34 | We're just illustrating how it's going to work.
| | 10:36 | So by tying in an autoshape from
Fireworks, customizing that autoshape, adding
| | 10:41 | in a couple of extra pages, adding in
a bit more interactivity, we've really
| | 10:45 | fleshed out the user experience here.
| | 10:47 | Now, the next step is to completely impress
the client with a clickable HTML prototype.
| | 10:52 | We'll be doing that in the next lesson.
| | Collapse this transcript |
| Exporting an HTML prototype| 00:00 | We are finally at that point, the
penultimate moment where we take our Fireworks
| | 00:05 | design and turn it into an
interactive HTML prototype.
| | 00:09 | Now, I've added in a bit more
interactivity to sort of flesh out the user experience.
| | 00:14 | If we take a look down in the tour section,
go to my tourSpecific page,
| | 00:18 | you'll notice I've got a breadcrumb hotspot
to take me back to the mainTour page.
| | 00:22 | If I go to the winery page, which is
sort of a detail page, I've got
| | 00:25 | additional breadcrumbs to
sort of follow back and forth.
| | 00:28 | Also, on this page, I've added in a
booking link down here at the bottom, because
| | 00:33 | it makes sense when you're on the tour
page and you want to book it, to be able
| | 00:36 | to go directly to the booking form.
| | 00:38 | So, I've turned that into a button
symbol, so we have a little bit of
| | 00:41 | rollover action going on.
| | 00:44 | Now, the only other thing I want to
check here, before I get started on my
| | 00:47 | prototype, is to make sure my
pages are optimized properly.
| | 00:51 | Now, I'm not too worried about
optimizing a lot of the work here because this
| | 00:56 | is a prototype, and I can come back and
slice up the necessary pieces later on
| | 01:00 | for the final HTML.
| | 01:01 | But I do want to make sure that the base
optimization is set to something that's
| | 01:05 | going to be suitable.
| | 01:06 | We've got gradients.
We've got photos in here.
| | 01:08 | So, to keep things looking fairly nice
inside of the actual HTML prototype, I
| | 01:13 | want to make sure everything is
going to export out currently as JPEGs.
| | 01:16 | So, I am just going to go to my index page here,
| | 01:19 | I'll open up my Optimize panel, and I can
literally just page down through the pages here.
| | 01:25 | As long as I see that they are all
exporting out as JPEG, I'll click away and
| | 01:29 | make sure nothing is selected,
| | 01:30 | that will tell me what the base optimization is,
| | 01:32 | there we go, JPEG again, and it
looks like we are in good shape here.
| | 01:38 | Now, if you need to change the base
optimization for multiple pages, it's easy enough to do.
| | 01:44 | What you can do is go into your Pages
panel, click on the first page that you
| | 01:49 | want to optimize, scroll down, and hold
down the Shift key and select the last
| | 01:54 | page that you want to optimize.
| | 01:56 | Then just basically go ahead and either
change the optimization settings here in
| | 02:00 | the Optimize panel, or down in the
Properties panel, you can also set the base
| | 02:04 | level optimization right here.
| | 02:06 | That will convert every
selected page to that export format.
| | 02:10 | I will collapse that
Optimize panel for a minute.
| | 02:13 | I don't need to export out the master page here.
| | 02:16 | I just want the actual pages for the web site.
| | 02:17 | So, they are all selected.
| | 02:20 | I'll go to File > Export, and I will go
into my Lesson 05 folder, and I've got a
| | 02:28 | web site folder here I am going to use.
| | 02:29 | As far as exporting is concerned, you
want to make sure you are exporting out
| | 02:33 | as HTML and Images.
| | 02:35 | You are going to be exporting the HTML files.
| | 02:37 | You are going to be exporting slices
because you have buttons and rollover
| | 02:41 | effects that you want to work with.
| | 02:42 | As far as Pages are concerned, we want
to choose Selected Pages, and then as far
| | 02:47 | as the Options are concerned, we
want to include any areas without slices
| | 02:50 | because we didn't do a lot
of slicing in these pages.
| | 02:52 | The only slices really in place
are the ones for our button symbol.
| | 02:56 | So we want all the other
pieces to be exported as well.
| | 02:59 | We'll put all those images in a
subfolder, and that subfolder is going to be
| | 03:03 | called "images," and from here, we
can just go ahead and click Save.
| | 03:08 | Now, Fireworks does not display a
status bar while it's exporting the pages.
| | 03:12 | Your only way really to know that
Fireworks is doing what it's doing is that it's
| | 03:17 | non-responsive during this process.
| | 03:19 | So, let's take a quick look over in our folders.
| | 03:29 | There is our web site folder.
| | 03:31 | There is all of our pages.
| | 03:33 | Notice that the common page, or the master
page, has not been exported, and that's fine.
| | 03:37 | We don't need it.
| | 03:38 | Now, here's probably the
scariest part of doing an HTML prototype.
| | 03:42 | We are going to take a look in the images
folder, and there are a whole whack of images here.
| | 03:51 | Yeah, pretty scary stuff.
| | 03:54 | Now, keep in mind this is a prototype.
| | 03:57 | I'm not worried about the fact
that we've got a billion slices.
| | 04:00 | This is really just again to present a
realistic representation of the final web site.
| | 04:05 | When we get into the point where we are
building out the web site itself, we'll
| | 04:10 | be slicing up the parts we need, and
doing a lot more work in CSS to handle the
| | 04:13 | layout. And you see quite
a few graphics are here.
| | 04:16 | Again, not a big worry, considering the fact
that we are just dealing with a prototype.
| | 04:21 | One thing I do want to point out
though, and this is new to Fireworks CS5:
| | 04:25 | you'll notice, that particularly because
we have rollover effects for multiple
| | 04:29 | states, Fireworks has gone ahead and
named these files slightly differently.
| | 04:34 | You'll notice at the very end here,
where we have the MISSION buttons,
| | 04:37 | we have _s1, _s2, and the S
represents the state option.
| | 04:43 | Now, the advantage to this is the
fact that Fireworks doesn't consistently
| | 04:47 | prompt you to overwrite files as it
slices up essentially the same element
| | 04:52 | over and over again.
| | 04:53 | The down side is you end up with all
these extra files with an extension that
| | 04:57 | you probably don't want.
| | 04:58 | So, let's take a quick peek at the
actual HTML export, and then we'll see how we
| | 05:04 | can maybe customize
that file naming convention.
| | 05:07 | So, I am going to back one level, and I am
going to open up my index page, and there it is.
| | 05:15 | If I mouse over my Tours button
or my Mission button, you see the
| | 05:21 | rollovers work just fine.
| | 05:23 | If I click on Tours, I go to the Tours page.
| | 05:26 | If I click on some of the subheadings
in here and also I've got rollover effect
| | 05:29 | for these as well. I can go to Tour by Region.
| | 05:32 | It takes me to the Taste of California page.
| | 05:35 | From here, I can always go back to
the Tour Packages, or I can go back to
| | 05:42 | that Taste of California page, scroll
all the way down, and I can learn more
| | 05:46 | about A Week of Wine.
| | 05:47 | That takes me to the wine page.
| | 05:50 | Down there, at the bottom of the
wine page, there is my booking option.
| | 05:54 | I'll click on that, and there's my booking form.
| | 05:57 | I click on my little icons for my calendar.
| | 06:01 | We get our little pop-up calendar,
click on any date, and we are brought to a
| | 06:08 | completed version of the
booking form, in terms of the dates.
| | 06:12 | So, we've really fleshed out a very
realistic experience here, and I think
| | 06:17 | overall it's looking quite nice.
| | 06:19 | Now one of the things you might be
noticing here is this is a fixed-width design,
| | 06:23 | yet it's kind of hanging off
the left-hand side of the page.
| | 06:25 | When Fireworks exports HTML and
images it does not center the content.
| | 06:30 | You'll have to actually go into
Dreamweaver or a web editor and make those
| | 06:34 | adjustments inside of the web editor,
| | 06:36 | just one of those little issues
with the Fireworks HTML export.
| | 06:39 | That's an easy enough to fix using
HTML and CSS, but it's just not something
| | 06:43 | that Fireworks does by default.
| | 06:45 | We are going to hop back over to
Fireworks here, and I just want to take a look
| | 06:49 | at one other thing.
| | 06:50 | I am going to go back to that Export.
| | 06:53 | One of the things I sort of glided
by when we did the initial export was
| | 06:56 | the Options button.
| | 06:57 | If I click on that, you'll
see three tabs available:
| | 07:00 | General, Table, and Document specific.
| | 07:02 | A lot of the information in here is
mostly related to the CSS and Images export.
| | 07:07 | So, things like here where
it says Page alignment left,
| | 07:10 | you can change this to whatever
option you want, but as an HTML and Images
| | 07:13 | export, you are always going
to get a left-aligned web page.
| | 07:16 | These are elements that are
really more for the CSS export.
| | 07:19 | We've got options for the table
itself, in terms of what we are creating.
| | 07:23 | Remember that the HTML and Images
export generates essentially a table-based
| | 07:27 | layout so you can control, to a
degree, how that table is generated.
| | 07:32 | Typically, for a prototype, I just leave
things as they are, because again, we are
| | 07:36 | not worrying about the underlying code here;
| | 07:38 | we are just worrying about the user experience.
| | 07:40 | The last option here is Document
Specific, and this is where you can customize
| | 07:45 | some of the options and have
Fireworks handles naming of files, and so on.
| | 07:49 | You'll notice here we've got
this option for State names.
| | 07:52 | We've got, at this point, an
underscore + State value.
| | 07:56 | You can see there are a few
choices that we can go with here.
| | 08:00 | So we can customize those state
names if we want from this area here.
| | 08:04 | Now, if I change that State name option
here, I can change it. You can I
| | 08:08 | get a little preview of
what's going to occur instead.
| | 08:10 | So, I've got the ability to do that.
| | 08:13 | I can even create a customized
version for state names as well.
| | 08:20 | So, I've got a little flexibility.
| | 08:21 | So I am not stuck with the
default of that _s1 or _s2.
| | 08:25 | There is the ability to make changes there.
| | 08:28 | So, over the past few lessons,
we've gone from wireframe to concept and
| | 08:33 | storyboard to clickable prototype.
| | 08:35 | We have got one more lesson that's on
the web side of things, and then we'll be
| | 08:39 | moving into some other exciting areas
such as designing for mobile and desktop
| | 08:43 | and web applications.
| | 08:44 | The great thing about what we've done up
until now is it sets the groundwork for
| | 08:48 | everything else we'll be working on.
| | 08:50 | The concepts are all quite similar,
whether you're designing a web site in
| | 08:53 | Fireworks, a mobile
application, or a desktop application.
| | 08:56 | In the next lesson, we'll go
outside the box a bit and see how we can
| | 09:00 | incorporate features like iframes and
actual Flash elements right inside right of
| | 09:05 | our Fireworks prototype.
| | Collapse this transcript |
|
|
6. Going Further with HTML PrototypingEmbedding an iframe into a Fireworks HTML prototype| 00:00 | While Fireworks is not a web page editor,
| | 00:03 | we can use a special slice to
incorporate interactive or dynamic content into a
| | 00:07 | Fireworks prototype, such as a weather
application or a Flickr slideshow or even a Flash game.
| | 00:14 | In our example, the client wants to see
how a weather report might look in the
| | 00:17 | sidebar of the tour's page.
| | 00:20 | Using an HTML slice and some
code generated by the Yahoo!
| | 00:23 | web site, we can accommodate
this request pretty easily.
| | 00:27 | This lesson and the one on embedding a
Flash movie into a Fireworks prototype
| | 00:31 | are both inspired by the really
excellent article on adobe.com, called "Rapid
| | 00:36 | Interactive Prototyping with HTML, CSS, and
JavaScript using Fireworks and Dreamweaver."
| | 00:42 | Now this was written by Mariano
Ferrario and David Hogue of Fluid Design in San
| | 00:47 | Francisco, and it was written for
Fireworks CS4, but the article still holds
| | 00:52 | true in CS5, and it's definitely worth a read.
| | 00:55 | What we are going to do here is we are
going to move down our tour page a little
| | 00:59 | bit, and we are going to put that
weather app down in this area somewhere.
| | 01:04 | Now exactly where, we will
find out in just a minute.
| | 01:07 | What we are going to do
next is hop over to the Yahoo!
| | 01:09 | web site, and we are in the Yahoo!
| | 01:12 | weather report area, and I have pulled
up the weather for San Francisco. Now, this
| | 01:17 | gives me a fairly extensive forecast and
so on, but over here in the upper-right
| | 01:23 | corner you will see a little link that
says Add weather on your web site, so we
| | 01:26 | are going to click that.
| | 01:30 | And in a few quick steps, we can
create our own little, embeddable
| | 01:35 | weather application.
| | 01:37 | So we are going to go all the way down here.
| | 01:38 | You will see you can choose location,
the layout, whether your temperature is
| | 01:42 | measured in Fahrenheit or
Celsius, and pick a color or theme.
| | 01:46 | So I am going to go ahead and click Start
now, and I am going to type in San Francisco.
| | 01:55 | I want a vertical layout.
| | 01:57 | You notice there are some dimensions
there, 186 x 255, and we'll leave it at
| | 02:03 | Celsius for the time being, and I think
I will pick a color for the background.
| | 02:08 | And you can see that's what
our apps are going to look like.
| | 02:12 | So you can preview.
| | 02:13 | You can try different things if you want.
| | 02:15 | I think that color sort of ties in
with some of the colors we are working
| | 02:18 | with on the web site, so I think
it's a good choice, and now all we do is
| | 02:22 | click on Get the Code.
| | 02:25 | So this little paragraph here, this
little block of code is all we need to get
| | 02:29 | this thing working, so I am going to
select it and copy it, and then I am going
| | 02:34 | to move over to Fireworks again.
| | 02:36 | And I am going to draw another slice.
Not even going to worry about the size
| | 02:42 | at the moment, just get it drawn in there.
And I need to change the dimensions to 186 x 255.
| | 02:52 | And as I mentioned, we are working with
a special type of slice here, and it's
| | 02:56 | called an HTML slice, so I'll select that.
| | 02:59 | You'll notice that the color of
the slice changes significantly.
| | 03:03 | It's much darker green, it's opaque.
And inside the Properties panel, we have
| | 03:06 | this option for editing, so I am going
to click on the Edit button, and I am
| | 03:10 | going to paste that code that we
had copied over from the Yahoo! site.
| | 03:15 | If you take a look at the markup here,
you will see that this is using an
| | 03:18 | iframe, so basically we are putting a
web page inside of our web page, very
| | 03:23 | simple amount of code, click OK.
And I just want to make sure that the slice
| | 03:29 | is lined up with the rest of my sidebar.
Double-check and actually, that looks pretty good.
| | 03:36 | One last thing I want to do
is change the canvas color.
| | 03:39 | Now the canvas color isn't really
important to the web page design, but it's
| | 03:42 | going to be important to this iframe,
because what's going to happen is Fireworks
| | 03:45 | is going to call that canvas color into
the iframe, and I want that canvas color
| | 03:50 | actually to match the
background color of my page.
| | 03:54 | So I am going to go ahead
and change that to white.
| | 03:57 | Now for the really, really hard part:
File > Preview in Browser, and we'll just
| | 04:05 | previous this one page in the browser.
| | 04:10 | Scroll down, and we have a weather
application running right inside of our
| | 04:16 | Fireworks-generated HTML prototype.
Pretty cool, and incredibly easy to do.
| | 04:22 | You can do the same kind of thing for a
Google map or a Flickr badge. Really, what
| | 04:27 | it comes down to is just getting that
iframe information, knowing what the
| | 04:30 | dimensions are going to be for the
iframe, plugging that code into that HTML
| | 04:34 | slice inside of Fireworks and
then just exporting the page out.
| | 04:39 | I think this really adds a certain kind of
dynamic component to the site, and let's face it,
| | 04:44 | it saves us some time from designing
the weather app in a static mode.
| | 04:47 | In keeping with this kind of concept,
we are going to next look at how to
| | 04:50 | incorporate a Flash game into our site.
| | Collapse this transcript |
| Embedding an SWF file into a Fireworks HTML prototype| 00:00 | Another way to add a more dynamic edge
to your Fireworks prototype is to embed
| | 00:04 | a Flash movie or game. The olive
industry is a thriving one in California, and
| | 00:09 | the Two Trees olive farm is a sponsor
of the Explore California web site, so as
| | 00:14 | a thank you to them, we are going to
include a simple Flash game into our Taste
| | 00:18 | of California page.
| | 00:20 | Now the workflow in this lesson, much
like our weather app lesson, is inspired by
| | 00:25 | a really excellent article by David
Hogue and Mariano Ferrario of Fluid Design
| | 00:30 | in San Francisco, and it's called "Rapid
interactive prototyping with HTML, CSS,
| | 00:36 | and JavaScript using Fireworks and
Dreamweaver." Now it was written for Fireworks
| | 00:40 | CS4, but the same techniques hold true for CS5.
| | 00:43 | We have got our page open and the first
thing we need to do is bring in our slice,
| | 00:48 | so I am going to grab my Slice tool,
and I am just going to draw a slice.
| | 00:53 | Now the dimensions I need for this, the
movie is 254 pixels wide by 401 pixels high.
| | 01:01 | I want to take those dimensions, and I
am just going to grab my Pointer tool and
| | 01:05 | reposition this so it's a little bit
inside of our design. And you'll notice
| | 01:08 | that as I do this, we are overlapping a
few things. Some text is being overlapped
| | 01:14 | here and our tour features are being overlapped.
| | 01:17 | So I'll switch over to my HTML slice
first, and then I will make some changes to
| | 01:23 | the elements that are on the page.
| | 01:25 | So I am going to go ahead and make this
text a little bit narrower. And I think
| | 01:31 | I will just move my Taste of
California logo over just a pixel or two. And my
| | 01:38 | list of tours, I am going to select
that list, and I am going to shift and use
| | 01:43 | my down arrow keys here to move that
down below our actual game, and I will take
| | 01:49 | a look at the bottom of the screen, okay good.
| | 01:52 | We are not overlapping anywhere, however,
my hotspots need to be adjusted. And if
| | 02:00 | we take a look back up in here,
that's looking pretty good.
| | 02:03 | The next thing we need to do
is add in the code for this.
| | 02:06 | Now I happen to have this code already
inside of a Word document. You will find
| | 02:10 | this inside the Flash folder
inside of the Lesson 06 folder.
| | 02:13 | It's not a lot of code.
| | 02:14 | You can see here very little is being used.
| | 02:18 | I am going to copy that, back to
Fireworks, make sure that slice is selected,
| | 02:23 | click on the Edit button and paste the code in.
| | 02:26 | Remember, this is only a prototype, so
this is probably the least amount of
| | 02:30 | code you can get away with for
putting a Flash movie into an HTML page.
| | 02:34 | If you were doing this for real, there
would be a lot more involved, but for the
| | 02:37 | purposes of the prototype, this is
just enough markup to get the job done.
| | 02:42 | So I am going to click OK, and the
next step really is to check it out.
| | 02:48 | Unlike the weather app lesson that we
worked on, you have to actually export
| | 02:52 | this page out in order to see the Flash movie
play; you can't just preview it in the browser.
| | 02:57 | So we are going to go to File > Export,
and I have already got a Flash folder
| | 03:02 | set up here, and I am going to make
sure that I am exporting an HTML file, I am
| | 03:08 | exporting all my slices, I want to
export everything not just selected slices,
| | 03:13 | and I will put all the images into a subfolder.
| | 03:16 | Now the other thing I'll point out here,
I will go to my Options menu, in the
| | 03:20 | Table category, I get a little more luck
doing this export if I choose the Nested
| | 03:25 | tables, no spacers option for export,
a little less messing around after the fact.
| | 03:30 | So I am going to click OK and then click Save.
| | 03:34 | And it doesn't take too long to occur.
| | 03:36 | I am going to hop over to my folder.
| | 03:38 | There is my HTML page.
| | 03:40 | There is my images.
| | 03:41 | As I mentioned earlier, there is my Flash movie.
| | 03:43 | It's all together in the same folder.
| | 03:45 | I will open up the HTML
page, and there is our page.
| | 03:52 | We've got a couple little issues.
| | 03:54 | Remember, this is a prototype, so it's not
going to be perfect the first time around.
| | 03:57 | We'll see that our layouts are breaking
in a couple of spots here, and I can fix
| | 04:01 | that by going back into Fireworks.
| | 04:03 | So we will go ahead, and we'll
switch back over to Fireworks.
| | 04:07 | And all I am going to do here is I am
going to change the dimensions of the slice.
| | 04:11 | I am going to increase the dimensions
by about six pixels, just to add a bit
| | 04:16 | more space around things, make sure
that nothing, again, is overlapping.
| | 04:20 | We'll just make sure that my slice is
not sitting outside my margin area there,
| | 04:25 | bring this up a little higher, just so
we're not cutting into that text element.
| | 04:30 | One more try: File > Export, and we'll
just choose the same information, make
| | 04:36 | sure that the Selected slices option
is not selected, and just click Save.
| | 04:41 | We will be prompted to
overwrite the files. That's okay.
| | 04:44 | I'll hop back over to Firefox, and we'll
just refresh the page, and there we go,
| | 04:52 | an interactive game, we can actually click
on the different bottles, and we can play
| | 04:57 | the game as we go. And overall
things stay together quite nicely.
| | 05:02 | Now why did I choose six
pixels over any other number?
| | 05:05 | To be honest, I don't know why that
number works, but I did do a bit of
| | 05:09 | experimenting, and it seems to work out
fairly well, so give that a try and by
| | 05:14 | all means experiment with slightly
different dimensions if you want to see how
| | 05:17 | far you can take things.
| | 05:18 | But here we go, an interactive Flash
game right inside of our HTML prototype,
| | 05:23 | created by Fireworks,
| | 05:25 | a great way to add a little more
realism and interactivity to your HTML
| | 05:30 | prototype before you send it off to the client.
| | Collapse this transcript |
|
|
7. Creating AIR PrototypesUnderstanding AIR| 00:00 | All right, what I've got on my desktop
here is a functional AIR prototype that
| | 00:04 | was built inside of Fireworks.
| | 00:06 | You can see if I go up here to the logo,
Explore California, I can click and drag
| | 00:10 | the application around the desktop.
| | 00:12 | I can also interact with the application.
| | 00:14 | As I move my cursor over the
different photos, you'll see I get a slightly
| | 00:17 | different state change, and if I
click on those photos, I move to different
| | 00:21 | photos in the gallery.
| | 00:22 | Now if I go back up to that first image
again, you'll notice on the main screen
| | 00:26 | here, where the photo is, I have got the
words "More info." If I click on that, I
| | 00:31 | get, essentially, the flip side of that
photo with some more information.
| | 00:34 | I just click on Back to go
back to the original image.
| | 00:38 | Now aside from being able to move the
application around in the window, I have
| | 00:42 | also got the ability, using another AIR
command, to close the application, and we
| | 00:46 | are going to be working with this
prototype inside of Fireworks and building out
| | 00:50 | our own versions of this AIR
prototype in the next few lessons.
| | Collapse this transcript |
| Examining the structure| 00:00 | Building an AIR prototype is quite
similar to building an HTML prototype
| | 00:04 | inside of Fireworks.
| | 00:05 | Essentially, they are
doing the same kind of thing.
| | 00:07 | They are not fully functional web sites
or applications. They are just literally
| | 00:10 | interactive mockups of what will
eventually become a web site or an
| | 00:15 | application, and as a result, when you
are building an AIR prototype, you are
| | 00:19 | actually using a lot of the same kinds
of features and tools that you'd use when
| | 00:22 | you are building an HTML prototype.
| | 00:24 | So let's just take a quick look at
this existing prototype and get a sense
| | 00:27 | of what's going on.
| | 00:29 | We have got our common page, we have
got our master page here that has all the
| | 00:33 | common elements that are going to
be the same on every single page, our
| | 00:36 | thumbnail images, our logo, our
background, the title of the application,
| | 00:41 | background area for the images that are
going to be popping up, and I have even
| | 00:45 | dropped in a couple of icons down the bottom:
| | 00:47 | one for closing the file and then one
that would act as a saving of maybe the
| | 00:52 | current image if this is a true
application. And you'll notice I am using
| | 00:56 | hotspots and slices here.
| | 00:58 | I've got the hotspot over the Close
button, and I have got slices over the top of my
| | 01:04 | images here, or most of them, the top
three. And the reason I have got slices
| | 01:07 | here is I am also
incorporating rollover effects.
| | 01:10 | So if you take a look over here in
the Layers panel, if I go to State 2,
| | 01:13 | you will see that there's a slight difference.
| | 01:16 | I'll just turn off the
slices for a minute here.
| | 01:18 | There is a slight difference to the
images, adding inner shadow to those so that
| | 01:23 | they show up a little bit
differently on mouseover.
| | 01:25 | So we've got a rollover state
for each of the different images.
| | 01:28 | If I hop on to my photo 1 page, here
is where I have the elements that are
| | 01:32 | unique to that page, again,
very much like in HTML prototype.
| | 01:35 | The main things that are changing from
page to page will be the large image, and
| | 01:41 | then we might decide to customize the
text that's showing up underneath the
| | 01:45 | photo, so I have put those things on the
actual page rather than on the master page.
| | 01:50 | All the other elements can't be
selected because they are master page elements.
| | 01:55 | So all I can do is edit the elements
that are currently part of that page.
| | 01:58 | Now if I flip over to the flip side of
the image and switch over to State 1, you
| | 02:01 | can see I've got sort of, like, almost
like the back of a postcard feel here.
| | 02:05 | I've got a little thumbnail image of
the photo again, the current photo, a
| | 02:09 | title, and then some text, and then a way to
get back to the main gallery one more time.
| | 02:14 | And the process would be pretty much
the same for all the different photos.
| | 02:17 | We'd have a flip side ideally for each
image, and the process would be the same
| | 02:21 | for all the different photos in the gallery.
| | 02:23 | From a prototype perspective, we'd
probably have a different flip side image
| | 02:27 | for each of the different photos, so we could
drop in a different title and a different photo.
| | 02:32 | Now we are going to be working with
this prototype, and we are going to be
| | 02:35 | fleshing out a bit more, adding a
couple of pages, adding in some of the
| | 02:38 | interactivity as a little bit of a
review for you, and when we are done, I will
| | 02:42 | be showing you how to export
this file out as an AIR prototype.
| | Collapse this transcript |
| Adding rollovers| 00:00 | We're on the master page of our
design, and you notice I've got some
| | 00:04 | slices already set up here that
allow for interactivity for these three
| | 00:08 | specific thumbnails.
| | 00:09 | So as I mouse over them, we get a
slightly different look to the buttons.
| | 00:12 | We'll just double check that state, and
you can see there's a slight change visually.
| | 00:17 | There's an inner shadow that's applied to
the different images as you mouse over them.
| | 00:22 | So I'll go back to State 1 here.
| | 00:23 | We're going to go ahead and for the
sake of maybe a little bit of review, add
| | 00:27 | in a slice and the
interactivity for that bottom image.
| | 00:31 | So I'm just going to go ahead and right-
click on it, just as if I was building a
| | 00:34 | slice for a standard HTML prototype.
| | 00:37 | And I'll choose Insert Rectangular
Slice, and one other thing I need to add in
| | 00:41 | here is the actual interactivity itself.
| | 00:43 | The slice is there.
| | 00:44 | It's outlining the area that needs to
be interactive, but we need to add the
| | 00:47 | behavior, the simple rollover behavior, that
actually makes the interactivity work.
| | 00:53 | So now if I go over my Preview mode,
and I'll just hide my slices, and see that
| | 00:59 | each one of these, as I mouse over them,
looks a little bit different, like so.
| | 01:05 | So I'll hop back to my
original view, turn my slices back on.
| | 01:08 | If I click on one of these other
thumbnails, there is something else you'll notice.
| | 01:13 | If you take a look down the Properties
panel, you'll see that we have a link for
| | 01:16 | each of those photos.
| | 01:17 | So not only do we have the
interactivity in terms of the visual feedback, the
| | 01:20 | rollover effect, but we are also
linking off to different pages.
| | 01:24 | So that final slice, I'm going to
select that one, and we're going to go to our
| | 01:27 | Link menu down in the Properties panel
and set that to go to photo 4. And again,
| | 01:32 | just a reminder: make sure that you are
picking your links from the area at the
| | 01:38 | bottom part of the Link box.
| | 01:40 | Don't grab the stuff from up top.
These are all history elements.
| | 01:43 | So always grab from down at the bottom, like so.
| | 01:46 | That gives me a link to that existing page.
| | 01:48 | And I'm going to hop into photo 1
here, and we'll do one more little bit.
| | 01:53 | We've got a little bit of
text here for More info.
| | 01:56 | And here, I don't really require
a rollover effect in this case;
| | 02:00 | I just want to be able to use that
text as a way to see the flip side of
| | 02:04 | this particular image.
| | 02:05 | So rather than add in a slice, I'm going
to right-click and choose Insert Hotspot.
| | 02:12 | And with a hotspot added to the text,
I'm just going to go ahead and change my
| | 02:16 | link and pop that over to the flip side.
| | 02:18 | So now I have the ability
to move from page to page.
| | 02:22 | I've also added in some
interactivity for the text, so I can move to the
| | 02:26 | back part of the photo.
| | 02:27 | And like I said, pretty straightforward
stuff, very much the same way you would
| | 02:31 | be treating interactivity if you were
building an HTML prototype and building in
| | 02:35 | rollovers or interactivity there.
| | Collapse this transcript |
| Adding events| 00:00 | Now the big difference between an
interactive HTML prototype and an interactive
| | 00:04 | AIR prototype is the fact that you can
employ some AIR commands to make this
| | 00:08 | application behave like a floating AIR
application sitting on your desktop.
| | 00:13 | And you're still going to be using
web objects to act as essentially the
| | 00:16 | triggers for creating AIR commands, but
the actual commands themselves come from
| | 00:21 | a different location on the interface.
| | 00:22 | So we're going add in two of them here
in the master page so that we can drag
| | 00:27 | the application around the desktop and
so that we can close the application.
| | 00:30 | So I'm going to go up to my Explore
California logo, and I'm just going to go
| | 00:35 | ahead and right-click on that.
| | 00:37 | I'm going to choose Insert Rectangular
Slice, and we want to make this interactive.
| | 00:44 | We want it to basically be the
dragging point for the application.
| | 00:48 | So I'm going to go up to my commands now,
and you'll see here, AIR Mouse Events.
| | 00:53 | We've got four to choose from:
Close, Drag, Maximize and Minimize.
| | 00:58 | So depending on how many you want
to put in, it's really up to you.
| | 01:01 | But I typically work with
the Close one and the Drag one.
| | 01:04 | Those are the ones that sort of
give you the most interest, and you can
| | 01:07 | certainly add in Minimize and Maximize as well.
| | 01:10 | So in this case here, I'm going to choose Drag.
| | 01:12 | Take a look down in the Properties panel.
| | 01:15 | This is where all that information got added in.
| | 01:18 | Right down in the Links panel here,
you'll see, there's the entire JavaScript
| | 01:22 | command: events:onMouseDown=, and
then you go all the way through that.
| | 01:28 | And all that information has been
added right into the Link box, and then also
| | 01:32 | automatically has added in some
alternate text, saying Drag Window.
| | 01:35 | So that's our first piece.
| | 01:37 | Now the other piece is the Close
element, and we've got a little icon here.
| | 01:40 | And this is one of the symbols in the
Common Library, and it gives you the
| | 01:44 | impression right away that this is an
icon that's going to be closing something.
| | 01:47 | So that's why I picked it.
| | 01:49 | And in this case here, I'm just going to
go ahead with a hotspot, and I'm going to right-click
| | 01:52 | on it and choose Insert Hotspot, and I'm
going to go up to my commands again and
| | 01:58 | choose AIR Mouse Events and select Close.
| | 02:01 | Now keep in mind a reminder about the
differences between slices and hotspots:
| | 02:05 | hotspots will give you the
interactivity as we can see down in the Link box,
| | 02:09 | you will see that the
events been added down there,
| | 02:12 | but you won't be able to do
things like rollover effects.
| | 02:14 | So if want that icon to light up or glow or
something, you would need to do that as a slice.
| | 02:19 | If you don't care about visual feedback or
rollover effects, then a hotspot will do just fine.
| | 02:25 | So those are those two elements added in.
| | 02:27 | And these are what are going to make
this prototype feel a little more like an
| | 02:29 | AIR application rather than
just a plain old HTML page.
| | Collapse this transcript |
| Adding pages| 00:00 | One of the things I've done with this
prototype is I've tried to add a bit of
| | 00:03 | realism to the overall photo gallery
feel by putting in a flip side page here,
| | 00:08 | so that when you go from one of the
photos, you can actually go and get
| | 00:11 | additional information about that photo
and the geographic region, and so on.
| | 00:16 | To further add this realism to the
rest of the prototype, we are going to go
| | 00:19 | ahead and build in one of these
pages for the next photo in line.
| | 00:24 | So, we are going to walk
through that whole process here.
| | 00:26 | The easiest way to get this
started is to create a duplicate page.
| | 00:30 | This particular page with this flip
side information is more than adequate for
| | 00:34 | what we are going to be
doing for the other pages.
| | 00:36 | They are all going to look fairly similar.
| | 00:37 | So, I am going to do, first of all, is
I am going to rename this page from the
| | 00:42 | flipside to flipside 1, and then
I am going to create a duplicate.
| | 00:49 | The easiest thing to do: just drag the
page to the new Duplicate Page icon in
| | 00:54 | the Pages panel, you get a copy right away.
| | 00:57 | I'll just drag that down underneath
the photo 2, and I don't need to drag it
| | 01:01 | down beneath the photo 2.
| | 01:02 | It just helps me visually
organize things a bit better.
| | 01:05 | I am going to rename this one flipside 2.
| | 01:09 | We've got a few things in here
that are going to stay the same.
| | 01:11 | The text isn't really going to change, but the
title is going to change, and so is the photo.
| | 01:16 | So, I am going to hop over to my master
page, and I am going to hide my slices.
| | 01:21 | I am going to select my second photo
here, my thumbnail, and I am going to
| | 01:26 | copy that, and I will hop back into my
flipside 2, and I am going to go ahead and paste it.
| | 01:32 | I am going to paste in in exactly
the same location so it's over here on
| | 01:35 | the right-hand side.
| | 01:36 | So, I am going to drag this over, and I
am just going to get it roughly in line,
| | 01:41 | and line it right up actually.
| | 01:44 | Then one little handy thing I make
use of if, I'm having to put images in
| | 01:48 | exactly the same location, is I'll lay
one on top of the other, and I'll use my
| | 01:52 | Shift and arrow keys a couple of times
just to move it out of the way because
| | 01:55 | it's a controlled amount, select the old
image and delete it and then select the
| | 02:00 | new image and just put it back into place.
| | 02:03 | That way you know it's in exactly
the same spot - really handy if you are
| | 02:06 | trying to match things up.
| | 02:07 | Now, the other thing we need to
change here is the title, so I am going to
| | 02:10 | select the text here.
| | 02:12 | I will triple-click, and I'll
just change this to Red Rock.
| | 02:16 | The body text down here
doesn't really need to change.
| | 02:19 | It's just Lorem ipsum text, and I
added that in through one of the commands
| | 02:22 | inside of Fireworks.
| | 02:23 | You'll see here Commands > Text,
and there is the Lorem ipsum option.
| | 02:27 | But I do want to show you some of the neat
text selection features that are in Fireworks CS5.
| | 02:32 | So, I am going to go ahead
and select that text block.
| | 02:35 | As you saw earlier with my title, if I
triple-click on a text block, I select
| | 02:40 | the entire paragraph.
| | 02:41 | If I double-click, I select a single word.
| | 02:44 | Now, if I have one word selected and I
hold down Shift and Option, I can select
| | 02:50 | other words inside that
paragraph, just by clicking on them.
| | 02:55 | So, I can go through an entire
paragraph and maybe pick up two or three words
| | 02:59 | that I want to change.
| | 03:00 | Maybe I want them to look
bold or change the colors.
| | 03:02 | So, in this case here, I am going to
grab those four selected elements and
| | 03:06 | change them to be bold text, just like so.
| | 03:10 | Now, the other neat thing about this
is that there's another nice little text
| | 03:13 | selection feature inside Fireworks.
| | 03:16 | If I go over to any one of these
bold words, hold down my Option key and
| | 03:20 | double-click, it selects every
single iteration of that bold text in the
| | 03:25 | paragraph, which is a real timesaver if
you want to make changes like change the
| | 03:28 | color of that bold text or maybe even
just change it back to being regular text.
| | 03:32 | Now, one other thing I'll show you
what text features while we are here.
| | 03:36 | I am going to go back up to my title.
| | 03:37 | I am going to triple-click
to select the whole thing.
| | 03:41 | If I hold down my Command key and
press the right arrow key, you can see that
| | 03:46 | I'm adding additional tracking between
each of the letters in my title. Every
| | 03:51 | time I do that by holding down the
Command key and pressing the right arrow key,
| | 03:55 | I am changing the spacing by a factor of 10.
| | 03:58 | Now, if I hold down the Shift key and the
Command key and then press the right arrow key,
| | 04:04 | changing that spacing by a factor of 100.
| | 04:06 | If you take a look down in the
Properties panel, you'll see that my kerning and
| | 04:10 | tracking value is changing.
| | 04:12 | Just watch that window there for
one second. I'll do this one more time.
| | 04:14 | See how it boosted up to 300?
| | 04:17 | So, a great way to increase the spacing
between your characters without having to
| | 04:22 | do it painstakingly
through text selections, and so on.
| | 04:24 | It saves you a lot of time.
| | 04:26 | That's it for text selection.
| | 04:27 | I just want to go through a couple of
more things on the interactive side.
| | 04:30 | Because we created a duplicate from our
flipside 1 page, the hotspot that's down
| | 04:35 | here - I'll just switch back over to
my pointer tool - is I am going to be
| | 04:39 | pointing back to photo 1.
| | 04:40 | So, we want to change that link to
photo 2, and I am going to switch over to
| | 04:46 | my photo 2 page, and we need to add in the
hotspot to move over that flipside image.
| | 04:52 | So I am going to select the text,
right-click, Insert Hotspot and change the
| | 05:00 | link for that hotspot to flipside number 2.
| | 05:04 | So, now I've got interactivity going
back and forth between photo 1 and flipside
| | 05:09 | and photo 2 and flipside 2.
| | 05:11 | Ideally, we'd repeat this process with
the other images in the prototype to sort
| | 05:15 | of flesh it out and make it
look a little more realistic.
| | 05:18 | But you get the idea, and there is no need
to keep showing these over and over again.
| | 05:23 | Feel free to practice those steps
though, if you want, on photo 3 and on photo 4.
| | Collapse this transcript |
| Troubleshooting| 00:00 | Well, we're almost ready to create our
AIR prototype. I've gone ahead and added in
| | 00:04 | the additional pages here -
flipside 1, flipside 2, flipside 3, and 4,
| | 00:10 | so that we have a better
interactive experience, but before we get into
| | 00:13 | exporting the prototype, I want to talk
a bit of some other things to consider.
| | 00:17 | In our case here, we have a pretty
regular shape, we've got a rectangular
| | 00:20 | application, but the great thing about
building these AIR prototypes and AIR
| | 00:25 | applications in general: they
aren't limited to being in a square.
| | 00:28 | You could actually create some very interesting
odd-shaped kind of application areas.
| | 00:33 | Now, if you're going to go along that
route and do something a little bit more
| | 00:36 | organic-looking, then you want to
make sure of a couple of things.
| | 00:39 | First of all, make sure that all your
pages have a Canvas Color set to no color.
| | 00:44 | The transparency is really important
for anything that's not a rectangle.
| | 00:50 | Now, the other thing to be aware of is
that to make that transparency work, you
| | 00:55 | have to make sure that your
base optimization is set to PNG 32.
| | 01:00 | So any areas that aren't sliced, in our case
here, I'll just turn the slices on for a minute,
| | 01:04 | we've only got a few slices in this design.
| | 01:07 | Any areas that aren't sliced, which
includes our background, are going to export
| | 01:11 | out as PNG 32, which
supports alpha transparency.
| | 01:15 | So if you had, for example, an
application that was maybe a circle and had a
| | 01:20 | drop shadow behind it, not only would
the circle appear to be sitting as a
| | 01:24 | circle on top of the desktop, but the drop
shadow would also display properly as well.
| | 01:29 | So make sure your canvas is set to
transparent, make sure your base page
| | 01:33 | optimization is set to PNG 32.
| | 01:35 | Images that are inside the application,
like our photos here, if I go back to my
| | 01:40 | master page and turn on my slices,
these are all exporting as JPEG files.
| | 01:45 | And this shouldn't be an issue, really,
because they're inside the main application.
| | 01:49 | If they we're overlapping the outside
of the application, and they were sitting
| | 01:53 | partially outside the main area of our
application, then PNG 32 would be the way
| | 01:57 | to go with those as well.
| | 01:59 | So make sure you got those things checked
out and just do a once-over of the file.
| | 02:03 | Now, one other way to check your
application, before you go through all the
| | 02:07 | steps of building it, is actually
right inside the Create AIR File Command.
| | 02:14 | Now there is a lot of fields in here -
| | 02:15 | we're going to be filling these out in
a next lesson, but I want to point out
| | 02:18 | one specific option down here
at the bottom. It says Preview.
| | 02:21 | If I click on Preview, Fireworks
generates all the temporary pages needed for
| | 02:28 | my AIR prototype and literally launches sort
of a pre-launch version of the application.
| | 02:34 | So there it is showing up.
| | 02:35 | I can drag it around and
so on, but wait a second.
| | 02:38 | This is kind of weird.
| | 02:39 | I've got a title bar.
I've got scrollbars.
| | 02:42 | I can scroll up and down in my application.
| | 02:44 | This isn't what I want at all.
This is why the preview is really handy.
| | 02:48 | You can check and see if there are
any issues inside of your designs.
| | 02:52 | So I'm just going to click one of the photos.
| | 02:54 | That seems to be okay.
| | 02:55 | I'm just going to check links, and so on. Oh.
| | 02:58 | Well that's interesting too.
| | 03:00 | More info isn't linking off
to my little flipside page.
| | 03:03 | So there is something else I've got to watch for.
| | 03:05 | So I'm going to close this down, and we'll
see how we can resolve some of these issues.
| | 03:10 | Now, first of all, resolving the title
bar occurs right inside the applications
| | 03:14 | settings, where you see Window Style,
and you want to change that from System
| | 03:18 | Chrome to Transparent.
| | 03:20 | And the other thing you want to
be aware of are those scrollbars.
| | 03:22 | The scrollbars will still show up, even
if the Window Style is set to transparent,
| | 03:26 | if Fireworks feels that there is not
going to show the entire application.
| | 03:31 | Now, our actual design if you take a
look down here near the bottom right
| | 03:35 | corner in the background here you'll see as
800 x 600, but I've set my Window Size to 803 x 603.
| | 03:43 | And by doing that, I'm giving a
little more breathing room around the
| | 03:46 | application, and that's going to
resolve any issues with scrollbars.
| | 03:50 | So if I do a quick test again, now
that we've set the Window Style to
| | 03:54 | transparent, that's a little more like it.
| | 03:57 | Okay, there is our design, and it's
just moving around just as we expect.
| | 04:02 | Again, we can navigate through the pages and so on,
and I can close it down here. So that's better.
| | 04:09 | Now the links still aren't working, so
I'll figure out what's going on there next.
| | 04:13 | So I know that those options are
good, and by the way, Fireworks may not
| | 04:16 | remember these settings, so when
you go to create the AIR file just
| | 04:20 | double-check to make sure they are set.
| | 04:21 | So I'm going to cancel out of this, and
let's try to figure out what's going on
| | 04:26 | with our links here.
| | 04:27 | First thing I'm going to do
is select the link itself
| | 04:30 | so it's going to flipside 1.
And let's just take a quick peek, the very
| | 04:36 | beginning of my Link I have a space, and
I'll bet you that's what's causing the problem.
| | 04:43 | So what I'm going to do - I could change
it right here, but chances are that space
| | 04:49 | is somewhere else as well.
| | 04:51 | So we're going to go over to our pages.
| | 04:53 | There is flipside 1. I'm going to
double-click on this and yeah, if you look
| | 04:57 | really closely at the beginning
of that file name, there is a space.
| | 05:02 | And that's probably what's causing
our problem, so I'm going to go ahead
| | 05:05 | and delete that space.
| | 05:06 | It's really hard to see.
| | 05:07 | So watch out when you're working with
file names, if you're typing stuff in,
| | 05:11 | especially if you're copying and
pasting names in, that you don't end up with
| | 05:14 | extra spaces at the beginning of your names.
| | 05:17 | Now, I'm going to go ahead and just
change that one, and if I select the hotspot
| | 05:22 | again for photo 1, you'll notice I
don't have any gap here between the letter f
| | 05:27 | and the beginning of that text field.
| | 05:29 | One more way to check this out: go back
to Commands > Create AIR File, and set
| | 05:37 | it to Transparent, just so it looks right,
| | 05:39 | and we'll go ahead and preview this one
more time to see if that really is the problem.
| | 05:45 | I'll just move this up a little bit.
Here is my More info - ah, that was it.
| | 05:51 | That was our problem. That one extra
space at the beginning of those page names
| | 05:55 | is what threw everything off.
| | 05:56 | So I'm going to close that.
| | 05:57 | I'm going to cancel out of
my AIR file one more time.
| | 06:01 | And what I'll do next is fix those
other file names, those other page names that
| | 06:06 | have that extra space.
| | 06:08 | So I'll just go through here and just
scroll down, finish off these guys, and
| | 06:14 | I've got one more thing I want to
show you before we wrap up, because it's
| | 06:18 | another one that can catch you
when you're not expecting it.
| | 06:23 | By the way, the nice thing about
changing the page names like this is that
| | 06:26 | Fireworks automatically updates,
as you saw earlier, the actual link.
| | 06:31 | So I don't have to worry about going
back and changing the interactivity;
| | 06:35 | Fireworks updates that for me right away.
| | 06:37 | Now, one last thing I want to point
out here. I'm just going to select a
| | 06:41 | hotspot here for a minute.
| | 06:42 | And I want to point out a reminder on
this one, I can't stress this one enough,
| | 06:46 | is that's when you're going to add
links into your web objects, please make sure
| | 06:51 | that you're always grabbing
from below the dividing line.
| | 06:55 | These are the actual physical links
that are part of the current design.
| | 06:58 | What you see up here is essentially
a history of the links that have been
| | 07:02 | accessed at some point.
| | 07:04 | If you choose these options, it'll
appear to work, but if you choose any
| | 07:08 | of these links, while it appears to work, the
interactivity actually doesn't get applied.
| | 07:12 | So always work with the actual physical links
that are the part down below the dividing line.
| | 07:18 | Well, we're going to go ahead and save
this file, and in the next lesson, we'll
| | 07:21 | go ahead and do our export.
| | Collapse this transcript |
| Creating the AIR prototype| 00:00 | We're at that final step where we're
going to generate this photo gallery as
| | 00:04 | an AIR prototype, and I've added in
a couple of extra pages here just to
| | 00:08 | finalize the realism.
| | 00:09 | We've got all the flip side pages.
| | 00:12 | So we can see the different elements
for each of the different images here.
| | 00:18 | And really, all we've got to do
now is go through that export process.
| | 00:21 | Now, the first thing I want to do is
make sure I select the page that I want to
| | 00:25 | appear first in my application.
| | 00:27 | So photo 1 is the page I want to work
with, and that's going to be the starting
| | 00:31 | point or the launching point for the application.
| | 00:33 | And I'm going to go to
Commands > Create AIR File.
| | 00:37 | Now, this dialog box may look a
little intimidating, but it's not too bad.
| | 00:42 | Once you've gone through the
process a couple of times, it's
| | 00:44 | pretty straightforward.
| | 00:45 | The first thing I want to do here is going
to the Application Settings. You'll see
| | 00:49 | I've got some asterisks beside certain fields.
| | 00:51 | I have to have these fields filled in.
| | 00:53 | Now, Fireworks, by default, will
use the file name for these fields.
| | 00:58 | So I'm going to change this though.
| | 00:59 | I'm going to change this to explore_cali.
| | 01:03 | And I'll also change the ID.
| | 01:05 | I can't use any special characters in the ID.
| | 01:08 | So I'll just add an uppercase
letter in there, and the Version number.
| | 01:13 | We can also include a description
here, so I'm going to type in a quick
| | 01:16 | description "Photo Gallery
application for Explore California Website."
| | 01:29 | And it would be really good if I
spelled California, there we are.
| | 01:32 | I could also add in copyright information if
I like. I am not going to bother in this case.
| | 01:37 | It's only a prototype.
So I'm going to go into my Window Style now.
| | 01:40 | We saw this in the previous lesson.
| | 01:42 | We're going to switch that to
Transparent, and we're going to change the sizes
| | 01:46 | of our window just slightly, just
adding a few extra pixels to the width and
| | 01:51 | height, so that we don't
run into any scrollbar issues.
| | 01:53 | Select Icon Images,
| | 01:55 | if you want to add in your own
customize icons for the application, this is
| | 01:59 | the place to do it.
| | 02:00 | Now, keep in mind that you have to have
four separate files that are the exact
| | 02:06 | dimensions that you see on my screen
right now, 128 x 128 and so on, and they
| | 02:11 | also must be PNG files.
| | 02:13 | So I'm going to go ahead and browse for these.
| | 02:16 | And I've put them all
inside of their own folder.
| | 02:18 | I've got my actual PNG file for the
mockup, and I've got all my other icon
| | 02:24 | files in here as well.
| | 02:25 | So I'm going to select my icon_large first,
and browse for the next one, and so on.
| | 02:37 | So those guys are all added in.
| | 02:39 | I'll just click OK.
| | 02:40 | And you'll see they get added down
below in the Installer Settings area.
| | 02:44 | Next option here is for the Content.
Now I want to use the current document, so
| | 02:48 | I'm going to go ahead and
click on that check box.
| | 02:50 | I'll be prompted for a folder, and
I've kept everything inside the air
| | 02:54 | folder here, so all my files for the export
are all sort of separate from everything else.
| | 02:59 | So I just need to select that folder and Choose.
| | 03:03 | And once Fireworks is done, you'll see in the
Initial Content field, there is my photo 1.htm.
| | 03:10 | So the first page of my app is showing
up right in there, and down below are all
| | 03:14 | the different files that are part of the export.
| | 03:17 | Now if I scroll down to the bottom
here, we'll also see that the actual mockup
| | 03:22 | file is part of this list as
well, because it was in that folder.
| | 03:25 | I'm going to select that and remove it.
| | 03:27 | We don't really need to
add that to the file size.
| | 03:30 | The next step here is Digital
Signature, and this is a mandatory part.
| | 03:34 | You're not going to get any further
in your AIR prototype creation without
| | 03:36 | generating a digital signature.
| | 03:39 | If you have one already, that's great.
| | 03:41 | You can certainly browse for it, or you
can create one. Fireworks gives you the
| | 03:45 | opportunity to create
essentially a fake digital signature.
| | 03:48 | So we're going to go ahead and create one.
| | 03:49 | I am going to give it a name, and you
have to fill in all of these fields in
| | 03:57 | order for this certificate to get generated.
| | 04:05 | And I'll use my favorite
password for this kind of thing: test.
| | 04:08 | There we go. Once all the fields are
filled in, you'll see that the Create
| | 04:12 | button becomes available. Click Create,
| | 04:16 | type in your password yet again, and
we just remember that for the rest of
| | 04:20 | the session, click OK.
| | 04:23 | The last little bit here is the Destination.
| | 04:24 | You can actually customize the
destination if you want to export the AIR
| | 04:28 | file somewhere else.
| | 04:30 | By default, it takes on the actual
file name of the original file, and we're
| | 04:35 | going to leave that just as it is.
| | 04:37 | And really, our next step is
just to click on Create AIR file.
| | 04:43 | And once the AIR file dialog box
disappears, you know that Fireworks is done
| | 04:47 | generating the AIR file.
| | 04:48 | So our next step, really, is to
go and install that AIR file.
| | 04:51 | So I'm going to go ahead and go to my
desktop, my exercise files, and open up
| | 05:00 | chapter 7, open up our air folder.
| | 05:02 | And you'll see inside of there,
slideshow_export.fw.air, that's the actual file.
| | 05:09 | So this is what I would e-mail the client, so
they could actually install it on their desktop.
| | 05:13 | So I'm going to double-click on this,
and you'll get your little warning message
| | 05:20 | about Are you sure you want to install this
| | 05:21 | because the publisher is unknown. I trust
myself, so I'm going to go ahead and install it.
| | 05:26 | And you can set the default destination,
and you can also determine whether you
| | 05:30 | want the application to
run after it's installed.
| | 05:33 | So I'm going to go ahead and just
accept the defaults and click Continue.
| | 05:39 | And within a few seconds, there
is our AIR app running onscreen.
| | 05:43 | We can mouse over the individual
elements that we see here, all the photos.
| | 05:47 | We can click on a photo.
| | 05:49 | We can go to More info.
| | 05:51 | We can see a bit more
information about the photo.
| | 05:53 | We can go back, and as I said, we can
drag around, and when we're done, we can
| | 05:58 | just close the application down.
| | 06:00 | So that's the process for
creating your AIR prototype.
| | 06:04 | Fill in that big form, and then once
it's exported out, you can test it away and
| | 06:09 | then feel free to e-mail off to
your client for their feedback.
| | Collapse this transcript |
|
|
8. Exporting to Flash CatalystWorking with Fireworks and Flash Catalyst| 00:00 | With its solid range of creative tools
and focus on pixel precision, Fireworks
| | 00:05 | is an ideal application for the
creation of Flash platform assets.
| | 00:10 | Now, Fireworks CS5 supports the latest
FXG 2.0 format, which lets you easily
| | 00:15 | export multi-page designs, even
individual objects, as editable FXG elements for
| | 00:21 | use in software such as Flash Catalyst.
| | 00:24 | Before we get into this lesson too
far, I want to talk about some of the
| | 00:28 | differences between the two programs.
| | 00:30 | Fireworks is a production
tool and a creative tool.
| | 00:33 | You've got bitmap tools, vector tools,
filters, a whole range of different
| | 00:38 | things you can do to create. As
you see onscreen here, some pretty
| | 00:41 | sophisticated looking designs.
| | 00:43 | That's what it's really geared to do.
| | 00:45 | Some simple interactivities
available through the use of hotspots and
| | 00:49 | rollovers, but there's
things that it just can't do.
| | 00:51 | Fireworks can't create an
interactive, movable, scrolling panel.
| | 00:56 | Now if you contrast that with Flash
Catalyst, Flash Catalyst is kind of at the
| | 01:01 | other end of the spectrum.
| | 01:03 | It's sort of that destination
program that completed artwork will go.
| | 01:07 | It relies on programs like Fireworks
or Illustrator or Photoshop to produce
| | 01:12 | assets that it can use and allow you to
build out rich interactive experiences.
| | 01:18 | Its creative tools aren't that
impressive compared to Fireworks.
| | 01:21 | For example, here are some of the
things you can do inside of Flash Catalyst
| | 01:25 | without touching a graphics application.
| | 01:27 | You can draw a bunch of different vectors.
| | 01:28 | You can fill them with solid
colors or gradient colors, add strokes,
| | 01:32 | things along that line.
| | 01:33 | You've also got a whole series of
component elements that have pre-built
| | 01:37 | interaction, in this case
here, like a vertical scrollbar.
| | 01:40 | Now again, like I said, the three shapes,
that's stuff that Fireworks can whip
| | 01:44 | off pretty easily; the interactive
vertical scrollbar, not something Fireworks
| | 01:49 | can do other than in mockup only.
| | 01:51 | So this kind of describes the
relationship between these two programs.
| | 01:54 | Fireworks is used for the design side
of things; Flash Catalyst is used to take
| | 01:59 | those static elements and turn
them into an interactive experience.
| | Collapse this transcript |
| Sending Fireworks files to Flash Catalyst| 00:00 | You can export out full designs from
Fireworks or individual objects, and just
| | 00:05 | to illustrate how the graphics in
Fireworks are supported inside of Flash
| | 00:09 | Catalyst, I want to stick with just a
couple of simple objects for the time
| | 00:12 | being, before we get into our design.
| | 00:14 | Here I've got two different shapes:
| | 00:16 | One of them is a symbol from
the Common Library, and it's all
| | 00:21 | constructed through vectors.
| | 00:22 | The other object here is also a vector,
but it's filled with a bitmap pattern,
| | 00:27 | and it has an Inner Bevel
live filter attached to it.
| | 00:30 | So let's just select this one object here,
and we're going to export this out as
| | 00:35 | an FXG graphic and see what it
looks like inside of Flash Catalyst.
| | 00:39 | I am just going to call this add_btn,
and notice in the Pages area I've chosen
| | 00:47 | Selected Objects in Current Page.
| | 00:48 | So only what's currently
selected is going to get exported.
| | 00:54 | Now if we hop over to our folder here,
you'll see there is the FXG file, add_btn.
| | 01:02 | There is also a folder here called
add_btn.assets, and you'll notice it's
| | 01:07 | empty at the moment.
| | 01:09 | So what that means is that Fireworks
was able to successfully export out that
| | 01:14 | symbol as a vector object.
| | 01:16 | Let's take a quick peek inside of
Flash Catalyst to see what that looks like.
| | 01:21 | We're just going to go ahead and
create a new project from an FXG file, and
| | 01:28 | inside of there is our add_btn.
| | 01:29 | There is our object.
| | 01:35 | If we take a look over in our
Layers panel in Flash Catalyst, you'll see
| | 01:39 | we've got the selection.
| | 01:41 | It's called Selection
because it was a selected object.
| | 01:43 | Inside of there, we actually
have the master component for this.
| | 01:49 | Now we don't see much else going on here,
just that subelement here called master.
| | 01:55 | Now, if I go over to the object itself,
| | 01:57 | I am going to do a couple of things here.
| | 01:58 | First of all, let's just prove
that this is indeed a vector.
| | 02:01 | I am going to hold down
my Shift key and scale it.
| | 02:04 | If that was a bitmap, it
wouldn't look nearly so nice.
| | 02:08 | So I am going to undo that scaling, and
I am going to right-click on that object.
| | 02:13 | You'll see here an option
called Break Apart Graphic.
| | 02:16 | So what we've got here is that
original symbol that's been grouped together.
| | 02:20 | So I am going to go ahead
and choose Break Apart Graphic.
| | 02:23 | When I do that, you'll notice that there
is a slight change over in the Layers panel.
| | 02:27 | We now have a layer called State_1.
| | 02:29 | If I expand that down, we've got a
layer_1, Group_1, and then we've got all
| | 02:35 | the individual pieces.
| | 02:37 | You can see, on my canvas area here,
those elements being selected as I click on
| | 02:43 | them in the Layers panel.
| | 02:45 | So all the elements were kept together
as essentially a grouped object, so the
| | 02:50 | symbol came across as a grouped object,
and we can ungroup that and make changes
| | 02:54 | to editing, and so on.
| | 02:55 | Let's hop back over to Fireworks again.
| | 03:00 | Now if we export this
graphic, here's what we'll get.
| | 03:05 | I can go up to my File menu,
and import that object.
| | 03:08 | There is the Adobe FXG file, and I'll
look for my bevel_btn, and I'll open that up.
| | 03:17 | That object is now right into place as well.
| | 03:19 | But there's a big difference
between this shape and this one.
| | 03:23 | Take a look over here in our Layers panel.
| | 03:26 | What we have here is an image, and in
fact if we double-check that folder, you'll
| | 03:31 | see inside the bevel_btn.assets
folder, we have the actual bevel_btn.
| | 03:36 | It's been converted to a bitmap.
| | 03:38 | The reason for that is that the
attributes we used for the button aren't
| | 03:42 | supported by the FXG format.
| | 03:45 | So things like the Fireworks bevel
and the pattern fill, these are both
| | 03:50 | attributes that can't be
translated by the FXG export engine.
| | 03:54 | So rather than give you something that
doesn't look anything like what you had,
| | 03:58 | what happens is the object
gets converted into a bitmap.
| | 04:01 | So the up side is it looks exactly like
what you created inside of Fireworks.
| | 04:06 | The down side is that if you decide to
scale this guy, it can get pretty ugly
| | 04:13 | pretty fast because it's a bitmap object.
| | 04:16 | That's one of the things to watch out
for and making sure that when you are
| | 04:19 | exporting out your elements,
you know what to expect.
| | 04:23 | Be aware that this is the
kind of thing you can run into.
| | Collapse this transcript |
| Understanding FXG 2.0| 00:00 | I have been tossing around this format
term called FXG for a little bit here,
| | 00:05 | and I thought maybe it's about time we
actually explain what the heck that is.
| | 00:10 | FXG stands for Flash XML Graphic.
| | 00:12 | Now, according to Adobe, it's an XML-
based graphics interchange file format
| | 00:17 | for the Flash platform.
| | 00:19 | The 2.0 version contains high-level
graphical and text primitives that can
| | 00:22 | be used to create, group, transform, and
visually modify basic vector and bitmap images.
| | 00:28 | The FXG rendering model follows the
same model as the Flash Player 10 rendering
| | 00:33 | model, and exposes all the graphics
capabilities of the Flash platform, as well
| | 00:37 | as offering expandable support to
accommodate future capabilities of the Flash Player.
| | 00:43 | So what does that mean?
| | 00:45 | It means that the format can describe
basic vector shapes like rectangles,
| | 00:48 | ellipses, and polygons, such as
we've seen in the previous samples.
| | 00:53 | It supports rich text, and
can link to bitmap graphics.
| | 00:56 | Now, Adobe seems to be pushing fairly
hard to make this a format that all the
| | 00:59 | major creative suite applications can use.
| | 01:02 | Currently, Flash CS5 Professional,
Illustrator CS5, and even Photoshop CS5 can
| | 01:07 | create and edit FXG 2.0 graphics.
| | 01:09 | Now, Fireworks can't edit the format,
but it can create the FXG format through
| | 01:14 | the FXG images export
workflow that we've already seen.
| | 01:18 | Now, Flash Catalyst CS5 can open or
import those FXG graphics, and they can be
| | 01:23 | further edited by round-tripping
them out to Illustrator or Photoshop.
| | 01:27 | Now admittedly, these are
pretty simple definitions.
| | 01:29 | If you want more information about FXG,
make sure to visit the address shown below.
| | 01:35 | Now, we've seen a couple of examples
of what happens when you export out
| | 01:38 | objects as FXG and images.
| | 01:41 | What does the script actually do?
| | 01:43 | The FXG export script takes your
existing Fireworks design or objects, and
| | 01:48 | converts the artwork into FXG graphics.
| | 01:51 | The script encounters bitmaps or
anything that's not supported by FXG 2.0 as
| | 01:55 | we've seen, it converts these objects
into flatten PNG files and saves them to
| | 02:00 | a folder, and then establishes a link from
the FXG document to the bitmaps in that folder.
| | 02:06 | Now, the advantage of this export
workflow is that your design will look
| | 02:10 | practically identical to
the original Fireworks design.
| | 02:13 | Occasionally, text is misinterpreted and
requires a little tweaking when in Flash Catalyst.
| | 02:18 | But generally, this is easy to do
because Flash Catalyst supports editing text.
| | 02:22 | So in a nutshell, pages, states, layers,
sublayers, text, symbols, vectors,
| | 02:28 | masking, bitmaps, some live filters,
gradients, and blending modes are all
| | 02:32 | natively supported by FXG 2.0, which
gives you a pretty robust format with a lot
| | 02:38 | of editing flexibility.
| | 02:40 | What's the catch to all this? It sounds great.
| | 02:42 | Well, the bad news is mainly that FXG is
a fairly new file format and while many
| | 02:47 | Fireworks or Photoshop or Illustrator
features are supported, there are also
| | 02:51 | many features that aren't support.
| | 02:54 | As I mentioned earlier, anything
which isn't supported gets exported as a
| | 02:57 | bitmap, and you've got that
automatic limitation with bitmaps.
| | 03:00 | They're resolution-dependent.
| | 03:02 | So as you saw, when we created the
button with an Inner Bevel in Fireworks,
| | 03:06 | you'll get a button with an Inner
Bevel in FXG, but it's a bitmap button, and
| | 03:10 | that means scaling is
pretty much out of the question.
| | Collapse this transcript |
| Exporting as FXG 2.0| 00:00 | I've got a typical prototype here in
Fireworks for a Flash-based or interactive
| | 00:05 | photo gallery, and it's
done the traditional way.
| | 00:09 | We've got multiple pages showing
off the different layouts, and so on.
| | 00:12 | What we're going to do with this is we're
going to export this out into Flash Catalyst.
| | 00:16 | We're going to go to File > Export, and
I'm going to go a little upwards here in
| | 00:22 | my lessons, and I'm going to
create a brand-new folder for this.
| | 00:27 | I'm going to call this fw_gallery.
| | 00:33 | Open that up, and we want to export
this out as FXG and Images, and we're going
| | 00:39 | to export out the entire design,
so All Pages, and we'll click Save.
| | 00:44 | Now, depending on how complicated your
actual mockup was, it may take a few
| | 00:48 | seconds or a couple minutes
for the export to wrap up.
| | 00:52 | We're going to hop over to Flash
Catalyst, and we're going to choose Create a
| | 00:57 | New Project from Design File.
| | 00:58 | In this case, it's going to be an
FXG file, and there is my fw_gallery.
| | 01:03 | So, all we need to do is select that
FXG file and open it up. And again,
| | 01:08 | depending on the complexity of the
design, it may take a few seconds or a few
| | 01:12 | minutes for Flash Catalyst to import
everything and present the design for us.
| | 01:19 | We got a little warning message here,
and that's most likely because of some
| | 01:22 | scaling of some symbols, so I'm going to click
OK on that, and let's take a look around here.
| | 01:27 | Up at the top are our Pages/States.
| | 01:30 | Basically, Pages/States pretty much
represent what were on the pages inside of Fireworks.
| | 01:35 | We've got our common page, which
was the master page, our photo_1 page.
| | 01:40 | If I just move the display down a bit,
we can see that as we move through these,
| | 01:45 | everything looks pretty
much the way we would expect.
| | 01:49 | So that's not bad, and if we take a look
over here in the Layers panel, there is
| | 01:53 | all of our main layers: photo_4, photo_3,
photo_2, photo_1 and the Common layer.
| | 02:00 | Now, I'm going to go back to my Common
page here, and I'm just going to go ahead
| | 02:04 | and open up that one
folder for the Common Layer.
| | 02:08 | And we see here we've got a
scroll_panel. I can hide that.
| | 02:11 | It hides everything on the scroll_panel.
| | 02:13 | I can go ahead and hide my
main background image area there.
| | 02:17 | I can even hide the background itself.
| | 02:19 | So, that's not so bad.
| | 02:21 | But let's take a quick
look at something else here.
| | 02:23 | I'm going to go into my photo_1 page.
| | 02:28 | photo_1 not only has the feature_photo,
which is the enlargement - I can show and
| | 02:34 | hide that fairly easily,
| | 02:36 | but it also has the Master_Page_layer.
| | 02:38 | Now, currently that's locked.
| | 02:41 | But one of the things that happens
in this export from Fireworks to Flash
| | 02:45 | Catalyst is that the FXG script
essentially places all of the graphics from the
| | 02:50 | master page on every single page in the design.
| | 02:55 | So, if you notice here, I'm
going to hide the Master_Page_layer.
| | 02:59 | It's hidden from here, and
it's hidden inside the thumbnail.
| | 03:03 | If I go to my photo_2 page, you'll notice
that the Master_Page_layer is still visible;
| | 03:09 | all that content is still there.
| | 03:12 | So, what we've got here, while it's a
very accurate rendition, barring a couple
| | 03:17 | little vector issues, we have a
situation where we're running into a great deal
| | 03:22 | of duplication, which makes the file
that much larger, and possibly a little
| | 03:27 | less manageable, because we've got
duplicate elements on every single page.
| | 03:32 | So, let's hop back to Fireworks for a minute,
and take a look at another example here.
| | 03:37 | Now, I have another
version of the same slideshow.
| | 03:41 | This one is significantly more bare.
| | 03:43 | So there's my common page or my master page.
| | 03:45 | It has all the background elements.
| | 03:47 | All these things are still separate
graphical elements, whether they are
| | 03:50 | vectors or bitmaps, but on the photo
pages, I've only got the photo that's
| | 03:58 | necessary for that page.
| | 03:59 | I haven't bothered sharing the
master page to these particular pages.
| | 04:04 | So, the only thing I've got on these
pages is content that's different, and
| | 04:08 | I've got my master page handling all
of the other elements that are maybe
| | 04:11 | consistent from page to page.
| | 04:13 | This flies in the face of the whole
process of Fireworks prototyping in a way.
| | 04:17 | We're used to seeing something like this
that every page looks consistently the same.
| | 04:23 | We've got the background elements in there.
| | 04:25 | But because the way the export script
works, it's not the most efficient way to
| | 04:29 | send this file out to Flash Catalyst.
| | 04:32 | So, let's go back to this
particular sample one more time.
| | 04:34 | I'm going to go up to my common page, my
master page, and I'm going to export this one.
| | 04:39 | File > Export, and I'm going to
create a new folder for this one.
| | 04:45 | I'm going to go ahead and call
it fc_gallery, open that up.
| | 04:54 | We're exporting out the entire
design again, and we'll click Save.
| | 05:01 | Let's hop back over to Flash Catalyst,
and we're going to go to File > New
| | 05:06 | Project from Design File.
| | 05:07 | We're not going to save this previous one here.
| | 05:10 | So I'm going to go ahead and say No for saving.
| | 05:15 | Then we'll go into our Lesson 08
folder, look for the fc_gallery, grab that
| | 05:20 | Common FXG file again and open that up.
| | 05:28 | This actually imported a little bit faster
because not as many objects had to be brought in.
| | 05:32 | So we're still getting that error
message about skewed items, and I have a
| | 05:35 | feeling it's got to do with my
little overlay mask you see over here.
| | 05:39 | But my main point here is to show
you what else we've got going on.
| | 05:43 | Notice at this point, all these pages
just have the photos on them, and the
| | 05:48 | Common Page has all the elements
for the background. That's great Jim,
| | 05:52 | but how do we get the stuff on the pages?
| | 05:54 | We need it everywhere.
| | 05:55 | Well, this actually is a pretty easy process.
| | 05:58 | I'm going to go to my Common layers layer.
| | 06:01 | I'm going to right-click on that layer,
and I'm going to choose to share To state.
| | 06:06 | In my case here, I'm going
to choose Share to All States.
| | 06:10 | You can see, the pages all
update with that content.
| | 06:15 | So, there we have that element there, and
with fewer issues across the entire design.
| | 06:20 | If I go to my photo_1 page, and then
take a look at the photo_1 layer, you'll
| | 06:25 | see that the photo_1 page really only
has the one photo, but all the other
| | 06:30 | elements are being shared
based on that Common layer.
| | 06:33 | So they're all visible.
| | 06:35 | So, if I go there, and I, for
example, - oh, I don't know,
| | 06:38 | I hide my background for a minute.
| | 06:40 | You'll see that it's hidden
from view on that specific page;
| | 06:42 | the other pages still retain the view.
| | 06:45 | So, it's just another way
to export out your files.
| | 06:49 | And my thinking on why this works
the way it does is that the original
| | 06:53 | export workflows for Flash Catalyst were
derived from Photoshop and also from Illustrator.
| | 07:00 | Especially with Photoshop, you're
always dealing with a single page, and the
| | 07:03 | only way to show a different state is
to turn off or turn on different layers.
| | 07:08 | In fact, it's also recommended if
you're designing Flash Catalyst applications
| | 07:12 | in Illustrator to work on a single
artboard rather than multiple artboards.
| | 07:17 | So, the process is there.
| | 07:19 | I don't think it's necessarily the most
smooth flow, but if you know what you're
| | 07:23 | up against before you get into things,
I think you'll find it a lot easier to
| | 07:27 | work inside of Flash Catalyst.
| | 07:29 | Coming up next, we're going to take
some of these Fireworks objects, these
| | 07:32 | static graphics, and turn them
into an interactive scrollable panel.
| | Collapse this transcript |
| Creating a scroll panel| 00:00 | We're back in Fireworks here with our
photo gallery mockup and I just wanted to go
| | 00:06 | through a couple of little points here,
and then we're going to be hopping back
| | 00:09 | into Flash Catalyst.
| | 00:10 | Now, I realized this is
not a Flash Catalyst course.
| | 00:14 | In many cases, as a designer, you may
want to pass off just the graphics and the
| | 00:17 | exported FXG file to your developer.
| | 00:20 | But personally, I think it's a good idea
to get a sense of what can be done and
| | 00:25 | once you get a handle on the things you
can do fairly easily in Flash Catalyst,
| | 00:29 | it might empower you to start
offering more services that way.
| | 00:33 | Let's take a quick peek here in
Fireworks and see what we've got.
| | 00:36 | I have this panel over
here with a series of photos.
| | 00:40 | In fact, if I zoom out a little bit
more, you'll see there are six photos
| | 00:48 | in this little strip of pictures,
and beside that, I've got this very
| | 00:54 | simplistic little scrollbar.
| | 00:56 | Now, in Fireworks, here is the deal:
| | 00:59 | typically, what I'd be doing is I'd only
leave the four photos inside the panel,
| | 01:04 | and I'd tell the client to envision
this as a scrollable panel, because
| | 01:08 | Fireworks can't create scrollable objects;
| | 01:11 | it just doesn't work that way.
| | 01:12 | It creates static graphics;
| | 01:13 | other than rollover effects, that's
pretty much what you're limited to.
| | 01:16 | However, by exporting this entire
thing out as FXG and bringing it into Flash
| | 01:21 | Catalyst, I can take all of these
elements here, all the photos, the panel
| | 01:26 | behind and the actual objects that make
up the scrollbar, and turn this into an
| | 01:31 | actual interactive component.
| | 01:33 | So let's hop back over to Flash
Catalyst, and see how to do this.
| | 01:37 | By the way, did I mention there's no
coding required? Very cool! I like that a lot.
| | 01:42 | So I'm going to hop back over to Flash
Catalyst, and we're going to start by
| | 01:45 | creating our scrollbar.
| | 01:47 | Now, the scrollbar is made
up of four elements here.
| | 01:49 | I'm just going to scroll around a little
bit, so we can see things a bit better.
| | 01:53 | We've got the arrows at the top and the bottom.
| | 01:56 | We've got the line in here that acts as
a track or a little object where you can
| | 02:01 | slide up and down through the scroll panel.
| | 02:03 | So what I need to do is I need to
Shift+Click to select all these different shapes.
| | 02:11 | There we go!
| | 02:12 | All four of those are selected and the
little heads-up display that comes up
| | 02:16 | here gives me the chance to choose a component.
| | 02:18 | And what do I want?
I want a vertical scrollbar.
| | 02:21 | Now you might think scroll panel,
but no, that's the larger group.
| | 02:24 | We'll be getting that in a minute.
| | 02:26 | First thing we need is the scrollbar itself.
| | 02:29 | Flash Catalyst kind of combines it
altogether, almost like a symbol inside of Fireworks.
| | 02:33 | Now it's a question of editing various parts.
| | 02:36 | So I'm going to click on the Edit Parts button.
| | 02:37 | I am going to start selecting elements.
| | 02:39 | So I'm going to go ahead and select
the line that runs up and down the panel,
| | 02:44 | and I'm going to determine that
that is going to be the track.
| | 02:49 | That's what the thumb is going
to travel on as the scroll works.
| | 02:52 | The next thing is the actual thumb
itself, the little square, and that's
| | 02:56 | going to be the thumb. Those are the
only two pieces I need for a scrollbar.
| | 03:00 | But I've got the up and down arrows, so hey,
| | 03:03 | we might as well make use of them.
| | 03:04 | So I'm going to click on my up arrow,
and I'm going to choose that to be the
| | 03:08 | Up Button, and I've got my down arrow, and
I'm going to set that to be the Down Button.
| | 03:15 | So now we've got pretty cool little component.
| | 03:18 | So if I double-click, I come back
to Flash Catalyst, to the main canvas,
| | 03:23 | you'll notice that my thumb is all of
a sudden at the top of the scrollbar.
| | 03:28 | Now let's take a look at what happens here.
| | 03:29 | I'm going to quickly go to my
File menu, and choose Run Project.
| | 03:35 | Flash Catalyst will export out the
entire thing as a temporary file and launch
| | 03:39 | it inside of a browser for me.
| | 03:44 | There is our project.
| | 03:46 | There's my little thumb, and check this out.
| | 03:49 | I'm actually able to move this
thing up and down. Pretty cool!
| | 03:53 | I can click on the up arrow or the
down arrow and the thumb follows along.
| | 03:58 | Nothing else is happening because
all we've built is a scrollbar at this
| | 04:01 | point, but that took what?
| | 04:03 | Less than five minutes.
| | 04:04 | Now, we've got an interactive element
there that's doing stuff that we couldn't
| | 04:07 | hope to do inside of Fireworks.
| | 04:10 | So let's go back over to Flash Catalyst.
| | 04:13 | The next part of this project is to
actually combine the scrollbar with these
| | 04:18 | elements that are going to be scrolling.
| | 04:19 | Now, the trick here is to make
sure you've got more elements than you
| | 04:22 | have scrolling area.
| | 04:23 | So the panel is the same height as the
scrollbar, which is kind of important,
| | 04:29 | but our images spill out.
| | 04:31 | So what we're going to do is hold down
the Shift key and Shift+Click to select
| | 04:35 | the photos and the background.
| | 04:41 | Everything is selected, and we're
going to go on Choose Component, and we're
| | 04:44 | going to turn this into a scroll panel.
| | 04:46 | For the scroll panel, there's
only one thing we have to set.
| | 04:50 | We'll click on the Edit Parts, and
| | 04:51 | you'll see To complete this
component make a selection and choose Convert
| | 04:54 | Artwork to Scroll Panel Part.
| | 04:55 | So we have to tell Flash Catalyst what
part of this is the part that's going to
| | 05:01 | be scrolling in and out.
| | 05:02 | So I'm going to go ahead and select
each of my images again, and then go to
| | 05:09 | Choose Part, and choose Scrolling Content.
| | 05:13 | Now, I didn't select the background,
keep in mind, I just selected the photos.
| | 05:17 | So now, you notice what's happened.
| | 05:19 | All we see are the four images that
fit inside the scrollable area, and the
| | 05:24 | other ones that were
bleeding out before are now gone.
| | 05:27 | Let's do this one time:
| | 05:28 | File > Run Project, and here we go, new version.
| | 05:40 | We can now scroll through all the
photos inside of that panel and not a single
| | 05:47 | line of code was written to do this.
| | 05:48 | I'm a big fan of that.
| | 05:51 | So I think this worked out really well.
| | 05:53 | There's lots of other things we could do here.
| | 05:55 | We could create interactive buttons
for the thumbnails that lead off to the
| | 05:58 | other pages that have the photos in them.
| | 06:01 | We could create transitions and all
these different things, but then we're
| | 06:03 | doing a Flash Catalyst course.
| | 06:06 | I just want to give you a sense of how
you can take your Fireworks Designs, the
| | 06:10 | artwork you create there, and turn it
into something that's actually interactive.
| | 06:14 | And even if you're not into
coding - and believe me I'm not,
| | 06:18 | it's not too hard to start putting
together these interactive elements yourself.
| | Collapse this transcript |
|
|
9. Working with Device CentralUsing Fireworks for mobile design| 00:00 | Mobile design and development continues
to be a growing part of the interactive
| | 00:04 | industry, and with Fireworks
capabilities, in terms of pixel precision and
| | 00:08 | flexibility of pages, I think it's an
ideal tool to create your mobile designs
| | 00:13 | for your upcoming projects.
| | 00:15 | The Pages feature alone
can save you a lot of time.
| | 00:19 | Here, we've got a mobile design set up
for vertical format, and in the next screen
| | 00:25 | down the same mobile application as
it would look in a horizontal format,
| | 00:29 | so with a device that uses an
accelerometer, and the elements are being moved
| | 00:33 | around to fit the orientation of the device.
| | 00:36 | We can present that information to the client.
| | 00:39 | We can bring in rich graphics,
incorporate any elements we want that we feel are
| | 00:44 | going to be necessary for the
interactivity of the device.
| | 00:48 | With the release of Creative Suite 5,
there's now an integration workflow
| | 00:51 | between Fireworks and Adobe Device
Central, which means you can start generating
| | 00:56 | layouts directly within Fireworks by
pulling in information from Device Central.
| | 01:01 | Now we're going to be looking at that
integration in the next few lessons,
| | 01:04 | as well as other ways in which
Fireworks can help you get a jumpstart on
| | 01:07 | your mobile design.
| | Collapse this transcript |
| Generating layouts from Device Central| 00:00 | Beginning a mobile design inside of
Fireworks is actually pretty easy, and partly
| | 00:04 | it's easy because we can rely on Adobe
Device Central to help us out by starting
| | 00:09 | us off with the right profiles.
| | 00:12 | So I'm going to go over to my File
menu here, and we're going to go and
| | 00:15 | choose Device Central.
| | 00:17 | Now Device Central opens up.
| | 00:20 | You can see a few things on the
Splash screen that are worth noting.
| | 00:23 | We can create new mobile files from
Fireworks Files, Captivate, Illustrator,
| | 00:29 | Photoshop, Flash and After Effects compositions.
| | 00:32 | And all I'm going do here is click on
the Fireworks File, and then we get this
| | 00:35 | New Document window popping up.
| | 00:37 | There is nothing in here at the moment,
so we still have to browse for the type
| | 00:41 | of profile we're going to be using.
| | 00:43 | Now we've some default profiles that are
sitting right here in the Test Devices panel.
| | 00:47 | I can select these fellows individually,
and you can see, as I select them, we're
| | 00:51 | seeing different devices show up.
| | 00:53 | We're getting a bit of information
about the dimensions of the screen and a
| | 00:58 | little bit of information
about the device itself.
| | 01:01 | So if I go ahead and select this
device that uses the Flash Player, I can go
| | 01:08 | right from there and choose Create,
and quite quickly, Fireworks generates a
| | 01:16 | brand-new empty document at the
dimensions required for that device.
| | 01:21 | Now that was a pretty much generic device.
| | 01:24 | If we hop back over to Device Central
again, let me just show you a little more
| | 01:28 | detail of what can be done here.
| | 01:30 | These are kind of some generic starting
points for developing a design, but we
| | 01:34 | can actually go into the Browse category
here, and we can literally browse for a
| | 01:40 | range of different devices.
| | 01:41 | You can see right up top, you've
have got some Apple iPad profiles.
| | 01:45 | I'm going to stick with a mobile
device more along the lines of a smartphone,
| | 01:50 | and I'm just going to go ahead and type in 320.
| | 01:53 | And as I do that, you see that I start
to pick up only the devices that have at
| | 02:00 | least one dimension in
that 320-pixel measurement.
| | 02:03 | So I'm going to go and be a little more
specific here, 320 x 480, and now we're
| | 02:10 | starting to see the range of
devices that are available that have that
| | 02:14 | specific dimension.
| | 02:16 | If I scroll down far enough, you'll see
here, I've got the Nokia slide phone, so
| | 02:20 | I can actually double-click on that.
| | 02:22 | I'll get a much larger
version of the phone onscreen.
| | 02:25 | I get a lot of information about the
phone itself, so as a mobile developer, I
| | 02:30 | will want to know this kind of thing.
| | 02:32 | From the standpoint of what I'm doing, in
terms of creating my design, once I got
| | 02:36 | a phone chosen, I can then create my own
testing group, and I'm going to call it
| | 02:44 | My devices, and I can drag that
new device into that testing group.
| | 02:52 | The phone profile is then
downloaded from Adobe, and I've now got it
| | 02:55 | available for local testing.
| | 02:57 | And then, just like we saw earlier, I
can go to the Create option, and you see
| | 03:01 | now there's my Nokia slide phone,
matching dimensions, and once again, I can click
| | 03:07 | on Create and get a brand-new
document for that particular device.
| | 03:12 | I can continue to do this
with any device that I want.
| | 03:14 | If I'm planning to design for
different device dimensions, I can bring in a
| | 03:18 | couple other devices that have
slightly different dimensions to their screen.
| | 03:21 | And then I can essentially start
to build out designs based on that
| | 03:24 | specific information.
| | Collapse this transcript |
| Previewing mobile designs in Device Central| 00:00 | Once you have a mockup fleshed out,
and you want to see how it's going to look in
| | 00:03 | your intended devices,
| | 00:05 | it's a really easy thing
to do inside of Fireworks.
| | 00:08 | Make sure you're on the page you want to
preview, go to the File menu and choose
| | 00:12 | Preview in Device Central, and that
will load the current screen or the current
| | 00:16 | page in the device of your choice.
| | 00:18 | So there's a generic Flash Lite Device.
| | 00:21 | If I go ahead and choose my Nokia
device here, double-click, you can see the
| | 00:26 | changes here as well.
| | 00:27 | And once I've got the page previewing
in the device, I can play around with some
| | 00:31 | different environmental concerns.
| | 00:32 | So, for example, backlighting.
| | 00:34 | How does the screen look when
I'm reducing the backlighting?
| | 00:38 | Reflections, we can look at Indoors,
Outdoors, even Sunshine, and we can also
| | 00:45 | play around with things
like the gamma and contrast.
| | 00:48 | So I can reduce or increase the
gamma; same thing with the contrast.
| | 00:52 | We can see how it's going to look there.
| | 00:53 | Now what if I'm dealing with a device
that has an accelerometer built into
| | 00:58 | it, and I want to see how my design is
going to look when the entire device is rotated?
| | 01:03 | Well, if we hop back over to Fireworks
again, we do happen to have, in my second
| | 01:10 | page here, a horizontal
version of this mobile device.
| | 01:13 | So by selecting that specific page, I
can go ahead and go back to File > Preview
| | 01:19 | in Device Central, and now you're
going to notice something a little odd.
| | 01:23 | The screen is still running horizontally.
| | 01:25 | And if you look down at the bottom of
your screen, you'll see those two little
| | 01:28 | Rotate buttons, and you think that's going
to solve the problem, and it actually doesn't.
| | 01:33 | So what you need to do in order to see
your horizontal screen layout, based on a
| | 01:38 | horizontal design, is you've got to
go back to Fireworks, and at this point
| | 01:44 | anyway, rotate your entire canvas.
| | 01:47 | So we'll put a Modify > Canvas,
and we'll choose Rotate 90 degrees
| | 01:53 | Counterclockwise, like so.
| | 01:55 | So that updates everything on that
specific page, and we'll go back to our
| | 02:00 | File menu > Preview in Device Central,
and now we see - if we rotate it
| | 02:05 | around enough, how the design is going to
look when it switched over to a horizontal view.
| | 02:09 | So you can get a somewhat realistic
perspective on things here, just by working
| | 02:15 | with the static designs inside of Fireworks.
| | 02:18 | Now I do want to point out these are
not interactive; these are just literally
| | 02:21 | screen previews of the designs.
| | 02:24 | So you can't click on any buttons,
even if you programmed in interactivity.
| | 02:28 | There is a way to turn these screens
into interactive elements within Device
| | 02:32 | Central, and we'll be looking at
that process in a later lesson.
| | Collapse this transcript |
| Using a mobile design template| 00:00 | So far, we've looked at how to start a
mobile design by working with Device
| | 00:05 | Central and picking a specific device profile.
| | 00:08 | We've also looked at how we can
preview an existing design in Device Central.
| | 00:12 | I want to show you one more feature
that can help jumpstart your mobile
| | 00:16 | projects, and that's coming back to the
template feature inside of Fireworks CS5.
| | 00:21 | So here on my Splash Screen, I'm
going to choose, from the Create New
| | 00:24 | category, From Template.
| | 00:26 | We've got an entire folder here
dedicated to mobile templates.
| | 00:30 | We have got several to pick from.
| | 00:32 | When you click on each one of these,
you can browse through the different pages
| | 00:35 | that are part of that particular mobile
template, and once you find one that you
| | 00:40 | like, all you've got do is open it up.
| | 00:43 | I'll just page down.
| | 00:45 | We've got a Search page, we've got a
Search result page, we've got a Navigation
| | 00:49 | page and then a blank one that we
can add in our own customized elements.
| | 00:54 | The important thing to note with these
is they are actually Fireworks documents,
| | 00:58 | so we can select different
elements and customize them as we'd like.
| | 01:02 | So another way to get things
rolling when you start your foray into
| | 01:06 | mobile design.
| | Collapse this transcript |
| Customizing a mobile design template| 00:00 | Now when you open a template, one of the
other nice things about these templates
| | 00:04 | is they are Fireworks PNG files, which
means that all the elements inside the
| | 00:10 | design are editable.
| | 00:12 | So I can go and not just move things
around, but I can select elements, like in
| | 00:17 | this group here for the address
in this navigation app design,
| | 00:21 | I can select the background.
| | 00:22 | Maybe I don't want that black shading.
| | 00:25 | Maybe I want to change that to something a
little more in keeping with the rest of the app.
| | 00:29 | So I will take it out to a deep blue.
I can do the same thing, I'll move on to my
| | 00:34 | Navigation section, do
the same kind of thing here.
| | 00:36 | I'll select this vector shape, hold
down my Shift key and select the other
| | 00:41 | vector background and change the
color there as well to that deep blue.
| | 00:46 | So I have got a lot of flexibility in
customizing things, not just in position,
| | 00:50 | but really just all the
attributes that are there.
| | 00:53 | Now once I've customized the
application to the way I want, I can then save
| | 00:57 | this out again as a template, so I can
choose File > Save as Template, and I can
| | 01:03 | then save the template.
| | 01:04 | Now if you're on Windows, you won't be
able to save your templates back into the
| | 01:09 | Fireworks templates folder. It's buried
inside the program files and a standard
| | 01:13 | user account control won't let you
save things back into this location.
| | 01:18 | So you will need to pick a different
location to save it, but you'll still be
| | 01:21 | able to create the template, save it
off with your customizations and share
| | 01:25 | other people on your design team.
| | Collapse this transcript |
| Testing a mobile project| 00:00 | We've seen how to preview individual
screens from a Fireworks mockup in Device Central.
| | 00:06 | But I want to show you another way of
working with this mockup that makes it all
| | 00:10 | more interactive withinside of Device Central.
| | 00:13 | This particular mockup has got a few
screens to it, and I'll just page down
| | 00:16 | through them, maps, and so on.
| | 00:21 | We want a sort get an interactive feel
for this. Now if I go back to my first
| | 00:25 | screen here, you'll I've got several
buttons for navigation. In fact, if I go to
| | 00:29 | one of the map screens, you'll see there
is also a link back to the Main menu.
| | 00:33 | I really like to be able to interact
with this instead of my device profile
| | 00:36 | in Device Central.
| | 00:37 | Well, you can do that, and here's how.
| | 00:40 | When I go to File > Export, and we're
going to export this as HTML and images,
| | 00:46 | and I want to make sure I export the
HTML files, all the slices, all the pages,
| | 00:52 | and make sure that we're including any
areas that aren't sliced and we're just
| | 00:56 | going go ahead and save.
| | 00:57 | Pretty much the same thing you do for a
standard HTML prototype export, and then
| | 01:02 | we're going to hop over to Device Central.
| | 01:03 | I've got a device opened
already here my Nokia 6260 phone.
| | 01:09 | And I'm going to go to my File menu and
choose Open File, and you'll see here we've
| | 01:13 | got all the different pages that were
part of that mockup. So the Common is just
| | 01:18 | the master page, we won't worry about that one.
| | 01:20 | But we'll start off with the home_vert
page, which is the vertical orientation,
| | 01:25 | and we'll open that up.
| | 01:25 | Now this doesn't look any different
from before when we were just previewing
| | 01:29 | screens, but if I move my mouse over
the buttons here and click, I can actually
| | 01:35 | navigate through all the
screens that are part of this design.
| | 01:44 | So I get a little more of an
interactive experience, and one other thing that's
| | 01:48 | worth noting here is that I do have
rollover effects for these buttons, and
| | 01:52 | actually a remote rollover too.
Those don't seem to behave quite the same way
| | 01:56 | inside of Device Central, but if I click
on a button and then just drag my mouse
| | 02:01 | away from the button, I'll see the
rollover effect, and I'll actually see the
| | 02:05 | highlight for the button.
| | 02:13 | So we can actually see the resulting
screen from a mouseover, so there you have
| | 02:17 | another way to work with Fireworks
in Device Central, but in a much more
| | 02:21 | interactive fashion.
| | Collapse this transcript |
|
|
ConclusionGoodbye| 00:00 | Well, that's a wrap to
Fireworks CS5 Rapid Prototyping.
| | 00:03 | I hope you've enjoyed the
course and you've learned a lot.
| | 00:06 | In case you're wondering where to go
from here, I've got some recommended
| | 00:09 | training on lynda.com you may want to check out:
| | 00:11 | Web Site Strategy and Planning by Jen
Kramer, Dreamweaver CS5 Essential Training
| | 00:17 | by James Williamson, Flash Catalyst CS5
Essential Training by Mordy Golding, and
| | 00:22 | Fireworks CS5 Essential
Training by yours truly, Jim Babbage.
| | 00:26 | Thanks very much for watching.
| | 00:27 | So go on out there and create some Fireworks.
| | Collapse this transcript |
|
|
