IntroductionWelcome| 00:00 | (Music playing.)
| | 00:06 | Hi! I'm Jim Babbage.
| | 00:07 | As a Web designer and teacher, I know
the importance of getting the project done
| | 00:11 | on time and to spec.
| | 00:13 | The best way I know to expedite the
process is through rapid prototyping.
| | 00:16 | You can get customer to sign off
before a lot of work has been done.
| | 00:19 | You can also change directions more easily.
| | 00:21 | Using Fireworks CS4, I'll show you the
range of prototyping options available.
| | 00:26 | We'll look at multi-page mockups,
AIR prototyping, HTML prototyping and
| | 00:31 | customizing a Flex skin.
| | 00:34 | We will deconstruct a completed
wireframe storyboard and then build these
| | 00:37 | deliverables from scratch.
| | 00:39 | Along the way, I'll talk about
advanced imaging topics, including vector
| | 00:43 | masking, using text in mockups,
incorporating multiple images into design
| | 00:48 | elements, streamlining your workflow
with symbols, creating simple and complex
| | 00:52 | rollover effects for a mockup and
manipulating Fireworks HTML for a more realistic mockup.
| | 00:58 | In short, I'll be showing how to
make your life easier by saving time and
| | 01:02 | cutting down the frustration of last-
minute changes and misunderstandings.
| | 01:06 | Now, it's time to get started with
Fireworks CS4 Rapid Prototyping.
| | Collapse this transcript |
| Using the exercise files| 00:01 | If you're a premium member of the
lynda.com Online Training Library, or if
| | 00:04 | you're watching this tutorial on a disc,
you have access to the exercise files
| | 00:08 | I've used throughout this title.
| | 00:10 | The exercise files are in the Exercise_
files folder, which I've placed on my
| | 00:13 | desktop over here, but you
can store it wherever you want.
| | 00:16 | There are files from most movies
and they reside in subfolders named
| | 00:19 | according to the chapters.
| | 00:20 | You can see here I've opened up
the exercise folder and there we have
| | 00:23 | all different chapters.
| | 00:25 | It's not necessary for you to use these files;
| | 00:27 | you can certainly use your
own files in place of them.
| | 00:29 | Now, one of the added bonuses is I've
included the whole bunch of assets, so
| | 00:33 | that if you want to take things a
little further with any of the exercises,
| | 00:35 | you'll have some graphics to play around with.
| | 00:38 | We've got a little assets folder right there.
| | 00:40 | If you're a monthly or annual
subscriber to lynda.com, you don't have access to
| | 00:43 | the exercise files, but you can
certainly follow along with your own work.
| | 00:47 | Let's get started.
| | Collapse this transcript |
| Understanding rapid prototyping| 00:01 | As websites and applications become
more and more complex and clients become
| | 00:04 | more sophisticated in their
expectations of deliverables, it becomes very
| | 00:08 | important to map out and demonstrate the
interactive process and user experience
| | 00:12 | before the project hits the coding stage.
| | 00:14 | Prototypes give you and the client a
chance to work out both logical and
| | 00:17 | cosmetic issues without impacting the
time spent in actual production of the
| | 00:20 | website or application.
| | 00:22 | Prototyping can also avoid the great
expense and difficulty of changing a
| | 00:25 | finished software product.
| | 00:27 | Now, a prototype mainly simulates a few
aspects or features of a final application.
| | 00:31 | For example, the process for filling out
an online form may only be demonstrated
| | 00:34 | with a small sampling of products
rather than the company's entire database.
| | 00:38 | It usually begins in an even more simple
manner like we have here in this wireframe.
| | 00:42 | Where different pages or different
structures are mapped out in a very, very
| | 00:46 | simplistic manner, just to give the client a
sense of the flow and function of the site.
| | 00:50 | Now the term rapid
prototyping is pretty self-explanatory.
| | 00:53 | In fact, it's become one
of the buzzwords these days.
| | 00:56 | The ability to create what is for the
most part, a functional yet disposable
| | 00:59 | mockup is key to a smooth,
time-efficient workflow.
| | 01:03 | In a nutshell, the project spec is
created, preliminary requirements are agreed to,
| | 01:07 | a simple working model of the
project, like this wireframe for example, is
| | 01:11 | designed to visually show the users
how their requirements will behave when
| | 01:15 | they're implemented in a finished system.
| | 01:17 | From there we can move into mockup where
we actually see visual design elements,
| | 01:22 | color schemes, a range of different
layouts and so on to give the client a sense
| | 01:26 | of how the actual project
will look, not just function.
| | 01:29 | Fireworks has several strengths in this area.
| | 01:31 | Programmatic elements used to create or
mimic interactivity such as rollovers or
| | 01:35 | database searches, etcetera, can be
created inside of Fireworks and then
| | 01:38 | eventually properly coded in
the desired application language.
| | 01:41 | And all this talk about disposability
isn't to say that the graphics can't be
| | 01:45 | repurposed, because Fireworks is a
powerful graphics application and not just a
| | 01:49 | pure prototyping application.
| | 01:50 | The graphics can be sliced, optimized
and repurposed for the final project,
| | 01:54 | be it a website, an RIA or a
desktop Flex application.
| | 01:58 | The whole idea here is speed.
| | 02:00 | The client tells you the requirements
and you build the prototype for their
| | 02:03 | review and feedback early
in the development cycle.
| | 02:05 | Changes can be made quickly based on client
feedback and a new prototype can be generated.
| | 02:10 | In this course, we'll be exploring
different prototyping options in Fireworks by
| | 02:14 | examining and working with wireframes,
storyboards and completed prototypes.
| | Collapse this transcript |
|
|
1. Rapid Prototyping Options in FireworksUsing Share My Screen| 00:01 | If you have some initial ideas on a
client project that you want to run by the
| | 00:04 | client or maybe share with others in
your team, sharing your screen might be
| | 00:07 | an ideal way to do so.
| | 00:09 | Let's say, for example, you've got a
couple of rough layout sketches and before
| | 00:13 | you get any further into the wireframe
process, you want to share these two very
| | 00:17 | different types of layouts with
the client, get their feedback.
| | 00:20 | You want to be able have that
discussion in real time and where you're all
| | 00:24 | looking at the same thing.
| | 00:26 | The Share My Screen command lets you
open up a mini ConnectNow meeting, where
| | 00:29 | you can share your screen with two other
participants, and it's really easy to use.
| | 00:34 | So all you'll do is go over to the
File menu and choose Share My Screen.
| | 00:38 | Now, you will need an Adobe ID in order
to join or set up a meaning, but they're
| | 00:44 | free and they're easy to get and you
can see we've got an option right here to
| | 00:47 | create it right off the bat.
| | 00:48 | So I'm going to type in my ID and sign in.
| | 00:52 | Once you're logged in and your
ConnectNow window is displayed, as you can see
| | 00:57 | here we've got quite a few different
panels and so on, but the very first thing
| | 01:00 | I'd want to do is send an email to my
clients, so I can meet with them and
| | 01:04 | discuss what's going on.
| | 01:05 | So I can choose Send Email Invitation
Now and I can send off an email to
| | 01:12 | my client Tom and I can just click Send.
| | 01:17 | Once I've chosen to share my screen,
I'll get a little prompt here that's
| | 01:20 | telling me what my screen is going to
look like and what others are going to see.
| | 01:24 | I'll just click OK.
| | 01:27 | Now I've got Fireworks in the
background and my ConnectNow panel over on
| | 01:30 | the right-hand side.
| | 01:31 | Now if I just move around here I can
see in this scroll bar, there is myself
| | 01:35 | and my participant.
| | 01:36 | I've got a chat window here.
| | 01:37 | I've got the spot to share notes.
| | 01:39 | I can even open up a webcam or annotate a
still version of the image while we're working.
| | 01:43 | So I'm just going to pop into the
chat window here, so I can chat with Tom.
| | 01:49 | He can chat back with me just like
a regular messenger type window, OK.
| | 01:54 | We've got two different navigation layouts.
| | 02:00 | I'll just move my little panel over a
bit so I can get over to my Fireworks
| | 02:05 | panel here and I'll just flip between the
two different layouts, so Tom can see them.
| | 02:18 | So now that I've had a little chat with Tom,
we've sort of discussed what we like,
| | 02:22 | I can go down to the Shared Notes feature here.
| | 02:24 | And this is a really neat feature, because
these notes can be added to by either of us.
| | 02:29 | They can be saved as an actual
Word document after we're done.
| | 02:33 | So, it's just going to pop in here.
| | 02:34 | I'm going to type in 'concept 1 has nav
at top, concept 2 has nav at side,
| | 02:47 | Tom prefers nav at top.' So does Jim.
| | 02:57 | And Tom can even add in his own
little comments in here as well.
| | 03:00 | So it's not just a one-way street here.
| | 03:02 | You've got the ability to literally
collaborate at the same time, which is
| | 03:05 | really a handy feature.
| | 03:08 | I'll just finish off, 'Thanks Tom!' We're done.
| | 03:14 | So I can, any time I want,
stop the screen sharing.
| | 03:17 | Before I do that though, I'm going
to go ahead and save these notes.
| | 03:20 | I'll go to my Shared Notes here.
| | 03:24 | You see an option here to save as a DOC file.
| | 03:28 | Just click on that and I'm going to type in
here bliss notes update.doc and save it away.
| | 03:39 | There we go.
| | 03:42 | I can stop sharing the screen and I
end up back in my Connect meeting and Tom
| | 03:47 | can leave any time he wants and
I can just shut down the meeting.
| | 03:50 | So there you go, another way to present
ideas to a client in that really, early
| | 03:55 | design or development stage.
| | 03:57 | You don't really have any thing
concrete to hand over to them yet, but you want
| | 04:00 | to get some feedback on the
directions you're going in.
| | 04:04 | This is a great way to do it.
| | 04:05 | You don't have to fax them
anything or email them anything.
| | 04:08 | You can literally collaborate online, at
the same time you can different mockups
| | 04:12 | while you're in the same meeting and
run ideas by the client or even by other
| | 04:17 | people in your design team.
| | Collapse this transcript |
| Using PDFs for wireframe and design feedback| 00:00 | Fireworks CS4 brought many new
tools to the table for designers.
| | 00:04 | We now have a variety of ways
to deliver concepts to a client,
| | 00:07 | including interactive PDF.
| | 00:09 | You can see on screen here I've got
Adobe Reader open and we have a PDF file
| | 00:13 | that was generated through Fireworks.
| | 00:15 | This document is interactive. We can
click on the different navigation elements,
| | 00:19 | move right through the entire wireframe
of this concept for a site, right even
| | 00:24 | into the shopping cart area.
| | 00:25 | Now the great thing about this is if
the designer has Acrobat Pro installed
| | 00:29 | in their system, they can also enable these
files to have commenting put in themselves.
| | 00:33 | In this case here, I can go onto my
Comment screen here as a client, click on
| | 00:37 | Add Sticky Note and I can make a comment
about whatever I happen to be concerned about.
| | 00:43 | So I'm just going to move that comment
up here to where the buttons are and say
| | 00:48 | I like the placement of this navigation.
| | 00:52 | With any luck we're always going to get
a happy client who likes everything they
| | 00:55 | see right off the bat.
| | 00:56 | So that's one option
we've got for a deliverable.
| | Collapse this transcript |
| Understanding storyboard concepts| 00:00 | When you need a quick way to run
some concepts by a client, Demo Current
| | 00:04 | Document may be just the answer.
| | 00:06 | This command creates a linear Flash-
based slideshow of different pages within
| | 00:09 | your Fireworks design that you
can upload to your web server.
| | 00:11 | Then you just call your client, give
them the URL and you can sit there on the
| | 00:15 | phone with them or through Skype or
whatever and talk about the different
| | 00:18 | concepts that you're coming up with,
before you get too far into the design
| | 00:21 | process or for that matter the
wireframing site architecture process.
| | 00:25 | So if we just move down here, you'll see
I've got a little popup navigation bar.
| | 00:29 | This is about the only interactivity
that Demo Current Document gives you.
| | 00:33 | The pages on screen are
interactive in themselves.
| | 00:35 | The only way to get around through the
different designs is by clicking on this
| | 00:38 | little navigation bar.
| | 00:40 | You can, if you want to, click on the
actual design inside the browser and what
| | 00:44 | you'll get is a flattened JPEG
version that you can see on screen as well.
| | 00:47 | So, I'll just hop back over to the
main demo and the last little thing you
| | 00:51 | can do with this is you can set it up full
screen, so you don't any browser chrome in the way.
| | 00:55 | So as you can see it's a pretty easy
way to get your concepts, your initial
| | 00:58 | designs out there to the client, get
some feedback right away before you delve
| | 01:02 | deep into the production or design of the site.
| | Collapse this transcript |
| Viewing the HTML prototype| 00:01 | The HTML and Images export in
Fireworks has been around since the beginning.
| | 00:05 | For a long time, it was considered to
be a way to visually design a complete
| | 00:09 | webpage or website using this option.
| | 00:12 | Current best practices for web design
essentially exclude this export option as
| | 00:16 | a viable method for creating a
website, but the HTML and Images export is
| | 00:20 | incredibly valuable from a prototyping
perspective, because we can not only show
| | 00:25 | the client, and possibly focus groups,
the design of the site, but we can also
| | 00:28 | introduce functionality.
| | 00:30 | We can see rollover effects.
| | 00:31 | We can click on different
pages and see what comes up.
| | 00:35 | We can interact with those pages.
| | 00:37 | So we're giving a real true user
experience through this prototype option.
| | 00:42 | With some tweaking, we can even
incorporate HTML elements such as IFrames or
| | 00:46 | rich media such as Flash to
really extend the user experience.
| | Collapse this transcript |
| Viewing the AIR prototype| 00:01 | As a design tool, Fireworks is eminently
capable of creating mockups for AIR applications.
| | 00:07 | While they're not true applications
in themselves, you can create a very
| | 00:11 | realistic prototype of a proposed
AIR application for client review.
| | 00:14 | Much like an HTML prototype, the AIR
prototype can be interactive and with some
| | 00:18 | careful planning even
simulate dynamic connections.
| | 00:21 | So here's our little prototype.
| | 00:23 | I can drag it around the screen
like a regular AIR application.
| | 00:26 | I can expand the control area here.
| | 00:29 | I can mouse over for different
events on the different graphic elements.
| | 00:32 | You can see here I can even close
a file or minimize it if I want to.
| | 00:38 | Building an AIR prototype is a pretty
easy thing to do, if you're comfortable
| | 00:41 | building an HTML prototype.
| | 00:43 | We'll be looking at
building AIR prototypes later on.
| | Collapse this transcript |
|
|
2. WireframingUnderstanding wireframes| 00:00 | Wireframes are an important
visualization tool for web developers and designers,
| | 00:04 | and application developers and
designers, giving you a chance to present
| | 00:07 | proposed functions and structure,
and content of a webpage without being
| | 00:10 | concerned about the graphical treatments.
| | 00:12 | The idea behind a wireframe is it can
be quickly created and just as quickly
| | 00:16 | disposed of it when it's no longer needed.
| | 00:17 | Now a typical wireframe includes a
variety of different things but here in our
| | 00:21 | wireframe_finish file,
we can see a lot of these.
| | 00:24 | We have got key page elements and
their location such as a header up top,
| | 00:29 | a content area down in the middle
here and down below a footer area.
| | 00:32 | We've got groupings of elements such
as our navigation bar within the header.
| | 00:37 | And down below similar thing here
with our navigation in the footer.
| | 00:40 | We have also got some labeling
being applied to different areas.
| | 00:43 | So there is a heading inside of our
content area. Nothing fancy, nothing pretty.
| | 00:47 | Again we are not worried about that
element; we are just worried about using as
| | 00:50 | a way finding device and a
descriptive element for the page.
| | 00:55 | Then in a few areas, I have got
placeholders that would represent other real contents.
| | 00:59 | So for example, here I have got a box
with an X there to represent a photograph.
| | 01:03 | Up top, I have got a little two-
dimensional illustration of a shopping cart
| | 01:06 | to illustrate that
| | 01:07 | that would be a clickable area to go to
the e-commerce section of the site and so on.
| | 01:10 | Now, using Fireworks makes wireframing a snap.
| | 01:15 | There are many pre-built symbols,
which can be dropped in, and you can also
| | 01:19 | create your own custom symbols, which you can
re-purpose over and over again in other projects.
| | 01:23 | Now a currently opened file gives
us a good sense of what a completed
| | 01:27 | wireframing look like.
| | 01:28 | There is a variety of pages here, all
representing major content areas within the site.
| | 01:32 | We have utilized existing symbols that
are part of Fireworks as well as custom
| | 01:37 | symbols that I have created myself,
and also some third party symbols or
| | 01:41 | extensions that have really made the
whole wireframing process a lot easier.
| | 01:46 | I make use of two special auto
shapes for my wireframes, both created by
| | 01:49 | third party developers.
| | 01:50 | The first one you'll see right on the
About page, and it's this set of bars to
| | 01:54 | represent text and this is a auto shape
created by John Dunning and it's called
| | 01:59 | Greeked text and you can find it at
| | 02:01 | johndunning.com/fireworks/about/greekedtext.
| | 02:06 | It gives you a quick and easy way to
drop in a representation for text without
| | 02:09 | having to worry about putting in lorem
ipsum text or copying and pasting text
| | 02:12 | from somewhere else.
| | 02:13 | It just gives you the representation
without the extra detail that you don't
| | 02:17 | really need in a wireframe.
| | 02:18 | Now by the time I took this design to
a storyboard where things are much more
| | 02:22 | realistic, I'd properly incorporate
either existing copy from the client or
| | 02:26 | lorem ipsum text if I didn't have the
copy from the client, just to make it look
| | 02:29 | a little more realistic.
| | 02:31 | Another auto shape I use quite a bit
with my wireframes is found right here on
| | 02:35 | the Products page and this is the Grid
Auto Shape created by Aaron Beall, and
| | 02:40 | you can find this at fireworks.abeall.
com/extensions/autoshapes and I find this
| | 02:49 | particular auto shape almost
indispensable because it does something that
| | 02:53 | Fireworks just doesn't do on its own.
| | 02:55 | It creates table mockups.
| | 02:58 | The only way to do this inside of
Fireworks is to literally draw each rectangle
| | 03:02 | and color them, and then group them
together and place them where you want.
| | 03:06 | The Grid Autoshape takes all that
extra fussing about out of the equation and
| | 03:10 | you basically just drop on a grid shape,
and drag at how many columns, and how
| | 03:13 | many rows and pick the
color you want and off you go.
| | 03:16 | So it really makes creating tabular
kinds of layouts, really, really helpful.
| | 03:21 | In a lot of sites, you are going to run
into these kinds of things, especially
| | 03:23 | here where we are looking at
some e-commerce types of options.
| | 03:27 | So here we have got another example
that grid shape being used and you can see
| | 03:31 | it's not just a bunch of rows, but
it's a bunch of rows and columns.
| | 03:34 | It's just a really fast and easy
way to put together this kind of look.
| | 03:39 | Now, the other thing behind
wireframes is they've got to be
| | 03:41 | somewhat interactive.
| | 03:42 | So clients can move from page to page,
if you have a multi-page document
| | 03:46 | like we do, and again sort of get a
sense of what happens when they click on a
| | 03:49 | certain button or click in a certain area.
| | 03:51 | So at the very top here, inside of the
header area, you'll see a bunch of shapes
| | 03:55 | that have little green boxes over them.
| | 03:57 | The green boxes are hot spots.
| | 03:58 | If I switch over to the master page,
click on each one of these different boxes,
| | 04:03 | these hot spots, you'll see that I get
a link in the Property Inspector that
| | 04:06 | links to a specific page in the design.
| | 04:08 | So I am adding in my
interactivity with inside of the wireframe.
| | 04:11 | If I scroll down to the bottom of the
Pages panel, you can see a page called login.
| | 04:16 | What I have done here is I have
essentially mapped out another page, so that
| | 04:19 | the user can see what the intended
interaction they have inside of the site we produce.
| | 04:24 | So if I click on the Shopping Cart icon
for example, in my new navigation,
| | 04:27 | the first thing that will come up will be
the Log-in page and then they can move
| | 04:30 | onto the actual Shopping Cart area.
| | 04:32 | So we are mapping out all the possible
different interactions that could occur.
| | 04:35 | So now that we had a chance to look at
this finished version of the wireframe,
| | 04:40 | get ready because we are actually going to
start building this beginning in the next movie.
| | Collapse this transcript |
| Planning a wireframe| 00:01 | In a real project, before you begin
your wireframe, you should have at least
| | 00:04 | one meeting with the client to have a clear
understanding of the project's scope and goals.
| | 00:09 | In our case you will be following
along with me as we build the significant
| | 00:12 | parts of the wireframe for
the Bliss Chocolates website.
| | 00:15 | Anytime you want you can always refer
to the completed wireframe that's in
| | 00:19 | the Lesson_2 folder.
| | 00:21 | To start, you want to create a list of the
content or categories necessary for the website.
| | 00:26 | You can scratch this out on a piece of
paper or make a list in a word processor
| | 00:29 | or my favorite, use Sticky Notes.
| | 00:31 | This process can be really helpful,
when you are brainstorming the content.
| | 00:34 | I will be starting out with the Home page.
| | 00:37 | So here's a list of the things that we
need to include in the first wireframe,
| | 00:41 | Content Areas, Header, Footer,
Navigation, main content, secondary content if
| | 00:45 | any, logo placement, things like that.
| | 00:48 | Main secondary navigation structure,
so in our case Home, About us, Products,
| | 00:53 | Custom Orders, Recipes, and then
additional information like Privacy, Policy,
| | 00:57 | and things like that
probably placed in the footer.
| | 01:00 | Content area positions, where
things are going to be located.
| | 01:04 | A Rough layout of the Main
and secondary content area.
| | 01:07 | So where is your Main content area
going to be, where is your footer
| | 01:10 | information, are there any areas with inside
of that, that are going to be separated out?
| | 01:14 | Those are things to keep in mind.
| | 01:16 | Page Titles, so each page in your
Fireworks design has a suitable title and
| | 01:21 | also, I would like to incorporate at
least the top-level headings on the pages.
| | 01:25 | So we have a sense of where we are
going and where we are at inside the pages.
| | 01:28 | Now, you may also want to indicate where
the fold is and by that I mean how much
| | 01:33 | content will appear in the initial
browser screen, based on some assumptions
| | 01:37 | such as screen resolution and viewport size.
| | 01:39 | The more information you have, the better.
| | 01:41 | Even though the wireframe
is a simple construction,
| | 01:44 | it should be as accurate as possible
in terms of representing the content.
| | 01:47 | Now from here, it's just a matter of
creating a new document and coming up
| | 01:51 | with a layout system.
| | 01:53 | Grid layout systems are
pretty popular these days.
| | 01:55 | But I like to keep things even
simpler, and I use a method where I break
| | 01:58 | everything apart by approximately 10 pixels.
| | 02:00 | It makes it easy to measure things.
| | 02:02 | And essentially, everything is
either 10 pixels apart or multiples of 10.
| | 02:07 | So let's first start off
with our initial design.
| | 02:09 | Now, I have already created a brand
new document called wireframe_start and
| | 02:13 | it's 960x600 pixels.
| | 02:17 | You can either open this file up from
the Lesson folders or you can create a
| | 02:20 | brand new document from Scratch.
| | 02:22 | Now, first thing I want to do before I do any
layout is I want to set up my Grid structure.
| | 02:27 | So I am going to go into Edit >
Preferences, and if you are on the Mac, that
| | 02:31 | would be the Fireworks icon, then Preferences.
| | 02:35 | Switch over to our Guides
and Grids category here.
| | 02:39 | And here you can set up things like
the colors of guides grids, slice guide,
| | 02:43 | smart guide and so on.
| | 02:45 | What we are going to do is just take
a look at the settings we have here.
| | 02:48 | We've got Grid settings of 10x10
pixels, which is great for this document.
| | 02:53 | But if you create a brand new
document, chances are the Grid Settings
| | 02:56 | aren't going to be 10x10.
| | 02:58 | So you want to set them to a unit of 10
measure, which makes it again a little
| | 03:02 | easier to work with.
| | 03:03 | We'll just choose as well while we
are here to Show the Grid, and to Snap
| | 03:08 | the Grid, and click OK.
| | 03:12 | Now, let's add some shapes
to represent our content.
| | 03:13 | I am going to draw a circle to
represent my logo, a rounded rectangle
| | 03:17 | that represent my main navigation,
and a standard rectangle that
| | 03:20 | represent the content groupings.
| | 03:22 | Now, I also want to set some
default properties for these shapes too.
| | 03:25 | I am going to switch over to my Rectangle tool,
and I am just going to draw some shapes here.
| | 03:30 | So I line it up with the grid and
drag, and if I look at the Properties
| | 03:34 | Inspector, I can also
see what my dimensions are.
| | 03:36 | So right now, I am at 190x30.
| | 03:38 | So I think I'll make it an even
200x40, this is my first rectangle.
| | 03:42 | I am also going to draw a circle.
| | 03:44 | So I'll switch over to the Ellipse tool.
| | 03:47 | If I hold down the Shift key while I am
drawing, just a reminder, you'll get a
| | 03:52 | proportional circle and
I'll make this say 80x80.
| | 03:54 | It's a good starting point. There we are.
| | 03:56 | And I also want a rounded rectangle.
| | 03:59 | Now, I can either use the Rounded
Rectangle tool from the Vector tools, or I can
| | 04:05 | just use the Plain Rectangle tool and
add the corners afterwards, and that's
| | 04:08 | what I am going to do in this case.
| | 04:09 | So I'll draw one more rectangle here.
| | 04:11 | Again, because I have got the grid
setup and I am snapping to the grid.
| | 04:14 | It's really easy to make sure that your
shapes are working out in two dimensions
| | 04:18 | that are divisible by 10.
| | 04:19 | So there's my Width and Height of 80x100
for the time being, and I'll go down to
| | 04:24 | the Property Inspector, and
change the Roundness of the rectangle.
| | 04:30 |
| | 04:30 | I will set it to about 10 I think. There we go.
| | 04:34 | So now, I have got my three basic shapes
that are going to represent different areas.
| | 04:41 | But right now, they are all pretty much
looking the same other than the shape.
| | 04:43 | We want to do something with the color.
| | 04:44 | So if I overlap these things, they
are not going to basically disappear
| | 04:47 | inside of each other.
| | 04:48 | Now, I also want to give
them all a basic stroke as well.
| | 04:51 | In this case here, I have been fortunate
enough to already have a stroke applied
| | 04:55 | and you can see if I look down the
Property Inspector, it's a 1-Pixel Soft brush
| | 05:00 | stroke, and that works
fine for each of these guys.
| | 05:03 | Now, I also want each shape to have a
different color or shade, so they are easy
| | 05:07 | to identify, and they'll separate
from each other if they overlap.
| | 05:10 | But I don't want the client concerning
themselves over color, what shade of Blue
| | 05:15 | or Pink or Red or whatever it is I am using.
| | 05:17 | So rather than go with colors themselves, I
am going to go with different Gray levels.
| | 05:20 | So I am going to select my circle, grab
my Pointer tool, and I want this to be
| | 05:24 | a fairly light gray.
| | 05:25 | So I am going to go into my Fill
properties in the Property Inspector, and I am
| | 05:28 | going to type-in a value of
EEEEEE, gives me nice light gray.
| | 05:35 | I notice also too that I have got a
texture being applied here of 100% for Grain.
| | 05:39 | Now, I don't want any textures in here.
| | 05:41 | So I am going to 0 that out just like so.
| | 05:44 | So just a solid color.
| | 05:44 | I am going to select my rectangle,
make this shape a little bit darker Gray.
| | 05:48 | So I'll go to my Fill Properties again,
and the value I am going to put in here
| | 05:52 | in this case is CCCCCC.
| | 05:55 | So darker Gray, apply that.
| | 05:58 | Then lastly, my rounded rectangle, which
is going to represent my main navigation.
| | 06:02 | I want that to be darker still.
| | 06:04 | So in this case I am going to set this color.
| | 06:06 | Now, here is the shade to 999999, there we go.
| | 06:12 | So now I have got my three different
shades that I am going to work with for
| | 06:15 | these particular shapes.
| | 06:16 | Now, the other thing is I am going
to be using these over and over again.
| | 06:20 | So rather than having to redraw
them or copy and paste them off and on
| | 06:24 | throughout the different pages, I am
going to turn each one of these things into
| | 06:27 | symbols, and specifically at
this point, graphic symbols.
| | 06:30 | Now, they are all very simple shades,
but it basically means that I don't
| | 06:35 | have to double check things like stroke and
fill each time I drag one of them onto the page.
| | 06:40 | So again, another way to speed up my workflow.
| | 06:42 | So I am going to select my circle, and
I am going to go to Modify > Symbol >
| | 06:49 | Convert to Symbol, and up
comes my Symbol dialog box.
| | 06:53 | So I am going to type-in here the name, Logo.
| | 06:56 | It's going to be a Graphic symbol.
| | 06:59 | I also want to save this to
the Common Library and click OK.
| | 07:03 | Now, watch what happens when I do this.
| | 07:06 | I get an option here to put
this file into a location.
| | 07:09 | Now, the default location is the Custom
Symbols folder, and if we click in the
| | 07:14 | drop-down menu here, you'll see
inside of Fireworks CS4, Common Library,
| | 07:18 | Custom Symbols folder.
| | 07:19 | That's where these are going to go by default.
| | 07:21 | The file name is a two-part file name.
| | 07:23 | The first part of the file name
is the name you gave the symbol.
| | 07:26 | The second part of the file
name is the actual type of symbol.
| | 07:29 | So in this case a graphic symbol
and it's going to be saved as a
| | 07:32 | Fireworks(*.png) file.
| | 07:34 | So I'll just click Save, and there we go.
| | 07:36 | My first symbol has been created.
| | 07:38 | Now, if you find that when you create
your symbol, it ends up disappearing
| | 07:42 | from your Canvas area. Don't worry.
| | 07:44 | You can go into the actual Common
Library, which we will be looking at a little
| | 07:47 | bit later, and you can drag it on.
| | 07:50 | So if it disappears, not to worry.
| | 07:53 | So I'll grab my rectangle, and we'll
do the same thing, Modify > Symbol >
| | 07:59 | Convert to Symbol, and same kind of idea here.
| | 08:02 | This one is going to be our
content, sort of divider if you will.
| | 08:07 | So I am going to call this Content.
| | 08:09 | It's going to be a Graphic symbol.
| | 08:11 | I am going to save this to the
Common Library as well, and click OK.
| | 08:16 | Again, up comes my Save As
dialog box, and the name is fine,
| | 08:19 | content.graphic, and save.
| | 08:23 | Last but not least is our navigation element.
| | 08:25 | So again Modify > Symbol > Convert to Symbol,
and we are going to call this one main_nav.
| | 08:32 | We are going to save this to the Common Library.
| | 08:37 | In this particular case as well, we are
going to Enable 9-slice scaling guides.
| | 08:40 | The reason for that is if I need to
change the proportions of this symbol, I
| | 08:43 | don't want the corner radius
on my shape to get distorted.
| | 08:46 | So this will minimize that problem.
| | 08:48 | Click OK, and you will see again,
file name is already placed in there for
| | 08:54 | us, just click Save.
| | 08:56 | In this case here, that one
actually disappeared off the Canvas.
| | 08:58 | So you can see sometimes
these things will vanish on you.
| | 09:00 | Now, we are going to be
adding some more symbols.
| | 09:03 | But before we do that, let's take a
look and see where that navigation symbol
| | 09:06 | with that rounded rectangle.
| | 09:08 | If I go over to my panel group
here down at the bottom, I'll see the
| | 09:10 | Common Library panel.
| | 09:12 | I am just going to click on that and I
am going to drag that up a little higher,
| | 09:16 | so it's a bit taller.
| | 09:17 | You will see inside the Common Library
panel, a folder called Custom Symbols.
| | 09:21 | If I click on that folder, you'll
see there's our three symbols, Content,
| | 09:25 | Logo, and main_nav.
| | 09:27 | So I can just literally select that
one symbol main_nav and drag it onto the
| | 09:31 | Canvas, just like that and
now it's back on the Canvas.
| | 09:35 | Now, once you have brought something
over from the Common Library, you only
| | 09:38 | actually have to do that one time.
| | 09:39 | As soon as you do that, that
particular symbol gets added to the document
| | 09:43 | library, and you can see here we have
got Content, Logo, and main_nav as well.
| | 09:48 | So I don't need to be dragging
those from the Common Library again.
| | 09:51 | And in fact if I do, Fireworks is
going to ask me if I want to overwrite the
| | 09:55 | existing version that's
sitting in the document library?
| | 09:57 | So they are all in place.
| | 10:00 | Now, we'll create one more
shape to represent our graphics.
| | 10:03 | So I am going to go to my Rectangle
tool again, and I am going to draw myself a
| | 10:07 | box, and we'll make it 200x200.
| | 10:13 | In this case here, I don't
want this one to be Gray.
| | 10:15 | I am going to change this color.
| | 10:17 | I am going to switch it off to White.
| | 10:19 | I also want this to look
like more than just a box.
| | 10:21 | So you can recall back
to our finished Wireframe.
| | 10:23 | This actually was a box with an X through it.
| | 10:25 | So we are going to zoom in a bit, so we
can see this nice and close. There we go.
| | 10:32 | I am going to grab my Line
tool from my Vector tools.
| | 10:36 | I am going to drag a diagonal line from
the upper-left down to the bottom-right.
| | 10:40 | And do the same thing from the upper-
right, down to the bottom left, and I
| | 10:46 | am not too worried.
| | 10:47 | If I don't get it bang on, that's okay
because I can tweak that in a minute.
| | 10:51 | So you can see there's
my X that's through there.
| | 10:53 | Now, I am going to zoom back in again.
| | 10:54 | I am going to choose my Zoom tool, and
zoom in on that upper-right corner and
| | 10:59 | you can see that my line is sticking
out of the box a little bit, and this can
| | 11:02 | happen when you are dragging the stuff around.
| | 11:04 | So I'll just reposition that so it's
inside the box, and I can hold down the
| | 11:09 | Space-bar if I want, and I can pan
around and see if I have that problem
| | 11:14 | anywhere else, and I do.
| | 11:18 | So I'll fix it there and scroll over to
the other side, select that line first
| | 11:24 | before I try to drag it, and then just
reposition that and then lastly, I'll
| | 11:30 | back over to the left and
go up, and that side is fine.
| | 11:36 | So I'll zoom back out by double-clicking
on the Zoom tool, puts me back up to 100%.
| | 11:40 | So now I have got my little
elements there together for my graphic.
| | 11:44 | What I want to do is group these together.
| | 11:46 | So I am going to grab the Pointer tool,
hold down the Shift key and click on
| | 11:50 | each of those objects.
| | 11:51 | So all three of them are selected.
| | 11:54 | Then I am going to group them together,
and I can do this by pressing Ctrl+G or
| | 11:56 | Command+G on the Mac, or I can also go
up to my Modify menu, and choose Group
| | 12:03 | down near the bottom of the menu.
| | 12:04 | And that groups them
together as one object temporarily.
| | 12:07 | I can always get back in and edit those
three different elements anytime I want to.
| | 12:11 | Now as a group, I want to
also convert this into a symbol.
| | 12:15 | So I am going to go once again to
Modify > Symbol > Convert to Symbol and in
| | 12:23 | this case here, I am just going to call this
Photo, and I am going to leave it as a Graphic.
| | 12:27 | I want to save it to the Common Library.
| | 12:29 | I am not going to Enable 9-slice
scaling on this though, because it could
| | 12:32 | make things look kind of weird, because of
that diagonal X that's going through the box.
| | 12:37 | So I'll just click OK, and again I
have got the option here to save this.
| | 12:41 | And I am going to work with the
actual name I have given it, photo.graphic.
| | 12:45 | It's a graphic symbol.
| | 12:47 | You can see again, this one
disappeared off the Canvas.
| | 12:50 | So I'll hop back over to the Common
Library, go back into Custom Symbols, and
| | 12:55 | you can see it showing up right there.
| | 12:56 | So we'll just leave it there for the
time being, and we'll move onwards.
| | 13:02 | So let's save this off before
we get any further with things.
| | 13:04 | Now, we have got wireframe_start,
which was our empty document.
| | 13:08 | So rather than leave this as _start, we
are going to save this with a new file name.
| | 13:12 | So File > Save As and save this as
wireframe_working and it'll be automatically
| | 13:20 | saved as a Fireworks(*.png) file,
which is what we wanted, because we want
| | 13:23 | everything to be editable as we
move forward, and just click Save.
| | 13:29 | So to summarize, we have established a list of
content, which needs to appear on the Home page.
| | 13:34 | We have setup a Fireworks document
at the dimensions we need, we have
| | 13:37 | customized the grid, and created some
Wireframe symbols to help us out as we
| | 13:40 | build the Wireframe.
| | 13:42 | Chances are we are going to create more
symbols as we move forward, but this is
| | 13:45 | a good starting point.
| | 13:47 | In the next lesson, we'll begin
assembling the first page of the Wireframe, and
| | 13:50 | making it all come together.
| | Collapse this transcript |
| Creating a wireframe| 00:01 | In the last movie we created a new
document and built some symbols to help speed
| | 00:04 | up the creation of our wireframe.
| | 00:06 | In this movie we are actually going to
put those symbols to work to create the
| | 00:09 | wireframe for the homepage.
| | 00:11 | But before we do that there is a bit of
housekeeping I want to work on here to
| | 00:15 | sort of set things up bit
more of the way I like to work.
| | 00:17 | Starting off over here in the panels
groups I have got my Pages, States, Layers
| | 00:21 | all groups together, and that's
default grouping for these elements.
| | 00:24 | But I want to have my Pages tab
separate from everything else.
| | 00:27 | I would like to be able to see my
pages at the same time that I can see
| | 00:29 | my layers for example.
| | 00:30 | So I am going to grab my Pages tab,
drag it in between the Optimize panel and
| | 00:36 | its current location.
| | 00:38 | You see a little blue highlight show up,
I want to let go with the mouse, and
| | 00:40 | I have got my Pages panel
separate from the other two.
| | 00:44 | And I am going to just switch
over to my Layers panel here as well.
| | 00:47 | Collapse my Optimize panel by clicking
on the gray bar and that gives me the
| | 00:52 | ability to basically get myself a bit
more working space for those two panels,
| | 00:56 | my Pages and Layers panel.
| | 00:58 | Now I've also got a couple things I want
to setup within the Fireworks workspace
| | 01:01 | in terms of preferences and so on.
| | 01:04 | So I am going to over to my Edit menu,
and I am going to choose Preferences
| | 01:08 | and if your are on the Mac, you've to go to
the Fireworks icon and choose Preferences there.
| | 01:11 | And what I want to do here is in the
General tab, you'll see an option here the
| | 01:15 | Document Options to scale strokes and effects.
| | 01:18 | This is turned on by default.
| | 01:19 | Well, it can be handy.
| | 01:20 | What it means for my wireframe
elements is, if I resize them, which I am
| | 01:23 | probably going to be doing, I am going to end
up changing the stroke size at the same time.
| | 01:28 | So I am going to uncheck that or
deselect that and click OK and I am going to
| | 01:34 | go over to my View menu as well and
turn on the couple of other features.
| | 01:38 | Down here we see Tooltips and
Tooltips give me an on-screen display of
| | 01:42 | my current dimension for a selected
object and it helps just sort of move things
| | 01:46 | around and size things properly.
| | 01:47 | So I am going to activate those and
also under the View menu, I am going to go
| | 01:52 | down where my guides are,
Smart Guides specifically.
| | 01:54 | I am going to turn on the
Show Smart Guides feature.
| | 01:57 | So there are some basic preferences setup.
| | 02:00 | There is one more thing I want to
do and that is with this rectangle.
| | 02:05 | Now the rectangle, all
three of these are symbols.
| | 02:07 | One of the things to be aware with when
you are resizing a symbol, especially a
| | 02:11 | vector like this, is that the symbol
doesn't necessary pay attention to that
| | 02:16 | scaling option that we had in the Preferences.
| | 02:19 | So what I want to do is I want to turn
on 9-slice scaling for this rectangle.
| | 02:22 | Now I didn't have it turned on
originally when I made the symbol, so let's see
| | 02:25 | how we can actually do that after the fact.
| | 02:28 | So I am just going to go
over to my Document Library.
| | 02:30 | Double-click to open that up and
there is my content symbol right there.
| | 02:34 | If I double-click on the symbol
inside the document library, up comes the
| | 02:38 | Convert to Symbol dialog box.
| | 02:39 | Again, you can see I have got the
option here to enable 9-slice scaling guides.
| | 02:43 | So it's kind of like going back to
the point where we created the symbol.
| | 02:45 | So I am just going to
check that box and I click OK.
| | 02:50 | So our 9-slice scaling is
going to applied to the rectangle.
| | 02:53 | And if I double-click on the symbol
itself, I'll go into symbol edit mode and
| | 02:57 | you can see the 9-slice guides,
those blue dashes all the way around.
| | 03:00 | Now they are not really on the right
position yet, so we are going to make a
| | 03:03 | couple adjustments to these.
| | 03:04 | I want to bring these just inside
the rectangle, on all four sides.
| | 03:10 | Something along that range there.
| | 03:13 | With 9-slice scaling the idea is that
anything outside the guides in the outer
| | 03:17 | corners will not get scaled.
| | 03:19 | So we'll end up having a
very safe scaling option here.
| | 03:22 | We just set those in. I am going to
lock those guides in place inside the
| | 03:26 | Property Inspector and just double-
click anywhere on the canvas to get back
| | 03:31 | to my original design.
| | 03:33 | Now after I have done all those things,
one of the last things I want to do here
| | 03:36 | is actually take three symbols
and pull them off the canvas.
| | 03:39 | We are going to start from a full fresh design.
| | 03:41 | So I am just going to click-and-drag
over all three of these guides and just
| | 03:44 | hit the Delete button.
| | 03:45 | The reason I want to do that is I also
want to set up some structure in my document.
| | 03:49 | It's really tempting when you are
working in Fireworks or really any graphic
| | 03:52 | program to just start creating and
adding elements and shapes and bitmaps and so on,
| | 03:57 | before you know what?
| | 03:58 | You've got all of this content inside
of one layer, which makes it really hard
| | 04:02 | to locate stuff and manage your design.
| | 04:04 | So what we are going to do is we are
going to switch over and do a couple of
| | 04:07 | things with that Layers panel.
| | 04:08 | I am going to collapse my Document
Library a bit and my Styles panel group here.
| | 04:14 | And you can see right now
I have just got one layer.
| | 04:16 | It's called Layer1.
| | 04:17 | The first thing I want to
do with this is rename it.
| | 04:19 | So I am going to double-click on it
and I am going to call this page content.
| | 04:24 | Now I am going to create a second layer
bottom at Layers panel, click on the new
| | 04:29 | Duplicate Layer icon, and this
one I am going to call common.
| | 04:35 | This is going to incorporate things that I want
to see on pretty much every page of my design.
| | 04:39 | Now inside the common layer I
want to subdivide my content areas.
| | 04:45 | So I have got different layers
for different parts of my content.
| | 04:48 | So I am going to add in some sub-layers here.
| | 04:51 | First one I am going to put
in is going to be my footer.
| | 04:56 | Then I am going to reselect my common
layer again and this is an important step
| | 04:59 | by the way. If you don't reselect your
parent layer like this and add another
| | 05:02 | sub-layer, you end up getting
nested layera inside of layers.
| | 05:05 | So we go back to our common layer, a new
sub-layer again and this one I am going
| | 05:10 | to rename as content, and select my
common layer one more time double-click on
| | 05:20 | that new layer and call this header.
| | 05:21 | So now I have got two main layers and I have
got three sub-layers within the common layer.
| | 05:29 | Now I want to add some content into
these different areas, but I want to make
| | 05:32 | sure I am putting things into the right places.
| | 05:33 | You are moving along pretty quick.
| | 05:34 | You can forget where you actually
are in terms of what layer is selected.
| | 05:38 | So I am going to lock down some of these layers.
| | 05:40 | I am going to lock down my page content
for the time being, lock down my footer,
| | 05:44 | lock down my content.
| | 05:46 | All I want to worry about is what's
going to into the header at the moment.
| | 05:49 | And now let's go down to the Document Library.
| | 05:52 | I have got my three symbols still
inside the Document Library from when we are
| | 05:57 | working on this file in the previous movie.
| | 05:59 | So the content one is the one I want
to start with this so I am just going to
| | 06:02 | drag it on to the canvas and I am going
to zoom out a little bit, just so I can
| | 06:07 | see my whole canvas area a bit. There we go.
| | 06:10 | We have this 10x10 grid, which
is great for snapping things.
| | 06:13 | When you're zoomed out like this, it does
make it a little hard sometimes to see things.
| | 06:18 | But it will be a good starting point,
we can always make adjustments later on.
| | 06:21 | So I am going to grab this and reposition it.
| | 06:23 | Now you can see as I move that shape around,
| | 06:25 | you can see the X and Y
coordinates showing up on screen.
| | 06:28 | That's the tooltips.
| | 06:29 | So I can get it in a accurate
location of where that object is based on
| | 06:33 | its upper left corner.
| | 06:35 | So I want this to be 30 pixels from the left
and I want it to be 10 pixels from the top.
| | 06:41 | And I can get myself pretty close that way.
| | 06:42 | When I get in that general area, and if
it not exactly where I want, I can zoom in
| | 06:47 | and snap it to the grid or I can go
down under the Properties Inspector and
| | 06:50 | just type in the values.
| | 06:52 | So I wanted to be 30 pixels from the
left and I will tap down to the Y-axis
| | 06:57 | and set that to be 10.
| | 06:59 | So now I have got the exact location.
| | 07:01 | Now this is going to represent my header area.
| | 07:04 | Essentially, if you are thinking
in HTML terms, think it of as a div.
| | 07:07 | I just wanted there to sort of isolate
or sort of act as an area where people
| | 07:11 | can recognize this is the header.
| | 07:12 | So we are going to resize this guy.
| | 07:15 | So I am going to choose my Scale tool
and I am going to drag this guy across,
| | 07:20 | and now that I am dragging those
tooltips show the actual dimensions.
| | 07:23 | So I want this to be 900 pixels wide,
and drag it down to be 160 pixels tall.
| | 07:28 | Now if I am not quite bang on, and that
happens when you're zoomed out like this.
| | 07:33 | You can see down here, I am actually 901x160.
| | 07:36 | So I am just going to into my
Width and type in 900. There we go.
| | 07:43 | Now I have got sort of the container
for my header elements just like that.
| | 07:47 | I'll zoom in a little bit, back up to
100%, and what we are going to now is
| | 07:53 | we are going to add in the logo symbol and
we are going to add in the navigation bit.
| | 07:57 | So start off with the logo and just
select that for my Document Library, drag it in.
| | 08:03 | See how it is to have
these things already pre-built.
| | 08:06 | You don't have draw them; you just drag them in.
| | 08:08 | I am going to grab my Pointer tool
and reposition this guy a little bit.
| | 08:12 | About 20 pixels from the top like so and
I am just going to double-check my View
| | 08:21 | menu here. Ah, yes, okay.
| | 08:24 | So my Snap Guides wasn't actually turned on.
| | 08:26 | So I am going to flip that on and that
will make it a little easier to sort of
| | 08:28 | lock this guy into place. There we go.
| | 08:33 | Let's see. About 20 pixels from the top and 10
pixels from the edge of that content rectangle.
| | 08:40 | So there we go and again if I am not
exactly right, not a big deal. I can go
| | 08:44 | down to my Property Inspector,
change those values, and now I am actually
| | 08:51 | where I want to be.
| | 08:52 | Now you might notice it says 40 pixels
from the left, and that's because that
| | 08:55 | measurement is always based
on the outsider to the canvas.
| | 08:57 | But because I have set myself up into
grid of 10x10 measurements, it's easy for
| | 09:01 | me to go and I can
literally just count 10, 20, 30, 40.
| | 09:04 | So I am 10 pixels in from the rectangle, but
I am 40 pixels out from the edge. I am okay.
| | 09:10 | So next we are going to add in our navigation.
| | 09:12 | So I am going to go to my
main navigation symbol here.
| | 09:14 | Drag one of those guys on.
| | 09:17 | In this case what I want to do is
make some changes to the size of this.
| | 09:21 | So before even worry about
positioning it, I am going to resize it.
| | 09:24 | So I am going to grab my scaling
options here and I want this to be 110 pixels
| | 09:29 | wide by about 140 pixels high.
| | 09:32 | So just going to drag out and the
tooltips will help me again recognize when I
| | 09:37 | am at the right spot. So 110 here we go.
| | 09:42 | And I believe I said 140,
so drag down. There we go.
| | 09:48 | I am just going to reposition him
210 pixels from the left-hand side.
| | 09:52 | So one thing you want to note when
you are in the scaling mode that your
| | 09:55 | tooltips don't show up.
| | 09:57 | So if you have got the dimensions you
want, make sure you double-click on the symbol,
| | 10:01 | or press Enter or Return key to
go back to your original shape and then
| | 10:04 | the tooltips will show up.
| | 10:05 | So I want to be about 210 pixels from
the left and 10 pixels from the top.
| | 10:14 | I think what I will do as well as is
I will scale my logo to make it a bit
| | 10:16 | bigger looking, just so it
seems to occupy more space.
| | 10:19 | Even though it's not the real logo,
you want to have some sort of sense of
| | 10:22 | approximation of size. There we go.
| | 10:27 | Now we need to add in some additional
navigation buttons along the top, but
| | 10:30 | before we do that we also want to
add some labels into these buttons.
| | 10:33 | So I am going to actually build that in
first and then we will look at a couple
| | 10:36 | of ways to sort of speed
up the process as we go.
| | 10:38 | So I am going to select that shape and what
I want to do with this is add in a text label.
| | 10:45 | So I am going to grab my Text tool and
I am just going to click on top of the
| | 10:49 | shape to make sure my fonts
are setup the way I want them.
| | 10:53 | I want to have Times New Roman
and I want it to be 14 points.
| | 10:56 | I want it to be Bold and I want the
text alignment to be Center aligned.
| | 11:01 | So with those things in place we are going to
type in our first word About Us. There we go.
| | 11:09 | Now I am going to grab my Pointer tool
and Shift+Click to select both the text
| | 11:13 | and shape, go over to my Align panel
and I want to align these guys in the center,
| | 11:19 | so that we are nice
and even matched like that.
| | 11:21 | So they are both lined up.
| | 11:23 | At this point we need to
add in four more buttons.
| | 11:25 | Now we could drag in the original
instance and move it around and add text
| | 11:30 | and so on, but there are faster ways to do
this and that's what we are going to do here.
| | 11:34 | First thing I am going to do is I am
going to group these two objects, the text
| | 11:38 | and the instance together.
| | 11:40 | So in order to do that, I can go up to
the Modify menu and choose Group,
| | 11:44 | either one will do the job.
| | 11:45 | So they are now one object together.
| | 11:48 | Now what I want to do is create a
clone of this particular grouped object.
| | 11:52 | So I am going to go up to my Edit menu and
choose Clone and I have got an exact copy.
| | 11:58 | If I take a look back over here in
Layers panel, I am just going to collapse my
| | 12:02 | Align panel, shift things around a little bit.
| | 12:05 | You see I have now got two exact
objects right on top of each other.
| | 12:08 | When you clone an object, it basically
creates a copy right on top of the original.
| | 12:12 | With that current copy selected I am
going to hold down the Shift key and press
| | 12:17 | the right arrow key
about 12 times. There we go.
| | 12:21 | I am moving that 12 times over
by holding the Shift key down.
| | 12:23 | I am moving in increments of 10, which
makes it really handy, and I have got a
| | 12:27 | nice 10 pixel gap
between the buttons themselves.
| | 12:30 | All right, now what we could do at this
point is we can create more clones and
| | 12:34 | just keep repositioning, but
there is an even faster to do that.
| | 12:37 | So we are going to switch over to the
History panel to take a look at that.
| | 12:39 | I go to my History panel and you'll
see down here the bottom of the history steps
| | 12:44 | I have got Clone and Move.
| | 12:45 | There are two steps that I incorporated.
| | 12:48 | So I am going to select the Clone
option and I am going to select the Move step,
| | 12:51 | and with those two elements selected watch
what happens on screen when I click and Replay.
| | 13:00 | Just like that, I have got
the buttons copied over. Pretty cool.
| | 13:04 | I mean it's not a lot of time saving at
this point, but every little bit helps
| | 13:08 | and it's just a nice
way to speed up the process.
| | 13:11 | Now I have got five buttons.
They are all say exactly the same thing.
| | 13:14 | So we are going to go in
and make a couple of changes.
| | 13:17 | Now the buttons are all
grouped objects, remember.
| | 13:19 | So when I click on it, I can't just
independently select the text using the Pointer tool.
| | 13:23 | So what I am going to do is go to my
Subselection tool and then I can mouse over
| | 13:28 | the text and select it.
| | 13:30 | So once it selected, I will
just double-click inside of it.
| | 13:32 | That will activate the Text tool and
if I press Ctrl+A at that point, I can
| | 13:35 | select all the text.
| | 13:37 | I am going to change this text to products.
| | 13:41 | Because I have center aligned the text
itself and I have aligned that text area
| | 13:46 | in relationship to the button, when I
put in new text it's actually going to
| | 13:49 | re-center itself quite nicely.
| | 13:51 | So there is my first one,
move over to the next one.
| | 13:55 | Because I am already with the Type
tool selected, I am kind of in sort of
| | 13:58 | sub-selection mode here.
| | 14:00 | I can just click inside that next piece
of text and press Ctrl+A. It selects the text,
| | 14:05 | and this one is going to
be Custom Orders. There we go.
| | 14:11 | Do the same thing with the next one,
Ctrl+A again selects the text, and I am
| | 14:16 | going to be changing this one to Contact Us.
| | 14:22 | One final time here at the last one,
select there and press Ctrl+A or Command+A,
| | 14:28 | if you on the Mac and we are
going to pop in here the word Recipes.
| | 14:34 | Now avoid the temptation to press the
Return key when you are done, because if you do,
| | 14:38 | you end up with an extra line.
| | 14:39 | So just be aware of that kind of thing.
| | 14:41 | I'll just press Ctrl+Z to undo that.
| | 14:44 | So now we've got our five navigation
buttons, all with their custom text,
| | 14:48 | we have got a logo in place and that's
all we really need inside the header area.
| | 14:53 | So let's collapse down our History panel a bit.
| | 14:56 | Let's resize things a bit here
and see what we have got going on.
| | 15:00 | Inside of our header we have got
the five different grouped object.
| | 15:02 | Now they are listed as Group:
| | 15:04 | 2 object, which is not really
all that helpful to be honest.
| | 15:07 | So what you can do, I strongly
recommend this especially when you get into more
| | 15:10 | complicated layouts, is rename these.
| | 15:13 | So I am going to go down to my
first button here where it says Group:
| | 15:15 | 2 objects, the bottom one.
| | 15:16 | I am just going to change that from Group:
| | 15:18 | 2 objects, double-click on it and then
change it. About Us, and continue on that way
| | 15:25 | and again double-
clicking on each one of them.
| | 15:29 | Good habit to get into.
| | 15:30 | It takes a few seconds to do it at this
point, but down the road if you have a
| | 15:34 | lot of objects that are part of your
design, you are going to thank yourself in
| | 15:37 | the long run, because you won't have
to search by clicking and looking to see
| | 15:40 | what the actual object you have got
selected. And the last two. Contact Us.
| | 15:50 | Last one was supposed to be Recipes,
but it seems to switch back to About Us.
| | 15:55 | So I'll just type in Recipes there and
go over and just select that again and
| | 16:05 | change that to Recipes. Okay, here we go.
| | 16:11 | Now the only thing here, just a
consistency thing, I started off with About Us
| | 16:15 | typing it uppercase.
| | 16:16 | So I am just going to go
and do everything one way.
| | 16:19 | So I am just going to
knock it down to lowercase.
| | 16:20 | It's just an identifier, so it doesn't
really matter whether it's uppercase or
| | 16:23 | lowercase, but I like to be
consistent if I can. So there we go.
| | 16:27 | We've got our five buttons, we've got
our logo in place, we've got custom labels
| | 16:31 | for each of the buttons.
| | 16:32 | We are done pretty much at
this point with the header.
| | 16:35 | We'll be coming back to it later on,
but let's finish fleshing out the rest
| | 16:38 | of the overall design.
| | 16:39 | So I am going to collapse that header
sub-layer and I am going to lock it.
| | 16:43 | This means by locking it, I won't
drop anything in there by accident.
| | 16:46 | I am going to unlock my content layer,
which is currently empty, and select it.
| | 16:52 | Here again, we are going to drop another one
of those content boxes, one of the symbols.
| | 16:56 | So I am going to go ahead and grab my
content symbol from my Document Library,
| | 17:01 | drag it on to the screen and we are
going to position this guy, I'll grab my
| | 17:04 | Pointer tool first, 30 pixels from the
left as well, and you can see by the way
| | 17:07 | here not only do we have the ability
to snap to the grids, but you notice the
| | 17:11 | Smart Guides are coming into play here.
| | 17:13 | As I get close to that edge that upper
shape, you get that little pink dashed line.
| | 17:18 | That's a Smart Guide and it's
basically helping line things up with
| | 17:21 | what's currently in place.
| | 17:23 | Oh! Let's see. 20 pixels below the header.
| | 17:25 | There we are 30 for the X
coordinate and 190 for the Y coordinate.
| | 17:31 | Again, you can always double-check the
Property Inspector to make sure you are
| | 17:33 | in the right location.
| | 17:34 | We will scale this guy.
| | 17:36 | We are going to make it 350 pixels tall.
Again the tooltips come in really handy for this.
| | 17:42 | As you just drag down, you can see that
you can basically scroll at the same time.
| | 17:47 | So 350, and we'll drag it across
and make it as wide as the header.
| | 17:55 | I can also do this numerically too,
if I wanted to. There we go, 900.
| | 18:01 | There we are.
So there my content area.
| | 18:04 | Okay, now I am going to lock that
content layer and we are going to switch
| | 18:08 | over to the footer, unlock it and we are
going to add in yet again one more content symbol.
| | 18:16 | So I'm just going to drag that in and
position that again 30 pixels from the left.
| | 18:22 | In this case we'll do 10
pixels from the top. See there we go.
| | 18:27 | And again, I am off by one
pixel. I slipped on the mouse.
| | 18:31 | So I can just change that in the
Property Inspector to 550 for the Y coordinate.
| | 18:37 | I want this to be 900 pixels as well.
| | 18:39 | So just actually select it right
here on width. I will just type in 900.
| | 18:45 | Now I have got my footer area.
| | 18:47 | So I have got my basic
structure ready to roll here.
| | 18:52 | So in a short amount of time, we've
essentially put together the starting point
| | 18:56 | for our entire wireframe.
| | 18:57 | We are going to be adding on to this as we go.
| | 18:58 | So we have certainly done a fairly
quick process here by using things like the
| | 19:02 | symbols, by setting up things like
tooltips and the Smart Guides, we are able to
| | 19:07 | quickly align things up.
| | 19:09 | By making use of the History panel we
are able to quickly replicate objects and
| | 19:13 | again speed up the workflow.
| | 19:15 | As I said at the very beginning
that's what this is all about.
| | 19:17 | Wireframes should be something
that are built relatively quickly.
| | 19:21 | Now first time around, if you have
ever done one of these before, it may take
| | 19:24 | you a little longer.
| | 19:25 | But the fact is once you'd work with
these more often, you are going to have a
| | 19:28 | whole library of symbols already built.
| | 19:30 | You'll be able to drag-and-drop these
guys into any wireframe you want and
| | 19:34 | it will become a much easier
and faster process as you go.
| | 19:39 | In the next movie, we are going to be
adding a master page and creating new
| | 19:42 | pages based on that master page.
| | Collapse this transcript |
| Adding a master page and its subpages| 00:01 | In the last movie we built the
basic structure for our wireframe.
| | 00:04 | In this movie we are going to be
converting that structure to a master page,
| | 00:08 | creating some new pages based on the
master page and making a couple of other
| | 00:12 | additions to the master page as we go.
| | 00:14 | So, you can work with the file you had
worked with in the previous movie, if you
| | 00:18 | had saved it or if you would like to
start with our sample you can work with
| | 00:21 | that one, we have got it on screen right now.
| | 00:23 | Now, creating a master page
actually is a pretty easy step.
| | 00:27 | All we've got to do is go to our Pages
panel and right-click or Ctrl+Click on
| | 00:31 | the Mac and choose Set As
Master Page and it's done.
| | 00:38 | Just like that, we have converted
this into essentially a template for the
| | 00:41 | rest of the design.
| | 00:42 | Now, one of the things I might want to
do with this is change the name. I am
| | 00:45 | going to double-click inside Page
1 here and change this to Common.
| | 00:49 | Now you will notice that the moniker
"master page" stays with that page.
| | 00:53 | You can't remove or delete
that little component there.
| | 00:56 | That's always going to be there to
identify this as the master page.
| | 01:00 | Now, creating our additional pages
based on their structure, again, a pretty
| | 01:03 | straightforward thing. All we've got to
do is go down to the New Page icon down here
| | 01:07 | and click five times and that
gives us, well, I just expand my Master to
| | 01:15 | and my Pages panel a little bit,
Common page and 5 Pages all based on the
| | 01:20 | original master page.
| | 01:21 | So, pretty straightforward process and
they all look exactly the same. Each one
| | 01:25 | of them we can customize and we will
be doing that for great deal of these.
| | 01:29 | But we are going to add in a couple
more things into our master page before
| | 01:31 | we go much further.
| | 01:33 | I am going to switch back to this and
if you open up and take a look at the
| | 01:36 | finished wireframe, there were couple
of other elements inside the header that
| | 01:39 | aren't in our current wireframe and
that was a little Shopping Cart icon and
| | 01:43 | that button should become
a member of the website.
| | 01:45 | And also down at the bottom of our
design, we have got this footer area,
| | 01:49 | but there is nothing in it.
| | 01:50 | So, we are going to be adding a couple
of things in here. We are going to add
| | 01:52 | them to the master page.
| | 01:54 | So, we are going to switch over to our
Common Library and we are going to work
| | 01:58 | with a couple of existing symbols in here.
| | 02:00 | So, I am going to go to our 2D Objects and
we are looking for here is the Shopping Cart.
| | 02:08 | And I am just going to move through these guys.
| | 02:11 | Look for my Shopping Cart icon.
| | 02:13 | You'll see quite a few different little
2-dimensional symbols that we can work with
| | 02:17 | and there is our Shopping Cart icon.
| | 02:18 | It's 2DStyled_19, a very descriptive
name, if I have ever heard one and we are
| | 02:24 | going to bring this guy into our header area.
| | 02:27 | So, before I drag it over though, let's
just double check and see where we are
| | 02:31 | our the Layers panel. Currently, we are
still in footer area for our Wireframe.
| | 02:34 | So, we are going to lock that layer, we
are going to reopen or unlock the header
| | 02:39 | layer and just make sure we
can see all of our stuff there.
| | 02:43 | And now we are going to
drag in that shopping cart.
| | 02:45 | And then we just drag-and-drop
and in it goes, just like that.
| | 02:50 | Right away when you see this, the first thing
you think of is e-commerce and shopping cart.
| | 02:54 | So, it's perfect for our wireframe.
| | 02:56 | So, there is that fellow dropped in
and we can also rename that if we want.
| | 03:01 | Double-click in the Layers panel and
just call it cart button, here we go.
| | 03:06 | And the other element I want to
add in here is that join button.
| | 03:10 | Now again, Common Library gives us
a lot of things to work with here.
| | 03:14 | So, I am going to go back up and
collapse down that 2D Objects and we are going
| | 03:19 | to go and take a look. We have got a quite a
few different form elements that we can pull from.
| | 03:22 | So, I am going to go into my HTML form
elements and what I am looking for really
| | 03:28 | is just a button, something nice and
simple there it is, Button(win) and then
| | 03:33 | you also have a Mac
version of the button as well.
| | 03:35 | So, you can pick whichever one you want,
but for our purposes here, it's just to
| | 03:39 | put something on there to indicate some
interactivity and that Windows version of
| | 03:43 | the button will be just fine.
| | 03:44 | So, I will just drag that and pop it
on the screen as well and there we go.
| | 03:48 | I can line that up directly with a
shopping cart and I think what I will do as
| | 03:52 | well here is make sure I have got a
fairly even amount of space between my
| | 03:57 | button here and the edge of my header area.
| | 04:00 | So, I will just reposition that,
like so, maybe make it a little bit
| | 04:03 | lower, there we go.
| | 04:04 | Run it along the baseline of the text
and again our Smart Guides are coming into play,
| | 04:10 | so I can center things
up quite nicely, there we are.
| | 04:14 | Okay, so now I have got my
other two elements in place.
| | 04:17 | One of the other things I want to do
with this master page before I go any
| | 04:20 | further is I want to establish the
actual navigation that I am going to use for
| | 04:24 | this wireframe. Right now these are all
just graphics. They aren't really going
| | 04:27 | to do anything for us and we have got
several pages. None of them are really
| | 04:30 | going to link to anything else.
| | 04:32 | So, take a look over here in our Pages
panel again,. I will just collapse down a
| | 04:36 | few things and we have got Page 1,
all the way down to Page 5.
| | 04:39 | Not with particularly descriptive at the
moment, so what we are going to do with
| | 04:43 | these first is we are going to rename these.
| | 04:45 | So, we have a good idea of
what the content is going to be.
| | 04:47 | So, I am going to click on Page 1
and I am just going to call it about.
| | 04:53 | And Page 2, I am going to call this products.
| | 04:57 | Page 3 is going to be custom orders.
| | 05:01 | I will just use custom for the time being.
| | 05:04 | Page 4 is contact and Page 5 is recipes.
| | 05:12 | So, now we have a good indication of what
the content is going to be on these
| | 05:15 | sub-pages once we start customizing them.
| | 05:17 | I will switch back over to the master page.
| | 05:20 | Now, I am going to add in my interactivity.
| | 05:21 | Now, the idea behind adding these
elements into the master page to begin with is
| | 05:25 | that they are going to be visible
on every single page in the design.
| | 05:29 | So, not only are the elements
going to be visible but any interactive
| | 05:33 | components that we put in here, hot
spots or slices, will also become available
| | 05:37 | for all the other pages.
| | 05:38 | So, we are creating an interactive document.
| | 05:40 | So, let's start with the About Us group here.
| | 05:42 | I am just going to select it
and I am going to right-click.
| | 05:45 | You can Ctrl-click on the
Mac and choose Insert Hotspot.
| | 05:49 | That will give me a hotspot for the
particular button and as soon as I create a
| | 05:53 | hotspot down in the Properties
Inspector you will see I now have the option
| | 05:57 | here to set up links.
| | 05:58 | So, I am going to click on the link
box and I am going to choose about.htm.
| | 06:03 | Now I am picking this again, just a
reminder about the way this list works,
| | 06:06 | above the dividing line is a history of
links that might have been selected previously.
| | 06:11 | Down below are the actual
links for this particular document.
| | 06:15 | In order for the links to work, make
sure you grab the links from the actual
| | 06:19 | area below the divider line.
| | 06:21 | So, there is our first one and then
I am going to repeat the process.
| | 06:24 | Right-click, Insert Hotspot and
this link is going to go to products.
| | 06:31 | Right-click again on the next one,
Insert Hotspot again and this one is going to
| | 06:35 | go custom and we just keep repeating
that process till we are done with all five
| | 06:40 | buttons, here we go.
| | 06:42 | So, now if I click on these guys, you
can see that inside the Property Inspector
| | 06:46 | the links change to match our pages.
| | 06:49 | Now, the interactivity will work and
we can preview but we are not going to
| | 06:52 | really see much of a difference
because we don't have any content on those.
| | 06:56 | There is nothing that's specific to
those pages that I have incorporated yet.
| | 06:58 | We are going to add in a couple of more
hotspots as well here. I will grab the
| | 07:01 | Shopping Cart, I am going to right
click again, Insert Hotspot and also for our
| | 07:08 | button as well, we will Insert Hotspot there.
| | 07:10 | Now, we don't have pages for these yet,
but we will get to those later on.
| | 07:13 | All right, so we have got our header
elements all in place, we are going to
| | 07:17 | scroll down at the bottom here and in
the footer I want to add in some common
| | 07:20 | elements here as well.
| | 07:22 | And again, this is an area where you
might put contact information, we are going
| | 07:25 | to add in a little bit of information
in that sense and also links that will
| | 07:29 | eventually become navigation links.
| | 07:31 | So, I am going to go over to my Layers
panel and we will lock down the header
| | 07:39 | and collapse it, so we can see my
other elements. There is my footer.
| | 07:42 | I am going to unlock that.
| | 07:44 | Okay, we are going to add in some text.
| | 07:45 | So, I am going to use the Type tool and
I am going to set a value here of about
| | 07:50 | 12 points for now and we will deselect
the Bold option here and set the color
| | 07:58 | to Black, here we go.
| | 08:01 | So, all we are going put in here is a
little bit of copyright information,
| | 08:05 | so Copyright Bliss No. 5.
| | 08:10 | And I am still center-aligned
on my text, so I am going to change
| | 08:14 | that alignment option.
| | 08:15 | I am going to grab my Pointer tool
and just reposition my copyright about
| | 08:20 | 10 pixels in, there we go and I am
going to add in one other bit in here on
| | 08:26 | the other side and that's going to be my
main navigation as a sort of a sub-area here.
| | 08:31 | So, I am going to create a new text
box and we are going to put in here,
| | 08:39 | add a space, Products, Custom
Orders, Contact Us and Recipes.
| | 08:53 | Okay, so there is our main links that are
there and just grab my Pointer tool,
| | 08:59 | and I think they are still a bit large,
so I am going to change my size for both
| | 09:02 | of these footer elements.
| | 09:04 | I am going to Shift+Click to select
both of these and make them about 11 pixels,
| | 09:07 | there we go.
| | 09:09 | And one other thing I will do in here
is just to make these separate a bit better.,
| | 09:14 | I am just going to add in a pipe
symbol. These are the vertical dividers,
| | 09:20 | so we will break things up a little bit better.
| | 09:23 | Remember this is just the wireframe, so
these visual elements are probably going
| | 09:27 | to change, but it just gives us a
way to sort of see what's going on.
| | 09:32 | Okay and I think I will add one
more little bit with my footer.
| | 09:36 | So, I will go to my copyright, I'll
press the Return key and I'll just type in
| | 09:42 | Contact info, just so that I know
what's going to be going into that place.
| | 09:47 | Okay, so we have got all of our common
elements for our master page in place,
| | 09:51 | and if I take a look at my other
pages you will see that those elements are
| | 09:53 | right there. There is my footer
information, header information up top.
| | 09:57 | So, it has really simplified the
process of managing these assets.
| | 10:00 | In the next movie, we are going to
look at using some other tools to
| | 10:03 | customize the pages.
| | Collapse this transcript |
| Customizing subpages with Greeked text| 00:01 | In this movie we are going to
be customizing the about page.
| | 00:03 | We are going to be working with couple of other
symbols and creating a couple of more of them.
| | 00:07 | Before we get into that though, just
let's take a quick look at the master page
| | 00:11 | again, take a look at the structure we have got.
| | 00:12 | We have got at Web layer here
with all our hotspots for navigation.
| | 00:15 | We are going to collapse that down.
| | 00:17 | We have a common area here that
has common elements for the header,
| | 00:21 | the content area and the footer area.
| | 00:23 | And that makes sense because these are
all going to be shared across all the pages.
| | 00:26 | And I had also created another layer
back in the last movie called Page Content.
| | 00:30 | Now, this one actually is
supposed to be specific to each page.
| | 00:33 | So, we don't really want this on the
Master page, so what I am going do with
| | 00:38 | this is I am just going to unlock it and
I am going to just select it and delete it,
| | 00:43 | not a big deal because we are
going to be making that customized layer in
| | 00:46 | our additional pages.
| | 00:48 | So, let's switch over to the about page
here and we have inside of each of our
| | 00:51 | sub-pages an empty Layer 1, when you
create brand new pages based on a master page
| | 00:57 | or based on nothing at all, just
a plain old empty page you are going to
| | 01:01 | end up with an empty Layer 1.
| | 01:02 | And you will see down
below the Master Page layer.
| | 01:05 | Now, just a quick note
about the Master Page layer.
| | 01:07 | When you are on sub-pages, it remains locked.
| | 01:10 | You can't edit the master page
elements from any of the other sub-pages.
| | 01:13 | You have to go back to that master page
to make edits or for that kind of thing.
| | 01:18 | So, we are going to go on our Layer 1
here, I am going to double-click and
| | 01:21 | we are going to rename this page content.
| | 01:24 | And this layer is going to be
reproduced under other pages but it's going to
| | 01:27 | have specific content for those pages.
| | 01:29 | Now, in terms of the content replacing
on this page, we are going to have things
| | 01:33 | like a heading, we are going to have
some body copy or representation of it.
| | 01:37 | We are going to have a
placement symbol for a photograph.
| | 01:40 | So, those are the elements
we are going to work with.
| | 01:42 | So, the first thing I want to do is
create this heading, but I am going to do it
| | 01:45 | in a slightly unconventional way.
| | 01:46 | I am going to make use of a symbol
for this purpose that's not really
| | 01:50 | specifically designed to this, but it comes in
really handy and that I think you will see why.
| | 01:54 | So, starting off though, I am going
to create the elements for my heading.
| | 01:57 | I am just go and select my Rectangle
tool from the Tools panel and I am going to
| | 02:01 | drag out the rectangle.
| | 02:03 | That's about 250 pixels wide, there we go,
by about 40 pixels high and I want to
| | 02:10 | make sure it's a shade of gray
that separates from the background.
| | 02:13 | I don't want it to be black, so I am
just going to go in here and click and
| | 02:17 | choose, there we go.
| | 02:19 | So, now we got a box
basically to represent this element.
| | 02:22 | And what I want to
incorporate in this is some text.
| | 02:25 | So, I can utilize this as a symbol
across all my pages to represent a heading.
| | 02:29 | So, I am going to grab my Text tool,
click inside my text area, I am going to
| | 02:33 | change the size and some things here.
| | 02:35 | I want the text to be
white, so it stands out nice.
| | 02:38 | I want it to be about 20 points in size,
I want it to be bold and I want it to
| | 02:45 | be center-aligned and I'll leave the same font.
| | 02:47 | We are not really worrying
about the fonts at this point.
| | 02:49 | Again, we are just in a Wireframe so we'll
just keep it as similar as we can throughout.
| | 02:54 | And I am going to type in here, Main
Heading and I am just going to grab my
| | 02:59 | Pointer tool, select both of those two
objects, over to my Align panel and line
| | 03:05 | those guys up in the middle and also
try to line them up vertically as well, so
| | 03:10 | everything stands out nicely.
| | 03:11 | Okay, now at this point, I have got the
two elements, they are just two objects.
| | 03:15 | I want to convert them to a symbol.
| | 03:17 | Now, what I am going to do here when I
convert them to a symbol is I am going to
| | 03:21 | pick a Button symbol, rather than a
plain old graphic symbol, and I am just
| | 03:25 | going to rename this heading
and actually you know what?
| | 03:29 | I'll be able to more specific and I am
going to call it main heading, here we
| | 03:31 | go, just in case we add
additional ones later on.
| | 03:34 | Now, I am picking the Button symbol
for a reason and that's because I can
| | 03:37 | re-purpose this symbol over and over
again, and I can customize the texture,
| | 03:41 | each iteration of it, so
it can come in really handy.
| | 03:44 | I am also going to Enable 9-slice scaling
guides for this and I am going to click OK.
| | 03:50 | Now, in this case here, I didn't
actually save it to the common library and this
| | 03:54 | is something you want to watch for.
| | 03:55 | It's easy thing to miss.
| | 03:56 | So, if you have gone ahead and
created the symbol but it's not part of the
| | 03:59 | Common Library yet, what we do is we
will hop over to our Document Library.
| | 04:03 | There is my main heading.
| | 04:04 | You will see it right there and all I
am going to do is select it inside the
| | 04:07 | Document Library and I am going to
click to my Options for the Document Library
| | 04:11 | and choose Save to Common Library.
| | 04:14 | So, if you forget to do it you are not stuck.
| | 04:15 | You can just select the
symbol and go ahead and do that.
| | 04:18 | So, I am going to call that
main heading.button. Click Save.
| | 04:21 | So, now it's in the Common Library.
| | 04:23 | Okay, so now we have got a heading, but
as you can see it's not really got any
| | 04:26 | suitable text in there so because this
is a button symbol, inside the Property
| | 04:30 | Inspector, I've got the ability
to change what that heading reads.
| | 04:34 | So, I am going to change this from main
heading to About Us and you can see it
| | 04:40 | updates right away on the screen.
| | 04:41 | So, that comes really
handy from that perspective.
| | 04:43 | All right, now we are going to add in
the Greeked Text auto-shape from John
| | 04:48 | Dunning and this is a really cool feature.
| | 04:50 | If you want to just add in an element
that just represents text, but you don't
| | 04:53 | have to worry about typing, copy or
adding in Lorem Ipsum or anything like that.
| | 04:57 | It's a really, really handy feature.
| | 04:59 | So, we will just take a look
over in our pages area here.
| | 05:03 | Make sure we are in the
page content. That's all good.
| | 05:05 | So, we are going to switch over to
our Shapes panel and I am just going to
| | 05:09 | collapse down my Align panel and just
drag things around a bit, so I can see my
| | 05:14 | shapes a bit easier
without doing so much scrolling.
| | 05:16 | Again, as I move down through here, you
will see part way down, Greeked Text and
| | 05:22 | Grid, both of these we are going to be using.
| | 05:24 | So, the Greeked Text is
the one I want to start with.
| | 05:26 | Select it and drag it on to your
canvas and I can position it anywhere I want
| | 05:30 | and I have got a whole bunch of
different controls around the auto-shape.
| | 05:33 | If you have worked with auto-shapes
before, you will remember that the yellow
| | 05:36 | diamonds are indicating some kind of
control for different aspects of the
| | 05:39 | auto-shape, basically this control
handle to the JavaScript that's attached to
| | 05:43 | the auto-shape, so I can drag things out
and make change the width if I want to.
| | 05:46 | I can go ahead and change the
Line length randomness if I like.
| | 05:50 | I can even change the Line
spacing and the Line height.
| | 05:53 | So, I can really get a nice representation
of how it's going to be placed in the column.
| | 05:57 | That's one way to do it with the auto-shape.
| | 05:59 | You can drop in this one basic setting.
| | 06:01 | Another option we have got
is through the Commands menu.
| | 06:03 | So, I am going to delete this guy.
| | 06:04 | Go up to the Commands menu and when you
install the Greeked Text auto-shape, you
| | 06:08 | are also going to get a
whole series of commands.
| | 06:11 | So, you can either reset the
existing shapes, Default Line Height and
| | 06:15 | Line Length Randomness.
| | 06:17 | You can also insert different types
of Greeked Text option, the one we
| | 06:20 | dropped in was white boxes.
| | 06:23 | In our case here, I kind of like the hatched
version that represent the columns of text.
| | 06:27 | So, I can click on that and I get the
little hatched version, which kind of
| | 06:32 | looks a little more like text,
but obviously it still isn't text.
| | 06:35 | So, I can drop that guy in, and
I can do the same kind of thing.
| | 06:37 | I can change my width, I am going to
drag it out, here we go and I can change
| | 06:43 | those proprieties if I want too, Line
Height and so on, but I think I am going
| | 06:45 | to leave it as it is for now.
| | 06:47 | It's working for me.
| | 06:48 | And if I want to, I can again, go
ahead and continue on customizing it but I
| | 06:52 | think it will work for job that I wanted to do.
| | 06:55 | I want to add in a second column of this.
| | 06:56 | So again, rather than drag it in from
the Shapes panel or use the Commands
| | 07:01 | option, what I can do is I can
just create a copy or clone of this.
| | 07:05 | Now, I showed you in the previous
movies, how to create a clone by pressing
| | 07:09 | Ctrl+Shift+D or going to the Edit menu.
| | 07:12 | Well, there is another way you can do this.
| | 07:13 | It's actually kind of handy.
| | 07:14 | If you hold down the Alt key in Windows
or the Option key on the Mac and press
| | 07:18 | any of the directional arrow keys just
one time, you actually end up getting, if
| | 07:23 | we take a look over in our
Layers panel, an exact copy.
| | 07:26 | So, another shortcut to creating a
duplicate and then I can let go the Alt key,
| | 07:30 | hold down the Shift key and use the Arrow key
to move out my second column. It's like that.
| | 07:35 | So, I have really, really quickly
dropped another piece in very fast, and that's
| | 07:41 | again, the key here is we are
trying to do this as quickly as we can.
| | 07:44 | Okay, so we are going to add
in a couple more bits in here.
| | 07:47 | We are going to add in our Photo symbol.
| | 07:49 | So, I am going to go into my Common
Library that's not a symbol, we have used
| | 07:53 | yet, but we did create it.
| | 07:54 | Custom symbols and there it is, our photo.
| | 07:57 | I will drag that guy on to the canvas
and we'll set the dimensions for this
| | 08:02 | fellow to be about 230x270 and I'll just
do that through the Property Inspector.
| | 08:10 | So 230 pixels wide, 270
pixels high and there is my photo.
| | 08:16 | And I will just move him around a
little bit, 20 pixels from the right of the
| | 08:20 | content area, both 30 pixels down
from the top part of the content area.
| | 08:23 | Last little bit I will do here is I'll
add in one more sort of Greeked Text to
| | 08:27 | represent a caption for the Photo.
| | 08:29 | So, we'll go over to our Commands
menu here again and we'll choose Greeked
| | 08:34 | Text, Insert Gray, so I'll just grab
that and it's a bit much for the time
| | 08:41 | being, but we'll customize it.
| | 08:42 | So again, we'll see how
easy this is to work with.
| | 08:45 | I'll change the width to begin with.
| | 08:46 | All right and I'll change the height
and this is pretty cool with the whole
| | 08:51 | height thing, as I drag the height, as
I rescale it essentially, it reduces the
| | 08:56 | number of lines automatically.
| | 08:57 | I'll just drag that down, drop it
underneath the photo, like so and I think I'll
| | 09:03 | select both of these guys.
| | 09:05 | And I think I'll move them in by about
20 pixels, just so they are not quite
| | 09:09 | sitting right at the edge there.
| | 09:11 | And move them up by another 10,
so it's in line with the heading.
| | 09:15 | So there we go, we have created a
brand new symbol for our headings.
| | 09:18 | We've dropped in the Greeked Text auto-shape
three times and we've dropped in our photo.
| | 09:23 | So, we've made pretty quick
work of mocking up this about page.
| | 09:26 | In the next movie, we are going to make
use of the Grid auto-shape and see how
| | 09:30 | we can customize it a little to make
it look like a Spry Accordion panel.
| | Collapse this transcript |
| Emulating a Spry accordion panel with the Grid Autoshape| 00:00 | Things are really starting to take shape.
| | 00:02 | We've created the about page,
and structured all that.
| | 00:05 | Well, I am going to move
into the products page now.
| | 00:08 | Now, I've already added in some elements
that we've already talked about, things
| | 00:10 | like our little headers and our Greeked text.
| | 00:12 | What I want to focus on, in this case,
is working with the Grid Auto Shape to
| | 00:16 | mock up this kind of Spry
Accordion panel concept.
| | 00:20 | So we are inside of our about page
document and I've already made changes as
| | 00:24 | I mentioned. I've renamed the layer to
page content, current elements are sitting
| | 00:28 | inside that layer, and we are
going to drop in our Grid shape.
| | 00:31 | Now again, this is in the Shapes panel,
and in my case, it's right beside the
| | 00:34 | Greeked Text Auto Shape.
| | 00:35 | So I am going to do is select it,
and drag it onto the canvas.
| | 00:40 | Okay, so we can do quite a few
different things with this object.
| | 00:42 | Now the first thing I want to
do is I want to change the color.
| | 00:45 | So I am going to go down to my Properties panel.
| | 00:47 | I am going to change the color from
black to white, and you'll see now we get
| | 00:52 | essentially a white and then a darker gray.
| | 00:55 | So as I add more rows,
I'll get that alternating shade.
| | 00:58 | Now, much like the Greeked Text Auto
Shape, we've got some controls here that
| | 01:01 | allow us to customize the shape.
| | 01:04 | We take a look up here, in the upper-
right corner, you can see if I mouse over
| | 01:08 | that blue-yellow diamond,
I can set the numbers of columns.
| | 01:11 | Currently it's set to 3.
| | 01:12 | Now for the Accordion panel, I just
want to have one column and multiple rows.
| | 01:16 | So I am going to drag
this and-- control handle.
| | 01:19 | As you can see, I can
eventually get down to one column.
| | 01:22 | When I let go, there is
currently my three columns.
| | 01:24 | Now I also want to have
four rows and one column.
| | 01:27 | So I am going to go down and grab the
Rows control down at the bottom of the
| | 01:31 | left corner and drag that
downward and I'll create four rows.
| | 01:35 | So that's a good starting point.
| | 01:36 | I also want to maximize my space here,
and the idea behind an Accordion panel is
| | 01:40 | that you've got an area for panel header,
and you got an area for panel content.
| | 01:45 | So that's what the four
elements here I am going to represent.
| | 01:47 | Our headers for each of our panels
and representation for the content.
| | 01:51 | So I am going to first of all position
this fellow and I'll bring him up to
| | 01:56 | about 30 or 40 pixels from our first
column is where there are text in our
| | 02:01 | headers and sort of align
it up with the top header.
| | 02:04 | Now what I am going to do is
just basically enlarge this thing.
| | 02:08 | So I am going to grab my control handle,
my bottom-right side here, and I am just
| | 02:10 | going to drag across.
| | 02:12 | So let's set that about 30
pixels from the inside border.
| | 02:19 | Now, the other thing I want to do
here is I want to make one of these rows
| | 02:22 | taller than the other ones.
| | 02:24 | Now the Grid Auto Shape doesn't
allow you to do this on its own.
| | 02:27 | It's not built into it, but
there is a way to work around it.
| | 02:31 | So I am going to grab my Subselection tool,
and I am going to select my bottom row.
| | 02:35 | Now the nice thing about Subselection
tool is essentially I am working with a
| | 02:38 | grouped object here and by moving --
selecting the Subselection tool, I can
| | 02:42 | select different elements with inside
the group and you can see as I move my
| | 02:45 | mouse over these fellows.
| | 02:47 | That's pretty to easy to see.
| | 02:48 | I can select any one of these main columns.
| | 02:50 | So with that one selected, I am now
going to grab my Scale tool, and I am going
| | 02:56 | to drag down to about 20 pixels
above the bottom of that main container.
| | 03:05 | You will get a message from Fireworks
saying Editing sub-elements of an Auto
| | 03:08 | Shape can cause it to behave unpredictably.
| | 03:10 | We are not going to be doing a
lot with this after this point.
| | 03:13 | So it's okay to do this.
| | 03:15 | We can get away with it, and we'll click OK.
| | 03:18 | So now we've got our
customized Accordion panel here.
| | 03:20 | We've got alternating rows. We've got a
larger area where our content might display.
| | 03:24 | Last thing I want to do with this is
adding some text elements to sort of
| | 03:28 | indicate what these different rows are for.
| | 03:30 | So I am going to go ahead and select
my Pointer tool just to lock in that change,
| | 03:34 | then grab my Text tool, and
I am going to go at the very top of my page
| | 03:38 | header here, my Accordion panel.
| | 03:41 | I am going to type in here panel
header and we're still working with some
| | 03:46 | default settings from the previous text element.
| | 03:48 | So I am just going to reposition that
and we are going to change that around.
| | 03:52 | Now black is fine, but I don't think I
need it to be bold, and I don't need it
| | 03:55 | to be 20 points high.
| | 03:56 | So I am going to bring it down to about 16
and there we go and just reposition that.
| | 04:01 | I am using the Arrow keys also to be a
little more specific on where I position that.
| | 04:06 | So there is my panel header and much
like I've done before, I am going to
| | 04:09 | create copies of this.
| | 04:11 | By holding down the Alt key or the
Option key on the Mac, and just click the
| | 04:14 | Arrow key once, and now I've got a
secondary object, and I am just going to
| | 04:19 | hold down the Shift key and use the Arrow key
and reposition that fellow, where I want him to be.
| | 04:23 | And I let go the Shift key and just use the
Arrow keys to get a little more fine-tuning.
| | 04:29 | So there is two of them.
| | 04:30 | Now I am going to add in two more
for it to represent my content area.
| | 04:33 | So I can basically cheat this up again.
| | 04:35 | I'll hold down the Alt key and
press down the Arrow key and I'll
| | 04:40 | just reposition that.
| | 04:41 | Double-click inside the text area and I'll
change this from panel header to panel content.
| | 04:47 | Now I'll do that one more time, in
fact, to the same object that I need.
| | 04:52 | So again, Alt and the Arrow key once, and
then Shift and the Arrow keys to bring it down.
| | 04:57 | All right.
| | 04:59 | Now, I am just going to grab all of
these fellows and make sure they are all
| | 05:03 | aligned up nice and neat.
| | 05:04 | So I am going to put up my Align
panel and set the alignment to left.
| | 05:07 | So everything is aligning up the way I want.
| | 05:09 | And while I've got them all selected,
just in case I need to make changes to
| | 05:12 | them later on, I am going to change
that text alignment in the Property
| | 05:15 | Inspector to Left align.
| | 05:17 | So if I change the content that's in
there, things are going to move from the
| | 05:20 | left out rather than from the center.
| | 05:23 | So now we've got our
wireframe for our products page.
| | 05:25 | We've got an approximation of an
Accordion panel set in there, so we know how
| | 05:29 | the content is going to be displayed
by clicking on the different tabs and
| | 05:32 | people would be able to see different content.
| | 05:34 | We've got an area off to the left-hand
side that has couple of headings as well
| | 05:38 | as an indication there's going
to be copy going along with it.
| | 05:41 | So we've done a nice job here of sort of
giving the impression of what this page
| | 05:44 | is supposed to look like.
| | 05:45 | I am just going to zoom out a little bit,
and take a look around, and things are
| | 05:51 | looking pretty balanced as well.
| | 05:53 | It's just a wireframe but it's nice
to have things looking nicely balanced.
| | 05:57 | We are going to save this file, and
when we'll come back in the next movie,
| | 05:59 | we're going to be creating a custom
order page, again working with the Grid Auto
| | 06:02 | Shape as well as few other symbols
that are inside the Common Library.
| | Collapse this transcript |
| Creating an order form| 00:00 | We are now working on the custom
orders page and the idea behind this page in
| | 00:04 | the wireframe is to show that the
visitor can go on to the site and essentially
| | 00:08 | pick their own custom box of chocolates.
| | 00:11 | So we are going to be making use of
the Grid Auto Shape again and we are
| | 00:14 | essentially going to be creating
sort of a visual order form here.
| | 00:16 | So I'll start off by going to my Shapes
panel and grabbing my grid and just drop
| | 00:22 | that in, and we'll just position that
where we want it to be, so about 210
| | 00:27 | pixels from the top and about
340 from the side. There we go.
| | 00:31 | Now I want to change the colors.
| | 00:33 | So I am going to change my main default
color back to white, and I will get that
| | 00:37 | nice sort of alternating white and light gray.
| | 00:41 | I want to use the auto-shape
for what it was intended, which is
| | 00:43 | essentially mocking up a table.
| | 00:45 | So I am going to be adding
a row and column to this.
| | 00:47 | So I am going to go to the upper-right
control handle and drag upwards to the
| | 00:51 | right so I can create four columns,
and do the same thing in the bottom-left
| | 00:55 | control handle, drag
downwards to create four rows.
| | 00:59 | Once I have got that scenario set up,
I am going to grab the control handle over
| | 01:03 | on the bottom-right corner to resize
this guy and I want this to be about 560
| | 01:08 | pixels wide by about 270 pixels high.
| | 01:11 | And again, my tooltips help
me line things up fairly well.
| | 01:16 | There we go, 270x560.
| | 01:20 | So we are going to switch over to our
Document Library and there is our photo symbol.
| | 01:24 | It's currently selected.
| | 01:25 | We'll just drag that guy on to the canvas.
| | 01:27 | Now it's a bit too big for what we need,
so we are going to scale him down and
| | 01:31 | I want the instance to be about 50x50
pixels, there we go, and we will just
| | 01:36 | position him into place, all right.
| | 01:40 | Now I want to add in the couple of
other elements I was mentioning and we'll
| | 01:42 | have to grab those from the Common Library.
| | 01:45 | If I scroll down at the bottom of the
Common Library, I will see a folder called Win.
| | 01:49 | This has a whole bunch of
Windows form elements in it:
| | 01:51 | check boxes, buttons, and
all sorts of different things.
| | 01:54 | What we are going to be working
with here is the CheckBox and also
| | 01:58 | the NumericStepper.
| | 02:00 | So first thing I want to do is drag in
that CheckBox, just pop that in. There we go.
| | 02:06 | And you can see it's got a little
check box area and a label element, and
| | 02:09 | we will be able to
customize those in a few minutes.
| | 02:11 | And the other symbol that I want
to work with was the NumericStepper.
| | 02:14 | So I am going to grab that
guy and drag him in as well.
| | 02:17 | Now in this case here, the NumericStepper
is a little bit too big for what we need.
| | 02:21 | So the first thought you might
have is, well, I am going to scale it.
| | 02:23 | So if I grab the Scaling tool and
drag, you can see we get a kind of a
| | 02:28 | weird thing going on.
| | 02:30 | Now, I can't explain why this
happens but I can help you fix the problem.
| | 02:34 | So I am going to escape out of that
change. I am going to double-click on the
| | 02:37 | NumericStepper symbol.
| | 02:39 | Now I am inside the Symbol Editor and I
am going to zoom in on that symbol and
| | 02:43 | you can see that it's actually
a group of 11 different objects.
| | 02:47 | So we will use the
Subselection tool to dig a little deeper.
| | 02:50 | I am going to move over to my button area.
| | 02:53 | Now I can't select the button area.
| | 02:54 | It seems to be non-selectable, if
I take a look over my Layers panel.
| | 02:57 | That's because that area, which is
essentially referred to as the Label, is locked.
| | 03:02 | So we are going to unlock that.
| | 03:04 | Okay, now you can see it's selected.
| | 03:06 | I'll click inside and all I am going
to do is change this from an auto-sizing
| | 03:09 | text box to a fixed-width text box.
| | 03:12 | So I am just going to go into that
upper corner where you see that little tiny
| | 03:14 | circle and just double-click.
| | 03:17 | You can see a slight shift in the
size of the text box. That's fine.
| | 03:21 | And then all we are going to do is
grab the Pointer tool, double-click on the
| | 03:25 | canvas and we are back out to our
main working area, and I will zoom out a
| | 03:28 | little bit so we can see things a bit better.
| | 03:31 | Okay, so we'll grab that numeric
symbol again and we will grab the scaling
| | 03:36 | option and we'll just drag this
into about 60 pixels. There we go.
| | 03:40 | So it's been rescaled and we don't have that weird
odd thing poking out of the top of it like that.
| | 03:45 | So I will just reposition that
a little bit and there we are.
| | 03:50 | So we have got our two elements there,
our CheckBox and our NumericStepper.
| | 03:53 | And I mentioned earlier that these
are what are referred to as component symbols,
| | 03:57 | which means they actually have
some elements that can be altered on an
| | 04:00 | instance by instance basis.
| | 04:02 | So I have got my CheckBox selected.
| | 04:04 | I am going to go down to the Properties
Inspector and the other panel that sits
| | 04:07 | in with the Properties
Inspector is a Symbol Properties panel.
| | 04:10 | So I am going to select that and you
can see here, we have got a whole bunch of
| | 04:14 | different values and
elements that we can change.
| | 04:17 | We can change things like the color
of the text, the family, the font size.
| | 04:21 | If I scroll down a little bit,
the current state of the field, and we can choose
| | 04:26 | from Normal, Over, Press and there is a
few different options in there, Selected
| | 04:30 | Over, Selected, and so on.
| | 04:32 | The first thing we are going to do though
is we are going to change the label itself.
| | 04:35 | We don't want it to say Label.
| | 04:37 | It doesn't make much sense.
| | 04:39 | So I am going to change that by
selecting the word Label in the Symbol
| | 04:42 | Properties panel and change it to Quantity.
| | 04:44 | And as soon as I press Return, you can
see that the name changes in the instance.
| | 04:49 | Now, you might also notice
that the name didn't just change.
| | 04:51 | It actually dropped down into two lines.
| | 04:54 | So again, we have got some inherent controls
within the symbol that we can use to fix this.
| | 04:59 | So I am going to use my Pointer tool,
double-click on the symbol, there is my Label.
| | 05:04 | In this case, for this
particular one, it's not locked.
| | 05:07 | So I am just going to double-click
inside of it and then we are going to change
| | 05:10 | this to a auto-sizing text box.
| | 05:13 | And that's really the
only thing we need to change.
| | 05:16 | Grab my Pointer tool again, double-click and
you can see Quantity is now back on to one line.
| | 05:21 | So there are some little things you
have to watch out for when you are playing
| | 05:24 | around with these symbols.
| | 05:25 | So we are just going to use the arrow
keys and just reposition that fellow
| | 05:29 | a little bit, and do the same thing with the
NumericStepper, just want them to both line up.
| | 05:34 | I mentioned also that we can
change some elements with inside
| | 05:37 | the NumericStepper.
| | 05:38 | So I can go into the Symbol
Properties for the NumericStepper.
| | 05:41 | It's currently selected and I can
change the value here for the Text.
| | 05:45 | So currently it says 0.
| | 05:46 | If I type in 3, for example, I can
update the amount that's going inside that
| | 05:51 | particular check box.
| | 05:53 | Now I don't want to go too deep into
making a lot of changes here, but it's
| | 05:56 | just to show you that you can create a
pretty decent representation of an ordering area.
| | 06:00 | So we have got our Quantity checkbox,
we have got the number of items we are
| | 06:03 | going to order altogether
inside of that one little unit.
| | 06:06 | Now what I would like to do with this
is essentially populate it across a whole
| | 06:10 | range of these cells.
| | 06:11 | So I am, first of all, going to reset
this back to 0 and then I am going to
| | 06:16 | select all three elements like so.
| | 06:20 | And what we are going to do is we are
going to group these three objects together.
| | 06:22 | So I am going to go up to my Modify menu
and choose Group, and I am going to use
| | 06:28 | my Shift and my Right arrow
key to move this whole set over.
| | 06:31 | But first, I need to create another copy.
| | 06:33 | So again Edit > Clone, so I have got
my duplicate of that group and then
| | 06:38 | Shift+arrow key so we move
it on over. There we go.
| | 06:43 | So it's not exactly where we want it but we
can tweak the positioning in just a minute.
| | 06:47 | What I do want to do is get
my other elements in play here.
| | 06:50 | So I am going to go to my History panel
and I am going to select my Clone option
| | 06:55 | and I am going to select my Clone step
and my Move step holding the Shift key
| | 06:59 | down to select both of those.
| | 07:00 | And much like we have done in previous
movies, just click the Replay button.
| | 07:04 | And really quickly,
I can move these guys across.
| | 07:07 | So done those ones, I am just going to
reposition these fellows a little bit.
| | 07:12 | Select them and just use the Arrow
key to make sure everything fits in there
| | 07:16 | nice and neat, something along that line.
| | 07:19 | And next, I am going to just go and grab that
last one, so I have all four of them selected.
| | 07:25 | This time, rather than using the
History panel or the Cloning options,
| | 07:27 | we're going to use the Alt key or the Option
key on the Mac and one click of the Down
| | 07:31 | arrow key gives me my set of clones.
| | 07:34 | I am just going to hold down the
Shift key and reposition those guys.
| | 07:39 | And then just tweaking
with just the Arrow key alone.
| | 07:42 | Same steps again, hold down the Alt key,
press the Down arrow key once and then
| | 07:47 | hold the Shift+arrow key down and
we'll just position that set as well.
| | 07:51 | And then just arrow key on its
own just to make some modifications and
| | 07:55 | one last time, hold down the Alt key,
Down arrow key once, then hold down the
| | 08:00 | Shift key, and there we are.
| | 08:05 | So we have really quickly
mocked up the entire table.
| | 08:08 | Now as I showed earlier, we can
customize these different instances to reflect
| | 08:12 | the elements may have been ordered.
| | 08:13 | So we are going to do that with a
couple of them, just to make it look a
| | 08:15 | little more realistic.
| | 08:17 | So I am going to go up to my upper-
left group here and in order to do this
| | 08:21 | easily, I am going to ungroup the set first.
| | 08:23 | So I am just going to press Ctrl+Shift
+G to ungroup and then I have got all
| | 08:29 | three objects as separate elements.
| | 08:32 | And I am going to select my Quantity
object here and I am going to set the value
| | 08:37 | for the CheckBox from Normal to being Selected.
| | 08:42 | So there we go, there is my Selected option.
| | 08:45 | And then I am going to change the Quantity
here from 0, and I am going to put it into 3.
| | 08:50 | You may be wondering why I
just didn't leave this originally.
| | 08:53 | Well, we were copying so many of these things.
| | 08:55 | I didn't want them all to have a
Quantity and a number value inside
| | 08:59 | the NumericStepper.
| | 09:00 | So I figured we will just 0 it out
at that point and then make a couple
| | 09:03 | of changes later on.
| | 09:04 | So there is one of them and we
will go down to another option here
| | 09:07 | and again, Ctrl+Shift+G ungroups and then
just click away and then click back on
| | 09:14 | the Quantity option.
| | 09:15 | Change that one to Selected as well.
| | 09:17 | There we go, and we'll set the value
for this one to a value of, oh, let's go 4.
| | 09:30 | And you can continue on
doing this if you like.
| | 09:32 | The last step we want to do here is
we want to add in a couple of buttons.
| | 09:36 | One of the buttons to essentially add
this information to the cart and one of
| | 09:40 | them to save the information for later.
| | 09:42 | All right, so I am going to again make
use of a symbol in our Common Library
| | 09:47 | and I am going to go down to my Win folder
again, and grab my Button, there it is there.
| | 09:56 | And I am just going to
drag that on to the canvas.
| | 09:59 | Now again, like the CheckBox and like
the NumericStepper, this is a component
| | 10:03 | symbol so we can actually edit some
properties of it which we are going to do
| | 10:05 | and I am just going to reposition my page a
little bit so I can see things a bit better.
| | 10:10 | I will drop my first Button in and I
will change the value here in the Text area
| | 10:16 | in the Symbols Properties from
Label to Add to Cart. There we are.
| | 10:23 | So there is my first button in place
and I am going to create a copy of this.
| | 10:25 | I am going to hold down my Alt key and I
am just going to drag a copy, there we go.
| | 10:32 | And this one here, I am going to use
as a button to indicate that the user
| | 10:35 | doesn't have to buy right now.
| | 10:36 | They can actually add the
stuff sort of to a wish list, okay.
| | 10:40 | So I am going to change the value here from
Add to Cart in this button to Save for Later.
| | 10:47 | Now notice here that we've ran into
a little issue again with the text.
| | 10:51 | It's dropped down to a second line.
| | 10:52 | Not a big deal to fix, we are going to go and
double-click on the symbol. Locate the label.
| | 11:00 | Double-click on the label itself and I'll
zoom in a bit so you can see this a bit better.
| | 11:04 | There we go, nice and easy to see.
| | 11:08 | And then we'll select the label, double
-click on the label and change this to
| | 11:14 | a auto-sizing text box.
| | 11:15 | Double-click on that little control handle.
| | 11:17 | He knows that the size of the
bounding box from the text area has changed.
| | 11:21 | It's going to basically expand and
contract based on the text that's in there.
| | 11:24 | Then we'll go back to our page, zoom
back out a bit and you will notice I have
| | 11:30 | switched over to one line, but you
might also notice the button is still a
| | 11:33 | little bit too small.
| | 11:34 | So we will just scale
that up to select the button.
| | 11:37 | Choose the Scale tool and just
make this a bit wider. There we go.
| | 11:42 | So now we got two customized buttons as well.
| | 11:47 | Now on top of all this, at some point,
we are going to want to make these
| | 11:49 | buttons somewhat interactive even in the
wireframe just to show the flow of what
| | 11:53 | happens when you add to the cart and so on.
| | 11:55 | So what we will do, at this point, is I
am going to Shift+click to select both buttons,
| | 11:58 | then I am going right-
click and choose Insert Hotspots.
| | 12:03 | And because I have multiple objects
selected, Fireworks is aware of this and
| | 12:06 | asked me, do you want to
have one hotspot or multiple?
| | 12:09 | And I want to choose Multiple.
| | 12:10 | So I have got one hotspot for each
object, and at this point, we basically
| | 12:15 | created the custom order page for our wireframe.
| | 12:17 | We can save the file and in the next
movie, we'll look at putting together
| | 12:22 | traditional type of contact form using symbols.
| | Collapse this transcript |
| Building a contact form| 00:00 | Okay, we've got one more big step to go
before we consider turning this into an
| | 00:04 | interactive PDF for the client,
and that is to add in a contact form.
| | 00:09 | So we're going to be making use of a
series of symbols from the Common Library.
| | 00:12 | We're also going to be importing a
symbol as well to help make the form look
| | 00:15 | a little more real.
| | 00:17 | So we're going to go into our
Win folder in the Common Library.
| | 00:22 | We've got some of the
symbols we need right in here.
| | 00:24 | Now just a quick overview of what we're
going to be putting in, we're going to
| | 00:27 | be dropping in two texts fields, one
for a name, one for an email address.
| | 00:30 | We're going to be adding
in a text area for comments.
| | 00:33 | We're also going to be adding in four
dropdown or combo boxes, one checkbox
| | 00:38 | and a Submit button.
| | 00:39 | Well, the first thing we want
to work with is that TextField.
| | 00:42 | So inside the Win folder there is
my TextField symbol right there.
| | 00:45 | I'll just drag that over.
| | 00:47 | Drop it on to our canvas.
| | 00:50 | You'll notice right away that
the Label is inside the TextField.
| | 00:53 | So I want to change that, make it
look a little more like a real form.
| | 00:56 | So I'm just going to double-click
on this into my Symbol Edit mode and
| | 00:59 | place symbol editing.
| | 01:02 | We have a grouped object here, so I'm
going to grab my Subselection tool, select
| | 01:07 | the text object and use my Shift+Arrow
keys to move it up a couple spots and use
| | 01:12 | just the plain old Arrow key to get
it outside of that main text area.
| | 01:15 | So now it's separate from everything else.
| | 01:18 | Then just double-click, let me go back
and you'll see I've got my TextField and
| | 01:22 | my Label sitting up top.
| | 01:23 | And because this is one of those
special component symbols, we can go to the
| | 01:27 | Symbol Properties panel, select it and
I can actually change the label name.
| | 01:31 | So I'm going to select that
and change it from Label to Name.
| | 01:35 | All right, now we're just going to
reposition this a little bit here.
| | 01:40 | Let's bring this down to about, in
line with the header and I'm just going to
| | 01:46 | go to my View menu, make sure my
tooltips are active and also make sure my
| | 01:50 | Smart Guides are active.
| | 01:53 | I think, I'll also enable the
snapping for my Smart Guides.
| | 01:57 | So those just give me a little bit
more accuracy in positioning things.
| | 02:01 | Okay, so there is my first one.
| | 02:03 | And again, I need another text field,
so I'm just going to hold down my Alt key
| | 02:07 | or Option key on the Mac and
press my Down Arrow key once.
| | 02:10 | That gives me a duplicate.
| | 02:12 | I'll just use the Arrow key with the Shift
key combination to reposition that other field.
| | 02:17 | So now I've got my secondary field.
| | 02:20 | In this one here, I'm going to change
the value for the text from Name to Email.
| | 02:25 | So I've got my first two fields in place.
| | 02:29 | So now I need to add in some combo boxes.
| | 02:31 | So I'm going to go to my Win category
here in my Common Library, scroll down again.
| | 02:36 | And there is my ComboBox.
| | 02:38 | So I'm just going to click-and-
drag and drop this fellow into place.
| | 02:43 | Now I'm going to need a few of these guys,
but I also want to have them the same
| | 02:45 | width as my text fields that I have above them.
| | 02:48 | So, first thing I want to do is make sure I
am indeed in the right spot, there we go.
| | 02:53 | Now, I can choose the Scaling tool and
drag across to increase the width here.
| | 02:59 | You'll notice what happens to this.
| | 03:02 | The Label actually ended up getting
scaled as well, which looks kind of weird.
| | 03:06 | So I'm just going to press Esc, I'm
going to double-click on that symbol.
| | 03:11 | This is a little creaky thing going on
with this button, because all I've got to
| | 03:15 | do now that I've accessed the symbol
itself is double-click back to the canvas,
| | 03:20 | select that symbol, grab the Scaling tool again.
| | 03:25 | And this time when I scale it, you
can see that the Label doesn't distort.
| | 03:30 | We'll just double-click to put that in to place.
| | 03:32 | I need three more of these guys, so
much like I did before, hold down the Alt
| | 03:36 | key, the Option key on the Mac
and press the Down Arrow key once.
| | 03:40 | That will give me my copy, there we go.
| | 03:44 | Do the same thing again.
| | 03:48 | Then my last one, there we go.
| | 03:51 | Okay, so there is my four combo boxes.
| | 03:53 | I'll worry about the labels
in those in just a minute.
| | 03:56 | We're going to add in the
rest of our form here first.
| | 03:58 | So I'm going to switch
over to my Document Library.
| | 04:01 | I need a checkbox to go in here, and
locate my checkbox from previous work and
| | 04:06 | we'll just drag that puppy in
right underneath my combo boxes.
| | 04:12 | We're also going to add in a text
area so the people can put in comments
| | 04:16 | and stuff like that.
| | 04:17 | Now, there isn't really a suitable
text area in the default Common Library.
| | 04:22 | If I switch back over here,
we've got a HTML, for example.
| | 04:27 | You'll not find a text area option in here.
| | 04:29 | And scaling the text field is not a good idea.
| | 04:32 | Believe me, I've tried.
| | 04:33 | So what we're going to do is we're
going to import a symbol that actually looks
| | 04:36 | a lot more like a comment box.
| | 04:38 | So I'm going to go back to my Document
Library, I'm going to go to my options
| | 04:41 | for the Document Library
and choose Import Symbols.
| | 04:45 | I'm going to go into my lesson 2 folder,
and the file I'm looking for here is
| | 04:50 | called text area(win).
| | 04:52 | So I'm going to select that and I'm
going to open it, and up comes a little
| | 04:57 | Import Symbols dialog box.
| | 04:59 | You'll see, there it is.
| | 05:00 | That's what our symbol looks like.
| | 05:01 | That's just perfect.
| | 05:03 | So we're going to choose to import that.
| | 05:06 | Now if you take a look in your Document
Library, you'll see it's now part of the
| | 05:09 | Document Library right down here, TextArea(win).
| | 05:12 | So now we're going to grab this
fellow, drag him on to the canvas.
| | 05:16 | So that looks more like a comment box,
we get a little scroll bar on the side.
| | 05:20 | Now our little Label is sitting
inside the symbol again, but as we've
| | 05:23 | learned, we can fix that.
| | 05:24 | We're going to double-click on the
symbol and we're just going to grab that text
| | 05:28 | area and we're just going to use the
Arrow keys to shift him up just above the
| | 05:33 | text box, just like that.
| | 05:34 | And then we'll just double-click and
come back into our comment area, and you
| | 05:38 | can see there it is just the way we want.
| | 05:41 | Now it looks like we may also have
a slight difference with our text.
| | 05:44 | So we'll select that symbol, and you can
see here we've got options for changing
| | 05:49 | the values in the symbol like
we have with the other ones.
| | 05:52 | I'm just going to compare, indeed we do.
| | 05:55 | Okay, our text labels for our text
fields are 10 points rather than 12.
| | 05:59 | So I'm going to go back into that
symbol and change it from 12 to 10.
| | 06:04 | So that shrinks it down a little bit.
| | 06:08 | So now we've got a comment area.
| | 06:09 | We'll just see how big that is.
| | 06:11 | We'll actually make that a little bit
taller, grab our Scale tool and somewhere
| | 06:17 | along that line there, okay.
| | 06:19 | So now we've got a good
replication of the comment area.
| | 06:22 | Now, we probably, in real life not
have the text label so far away from the
| | 06:25 | comment box, but I think for the
wireframe, we can get away with this.
| | 06:29 | So we'll leave it as it stands.
| | 06:30 | We're going to add in one more element
here, and that's going to be our button
| | 06:33 | for submitting the contact information.
| | 06:35 | So we're going to grab our
button from our Document Library.
| | 06:39 | Drag it over, and we'll just change the
Label from Label to Submit. There we go.
| | 06:48 | So in a few minutes we've
created the essence of a contact form.
| | 06:52 | The other thing I did want to mention
if we can change the Labels on our combo
| | 06:55 | boxes, just like we can with our other symbols.
| | 06:57 | So we can click on the individual
instance and then down in the Symbol
| | 06:59 | Properties we can change the labels there.
| | 07:02 | So I can change this to, for example, Region.
| | 07:05 | So if we want to find out where this
person comes from, we can change that and
| | 07:08 | we can continue on with that kind of thing.
| | 07:10 | You can pop in any label you
want in any of those areas.
| | 07:14 | The other ones we've got here, the
other three that still say Label, let's
| | 07:17 | finish those off too, so again
it looks a little more realistic.
| | 07:19 | I'll select that second one and change
the value from Label to Rate the site.
| | 07:26 | Our next one is going to
be, how did you find us?
| | 07:30 | And the last one is going to
be your Favorite site feature?
| | 07:35 | So we're getting some
information from the visitors.
| | 07:37 | So there you go, we've created
an about page for our wireframe.
| | 07:41 | We've created a Products page,
we've created a Custom Order page, we've
| | 07:45 | created the Contact form.
| | 07:47 | In the next movie, we're going to
take this even further, we're going
| | 07:49 | to incorporate a bit more
interaction and we're going to turn this into
| | 07:53 | an interactive PDF.
| | Collapse this transcript |
| Exporting wireframes| 00:01 | Welcome back to the last movie in this lesson.
Much has been going on since the last movie.
| | 00:06 | We've added in a few more pages for you
that you can feel free to experiment with.
| | 00:10 | I've dropped in the Index page.
| | 00:12 | I've also dropped in a couple of
other pages here, the Recipes page, the Upload
| | 00:16 | Files page, Membership page and the Cart page.
| | 00:20 | Now these are all based on
principles we've already been working with.
| | 00:23 | So rather than take you through it all
step by step, I just thought I put them in
| | 00:26 | and you can feel free to experiment
with them to your heart's content.
| | 00:29 | I've also added in a little Login
screen here too, to sort of again add on to
| | 00:33 | that sense of interactivity.
| | 00:34 | All right, now we're going to pop back
up to our Index page here and we want to
| | 00:40 | take a look at the
interactivity component of this.
| | 00:43 | You can see here we've got all
our hotspots set up in the header.
| | 00:46 | Now in this case, all the header elements are
in the common page, which is the master page.
| | 00:50 | So I'm going to click on
that and we'll take a look here.
| | 00:54 | We did this stuff much earlier in the game here.
| | 00:56 | We set up our navigation
for other various pages.
| | 00:59 | I've added in a couple of
more navigational elements.
| | 01:01 | We've added in and created
the links for the shopping cart.
| | 01:04 | You can see down in the Property
Inspector it's linking off to the cart.
| | 01:08 | The Join button links off to the
Membership page and the logo is going to link
| | 01:13 | off to our Index page.
| | 01:15 | I've made a couple of other little changes.
| | 01:17 | I've changed the size of the logo a bit, things
like that, but nothing major is going on here.
| | 01:22 | We're just worried about the flow in the
function here, not the pretty side of things.
| | 01:26 | So our next step was something like this.
| | 01:28 | Once we've added in all the
interactivity, it is to turn them into
| | 01:30 | an interactive PDF.
| | 01:32 | So File > Export and we're
going to choose to export this out
| | 01:37 | as bliss_wireframe.
| | 01:41 | I'm going to export it out as an Adobe PDF file.
| | 01:45 | We have a couple of choices here.
| | 01:46 | We can choose All Pages,
which is the current page.
| | 01:48 | We want to have all of our pages.
| | 01:50 | We're also going to want to view the
PDF after export, so it will automatically
| | 01:54 | load up for us inside of Acrobat Pro.
| | 01:57 | If we move over here to our Options,
we've got some choices here that we can make.
| | 02:01 | We can change the compatibility setting
for older or newer versions of Acrobat.
| | 02:05 | We can set the compression,
we can set the quality.
| | 02:08 | My main concern here is we're going to make
this a little bit more of a secure document.
| | 02:12 | We're just going to click on the Use
password to open document and I'm going to
| | 02:15 | type in a password, something really
high-tech, like bliss and click OK.
| | 02:22 | So that option has been enabled.
| | 02:24 | So all I've got to do now,
literally, is click the Save button.
| | 02:27 | The file opens up inside of Acrobat Pro
and my little dialog box to access the file.
| | 02:33 | So I'll type in my password, bliss,
click OK and there is the file.
| | 02:40 | I can move through the file and
standard in PDF ways, I can click on the pages
| | 02:44 | and click through in this manner, but
in my case here, what I want to do is
| | 02:47 | just check the interactivity, because
this is what I put it together for to be
| | 02:50 | an interactive PDF.
| | 02:51 | So I click on About Us and I
move into our About Us page.
| | 02:54 | I click on Products, I can move to the
Products page, Custom Orders, Contact, Recipes.
| | 03:01 | I can even take a look at the
shopping cart and if I decide to, I can take
| | 03:05 | a look at what the Join button does,
click on that and you can see options
| | 03:08 | for becoming a member.
| | 03:10 | After all that's set and done, I can click
on the logo to take us back to the Index page.
| | 03:15 | Now once I've emailed this to the client,
they can certainly view it offline and
| | 03:19 | check it out and they could give you a
call and talk about the wireframe, but if
| | 03:23 | you have Acrobat Pro, one of the things
you can do right off the bat is you can
| | 03:27 | set this up for commenting.
| | 03:28 | So if they have Adobe Reader, they can
open the file up and add in their own
| | 03:32 | comments as they go.
| | 03:33 | So, to do that, we just go to the
Comments menu and choose to Enable for
| | 03:37 | Commenting and Analysis in Adobe Reader.
| | 03:40 | It's going to require me to re-save the
file and I'm going to use the same file name.
| | 03:46 | Now when I email this file to the
client and they open it up in Adobe Reader,
| | 03:49 | because chances are, they won't have
Acrobat Pro installed, they'll have the
| | 03:53 | Reader though, they'll be able to open
it up in Adobe Reader and they'll be able
| | 03:56 | to use the Sticky Note option to add
comments, add questions or sign offs or
| | 04:00 | whatever as you'd like them to do, and
save that file and fire it back to you so
| | 04:04 | you can make adjustments to the wireframe.
| | 04:07 | Or if all goes well, no
need to make adjustments.
| | 04:09 | You can actually move in to the
storyboarding phase, which coincidently, will be
| | 04:13 | the subject of our next lesson.
| | Collapse this transcript |
|
|
3. StoryboardingMaking a wireframe realistic| 00:01 | In the last chapter we completed
the eireframe and exported that out as
| | 00:04 | an interactive PDF.
| | 00:05 | Now the wireframe is an important step
because we can nail down the flow and
| | 00:09 | function, and general layout for our design
without worrying about how pretty things are.
| | 00:13 | Now, we're going to assume that the
client has reviewed the wireframe and
| | 00:16 | that their only real comment was that they
can't wait to see what it really looks like.
| | 00:20 | Yeah, wireframes can
generate that kind of response.
| | 00:24 | So our next step in the prototyping
process is to build out the design or a
| | 00:28 | series of design variations.
| | 00:30 | The wireframe has helped us figure out
where the various elements of the design
| | 00:33 | are going to be placed, so now
it's a matter of fleshing things out.
| | 00:36 | Much like the wireframe helped us
organize and structure the site, storyboards
| | 00:40 | will make the site come alive.
| | 00:42 | And because we're in a design
application rather than a coding environment,
| | 00:45 | making changes if we need to,
to our designs will be easy.
| | 00:49 | So the goal is by the end of this chapter to
go from this, as we see on screen, to this.
| | 00:55 | We're going to begin by picking
a color theme in the next movie.
| | Collapse this transcript |
| Using the Kuler panel for color choices| 00:01 | Picking a color theme can be a daunting
task even for experienced professionals,
| | 00:05 | and thankfully, there are a lot of
online color generators that you can use,
| | 00:09 | one of which is Adobe Kuler.
| | 00:11 | One great way to generate a
theme or themes is to use photos.
| | 00:14 | Here on the screen we've got a
couple of images from the client that I've
| | 00:17 | combined together and saved as a JPEG file.
| | 00:20 | I can log into the Kuler website and
create a color theme based on that image
| | 00:24 | and we'll take a look at that process here.
| | 00:26 | So I'm going to switch over to my browser.
| | 00:29 | I'm already logged in.
| | 00:30 | I'm going to go and choose Create a
theme and I can choose to create from a
| | 00:36 | color, which is the
default or create from an image.
| | 00:39 | So I'm going to click Create from an Image
and you'll see a default photo showing up.
| | 00:43 | We're going to upload a file and you
can also, by the way, browse through your
| | 00:46 | Flicker site to pick an image as well.
| | 00:48 | So there is my choco_colors photo.
| | 00:51 | We'll click Open and as soon as it
uploads, Flickr automatically generates a
| | 00:56 | theme based on the different
colors that are inside of the design.
| | 00:59 | So we can see here, we've got a pale
blue, we've got a pink, or magenta.
| | 01:05 | We've got a bit of sandy beige color, bit
of a chocolate brown and a really dark black.
| | 01:10 | I want to make a couple of changes here,
because the browns that we're getting
| | 01:13 | aren't really coming from
the actual corporate colors.
| | 01:17 | So I'm going to go ahead and grab
this chocolate brown here and drag it on
| | 01:21 | to the actual signage.
| | 01:22 | I'm going to grab the other light brown
here and pick myself up a neutral color,
| | 01:28 | sort of a light gray,
something along that line there.
| | 01:31 | That gives me a bit more
of a range to work with.
| | 01:35 | I can continue dragging these
different circles around and generating my very
| | 01:39 | own color themes in any manner that I want.
| | 01:41 | So this is one way to
actually create your theme.
| | 01:44 | Once you get something you like, you
can give it a title, add some tags to make
| | 01:47 | it searchable and then you can save it.
| | 01:50 | You can save it either as a public
theme, which means other people can search
| | 01:53 | for it and use it or you can
save it as a private theme.
| | 01:55 | If you don't want anyone else to
access that theme, you can save it
| | 01:58 | privately and then you're the only person that
can get at it by logging into the Kuler site.
| | 02:02 | Now, this is great!
| | 02:03 | I mean, it's a really neat
community service, and if you haven't used
| | 02:07 | Kuler before, one of the neatest things about
it is the fact that it's so community-driven.
| | 02:11 | You're getting people creating
their own different color themes from
| | 02:15 | photographs, from their own ideas on
color and they're uploading them or saving
| | 02:19 | them and sharing them
with the community at large.
| | 02:22 | The website is great!
| | 02:23 | But I'd like to focus on how I can
pull in a color theme right from within
| | 02:26 | Fireworks, so I don't actually even
have to go outside of the Application.
| | 02:30 | I can pull in themes that I might have
saved myself or other people have saved
| | 02:33 | and uploaded to Kuler.
| | 02:34 | So let's hop back over to Fireworks
and we're going to create a new document
| | 02:39 | to begin with here.
| | 02:41 | So we're going to close down this file
and we're going to choose New Document
| | 02:46 | and we're going to set up a file that
is 960 pixels wide and 600 pixels high.
| | 02:53 | We'll just leave the Canvas color
where it stands for the time being.
| | 02:55 | We'll be changing that as we go. Click OK.
| | 02:58 | I'm going to zoom out a little
bit so we can see the whole thing.
| | 03:00 | Now that we've got our document started,
let's look at the Kuler panel that's
| | 03:04 | built right inside of Fireworks.
| | 03:06 | We can go up to Window menu and go to
Extensions and you'll see an option here for Kuler.
| | 03:11 | Just click on that and the
Kuler panel will open up.
| | 03:13 | Now, it will start off by probably
showing you some default popular colors.
| | 03:18 | Again, much like the Kuler
website, you do have to sign in.
| | 03:21 | I've already been signed in, but if
you haven't logged into Kuler yet, then
| | 03:26 | you'll be prompted to do so before
you can really make use of the panel.
| | 03:29 | So in this case here, we can look at all
the different color options that are here.
| | 03:32 | We can search based on the
whole range of categories.
| | 03:34 | We can even search based on time and we
can also search based on tags and titles.
| | 03:39 | Once you've found a theme that you like,
you can use it as it is or edit that
| | 03:43 | theme, using presets like
Monochromatic or Complimentary.
| | 03:46 | We'll just take a look.
| | 03:47 | We'll just grab Shangri-La here for a
second and we can choose to edit that theme.
| | 03:52 | You can choose all range of
different color schemes, just like that.
| | 04:00 | You can even drag the color sliders
and create your own custom themes.
| | 04:03 | Once you've got something you like, you
can save this theme as your own and then
| | 04:07 | add it to the Swatch panel or
upload it to the Kuler site.
| | 04:10 | In our case, we're going to search
for a theme now, based on the name.
| | 04:12 | So I'm going to go back to
the Browse category here.
| | 04:15 | I'm going to type in my search window,
chocolate candy and I'm going to press
| | 04:23 | the Enter key or Return key.
| | 04:25 | Kuler is going to search and you can
see here we've got three listings for
| | 04:30 | chocolate candy right off
the bat, at the very top.
| | 04:33 | If we mouse over a couple of these,
you'll notice there is one that I've created
| | 04:35 | earlier, called chocolate candy.
| | 04:37 | And that's actually the one that I want to use.
| | 04:39 | It's got the whole nice range of colors from
that photograph we were looking at earlier on.
| | 04:43 | It's a nice dark chocolate brown, sort
of a off-white, a neutral gray, a nice
| | 04:47 | blue and that nice rich magenta or pink.
| | 04:50 | Now with that color theme selected, I
want to make a custom palette that I'm
| | 04:53 | going to be using for my design.
| | 04:55 | So this is a bit of a two-step process here.
| | 04:57 | So what we're going to is switch over
to my Swatches palette here in the panel
| | 05:00 | groups and you can see we have this
sort of default set of colors, most of
| | 05:04 | which I don't need.
| | 05:05 | So rather than work with these, I'm
going to get rid of them completely.
| | 05:08 | I'm going to go to my Options and
I'm going to choose to clear swatches.
| | 05:13 | So that cleaned it out completely, I
have basically a blank slide to work with.
| | 05:17 | Now with my chocolate candy color
theme selected here, if I go down to the
| | 05:21 | bottom of the Kuler panel, there is an
icon that says Add selected theme to swatches.
| | 05:25 | So I just click on that once,
and the color theme is added in.
| | 05:29 | We don't have any other extraneous
colors that aren't part of our main color
| | 05:32 | scheme inside the Swatch panel anymore.
| | 05:34 | So we can always rely on these colors
or create variations of them if we want.
| | 05:38 | Once I saved this file, this palette is
going to remain part of the actual file.
| | 05:42 | If I want to share this palette with
other Fireworks designers, I can export the
| | 05:45 | palette out as a file and email it to them.
| | 05:47 | So let's take a look at that process.
| | 05:49 | Go to our Options again, and we
have an option here to save swatches.
| | 05:53 | Just click on that and we get
the ability to save this file.
| | 05:57 | So I'm just going to go and
put this in my lesson 3 folder.
| | 06:01 | There we go and I'm just
going to call it bliss_colors.
| | 06:08 | It's going to save it as an ACT file.
| | 06:11 | Close that down and now that file is available.
| | 06:14 | I can email it off to other designers
who are working on the project or email it
| | 06:17 | to myself if I want to work from
home, whatever it happens to be.
| | 06:19 | So I've got the ability to keep
that custom palette and use it for this
| | 06:23 | design as I move forward.
| | 06:25 | So, we'll close down the Kuler panel,
save your file as storyboard_start.png,
| | 06:32 | and in the next movie, we'll begin
applying those colors to our design.
| | Collapse this transcript |
| Importing graphics into a first storyboard| 00:00 | In the last movie, we downloaded the
color theme using the Kuler panel in
| | 00:04 | Fireworks and converted them
into a Custom Swatch panel.
| | 00:07 | Now, in this movie, we're going to
start putting the elements together.
| | 00:10 | The client has been kind enough to
supply us with several photos as well as the
| | 00:13 | vector version of their logo and I've
prepared a quick demo file to show you the
| | 00:17 | progression, in creating the first storyboard.
| | 00:19 | Let's have a quick look at that and
then we get on with the real construction.
| | 00:22 | So on our screen here, we've got our
first part of the demo which is just an
| | 00:25 | empty blank page with the chocolate
brown color as the background color and then
| | 00:29 | as we move through the progression in
this, you see it partially built with that
| | 00:34 | background added in behind our products.
| | 00:37 | Some text added in, the logo, our
navigation starting to take place.
| | 00:41 | In our full navigation, we can see here
representation of both the regular tab
| | 00:45 | and also the tab that might appear
when the mouse moves over the buttons and
| | 00:48 | lastly a full blown layout
complete with footer information as well.
| | 00:53 | So that's what we're aiming for, for this movie.
| | 00:55 | So I'm just going to close this file
down and we're going to create a new file
| | 00:58 | or you can actually open up
the storyboard_start.png file.
| | 01:01 | Either one is fine.
| | 01:02 | But we'll build something
right from scratch here.
| | 01:04 | So we're going to go to New Fireworks
Document and we're going to set up a value
| | 01:09 | here of 960 for the
Width and 600 for the Height.
| | 01:14 | Click OK and I'm going to zoom out
just a little bit, so we can see the
| | 01:17 | whole document area.
| | 01:18 | First things first, let's set the Canvas color.
| | 01:20 | So I'm just going to go over to my
Properties Inspector, click on the Color
| | 01:23 | selector and then move over to my Swatches
panel and grab that chocolate brown. There we go.
| | 01:28 | Now there's a couple of other things
I want to put into place here before I
| | 01:31 | get much further along.
| | 01:32 | First of all, I want to double check,
and make sure my grids are set up the
| | 01:35 | way I want and so on.
| | 01:36 | So I want to go into my Edit >
Preferences and if you're on the Mac that's the
| | 01:41 | Fireworks Preferences and
let's see here, Guides and Grids.
| | 01:45 | And we currently set at 36x36,
which is the default setting.
| | 01:48 | So we're going to change that to 10x10.
| | 01:49 | I'll just click OK.
| | 01:51 | And I'm going to bring up my Rulers.
| | 01:54 | It's always nice to have those up,
just in case you need them, to see where
| | 01:56 | distances are and you can also
drag in guides that way if necessary.
| | 02:00 | And we'll check the View menu here.
| | 02:02 | My tooltips are showing up, my Smart
Guides are showing up and snapping and my
| | 02:07 | Grid is not yet showing, but
we'll deal with that shortly.
| | 02:11 | Now, before we actually get into
adding assets into this design, much like we
| | 02:14 | did with the wire frame.
| | 02:15 | We want to create some
structure to the document.
| | 02:18 | So we're going to look over in the
Layers panel here and we're going to
| | 02:21 | make some additions.
| | 02:23 | First of all, we're going to name the top
layer, the empty layer at the moment, header.
| | 02:28 | And I'm going to create a sub-
layer inside of that particular layer.
| | 02:31 | I'm going to call the sub-layer, nav
for navigation and I'm going to add in
| | 02:36 | some additional layers.
| | 02:37 | So I'm going to go back to my top
layer, click on my New Layer icon and I'm
| | 02:41 | going to add in three more layers.
| | 02:44 | All right, one of these
is going to be background.
| | 02:47 | So I'm just going to call this bkg.
| | 02:48 | Other one is going to be footer
and last one is going to be content.
| | 02:55 | Okay, I'm just going to
restructure things a little bit here.
| | 02:58 | So I have got my header at the
top where it belongs. There we go.
| | 03:02 | So, now I have got my basic structure as well.
| | 03:04 | Now, we're going to add in some
elements for the background itself.
| | 03:06 | So before I do that, one of the things,
I would like to try to remember to do is
| | 03:10 | to lock all my other layers, which
basically means I won't end up putting stuff
| | 03:14 | in the wrong place by accident.
| | 03:15 | So, I've locked my header,
my content, my footer layers.
| | 03:18 | So the only layer I can really
work with is the background layer.
| | 03:21 | I'm going to bring in my Grids, and I'm also
going to Snap to Grid as well. There we go.
| | 03:31 | So the first thing I want to do
is create the background color.
| | 03:33 | And I'm going to use a vector for this
because I can easily change the color
| | 03:36 | anytime I want, all I need is a rectangle.
| | 03:38 | So I am going to go and click on my
Rectangle tool and just draw any old
| | 03:43 | shape, doesn't really matter because
I can adjust all that stuff inside the
| | 03:46 | Property Inspector.
| | 03:47 | So what I'm going to do is set this up
to be from the Properties Inspector, 900
| | 03:51 | pixels Wide by 390 High and that's
going to start off at the left-hand side, so
| | 03:58 | 0 point and as far as the distance
from the top, it's going to be 115 pixels.
| | 04:04 | Of course, I want to change the
color as well, so just like before I can
| | 04:08 | choose the color well, and pick from
the Color swatches here, but I want to
| | 04:12 | work with my Custom swatches.
| | 04:13 | So I'll go ahead and go over to my
Swatches panel and fill in the background.
| | 04:17 | Now, we're going to add a
decorative element into the background.
| | 04:19 | We want it to be something that's
going to be a bit visually interesting, but
| | 04:22 | now so powerful that it's going sort
of compete with everything else and I
| | 04:25 | have got just the thing.
| | 04:26 | So we're going to go into our File menu
and choose Import and I have got a file
| | 04:31 | here called flowers and this
is actually a Photoshop file.
| | 04:34 | So I'll see what happens when
we import this into the document.
| | 04:38 | Right away, we get our Photoshop File
Import Options dialog box coming up.
| | 04:42 | And from here we can right off the bat
change dimensions, change Resolution.
| | 04:46 | We are dealing with a bitmap image here,
so I don't really recommend changing
| | 04:49 | your dimensions, as you can
end up with a poor quality image.
| | 04:52 | We can also check out different layer
comps if there are any in the file and we
| | 04:56 | can also preview it.
| | 04:58 | So we can see what we're working with and
you can see that subtle flower design up there.
| | 05:03 | And then we've got options for how the
file is going to be imported in terms
| | 05:06 | of basically maintaining the look
of the file, compared to the original
| | 05:10 | Photoshop document.
| | 05:11 | You have got four different choices here.
| | 05:13 | Maintain Layer Editability over
Appearance, Maintain Photoshop Layer Appearance.
| | 05:17 | You can use Custom Settings from your
Preferences files or you can flatten the
| | 05:20 | Photoshop file into a Single Image.
| | 05:22 | We are just going to go ahead with
the default option, Maintain Layer
| | 05:25 | Editability over Appearance
because we are just dealing with bitmaps.
| | 05:27 | There is no special effects with this, so we
shouldn't have any problem bringing this in.
| | 05:31 | Once I commit to that, I move my
cursor into the document area and you'll see
| | 05:34 | that I get my little inverted
L, which is my Import symbol.
| | 05:37 | So I'm just going to click once to
import the file at its original size, there
| | 05:40 | we go and let's position this as well.
| | 05:43 | Set it to an X value of 0.
| | 05:45 | So it's going off in the left-hand side
and our height is going to be about 175.
| | 05:52 | So that's our positioning
for our flower elements.
| | 05:54 | All right, now, that's the basic
elements we need for the background.
| | 05:57 | We've got our background
color, we have got our flowers.
| | 05:59 | So we're going to lock this background
layer up, and we're going to move into
| | 06:04 | our content layer, there we go, unlock that one.
| | 06:07 | Now, here is where we're going to
start putting in some elements that are
| | 06:09 | specific to the page.
| | 06:11 | I'm going to start off
with again another graphic.
| | 06:13 | Sort of a product shot of one
of the products for Bliss No. 5.
| | 06:16 | and again we're going to import this.
| | 06:18 | So File > Import and I've got a file
here called caramel and that's the one I
| | 06:23 | want to work with here.
| | 06:24 | I'm going to open that up and again
I'm just going to click once and it will
| | 06:28 | insert it at its original
size, which is just fine.
| | 06:31 | And we're going to position this one
at about 500 pixels from the left and
| | 06:38 | about 240 from the top.
| | 06:40 | So it's sitting nicely inside the flowers.
| | 06:42 | Now, we're going to add a couple of more
elements in here and these are going to
| | 06:44 | mostly be text elements.
| | 06:45 | So we're going to put in a tagline and
we're going to choose our Text tool and I
| | 06:49 | want to set some specific
attributes here for this first.
| | 06:52 | So I'm going to go down to my
Properties Inspector and I'm going to change from
| | 06:55 | Verdana, down to Time New Roman, there we go.
| | 07:00 | I'm going to change it from a Regular
font, to an Italic font and my Color and
| | 07:04 | Size, we'll set this to about 20
point and the Color is going to be that
| | 07:09 | chocolate brown that we got
working in the background.
| | 07:11 | I'm just going to type in here,
first name in quality chocolate.
| | 07:20 | Now, you might have noticed that my
text is kind of swooping out of the canvas
| | 07:23 | area and that's because I
forgot to change my alignment.
| | 07:25 | So as I start typing it, it
always starts type from the center out.
| | 07:28 | So I'm just going to switch that
alignment over to the left before I forget and
| | 07:31 | it's not a big deal in terms
of repositioning this element.
| | 07:34 | All I have got to do, grab the Pointer
tool and we'll set this up at about 20
| | 07:39 | pixels from the left and about 120 down.
| | 07:43 | So we're actually pretty
close there, there we go.
| | 07:45 | And we're probably going to do a bit
more work with that little tagline later on.
| | 07:49 | But for now it's good.
| | 07:49 | I'm going to zoom in a little bit here
and double check things and yup, I have
| | 07:53 | made a spelling error.
| | 07:54 | So I'm going to go back into
my text and just fix that up.
| | 07:59 | Okay, so we've got a tagline in here,
we have got some graphic elements.
| | 08:03 | Want a bit more text to go in here to
sort of act as filler text for the time
| | 08:06 | being, for this original storyboard.
| | 08:08 | So we've got two elements I want to put
in here, kind of a header and sub-header
| | 08:11 | combination as well as some body text.
| | 08:13 | So we'll start off with the
header and sub-header information.
| | 08:16 | So I'm going to grab my Type tool again
and in this case here, I'm going to go
| | 08:19 | with the Times New Roman style.
| | 08:20 | But I'm not going to be
changing my sizing a bit.
| | 08:22 | So I'm going to start off
with the actual company name.
| | 08:25 | So I want that to be little
understated, because we're going to have a logo
| | 08:28 | coming in and the name is
pretty much all over the place.
| | 08:30 | So we're going to knock this down from
20 point, down to about 13 and we are
| | 08:35 | going to change the color to white, so
that it stands out really nice against
| | 08:38 | the background, and I'm
just going to start typing.
| | 08:40 | The company name Bliss No.
| | 08:43 | 5 and I think I'll also select that
text and make it just Regular, so it stands
| | 08:52 | out just on its own as such.
| | 08:54 | So there's my first little bit of
text and I'm just going to just press the
| | 08:59 | Enter key, we're going
to add in our second line.
| | 09:00 | Now, the nice thing about working
with text inside of Fireworks is you can
| | 09:04 | change the font sizes and so on, even the
font families within the same text block.
| | 09:08 | So we're just going to keep this
as one group for the time being.
| | 09:10 | So we'll leave it all in one area.
| | 09:12 | And what we're going to put in here
is A new dimension in good taste and
| | 09:19 | I'm going to zoom in.
| | 09:21 | There we go, I'll just make sure
everything is looking the way we want.
| | 09:23 | A new dimension in good taste.
| | 09:24 | Okay, so I've got that typed in, I'm
just going to go ahead and select it and
| | 09:29 | play around with its properties a bit.
| | 09:31 | I want this to be a lot larger.
| | 09:33 | So I'm going to switch this out to about
25 point, there we go, and I think I'll
| | 09:39 | make this one, Italics, there we go,
and as far as positioning is concerned,
| | 09:44 | let's set this whole thing to about
110 pixels in, in the left and about 340
| | 09:52 | pixels from the top.
| | 09:53 | There we go and I'll just zoom out
again so we can see how this is looking.
| | 09:59 | Now, sometimes you'll find when you
zoom out, the grid becomes a little bit of
| | 10:04 | visual distractions.
| | 10:05 | So anytime you want, just go and go to the
View menu and go to Grids, and hide the grids.
| | 10:10 | You can see what you're actually working with.
| | 10:12 | We get a sense there, the overall look.
| | 10:14 | Now, we got to add in our one little
paragraph of text and that's just going to
| | 10:17 | fall down beneath our little sub-header here.
| | 10:20 | I'll zoom in a bit, so I can see things
a little bit better and I'm going to go
| | 10:23 | to my Commands menu and down here in
the Text menu, we have actually got, quick
| | 10:27 | little command for adding
in some Lorem ipsum text.
| | 10:30 | Just a single paragraph at a time.
| | 10:31 | But it's kind of handy, because it
just allows you to drop in some placement
| | 10:34 | text anytime you want.
| | 10:35 | So, I'm just going to choose Lorem
ipsum and it will automatically drop that
| | 10:40 | paragraph of text in, based on
the last bit of text that was typed.
| | 10:43 | So in this case here, we have got the
Italic, Times New Roman at 25 point, which
| | 10:48 | is a bit on the big side.
| | 10:49 | So we are going to make some changes to this.
| | 10:50 | I have already got the text block
selected using the Pointer tool.
| | 10:53 | So I'm just going to go down to my
Properties Inspector, change it to Regular
| | 10:56 | and we'll change the actual
text itself to a lot smaller.
| | 11:01 | We're going to go down to about 12 point here.
| | 11:04 | There we go and I think also what I'm
going to do with this-- There is my smart
| | 11:08 | guides coming in, help me wind things up.
| | 11:09 | I'm going to change the font to
make it little bit more readable.
| | 11:11 | We're going to change it from Times New
Roman and I'm just going to press the V
| | 11:15 | key with the font list open.
| | 11:17 | That will bring me down to my first
font with a V, which is Verdana, which is
| | 11:21 | exactly what I wanted.
| | 11:22 | And last little bit here is let's make
sure that this text isn't overlapping or
| | 11:27 | underlapping our product shot.
| | 11:30 | So I'm going to grab one of the control
points and just resize that text box, I
| | 11:34 | think along that range there.
| | 11:36 | Now, just a markup here, so I'm not
too worried about what this text actually
| | 11:39 | says and it's actually
spilling out of my content area.
| | 11:42 | So I'm just going to double-click
inside the text block, I'm going to grab
| | 11:45 | whatever is overlapping and just delete it.
| | 11:47 | So, now I've got just a paragraph of
text sitting in there, nice and neat.
| | 11:52 | So that's our elements for our
overall content area and I'll zoom back out
| | 11:57 | again, so we can see how
things look and that's not bad.
| | 12:00 | I think what I might do is just grab
my two text areas and just holding the
| | 12:05 | Shift key down, just move
them up a little bit higher.
| | 12:07 | Just to get little space
from the bottom. There we go.
| | 12:11 | Okay, so that bit is done.
| | 12:12 | We're going to lock our layer for our
content, and take a look over here, we
| | 12:16 | notice that we've run into, Fireworks is
generating an extra layer for us, very helpful.
| | 12:22 | But not what we wanted.
| | 12:22 | So we're going to move the Lorem
ipsum text and that little heading, back
| | 12:26 | into my content area.
| | 12:27 | The easiest way to do this rather than
drag and drop or cut and paste is just to
| | 12:31 | select the little radio button over on
the right-hand side of the layer and drag
| | 12:35 | it down to the layer that
you want that content to be in.
| | 12:37 | When you let go over the mouse,
everything is in the right place and layer
| | 12:41 | number 1, which we don't need, we
are going to delete. There we go.
| | 12:44 | So there is my 3 bits of text and I'm
just going to lock that up and collapse it.
| | 12:49 | Our next bit is to work on the header layer.
| | 12:51 | So let's unlock that.
| | 12:52 | We get a sub-layer in here to called nav.
| | 12:54 | So we're going to be
working with two different areas.
| | 12:56 | So now first thing I want
to do is bring in my logo.
| | 12:59 | So I'm going to turn on my grids again,
there we go and I'm going to import my logo.
| | 13:04 | So File > Import and there we have choco_logo.
| | 13:09 | Notice it's an Illustrator file.
| | 13:11 | Now, I've been promised by the
designer, this is an all vector based file,
| | 13:15 | which is great because it means I can
scale it however I want, without any
| | 13:18 | worry about any problems.
| | 13:19 | So let's just select that and we'll
choose Open and we'll go ahead and import.
| | 13:25 | Now, again because this is not a native
Fireworks file or a flattened bitmap, we
| | 13:30 | are getting in a dialog box coming up.
| | 13:32 | In this case here it's
for the Vector File Options.
| | 13:33 | So you can set your Scale, and
your Width and Height and so on here.
| | 13:36 | You can also Group or Render elements
as images that are in groups over 30 and
| | 13:42 | you can set the values there if you want.
| | 13:43 | We're going to leave this at its
defaults, because we shouldn't have anything
| | 13:46 | too, too complex here and we'll just click OK.
| | 13:50 | Up comes my Import icon again and I'm
just going to click once to import at the
| | 13:55 | original size of the images.
| | 13:56 | And you can see here, true the
designer's word, we have the logo, we also happen
| | 14:01 | to have three versions of the logo.
| | 14:03 | That's might be a bit of a surprise but
sometimes you'll have all these things
| | 14:06 | grouped in one file, be that
way they are easy to manage.
| | 14:08 | Now the great thing is, if we look over
in the Layers panel, you'll see that all
| | 14:12 | these different logos are
grouped in and of themselves.
| | 14:14 | So I don't necessarily need
to worry about all of them.
| | 14:17 | I just picked the one I
want, I can delete the rest.
| | 14:19 | So I'm going to click away from these
guys first and then just going to go back
| | 14:23 | and select them individually. So Group:
| | 14:25 | 3 objects, the very top one in
the list is actually the one I want.
| | 14:29 | So I'm not going to touch that one, but Group:
| | 14:31 | 2 is not something I need.
| | 14:33 | So I am going to trash that. And the Group:
| | 14:35 | 4, 5, same idea.
| | 14:36 | We will get rid of that guy and that
one other group of three objects, we
| | 14:43 | don't need that either.
| | 14:44 | And lastly is the little brown
background behind the logo, which we don't need,
| | 14:49 | because our background is already that brown.
| | 14:50 | So we're going to trash that as well.
| | 14:52 | So that leaves me with my logo.
| | 14:53 | I'm going to rename this right off the
bat logo, before I forget, what is this.
| | 14:58 | And I'm going to reposition it, up in
here and we will put this about 10 pixels
| | 15:03 | from the top and about 20
pixels in from the side.
| | 15:07 | I think I will also scale this a little bit too.
| | 15:10 | Make it stand out a bit more.
| | 15:12 | And again if I hide my grid and we take
a look at this at 100%, you can see the
| | 15:19 | logo has come in nice and sharp.
| | 15:21 | The scaling hasn't really affected it at all.
| | 15:23 | Okay, let's just take one look
around our Layers panel again.
| | 15:26 | Make sure everything is in the right place.
| | 15:27 | Just scroll up a bit, and oh look at this.
| | 15:30 | Our mug layer and our cannister layer
from our little import of our photo here
| | 15:35 | have actually been dropped into the
wrong spot and that can happen because
| | 15:38 | these files already have their own
layer structure and as a result rather than
| | 15:42 | Fireworks dumping them into another layer,
they come in as their own top level layers.
| | 15:46 | So not a big, big deal, we
can make some changes here.
| | 15:49 | And what we're going to do is we're
going to go to our content layer, we'll
| | 15:51 | unlock that and we'll lock up our
header just to get it secure there and inside
| | 15:57 | the content layer, I'm going to add
my two sub-layers that I need for this.
| | 16:00 | I want to keep the mug and the canister
separate from each other, just like they
| | 16:04 | were there in the original file.
| | 16:05 | So I am going to add two
sub-layers, there we go.
| | 16:09 | There is our first one and I'll add in one more.
| | 16:12 | Okay, I'm going to name the first one,
mug and the second one canister, and
| | 16:19 | again rather than cut and paste, or
drag and drop in the sense of dragging
| | 16:22 | the actual objects, we are going to work
with that little radio button feature again.
| | 16:26 | So I'm just going to make myself a
little more working room here and go to my
| | 16:30 | mug layer, and all I've got to do is
literally just select the layer. Everything
| | 16:34 | in the mug layer gets selected as you
can see on screen and I'll just drag the
| | 16:38 | radio button from one mug
to the other. There we go.
| | 16:42 | So now the mug elements are
all inside of my sub-layer.
| | 16:45 | Do the same thing with the canister.
| | 16:46 | Just click on the canister layer, grab
the radio button and drag that down to
| | 16:50 | the new canister layer.
| | 16:51 | That's nice and quick and easy and things
get put exactly where you want them to go.
| | 16:55 | Now, I don't need these two top level
layers anymore, so I'm just going to
| | 16:59 | select them and delete them from
the Delete option in the Layers panel.
| | 17:05 | Now we have got things exactly the way we like.
| | 17:07 | So I'm just going to collapse
everything down and we'll lock everything up for
| | 17:10 | the time being and we
have done quite a bit here.
| | 17:13 | We have added in our background elements.
| | 17:14 | We've added in some photos, some text, our logo.
| | 17:17 | In the next movie, we're going to
concentrate on creating the navigation.
| | Collapse this transcript |
| Adding navigation| 00:01 | Okay, so we are moving right along here.
| | 00:02 | Our next thing that we need to
add is our Navigation Buttons.
| | 00:05 | So we are going to work on couple of these guys.
| | 00:07 | We are going to look at creating the
Normal or Upstate and also the Overstate
| | 00:11 | and displaying both of them at the same
time, so the client gets a sense of what
| | 00:14 | the changes will be in the
buttons if somebody mouses over it.
| | 00:18 | Because this is a storyboard and it's
not an interactive element, we want to be
| | 00:21 | able to show these
different things right off the top.
| | 00:23 | So our navigation consists of three things,
an image as well as a tab area and some text.
| | 00:28 | So we'll start off by adding in the tab
part, which we are going to create with
| | 00:31 | a rounded rectangle.
| | 00:32 | So I am going to over to my Vector
tools and actually, I am going to unlock
| | 00:36 | my header layer first and make sure
that I am inside of my navigation layer
| | 00:40 | before I go any further.
| | 00:41 | And I am going to draw in my first rectangle.
| | 00:43 | So this is going to be about 110
pixels wide by about 70 pixels tall.
| | 00:47 | So again, my tooltips will help me
out with this as I drag and create.
| | 00:52 | So we want 110 wide,
there we go and about 70 tall.
| | 00:56 | Drop it in and we'll change the color.
| | 00:58 | We want this to be that kind of off-white
that we've got in our Swatch palette here.
| | 01:02 | So I am just going to select that and
we are going to set a Roundness in the
| | 01:05 | Property Inspector. From 0, we are
going to change that to 10 pixels, so
| | 01:09 | we get a nice rounded rectangle there.
| | 01:11 | So that's going to work as our tab.
| | 01:12 | Next element we need to bring in is our photo.
| | 01:15 | So these guys have already been set up.
| | 01:16 | We are inside of our lesson 3 folder.
| | 01:19 | So I am going to choose File > Import
and the file which I want in this case
| | 01:22 | is called fountain.
| | 01:23 | We'll just select that and
it's just a regular file.
| | 01:28 | It's not a Photoshop file or an
Illustrator file, so we'll just go right
| | 01:31 | directly to our Import icon and I know
these files are the right size, so I am
| | 01:35 | just going to click once
and drop it in, just like so.
| | 01:38 | Now I want to have a certain
amount of space for the tab and so on.
| | 01:40 | So let's just make sure with the very
top of our page here, I am going to use my
| | 01:45 | arrow keys to reposition that photo, so
it's basically flush with the top, which
| | 01:49 | also means by the way, if you look
really closely, photo is not just flushed at
| | 01:52 | the top, but it is also
flushed with our content area here.
| | 01:55 | So nice little divider
sort of contrasting going on.
| | 01:59 | And our little tagline is getting a
little bit covered up, but we'll be fixing
| | 02:01 | that shortly, so no worries there.
| | 02:03 | So I am going to select both of
these guys and see what my height is.
| | 02:07 | And my height is if I take a look down
at the Property Inspector, 140 pixels
| | 02:11 | that is exactly what I
want, and my width is 110.
| | 02:15 | So that's fantastic.
| | 02:16 | I'll just double check with the
Alignment Options here to make sure that those
| | 02:19 | two objects are exactly
aligned together and no shifting.
| | 02:22 | So that's a good sign.
| | 02:24 | The last little bit I want
to add in here is my text.
| | 02:26 | So I am going to grab my Type tool and
I am just going to click and the first
| | 02:30 | link that we are going to
have in here is for about us.
| | 02:32 | So I am going to go with all lowercase
letters and they are obviously the wrong
| | 02:37 | color at this point. That's fine.
| | 02:39 | we'll be fixing all that up.
| | 02:40 | I am just going to grab my Pointer tool
and the reason I am grabbing the Pointer
| | 02:43 | tool is I can change a lot of things
really quickly in the Property Inspector
| | 02:46 | with text, if I am just selecting the
block rather than using the Type tool or
| | 02:50 | the Text tool to select the letters themselves.
| | 02:52 | So we are going to change
a couple of things here.
| | 02:54 | First of all, color is going to change.
| | 02:55 | We are going to change that to
that rich magenta color there, step 1.
| | 03:00 | Step 2, we are going to change the size.
| | 03:02 | We are going to make this
text a little bit bigger.
| | 03:03 | Let's set it at about 13 point and we
are going to go from Regular to Bold and
| | 03:10 | I'll also adjust my alignment in this case.
| | 03:13 | So its Center aligns as I added new
text areas for other buttons, so it just
| | 03:17 | makes it easier for me to align things up.
| | 03:19 | And I think I am going to adjust the
tracking a little bit too, down here, where
| | 03:23 | it says AV, this is our tracking.
| | 03:25 | This gives me the ability to add a
bit of extra space between the letters.
| | 03:28 | So I am just going to type a value of 15
in here and that just spaces out things
| | 03:31 | just a little, not very
much but just a little bit.
| | 03:34 | All right, so those are the
three main elements we need for this.
| | 03:36 | So I am going to reposition my
text so it's centered within the tab.
| | 03:41 | So there's my three elements.
| | 03:43 | Now, what I want to do as well is I
want to create another button as well
| | 03:45 | because I want one of these buttons to show
what the mouse-over is going to look like.
| | 03:48 | So we are going to go ahead and re-
purpose some of this information.
| | 03:51 | Again, this is the whole idea here,
doing this fast, not doing it as everything
| | 03:55 | from scratch if we don't need to.
| | 03:56 | So the first thing I am going to do
is select my text and my little rounded
| | 04:00 | rectangle and if you remember this
little shortcut from before, hold down the
| | 04:04 | Alt key or the Option key on
the Mac and press any arrow key.
| | 04:07 | I am going to press the Right Arrow key
and I automatically create a duplicate
| | 04:11 | of the selected objects.
| | 04:12 | Then I am just going to hold down
the Shift key and bring those guys out.
| | 04:18 | So now I have got a copy.
| | 04:19 | All I've got to do at this
point is bring in my other graphic.
| | 04:23 | So I am going to go up to my File
menu again and choose Import and we'll
| | 04:27 | grab the chocolate file.
| | 04:30 | Again, I am just going to click once
because I am pretty sure I've got the right
| | 04:33 | width and dimensions I need for this.
| | 04:35 | There we go and indeed, I am correct.
| | 04:38 | So I am just going to reposition that
and actually, sitting at the exact right
| | 04:42 | spot, if you look in the
Property Inspector, the Y value is 0.
| | 04:46 | So it's flushed at the top,
which is just what we want.
| | 04:48 | I am going to click away and I
was off by a pixel, there we go.
| | 04:52 | Now, we got our two tabs, sort of
our starting point for our button.
| | 04:55 | Now one of these I want to make
look like the Rollover button.
| | 04:57 | So I am going to do that with the first button.
| | 04:59 | So all I am going to do here is
select the tab itself first, I am going to
| | 05:02 | change the Fill color.
| | 05:03 | Now, I can go through the color well
if I want to do this, as I have been
| | 05:07 | doing in the past, but once you've
got a vector selected like this, you
| | 05:09 | actually can skip the step.
| | 05:11 | You can go right over to the
Swatches and just pick the color and it
| | 05:15 | automatically changes the
selected vector, which is kind of nice.
| | 05:17 | All right, now I am going to just move
in there and grab my text and I am going
| | 05:21 | to do it basically a reverse out, the
text is going to become the original tab
| | 05:25 | background color and the tab
became the original text color.
| | 05:28 | So with the text selected, same thing.
| | 05:30 | I am going to go over to my
Swatches panel and click. There we go.
| | 05:33 | Those two elements were there and I am
going to change one of the thing here
| | 05:36 | in this second button.
| | 05:37 | I am just going to double-click on this
because I want this to read a different name.
| | 05:41 | We're going to type in, products.
| | 05:43 | All right, so that's my two
different button elements.
| | 05:45 | The one last thing here I'll check here
because you'll notice that my tag line
| | 05:49 | here is kind of getting hidden by my buttons.
| | 05:51 | What I'll do with this is I am
going to change this a little bit.
| | 05:55 | I am going to go into my Layers panel
and unlock the content area and that way I
| | 06:03 | can select my text, and I am just
going to double-click inside the text area.
| | 06:07 | Just press Return so I
can put it into two lines.
| | 06:10 | I may decide to change that text a little
bit later on but for now it's good enough.
| | 06:14 | Okay, so the next step here
is to add the other buttons.
| | 06:16 | Now rather than go ahead and
manually add all these, you've seen how the
| | 06:20 | process works here.
| | 06:21 | We are just going to open up a
different file that's got these other buttons
| | 06:23 | added in and then we are going to bring
in two other elements that will finish
| | 06:27 | off the header area.
| | 06:28 | So I am just going to go ahead and go
to File > Open and we are looking for
| | 06:36 | storyboard_working3.
| | 06:38 | So I'll just grab that and here we go.
| | 06:41 | Ooh, it's magic, all the buttons are done.
| | 06:42 | So you can see that we've got that
structure going on there, we've got our
| | 06:46 | different visual icons for each of
the different categories and we see the
| | 06:50 | mouse-over effect as we created earlier
and then the standard normal effect as well.
| | 06:54 | What's missing is our little shopping
cart icon and there our little option to
| | 06:58 | join and become a member.
| | 06:59 | So we are going to bring these two guys in.
| | 07:01 | One of them is a symbol.
| | 07:02 | It's one of the symbols
that are native to Fireworks.
| | 07:04 | It's a handy little thing, nice
little rendered shopping cart graphic.
| | 07:07 | So we are going to go to the Common
Library and we are going to go into our Web
| | 07:11 | & Application folder and these
fellows thankfully are all named.
| | 07:17 | So I can go right down the Shopping Cart and
you can see that's exactly what it looks like.
| | 07:20 | So I am just going to drag that on to
the canvas and it's a little on the large
| | 07:24 | side right now but that's fine,
we'll fix that up shortly.
| | 07:27 | Just make sure I am in the right spot
and I am actually in the content area,
| | 07:32 | forgot to lock that up.
| | 07:33 | So I am going to pop this fellow back
into our header area. So it's in place.
| | 07:38 | It's a little bit on the large size.
| | 07:39 | So let's go ahead and scale him down and we
are going to make him about 50 pixels wide.
| | 07:45 | So again, the tooltips come in
really handy for this. Here we go, 50x54.
| | 07:50 | Have a little more separation between
the shopping cart and our navigation
| | 07:54 | button, just so we've got a little bit
more of a balance there, and just double
| | 07:57 | click and there's my cart done.
| | 07:59 | Now, the button itself was something we
are going to actually create from scratch.
| | 08:02 | It's a really easy thing to do again.
| | 08:04 | We are just going to create our
original state for the button.
| | 08:06 | So I am going to go ahead and grab my
Rectangle tool and I am going to draw a
| | 08:10 | rectangle that is about 70
pixels wide by 20 pixels high.
| | 08:13 | There we go and currently, it's
the same color as everything else.
| | 08:17 | So we are just going to change
the color, to see a bit better.
| | 08:20 | And we are going to change
the roundness of this one.
| | 08:22 | Now, rather than worry about fine
degrees of radius, I want kind of a lozenge
| | 08:26 | type of button here.
| | 08:27 | So I am going to go up to a full
Roundness of 10, which will give me a nice
| | 08:31 | rounded look to my button, and I'll
just reposition this fellow as well.
| | 08:36 | So it is centered underneath the shopping cart.
| | 08:38 | Okay, now last bit here is kind of
boring at the moment, the button look.
| | 08:41 | So we are going to go ahead and
make a couple of changes here.
| | 08:43 | We are going to go into our Styles
panel and we are going to look for
| | 08:47 | the Plastic Styles. There we go.
| | 08:50 | The one I want to work with
specifically here is Tile 40.
| | 08:54 | So I'll just go and mouse over and
there you see it's kind of a pinkish color.
| | 08:57 | So I am just going to click on that and
instantly, I've got a nice little styled button.
| | 09:00 | Now the pink is a little bit on the
bright side, so we can customize that.
| | 09:04 | It's basically created by a gradient.
| | 09:06 | So if I go down into my Properties
Inspector here, I can see where my colors are
| | 09:10 | and I think what I'll do is I'll
grab that top divider color there.
| | 09:14 | I am going to change that from that
color to the same color we are using for
| | 09:18 | the rest of our site.
| | 09:19 | So I'll make it a little bit
more tied in with the actual look.
| | 09:23 | Then the last little bit I do
with this is add a bit of text, Join.
| | 09:27 | Again, I want to make sure
we get the right setting here.
| | 09:29 | So I am just going to grab my Pointer
tool and I'll reposition that and I don't
| | 09:35 | want it to be brown.
| | 09:35 | I think white would be a better choice.
| | 09:38 | It will stands out nicely there and
let's make it a little bit smaller.
| | 09:42 | Then I can select both of those
objects like I have been doing in the past
| | 09:45 | with multiple objects.
| | 09:46 | Go to my Align panel and just set my
alignment, make sure everything ties in
| | 09:50 | nice together and now we've got a
fully completed header area, complete with
| | 09:55 | our graphics that are going to link
off to our shopping cart and to our
| | 09:58 | membership section.
| | 09:59 | In the next movie, we are going to take
this design and make a couple of changes
| | 10:03 | to it, to give the clients some
options in terms of design variations.
| | Collapse this transcript |
| Adding design variations| 00:01 | In this movie, I have gone ahead and created
a whole series of storyboards for the file.
| | 00:04 | What we are going to do is take a
look at those different pages, talk a bit
| | 00:07 | about them, and also talk about how
many storyboards or what types of storyboards
| | 00:11 | you might want to include when you
supplying this kind of thing to the client.
| | 00:14 | So to start off with, we
are back on our first page.
| | 00:17 | The one you might recognize is basically the
page we created at the end of the last movie.
| | 00:21 | You see I have made a couple changes
to the text, and I have dropped in a
| | 00:23 | footer down in the bottom here, but overall
it looks very similar to what we had before.
| | 00:27 | Now one of the things that's really
different between this file, and the file
| | 00:31 | we were working on earlier is that I
have added a master page to this design.
| | 00:35 | If we take a look up here, you will
see the word common and Master Page.
| | 00:38 | You might recall creating a
master page back in the Wireframe.
| | 00:42 | The same kind of concept, but just now
we have the pretty stuff to go with it.
| | 00:44 | So we are going to click on the
master page and you can see here, all the
| | 00:47 | elements for my header are
basically in the master page.
| | 00:49 | My logo, my navigation, my little
shopping cart, and my Join button.
| | 00:53 | The advantage to this is that as I
generate new pages, this information is
| | 00:57 | automatically added to the page.
| | 00:59 | And if I need to edit the information,
I edit it once on the master page and
| | 01:03 | the change propagates throughout the entire
set of pages, which is really, really handy.
| | 01:06 | It's a real time saver, so we'll
hop back over our Index page again.
| | 01:10 | One of the other things I would like to
try and do with the client is get them a
| | 01:12 | couple ideas on color variations.
| | 01:14 | So we can really make sure that we are
going to with the right type of layout
| | 01:18 | and they have had a chance to have
their say essentially as to what they feel
| | 01:21 | is the best choice.
| | 01:22 | So in this case here for the Index page,
the one we've finished in the previous
| | 01:26 | movie, I have gone ahead and added in
two other versions that have essentially
| | 01:30 | the same layout, but the
color scheme is changing.
| | 01:33 | I am still using the same set of
swatches that I used in the original
| | 01:36 | storyboard, but I have
just changed things up a bit.
| | 01:38 | Now as I move down in these
pages here we have an about page.
| | 01:41 | So what I done here is I have added in
a page that shows what the site might
| | 01:45 | look like, if there was more content
then it would fit on the single screen.
| | 01:48 | Now one other neat little trick here.
| | 01:50 | You notice that my text is kind of
just flowing down the left hand side, what
| | 01:53 | I would like the text to do is wrap around
underneath my little slideshow area here.
| | 01:58 | So what I have gone ahead and done is I
have created a vector shape, customized
| | 02:02 | vector shape using the Pen tool, and
I am going to use that vector shape to
| | 02:05 | force the text to wrap
around my little slideshow.
| | 02:08 | And it's a really easy process.
| | 02:10 | You draw your vector shape.
| | 02:11 | You add your text then you select
both of these two objects, just like so.
| | 02:16 | And choose Attach In Path,
and you get a instant text wrap.
| | 02:21 | You've created what looks like a
floating element over on the right hand side
| | 02:24 | and the content the text is flowing around it.
| | 02:26 | So a pretty neat little trick to sort
of emulate what a webpage might actually
| | 02:29 | be doing in terms of how it displays content.
| | 02:32 | Just page down here again, and we have
got another version of the about page,
| | 02:36 | I've already wrap the text in this one.
| | 02:37 | And again, just showing a
slightly different color variation.
| | 02:40 | Products page, you remember back to
our Wireframe, we had that really simple
| | 02:44 | mockup of a Spry Accordion panel.
| | 02:46 | Well now I've flushed it out, I have
added in colors, I have added in photo, I
| | 02:49 | have added in some text.
| | 02:50 | So we get a feeling of how that content might
actually present itself on the real webpage.
| | 02:56 | And lastly I have created a shopping cart page.
| | 02:58 | Now this is the page that the visitor might
get to after they have placed their order.
| | 03:02 | So very similar to the kind of
thing we were doing in the Wireframe.
| | 03:05 | I have used my Grid Auto
Shape to create my table.
| | 03:08 | I have customized the colors based on again,
the colors we are using for the design.
| | 03:12 | I have dropped in additional
component symbols and text fields and so on.
| | 03:16 | So I can actually make it
look like a real shopping cart.
| | 03:19 | Even added in buttons down at the bottom.
| | 03:21 | So we get a really good feeling is to
how this page is going to present itself,
| | 03:26 | and that's the key here.
| | 03:27 | What you are trying to do with these
storyboards, they are not interactive at the moment.
| | 03:30 | They are just there to show the client how
the design is really going to come together.
| | 03:33 | How it's going to come to
life as a final website.
| | 03:36 | Now just to remind you that
everything I have done in all these different
| | 03:38 | pages are techniques we have covered,
either in the Storyboard movies or in
| | 03:42 | the Wireframe movies.
| | 03:43 | I really encourage you to take a look at this
file, and tear it apart, have some fun with it.
| | 03:48 | Change things up, alter the buttons,
add things to the master page, take things
| | 03:52 | away from the master page.
| | 03:53 | Play around with the different layers
structures that we have got on these
| | 03:56 | different pages, and see how I have
organized the content to make it easy to
| | 04:00 | find specific information or
specific design elements within each page.
| | 04:05 | In the next movie, we are going to
take this completed set of storyboards and
| | 04:08 | turn it into a Flash-based slideshow
| | 04:10 | the client can view online while you
are having a discussion over the phone.
| | Collapse this transcript |
| Using Demo Current Document | 00:00 | In the last movie, we took a look at a
series of completed storyboards including
| | 00:04 | some variations on color theme.
| | 00:06 | We talked a bit about types of
storyboards you might want to create or how many
| | 00:09 | you might want to use.
| | 00:10 | In this movie, our concern is getting
these storyboards, these design concepts,
| | 00:14 | in front of the client.
| | 00:15 | Now remember, we have not added
any interactivity to these pages;
| | 00:18 | they are strictly designs.
| | 00:20 | So we could export this out as a PDF,
but my preference for this is Demo Current
| | 00:25 | Document, and that's because what we
are showing is a website, so it would be
| | 00:29 | great to see it on-screen sort of
in the feeling of a real website.
| | 00:33 | So all we are going to do is go up to
our Commands menu and choose Demo Current
| | 00:38 | Document and you may recall from the
wireframe chapter that this particular
| | 00:42 | command produces a linear-based Flash
slideshow, complete with little thumbnail
| | 00:46 | navigation down along the bottom and
that's what we are going to use here.
| | 00:48 | So I am just going to choose Demo
Current Document and you will notice when the
| | 00:53 | dialog box comes up,
currently all the pages are selected.
| | 00:56 | Now, what I want to do is get rid of
the common page here because that's
| | 01:00 | just our master page.
| | 01:01 | It just has the header information,
and I know if I leave that in,
| | 01:03 | the first question I am going to get from
the client is where is the rest of the
| | 01:06 | content on that page?
| | 01:07 | So we are not going through that one at all.
| | 01:08 | We are just going to include the
different color variations and different layout
| | 01:13 | types that we've built
inside of the storyboards.
| | 01:15 | So I am going to choose Create Demo and
I am going to create a brand-new folder.
| | 01:18 | I am going to call it demo.
| | 01:19 | I am going to open that up and then
I am going to select the demo folder.
| | 01:24 | In a few seconds, Fireworks exports
out all the files I need and launches
| | 01:28 | Firefox bringing up the
slideshow inside of the browser.
| | 01:32 | I can move through these different
pages, get a look at them myself and
| | 01:36 | the best part about this is I can upload
this entire folder to my website, send the
| | 01:40 | client a URL, get them on the phone and
we can have a conversation in real time
| | 01:44 | about the different color choices, about the
different designs options that I've put in here.
| | 01:48 | And who knows?
| | 01:49 | You may get an approval right away
for a specific design and color theme.
| | 01:53 | If you do, you can move forward
and I also send out an invoice at this time,
| | 01:56 | because I have supplied
essentially an approved deliverable.
| | 01:59 | And if the client does want some changes,
just make sure you are clear on what
| | 02:02 | they want, do a revision, upload a new
slideshow, go over it with them again on
| | 02:06 | the phone and then with any luck, you
will get an approval and you can move
| | 02:10 | forward into building the interactive prototype.
| | 02:12 | Now you may be asking yourself, well, what
if I just need to make a change to one page?
| | 02:17 | Do I have to do a whole new
slideshow just to get an approval?
| | 02:21 | The answer is probably not, but what
you can do, and we'll look at this in the
| | 02:24 | next movie, is make those changes to a
specific page and then you'll be able to
| | 02:27 | export out that page and maybe send it
to them in an email. Just another way to
| | 02:31 | send off a deliverable.
| | Collapse this transcript |
| Emailing deliverables| 00:01 | In the last movie, we've created the
Flash slideshow of our storyboard concepts
| | 00:04 | using the Demo Current Document command.
| | 00:06 | In this movie, you'll see how you can
easily generate full page JPEG files and
| | 00:09 | email them out to the
client for final conformation.
| | 00:12 | I've got our Storyboard file
sitting up here at the moment.
| | 00:14 | Overall the client was pretty pleased
with the concepts and he has narrowed down
| | 00:17 | the choice to a specific design and theme.
| | 00:19 | Now, there are a couple approaches
you can use to sort of finalize these
| | 00:22 | designs, and one of them doesn't even
require you to leave Fireworks at all, and
| | 00:26 | we're going to use that one first.
| | 00:28 | So the client, they said, they
like version one of our index page.
| | 00:30 | So I am going to just email that off
to them to make sure that we're both
| | 00:33 | talking the same thing.
| | 00:34 | So I can go to my File menu, and
choose Send to E-mail, and I've got three
| | 00:39 | choices here, Fireworks PNG, JPEG
Compressed or Use Export Settings.
| | 00:43 | I'll just choose JPEG Compressed.
| | 00:45 | As soon as I select that,
my e-mail client opens up.
| | 00:49 | It's already attached
that JPEG file to the email.
| | 00:53 | I can just type-in the client's name
and then it's a little subject going here.
| | 00:58 | Really quick and easy to do
for a single page like this.
| | 01:01 | Now, that's the key with this is
it only works on a single page.
| | 01:05 | If you have multiple pages that you
want to export out for the client to view,
| | 01:09 | we have a different approach for that.
| | 01:10 | So I am just going to close down this email,
and I am not going to save the changes.
| | 01:14 | Now, the other option I've got is I can
export multiple pages from the design.
| | 01:18 | Now, before I go ahead and do that, one
thing I want to do is I want to set my
| | 01:23 | Optimization Settings for the pages.
| | 01:25 | So I am going to go into my Pages panel,
and as you're building things, you may
| | 01:28 | not be concentrating too much at this
point on how things are being optimized
| | 01:32 | or what the basic optimization is for the
page or the graphics that are on the page.
| | 01:36 | But if you take a look at my Index
Version 1 here and take a look down at the
| | 01:39 | Property Inspector, first thing you'll
notice is it's currently being optimized
| | 01:43 | as a GIF Adaptive 256 color palette,
which by and large isn't all that great for
| | 01:48 | these designs, because of a lot
of photographic elements in there.
| | 01:51 | So we're going to change the base
optimization for all these pages in one go.
| | 01:55 | I am going to go and select my Index
page, scroll down to my Cart page and
| | 02:00 | Shift+Click to select all of them,
and then all I need to do is go into my
| | 02:03 | Properties Inspector, and
change that to JPEG - Better Quality.
| | 02:08 | So now every single page has a Base
Export Setting of JPEG, which is great.
| | 02:14 | Because what I want to do is export
out these pages as separate JPEG files.
| | 02:18 | So now, I am going to go to my File
menu and choose Export, and we'll just
| | 02:22 | create a folder for them, call it JPEG.
| | 02:26 | All I am going to do at this point
is double-check my Export Settings.
| | 02:29 | I want to export out as
Images Only. That's fine.
| | 02:31 | I am going to uncheck my Current page
only option, because I want all the pages
| | 02:34 | exported out, and we'll just click Save.
| | 02:37 | Then if I do a quick check, go back
into my File menu, and just go to my Open
| | 02:41 | option here, I can actually see my JPEG
Folder and inside of there, are all the
| | 02:46 | different JPEG files, including of
course the common file which is the Header
| | 02:51 | which we don't need.
| | 02:51 | So that file you delete from the
folder and then you pick whichever ones you
| | 02:54 | want to email off to the client, and
either attach them or zip them up into a
| | 02:59 | compressed file or whatever you like
before you fire them off to the client.
| | 03:02 | So there you have your another way
to deliver material to the client.
| | 03:05 | You could also upload the files to your
web space and provide URLs for each graphic.
| | 03:09 | The point is you've got a variety of
different ways to keep the client in the
| | 03:13 | loop and to quickly gain approvals, or
change request before you hunker down for coding.
| | 03:17 | Now, while I've used a website here as
an example, remember you're not limited
| | 03:21 | to this particular media.
| | 03:22 | You could just as easily be building
an interface for an AIR application or
| | 03:25 | a Flex application.
| | 03:26 | The same concepts apply.
| | 03:27 | Perhaps even more so, because unlike
with a static website, AIR and Flex
| | 03:31 | applications require actual programming.
| | 03:33 | So you want to get a lot of these elements
resolved before you get into the coding stage.
| | 03:38 | Next, we'll begin building the
interactive prototype for the site.
| | Collapse this transcript |
|
|
4. Multi-Page MockupsAdding a new page| 00:00 | Hey! Welcome to Chapter 4.
| | 00:02 | In our last chapter, we
concentrated on creating a range of storyboards
| | 00:06 | represented some of the
major pages in our wireframe.
| | 00:09 | We also set up some different
color schemes for the client to review.
| | 00:12 | In this chapter, the client has reviewed
everything and they've narrowed it down
| | 00:16 | to one main color theme and we're
going to be working further in this set of
| | 00:21 | storyboards towards a more interactive mockup.
| | 00:24 | We're going to be adding some additional pages.
| | 00:25 | We're going to be editing a couple of
pages, but before we get into that,
| | 00:29 | let's take a look at what's taken place so far.
| | 00:32 | I've added at the end in this version
of the design a few extra pages, and
| | 00:36 | we'll talk a little bit about those
and just flip through things here.
| | 00:40 | First of all, our common or our master page.
| | 00:42 | You will notice the only thing that's
really different here is the fact that
| | 00:45 | we've added in a background image and
that background image is going to be
| | 00:49 | utilized on most of the pages in the design.
| | 00:51 | Something to note about that background
image is it's actually a group of vector objects.
| | 00:57 | So I can easily rescale this element
if I want to without worrying about it,
| | 01:01 | breaking down in quality.
| | 01:02 | Now, if we take a look at the Index
page, not too much has changed here.
| | 01:06 | However, because we have sort of an
original design or a unique design for the
| | 01:10 | index page, it's not sharing
any elements from the master page.
| | 01:14 | So essentially, all the buttons and so on,
they are all present current on this page.
| | 01:19 | All the other pages are
based on the master page.
| | 01:22 | So we don't have to worry
about repeating these elements.
| | 01:24 | But I wanted to have this unique
background graphic for the Index page and
| | 01:28 | I also needed a common
background for all the other pages.
| | 01:30 | So the easiest thing to do was take one
page and make it unique and not have it
| | 01:34 | share with the master page.
| | 01:35 | Now, we'll just move down through
some of these, we'll take a look.
| | 01:39 | The About page hasn't changed too much,
but one thing that is a bit different is
| | 01:42 | I've gone ahead and taken our footer
elements, our little contact bit and our
| | 01:46 | navigation, and rather than having them
as separate objects, I've converted them
| | 01:50 | into one single symbol.
| | 01:51 | So I can double-click on this and
go ahead and edit the individual
| | 01:56 | objects within a symbol.
| | 01:57 | But the advantage of taking the footer
and turning it into a symbol like this is
| | 02:00 | I can share it across all my other pages.
| | 02:02 | So if I have pages that have different links,
I can place that symbol anywhere I want.
| | 02:07 | It just makes it a little
easier to manage it as I go.
| | 02:10 | On the Products page, not too much has
happened here other than the fact I ended
| | 02:14 | up un-grouping my grid auto shape
and turning it into separate pieces.
| | 02:19 | This allows me a little more
control, little more flexibility in
| | 02:23 | editing different elements.
| | 02:24 | Because the plan down the road and
we'll see some of this in this movie is to
| | 02:28 | really try to emulate this
Spry Accordion panel concept.
| | 02:32 | Now I've added in several other pages
here, and we're going to be doing a little
| | 02:35 | bit of work on them pages like our custom
_order page where the user can actually
| | 02:39 | go in and create their own
custom box of chocolates.
| | 02:42 | And several forms, recipe_finder,
upload_recipes, contact_us and membership.
| | 02:48 | Now, we're going to be adding a couple
of things into the upload_recipes page.
| | 02:53 | But I didn't want us to spend a
lot of time building several forms.
| | 02:56 | We've already looked at that in the
Wireframe exercises and I've figured out,
| | 03:00 | just put those things together for you.
| | 03:02 | You're more than welcome to
experiment with them and play around with them,
| | 03:04 | and try things out.
| | 03:06 | The Cart page really hasn't changed
all that much, and lastly a login page.
| | 03:12 | Again, to try and add to the user
experience and what we're producing here, I
| | 03:15 | want to create a login page.
| | 03:17 | I know that down the road, this is
going to come in really handy when I create
| | 03:20 | an HTML clickable prototype. Okay.
| | 03:22 | There is an overview of the changes in
addition to our newest working version of this design.
| | 03:27 | So let's get up to our Products page.
| | 03:29 | This is where we're going
to add in another element.
| | 03:32 | Now I've mentioned earlier, we've got
this Accordion panel concept going on
| | 03:35 | where we're mocking up the ability to see a
variety of content inside of a small space.
| | 03:41 | That's what Accordion panels are great for.
| | 03:43 | So what I want to do here is
not just have one example of this.
| | 03:45 | I want to show the client how that
Accordion panel is going to look when
| | 03:50 | different products are chosen.
| | 03:51 | So we're going to create another page
based on the general design of this page,
| | 03:55 | except we're going to change out the
Accordion panel a little bit and add some
| | 03:59 | different information.
| | 04:00 | So because both pages are very similar
in design, I am just going to start off
| | 04:04 | by creating a duplicate page.
| | 04:06 | I am going to drag that down to my
Duplicate Page icon, and there it is my second copy.
| | 04:11 | The things I don't need will be
things like my coffee elements here.
| | 04:15 | So I am just going to go
into my Layers panel here.
| | 04:19 | I am going to actually get rid of
these two sub-layers, Mug and Cannister.
| | 04:22 | So I am just going to select
the sub-layer and delete it.
| | 04:25 | I have to do that twice because the
first time you delete the object, the second
| | 04:29 | time you delete the layer.
| | 04:31 | Same thing with the Mug, trash that,
and then trash the mug itself. Okay.
| | 04:36 | So we've got a clear space for our
new product going here and it's a fairly
| | 04:40 | simple image that we're going to work with.
| | 04:42 | But we also have a couple of other things to
change as well before we get to that stage.
| | 04:46 | I mentioned earlier that the grid
auto shape has been ungrouped, so it's
| | 04:48 | basically just a series of grouped
vectors rather than having the auto
| | 04:52 | shape capabilities.
| | 04:53 | This is going to come in
handy for what I am about to do.
| | 04:55 | I am going to choose my Subselection
tool here, and I am going to select my
| | 05:01 | Caramel Truffle logo and I think I'll
zoom-in a little bit here to make it a
| | 05:05 | little easier to see and here we go.
| | 05:07 | So with my Caramel Truffle label
selected, and it's important I use the
| | 05:11 | Subselection tool for this because I am
grabbing elements that are part of a group.
| | 05:14 | I am just going to take that and use
my Arrow keys, and actually I think I'll
| | 05:18 | grab my text at the same time and I am
just going to move this puppy down just
| | 05:24 | above Raspberry Mousse. Here we go.
| | 05:27 | My next step is to change the location
of my background for my actual product.
| | 05:32 | So I've selected that with the
Subselection tool, and I am just going to use the
| | 05:36 | Arrow keys to move that up into place.
| | 05:38 | Now, I'll want to zoom-in a bit more on this.
| | 05:40 | So that I can make sure
that I am lining things up.
| | 05:42 | Make sure there is no surprises.
| | 05:47 | So that's a good spot for that. No gap there.
| | 05:51 | Look down at the bottom, and I am just
going to reposition my panel header, and
| | 05:56 | my title, 1 pixel should do it. There we go.
| | 06:02 | The last thing I need to do is grab
that one little divider that's sitting
| | 06:06 | there all by itself.
| | 06:07 | Again, this is part of a group, and I
am just going to use my Arrow key, my
| | 06:12 | Shift key to move that down. There we go.
| | 06:18 | So I've got my new sort of
arrangement created here.
| | 06:22 | I'll move my text little bit higher
into the design, and I'll zoom-out a little
| | 06:29 | bit and we'll add in our image.
| | 06:34 | So once again, making use of the
File > Import option, I really love this
| | 06:38 | feature because I do bring various
graphics into my design so often, rather than
| | 06:43 | opening them up and copying and pasting.
| | 06:44 | This makes it so much easier.
| | 06:47 | We're going to go into our Lesson 4
folder, and the file I want is spicy.
| | 06:53 | There it is right there.
| | 06:54 | So I am just going to double-click
on that and my Import icon comes up.
| | 06:58 | In this case here, I could just click
once and drop the image in, but I know
| | 07:02 | it's going to be a bit large.
| | 07:04 | So I am going to use my scaling
capabilities with the Import tool to bring this
| | 07:08 | file in the way I want.
| | 07:09 | So I am just going to go at the top of
my upper border, and drag and there is my
| | 07:15 | product just like that.
| | 07:16 | So now I've got one version of my
Products page, and another version.
| | 07:20 | So I am getting that feel of that
Accordion panel actually doing something.
| | 07:25 | The last thing I'll do is I am going
to change the name of this page from
| | 07:28 | products Copy to spicy_product.
| | 07:30 | That's even better.
| | 07:33 | So now I've essentially created
another variation, and again just sort of
| | 07:37 | building on that sense of realism.
| | 07:40 | In the next movie, we're going to
look at the custom_order page and the
| | 07:43 | upload_recipes page and add a
couple of elements to those.
| | Collapse this transcript |
| Adding component symbols| 00:00 | All right, we are going to add a few
finishing touches to a couple of pages,
| | 00:04 | primarily by adding-in some component
symbols and the two pages we are going to
| | 00:07 | work with are the custom_orders
page and the upload_recipes pages.
| | 00:11 | So, we will start right
here on our custom_orders page.
| | 00:13 | You'll see we've got three rows
that have some content in them already.
| | 00:17 | Just a single starting graphic and I am
not going to put images in every single cell,
| | 00:21 | but if you want to go ahead
and do that, by all means do so.
| | 00:24 | We are though, together, going to
finish off that bottom corner cell.
| | 00:27 | Now, if we take a look over in our
Layers panel, we've got main table layer and
| | 00:31 | currently three rows and I've also got
an empty row here called layer 4, which
| | 00:37 | is what we are going to work with
for the content for that final row.
| | 00:40 | So, I am going to rename that row 4
and the whole concept behind rapid
| | 00:45 | prototyping is trying to speed up your workflow.
| | 00:48 | So, rather than drag-and-drop
everything in from scratch, I have a lot of
| | 00:51 | objects in here that I can
reuse, re-purpose right away.
| | 00:55 | So, I am going to go up to my second to
light brown row here and I am just going
| | 00:59 | to go and select a few of these objects:
| | 01:01 | my title, my check-box, and my numeric
stepper and I am going to copy those,
| | 01:07 | press Ctrl+C, and then I am going to make
sure that I select my row 4, and press Ctrl+V.
| | 01:12 | And that's going to paste them back
in an exactly the same spot, but I will
| | 01:16 | just use my Arrow key and Shift key to quickly
move those guys down where I need them to be.
| | 01:22 | The other element that's got to go
into here is the image, so we will
| | 01:24 | import that as well.
| | 01:25 | I am going to go to File > Import and
this is the one I want, the cream_candy,
| | 01:31 | so I'll open that up.
| | 01:31 | And I am pretty sure this will
be a decent size as it stands.
| | 01:35 | So, we are just going to click once
to import it and yeah, that actually
| | 01:38 | worked out fairly well.
| | 01:39 | So, I will just grab my candies here
and check my alignment, make sure they are
| | 01:46 | all nicely aligned to the left, there we go.
| | 01:48 | So, they are all nice and
matched up in that sense.
| | 01:51 | The other thing I will do with this is
grab my Type tool, and I will just change
| | 01:55 | the name of this one to Cream Fantasy.
| | 02:01 | So, we've basically
completed that secondary element.
| | 02:05 | Again, keep in mind that these are our
component symbols that we've worked with
| | 02:08 | in a lot of cases here.
| | 02:09 | Numeric stepper is a good example.
| | 02:11 | I can go to my symbol properties and I
can choose any numerical value I want.
| | 02:15 | I am going to change that to 4, there we go.
| | 02:17 | So, I've got a new ordering value in there.
| | 02:19 | All right, next page we are going
to make some additions to is the
| | 02:22 | upload_recipes page.
| | 02:23 | Now, just a couple little
things are missing here.
| | 02:25 | We have another drop-down or combo box
that we want to put in and we also need
| | 02:29 | to pop in a button here for browsing for a file.
| | 02:31 | So, we can do this in a couple of ways.
| | 02:32 | We can just drag-and-drop or just go
back to our Document Library and take a
| | 02:37 | look and find my combo box, there it is
there and drag it on to the screen and
| | 02:43 | just reposition that.
| | 02:44 | So, I'll align it up with the other
ones, thank you Smart Guides and I will
| | 02:48 | scale that so it matches the width
of the other, like so, and again, I'll
| | 02:55 | double-click to lock that in, Symbol
Properties will change the Label here and
| | 02:59 | plain old Label to Origin of Recipe and
the other element I want to drop-in as I
| | 03:05 | mentioned earlier is another button.
| | 03:07 | So, I am going to go ahead and grab my
Button from my Document Library and drag
| | 03:11 | that on and again, just position that
in place and let Smart Guides help me out
| | 03:15 | a little bit with this.
| | 03:16 | There we go and scale this as well, so
it matches the length of the other button
| | 03:21 | and change the value in the Label.
| | 03:23 | So, this is going to be
Browse for file. There we go.
| | 03:30 | So, we've added in a couple of other
completing elements to that form mockup as well.
| | 03:34 | Now, with all those little finishing
touches in place, we are going to be adding
| | 03:37 | in some basic interactivity in the next movie.
| | Collapse this transcript |
| Adding interactivity| 00:01 | Okay, welcome back!
| | 00:01 | We are going to be adding in some
additional interactivity to our mockup.
| | 00:06 | Now again, just like the whole magic
of a cooking show, I've gone ahead and
| | 00:10 | completed some of this for us already
in the mockup working 2 file but we are
| | 00:14 | going to have a chance to build out
one of these Button symbols ourselves and
| | 00:17 | also work with adding
hotspots to the footer symbols.
| | 00:21 | So, let's begin here.
| | 00:22 | We are on the master page and the Recipe
button is just on its own, all by its lonesome.
| | 00:28 | It's not a pale shade of green
like all the other buttons.
| | 00:30 | So, we are going to make a
change to that right now.
| | 00:33 | So, I am going to go and grab my
Pointer tool and I am going to select
| | 00:36 | that original shape.
| | 00:37 | Now, if you recall, this is a grouped object.
| | 00:39 | There is actually three elements in there
and you can tell that by the Layers panel.
| | 00:43 | It says Group: 3 Objects.
| | 00:44 | So, we are going to convert this to a
button symbol and the way to do this is to
| | 00:49 | go to Modify > Symbol > Convert to Symbol.
| | 00:54 | We'll first of all name it.
| | 00:55 | We are going to call it btn_recipe and we
are going to set it up as a Button symbol.
| | 01:01 | We are not going to save this to the
Common Library, because it's really only
| | 01:04 | necessary for this document.
| | 01:06 | It's not something we need to share
on other designs or for other project.
| | 01:11 | Likewise, we are not going to worry
about 9-slice scaling on this because we
| | 01:14 | have some bitmap elements in there and
9-slice scaling with bitmaps is never
| | 01:17 | usually a good idea.
| | 01:19 | So, we are going to click
OK, and there is our slice.
| | 01:22 | Now, we are actually going to
add-in the interactive elements.
| | 01:24 | So, I am going to double-click on this
and we go into our in-place editing for
| | 01:27 | the Button and I'll switch over to my
Properties panel and you will see down
| | 01:33 | here in the Properties panel,
we have got an option for State.
| | 01:35 | We've got up to four states that we can
add in to our button, as well as, edit
| | 01:40 | the hot or active area,
which is basically the slice.
| | 01:42 | So, we are going to go to the over state
and you will notice right away that the
| | 01:45 | button completely disappeared.
| | 01:47 | That's because at this point we
have nothing there for the button.
| | 01:49 | So, we are going to do this the fast
and easy way, Copy Up Graphic and that
| | 01:54 | gives us a copy of the original Up
state and we are going to make some changes
| | 01:58 | to this to make it look a little bit different.
| | 02:00 | So, I am going to go to go over to my
Swatches panel and I am also going to grab
| | 02:05 | my Sub-Selection tool, because
again, this is a grouped object.
| | 02:08 | So, I am going to grab the off-white tab.
| | 02:11 | I am going to change the color of that
tab to our rich kind of magenta color
| | 02:16 | and then I am going to select my text and I
am going to change that to the off-white color.
| | 02:20 | Basically, what I am doing is
I am doing a complete reverse.
| | 02:23 | The original Up state has the off-white
tab and the magenta text, the Over state
| | 02:28 | is going to have the magenta
tab, and the off-white text.
| | 02:31 | Now, we can also add in, once we click
away from that, back to our Properties
| | 02:35 | Inspector, as I mentioned earlier, we
can also add in a Down state and Over
| | 02:38 | While Down state and if we just click
on those, it's the same kind of process.
| | 02:41 | You select one of the states, you choose
to copy the Over graphic, in this case,
| | 02:47 | and you can either change that or
leave it as it is and you can do the same
| | 02:50 | thing with the Over While Down state.
| | 02:53 | So again, copy the Down graphic and
it's up to you, if you want to change those
| | 02:57 | to have different looks
to those different states.
| | 02:59 | So, there is our Button symbol creation.
| | 03:01 | Pretty quick and easy and it's a self-
contained little navigational component.
| | 03:05 | Now, I am going to double-click on the canvas.
| | 03:07 | That will bring us back to our original
design, and the only other thing I want
| | 03:11 | to do with this is make it clickable.
| | 03:13 | So, I am going to grab my Pointer tool,
select the slice itself and down here
| | 03:17 | in the Properties Inspector again, I am
going to locate the page that I want to link to.
| | 03:22 | Now, in this case here, we
have two recipe pages to link to.
| | 03:25 | We have got upload_recipes and recipe_finder.
| | 03:28 | I am going to go with the recipe_finder.
| | 03:29 | Kind of the starting point for that.
| | 03:31 | And we will have other links on
those pages to take us off into the other
| | 03:35 | related pages there.
| | 03:36 | So I'll just select that link and again
just another reminder here, when you are
| | 03:39 | working with the links, always make sure
that you select from below the divider.
| | 03:44 | So make sure that's where you grab your links.
| | 03:46 | That's basically the only way you
are going to make sure that they work.
| | 03:49 | So we are going to choose recipe_finder,
just press the Return key to lock that in.
| | 03:53 | All right, now we are going to move
over to our index page where all these
| | 03:57 | elements are already been done in terms
of hotspots for shopping cart and for a
| | 04:01 | logo just like they were in the master page.
| | 04:03 | But the one thing that is different
here than the master page is our footer.
| | 04:07 | Now remember, we could turn our footer
into a symbol and the idea behind this
| | 04:11 | that we can basically move this symbol
from page to page and depending on how
| | 04:15 | tall the pages are, we can reposition it.
| | 04:17 | So, it's not something you want on the
master page but having it as a symbol
| | 04:20 | makes it really easy to maintain it and
you will notice I have got hotspots over
| | 04:25 | several of these text links and I
don't have a hotspot over the Recipe one.
| | 04:29 | Now, if I click on these you will
notice I can't select the hotspots and that's
| | 04:32 | because those hotspots are
actually applied to the symbol itself.
| | 04:36 | So, we are going to double-click on
the symbol, back into Symbol Editing mode
| | 04:39 | here, and you can see there are all the
hotspots and we are going to add in one
| | 04:42 | more and the easiest way to do this
and sort of maintain the same kind of
| | 04:46 | dimensions is to select another hotspot
and just press Option and an Arrow key
| | 04:52 | and we get a duplicate.
| | 04:53 | I am just going to use the Arrow keys
to move that over and I'll resize it a
| | 04:57 | little bit, because it's a bit long for
the word Recipes and we will make sure
| | 05:02 | that we change the link, because when
we copy a hotspot, we also copy the link.
| | 05:06 | So, I want to make sure that this
actually goes to the right location.
| | 05:09 | So, I am going to go to my drop-down
menu in the Properties Inspector and I am
| | 05:12 | going to choose recipe_finder. There we go.
| | 05:14 | Now, you might find when you are
adding hotspots or something like that to a
| | 05:19 | symbol that your list of links is
pretty sparse and that's where it comes in
| | 05:23 | handy to know what you are calling
your pages, because as long as you type-in
| | 05:27 | the proper address, then
the link will still work.
| | 05:29 | So, I am just going to press Enter to
lock that in and we are good there, I will
| | 05:33 | double-click and now we've got
our navigation in both places.
| | 05:38 | And we are going to do one more thing
before we move on to our next movie, where
| | 05:41 | we export this as an interactive PDF,
we are just going to do a quick test of
| | 05:45 | the file to make sure
everything works the way it should.
| | 05:48 | So, I am going to go to File > Preview
in Browser > Preview all pages in Firefox
| | 05:54 | and as we move over our different text
links down below, you can see that I can
| | 05:57 | click on those and we can
actually go to our different locations.
| | 06:00 | That's pretty cool.
| | 06:01 | We can click on Custom
Orders and go to the Login page.
| | 06:04 | We've basically got all
the interactivity we need.
| | 06:06 | Just a nice way to sort of test this
out before we take that next step,
| | 06:10 | where we export it out as an interactive PDF and in
the next movie, that's exactly what we are going to do.
| | Collapse this transcript |
| Exporting storyboards as a PDF| 00:01 | We are now ready to turn this set of
storyboards into a PDF file that the client
| | 00:06 | can review and then even comment on,
so we can get feedback from them.
| | 00:10 | Now before you go ahead and turn
this into a PDF and fire it off to the
| | 00:13 | client, it's always a good idea to take a look
at it and preview it to make sure it's working.
| | 00:17 | So even though we are turning this
into a PDF, we can still sort of take
| | 00:21 | advantage of some of Fireworks main
tools and that we can preview this in the
| | 00:25 | browser to make sure our
links are working and so on.
| | 00:27 | So I am going to go to File > Preview in
Browser and choose Preview all pages in
| | 00:32 | and then we can mouse over our links.
| | 00:33 | Now we won't get the rollover effects
inside of the PDF, but we know the links
| | 00:37 | are working, I can click on the
Products page, there is the Products page.
| | 00:40 | I can click on Custom Orders, there is
custom orders and so on and down at the
| | 00:44 | bottom, I have got my links
for my navigation down here too.
| | 00:47 | So I can go click on About Us.
| | 00:49 | It takes us back to About Us.
| | 00:50 | So the links are all working. That's great.
| | 00:52 | We are just going to close Firefox down
and let's export this as an interactive PDF.
| | 00:56 | So File > Export and we want to make
sure we are in the right folder, so I
| | 01:02 | am just going to go to my Lesson 4 folder
and I am going to save this as a PDF file.
| | 01:07 | So I am going to choose that from the
Export Options and I am going to rename
| | 01:10 | it, because mock_up_working3
doesn't sound all that amazing.
| | 01:13 | So I am just going to call it
bliss_prototype.pdf. There we go.
| | 01:20 | I want to check my options
before I go ahead and create this.
| | 01:22 | I am going to go to the Options menu,
and most of these, I can leave alone,
| | 01:25 | Compatibility, JPEG
Compression, Quality and so on.
| | 01:28 | But I do want to setup a password so
that it's a password-protected document, so
| | 01:32 | the client has to type in a
password to open up the file.
| | 01:34 | I am going to type in bliss as my password.
| | 01:38 | I could also setup a password to
restrict certain tasks as well, but in our
| | 01:41 | case, this will be enough.
| | 01:42 | And now we are just going to click on Save.
| | 01:47 | Pretty soon after that up comes Acrobat
and the first thing we are prompted for
| | 01:50 | is the password for the PDF file.
| | 01:52 | So I will type that in
and we can see PDF document.
| | 01:56 | So again, I can go ahead and click on
the links and move to the different pages
| | 01:59 | if I want to, just the double-check
thing and it looks like it's all working
| | 02:03 | fine from that perspective.
| | 02:04 | Now having this opened up in Acrobat
Pro is really handy for me as a designer,
| | 02:08 | because this is where I can
setup the file for commenting.
| | 02:11 | I can't just fire it off this way from Firework.
| | 02:14 | So opening up in Acrobat Pro, I can go
into my Comments menu and I can choose
| | 02:18 | Enable for Commenting and
Analysis in Abode Reader.
| | 02:21 | When I do that, it ask me to re-save the files.
| | 02:24 | So I am just going to re-save the
original file and then I will override it.
| | 02:27 | That basically allows my client to
open this up in Reader and add in Sticky
| | 02:32 | Notes, make comments and so
on that I can read later on.
| | 02:35 | So that seems to be all fine.
| | 02:36 | We are going to close down Acrobat.
| | 02:38 | So now all I have got to do is attach
that PDF to an email, fire it off to my
| | 02:42 | client Tom and wait to hear back from him.
| | 02:44 | All right, I've emailed off the PDF to
Tom, and he has made some comments and he
| | 02:49 | has sent it back to me.
| | 02:50 | We can see right here back in Acrobat
Pro there is the Sticky Note that Tom's
| | 02:53 | added and his comments basically are
'Overall it looks great.' What would the
| | 02:57 | login page look like?
| | 02:59 | When I clicked on the Products page, I
couldn't see the other product without
| | 03:02 | choosing the pages inside of Acrobat.
| | 03:03 | He raises a couple of really good points here.
| | 03:05 | We have created the pages, but
hadn't really wired them up to interact
| | 03:08 | within the prototype.
| | 03:09 | So we will make those changes and
then I can fire off another PDF to Tom.
| | 03:12 | So I am going to close Acrobat
and I don't need to save that.
| | 03:16 | Okay, so first thing is the login page.
| | 03:20 | Now if I scroll down to my Pages panel,
there is my login page here and it's
| | 03:24 | for the member login.
| | 03:25 | So what I want to do is I want to pick a
page where it would make sense for this
| | 03:28 | login screen to appear and I think the
Custom Orders page would a good choice
| | 03:33 | for this because you want to have your
membership stuff all setup before you go
| | 03:36 | ahead and try to order something.
| | 03:38 | So we are going to go to the master page and
make an adjustment on the link for Custom Orders.
| | 03:43 | So I am just going to select that slice
and if I look down on my Link box here,
| | 03:46 | it says custom_orders.htm.
| | 03:49 | I am going to change that to login.
htm and just press the Enter key or the
| | 03:54 | Return key to make sure that change
sticks and I also need to do that on my
| | 03:57 | index page, because don't forget,
all of our buttons are unique on the
| | 04:01 | index page as well.
| | 04:02 | So I am going to select my Custom
Orders to there and do the same thing.
| | 04:05 | All right, so that interactivity has been added.
| | 04:08 | So when he clicks on that link, he
is now going to go the login page.
| | 04:11 | But how does he get out of the login page?
| | 04:12 | Well, let's go over to the login page
itself and we are going to drop in a
| | 04:18 | couple of hotspot here for our Login button.
| | 04:20 | I am just going to select it and right
-click, Insert Hotspot and when they
| | 04:24 | click on the Login button, they're
going to be able to get to the Custom Orders
| | 04:27 | pages, and what the heck, we will add in our
little other interactivity here, Not a member yet?
| | 04:32 | We'll right-click on that, insert a
hotspot and this will go right off to
| | 04:35 | the membership page. There we go.
| | 04:38 | So we've added the interactivity in those areas.
| | 04:42 | We have one other question to
address from Tom, and that is the concerned
| | 04:45 | about the Products page.
| | 04:46 | Now we are going to deal with that in
the next chapter where I am going to
| | 04:49 | be adding in some additional
interactivity to make it look even more
| | 04:52 | visually interesting.
| | 04:53 | I think with this PDF having been
sent off and with those two fairly minor
| | 04:57 | comments from Tom, we can push
ahead and start turning this into a true
| | 05:02 | interactive clickable HTML prototype
and that's what we will be dealing with
| | 05:05 | in the next chapter.
| | Collapse this transcript |
|
|
5. Adding InteractivityExploring the completed prototype| 00:00 | In the last chapter, we built other mock
-ups with some basic navigations so we
| | 00:04 | could move from page to page.
| | 00:05 | In this chapter, we're going to be
adding a lot more interactivity, to make the
| | 00:08 | prototype feel like it's an
actual functional webpage.
| | 00:11 | Just to give you a couple of examples
of the kind of things we'll be doing.
| | 00:14 | I am going to hop over to my custom
orders page where I automatically get a login.
| | 00:18 | So, I am going to choose Login,
and there's my Custom Order page.
| | 00:21 | If I choose Add to Cart, I'm going
to get a little message saying hey!
| | 00:26 | Your Cart Has Been Updated, do you want to
keep shopping or do you want to go to the cart?
| | 00:29 | If I Keep Shopping, I stay on the page.
| | 00:31 | if I choose Go to Cart,
I go to my Shopping Cart.
| | 00:35 | That kind of thing.
| | 00:36 | So, we're going to be adding those elements in.
| | 00:38 | An another nifty little feature we're
going to incorporate is in the Products page,
| | 00:41 | making this Accordion panel
really looks like it's an Accordion panel.
| | 00:45 | So as you mouse over the tab for Spicy
Bliss Organic for example, you see it
| | 00:49 | changes color, and you click on it.
| | 00:51 | We update our design to show the other
page that we had created, and we've got
| | 00:56 | the interactivity to switch
back to the Caramel Truffle again.
| | 00:59 | Adding an extra bit of
realism to the entire site.
| | 01:02 | And one last little bit I'll show you.
| | 01:04 | We're going to go to the recipes page.
| | 01:06 | This is our page for actually
searching for a recipe but if we go over and
| | 01:09 | choose to upload our own recipe to our
site, we can choose to browse for a file.
| | 01:15 | As soon as we click on that we get
a little browse window coming up.
| | 01:18 | And of course it's is a prototype,
so you're not got to be able to
| | 01:20 | enter anything into this.
| | 01:22 | But you can see what's going to happen
and you can cancel out of the action, and
| | 01:26 | go back to the page.
| | 01:27 | So, that's what we're going to be
doing to add realism to the prototype.
| | 01:29 | Now, you may be wondering why through
the entire creation of this prototype
| | 01:33 | I haven't included anything
like the Fireworks pop-up menu.
| | 01:36 | And while the pop-up menu feature is a
great idea especially for prototypes and
| | 01:39 | really that's from my perspective the
only place you would normally use it,
| | 01:43 | I have found at this point in
conjunction with button symbols, there to be some
| | 01:46 | consistency issues on how
the pop-up menu is displayed.
| | 01:49 | So, that's why I haven't
utilized them in this course.
| | 01:51 | In the next movie, we're doing to start
adding in that interactivity beginning
| | 01:55 | with our Accordion panel.
| | Collapse this transcript |
| Mocking up an interactive accordion panel| 00:00 | We're going to start creating a
more realistic experience with our
| | 00:04 | prototype, and we're going to begin with the
Products page where we have our Accordion panel.
| | 00:07 | So, I'm just going to go down
in my Products page here.
| | 00:11 | And you might recall from previous
movies we've created two different pages that
| | 00:16 | represent the Products page.
| | 00:17 | The current one we're seeing here and
then the spicy_products page, which makes
| | 00:21 | the Accordion panel look like it's changed.
| | 00:23 | Well, we're actually going to add the
interactivity to make this panel change,
| | 00:27 | and also to make some changes to the
different header elements inside of our panel,
| | 00:32 | so that they react to the mouse as well.
| | 00:34 | So, a couple neat little
things are going to go on.
| | 00:36 | Now, first thing I need to do in order to
put this together is to create a new state.
| | 00:40 | So, I'm just going to click on my New
State icon here, in my States panel.
| | 00:44 | You might notice I've got my Pages,
States, and Layers panels all separated out,
| | 00:48 | so I can really easily see
each one and move between them.
| | 00:51 | So, it just makes a
little easier to find your way.
| | 00:54 | Now, you'll notice here I've got
my page background is showing up.
| | 00:57 | Now, that's actually not part of
the Products page specifically.
| | 01:00 | It's inside the master page.
| | 01:03 | And if I go to my master page, you'll
see I've created a State 2 and in that
| | 01:06 | State 2, I've got another
rendition of that background image.
| | 01:09 | So when we move to that state in
our rollovers and so on, we don't run
| | 01:13 | into anything missing.
| | 01:14 | So, we've basically made that common
on the second state for all the pages.
| | 01:18 | So, I'm back down to my Products page here.
| | 01:21 | Okay, so there is my
State 2 created. That's fine.
| | 01:23 | I'm going to hop back to State 1 again,
and we're going to add in the graphical
| | 01:27 | elements we need to actually pull this together.
| | 01:30 | I'm going to make use of existing
content, which is if you can, the best way to
| | 01:34 | do it, because that way you don't
have to rebuilt or redraw anything.
| | 01:37 | So, I've got my Subselection tool
chosen, and we can select that light orange
| | 01:41 | background behind my
current product display here.
| | 01:44 | Remember, this is a grouped set of
elements, so the Subselection tool allows me
| | 01:47 | to select individual
objects with inside the group.
| | 01:50 | I'm just going to press Ctrl+C to copy that.
| | 01:54 | And before I pop over to my state
number 2, I'm also going to add in something
| | 01:59 | else here, where I've got my
Spicy Bliss Organic header.
| | 02:02 | I'm going to click on that to select
that rectangle, and then I'm going to
| | 02:05 | right-click and choose to
Insert Rectangular Slice.
| | 02:08 | Okay, this is going to be essentially a
hot region or interactive region for my
| | 02:12 | header so that I can make some visual changes.
| | 02:15 | Now with that slice created,
I can switch over to State 2.
| | 02:18 | I can press Ctrl+V, and my orange
rectangle is basically pasted in, where it was
| | 02:24 | in the original state, so I'm
going to move that around a little bit.
| | 02:28 | Use the Arrow keys and the Shift key
to move things around. There we go.
| | 02:32 | So, I've basically got that orange
element showing up exactly where I need it to
| | 02:36 | show up, and that will give me a starting point.
| | 02:39 | I'll hop back over to State 1 again.
| | 02:41 | The other thing I need from this is my title.
| | 02:44 | So I'm going to grab my
Spicy Bliss Organic title.
| | 02:47 | I'm going to copy that.
| | 02:48 | Go back to state number 2.
| | 02:50 | I am going to paste that in.
| | 02:52 | I'll make a slight change to the
style of this text so it looks a little
| | 02:55 | different when the mouse-over occurs.
| | 02:56 | I am going to go from Regular to Italic.
| | 02:59 | Okay, so there's my starting point with that.
| | 03:01 | I'll hop back over to State 1 again,
turn my slices on one more time.
| | 03:05 | And what I need to do with this slice is
I need to add some interactivity to it.
| | 03:10 | The first thing I need to do is create
a simple rollover effect, and that's a
| | 03:13 | really easy thing to do.
| | 03:14 | Just click on the Behavior Handle and
choose Add Simple Rollover Behavior.
| | 03:17 | So, that is essentially a
very simple two state rollover.
| | 03:20 | When you mouse-over that slice area,
it's going to swap out the information in
| | 03:23 | that slice for the
information in the next state.
| | 03:26 | You don't get three or four
states out of the simple rollover.
| | 03:29 | It's that two state kind of thing.
| | 03:30 | Other thing I want to do is I want
to add some interactivity in terms of
| | 03:33 | creating a link to my next page.
| | 03:36 | So with that slice still selected, I'm
going to go down in my Link panel in my
| | 03:40 | Property Inspector and I'm going
to choose spicy_product as the link.
| | 03:45 | So, there's my starting point there.
| | 03:46 | So, I've got those two elements going.
| | 03:48 | Now, if I do a quick preview.
| | 03:50 | I'll turn off my slices so
it's a little easier to see.
| | 03:52 | I'll move my mouse-over, and you can
see I get that header change there.
| | 03:55 | So it looks kind of cool.
| | 03:56 | Now, in the Preview Mode you
can't actually switch to other pages.
| | 03:59 | You can only see effects in different states.
| | 04:01 | So, if I click on it nothing is going to
happen, but, I do get to see the visual
| | 04:04 | feedback, which is kind of cool.
| | 04:06 | We'll be testing out the actual linkage shortly.
| | 04:08 | I'll go back to my Original view, and I
will switch to my spicy_product, and I
| | 04:13 | do the same kind of scenario here.
| | 04:15 | I'm going to create a new state, and then I
am going to hop back to my State number 1.
| | 04:21 | In this case here, what I need to do
is again grab my Subselection tool.
| | 04:26 | I'm going to select my orange background.
| | 04:29 | I'm going to select my Caramel
Truffle text, so I'll sort of kill two birds
| | 04:33 | with one stone here.
| | 04:34 | I'm going to choose Ctrl+C to copy, go
to my State number 2, press Ctrl+V, and
| | 04:40 | there we go, both of
those elements are pasted in.
| | 04:43 | I'm just going to change my style again
to Italic, and hop back to State 1, one
| | 04:48 | more time, because I want to setup my slice.
| | 04:51 | So, I know exactly where to
position my orange background.
| | 04:54 | So, I'm just going to right-
click, Insert Rectangular slice.
| | 04:58 | There we go, just like that.
| | 04:59 | If I hop back to State 2 again, I
can reposition my orange background.
| | 05:06 | You don't need all that orange background,
because you're only covering up one specific area.
| | 05:10 | Feel free to reduce the
size of that if you want.
| | 05:12 | So it really comes down to what your
plans are, in terms of how realistic you
| | 05:16 | want to make the prototype.
| | 05:17 | In my case here, there are two different
states here for the two different pages
| | 05:20 | is more than enough.
| | 05:22 | All right, so I'm going to click on my
Pointer tool, select my hotspot and add a
| | 05:27 | Simple Rollover again.
| | 05:29 | I mentioned this in the past, just a reminder.
| | 05:30 | You don't need to be on
State 1 to do this kind of thing.
| | 05:33 | Just if you're adding in any behaviors
that require more user input than the
| | 05:37 | Add Simple Rollover.
| | 05:38 | You'll just want to be careful that you are
indeed setting things up the way you want.
| | 05:42 | So, my Simple Rollover state is set,
and I'm going to add in my link, which is
| | 05:46 | going to take me back to the products page.
| | 05:48 | All right, so there we go.
| | 05:50 | We've got State 1, hotspots all setup.
| | 05:54 | And ready to go for our Caramel Truffle,
and again, I can preview that too if I like.
| | 05:58 | And move my mouse-over my
Caramel Truffle element.
| | 06:01 | You'll see that it lights up and
everything else is kind of grayed out because I
| | 06:04 | still have my Slices and hotspots showing.
| | 06:06 | So, I'll just hide those
for a second. There you go.
| | 06:08 | You can see we get that nice little change over.
| | 06:11 | I'll switch over my Original
view, put my Slices back on.
| | 06:15 | What we can do as well, if we want to
test the page interactivity rather than
| | 06:19 | just the visual rollover, we can go
ahead and preview this in the browser.
| | 06:23 | So, I'll go to File > Preview in
Browser, and it's important that you preview
| | 06:27 | all pages in your browser so that more
than the current page it gets loaded.
| | 06:32 | Here we're on our second page, so I
can move my mouse-over Caramel Truffle.
| | 06:36 | I'll go back to my Caramel Truffle page.
| | 06:38 | I mouse-over to my Spicy Bliss Organic,
and hey, it looks like the Accordion
| | 06:42 | panel actually expanding and
collapsing to display new content.
| | 06:45 | So, it adds a certain amount
of realism to the prototype.
| | 06:48 | And it's not that hard to do.
| | 06:49 | It's a pretty quick process.
| | 06:50 | So, it can really help sort of engage
the user, and really give the client a
| | 06:54 | sense of what's going to happen when they
interact with different elements in the website.
| | 06:58 | All right, we'll just
close down the browser here.
| | 07:02 | That's the basics behind
creating this kind of effect.
| | 07:05 | In the next movie, we're going to be
adding some additional interactivity this
| | 07:08 | time on the upload_recipes page.
| | 07:10 | We will sort of mock up the
process of uploading a file.
| | Collapse this transcript |
| Mocking up a pop-up window| 00:01 | You might recall from the intro to
this chapter that when we hit our Upload
| | 00:05 | Recipe page, we were able to click on
the Browse for File button, and actually
| | 00:09 | bring up a dialog box.
| | 00:11 | And we're going to be putting this together.
| | 00:12 | It incorporates some of the same
principles that we used with the Accordion
| | 00:15 | panel, but we're also going to be
adding hotspots in here to really round
| | 00:19 | out the interactivity.
| | 00:20 | So the first step with
this is to create a new state.
| | 00:22 | So I'm going to go to my
States panel, and create new state.
| | 00:26 | The next thing I want to do is actually
bring in my image that I'm going to use
| | 00:31 | as my file browser window.
| | 00:33 | So we're not actually opening up
a real file browser window here.
| | 00:35 | Again, we are just mocking up the experience.
| | 00:37 | So I'm going to go to my
File menu, choose Import.
| | 00:42 | I've got a file already in here called
Browse, and that will do the job just fine.
| | 00:48 | For the time being, I'm just going
to click and let it drop into place.
| | 00:52 | Now, I want to reposition this so it
doesn't cover up other elements that I'll
| | 00:55 | need for interactivity.
| | 00:57 | So I'm going to make use of my onion
skinning, comes in really handy for
| | 00:59 | this kind of thing.
| | 01:00 | So I can see both pages.
| | 01:03 | I'll use my Arrow keys and my Shift key,
and I'll just reposition this fellow like so.
| | 01:11 | Now, I'm being very careful not to
cover up my Browse for File button,
| | 01:15 | because that's going to require some
interactivity, and I prefer to have that just on its own.
| | 01:19 | So that doesn't get covered up at any point.
| | 01:21 | All right, so there's my window all setup there.
| | 01:24 | With that positioned, I'm going to
remove my onion skinning, so I can see the
| | 01:28 | actual artwork a little bit better.
| | 01:30 | Next thing I want to do is I want to
add a slice, because we are basically
| | 01:33 | creating another rollover effect here.
| | 01:35 | So I'm going to right-click on my object,
and choose Insert Rectangular Slice.
| | 01:42 | With that slice added in, one of the
things I'm going to do is I'm going to
| | 01:45 | give it a new name.
| | 01:47 | So it's a little easier to
recognize when I'm adding my behaviors.
| | 01:50 | So I'm just going to call it Browse, and
I'm going to switch back to state number 1.
| | 01:55 | Now, in state number 1,
there's my Browser File button.
| | 01:57 | So I want to add an interactivity here,
because I want the user to be able to
| | 02:01 | click on this button to
launch that browser window.
| | 02:03 | So I'm going to right-click and
choose in this case Insert Hotspot.
| | 02:07 | I'm not doing any mouse-over effects here.
| | 02:08 | So I don't need to add a slice-in in this case.
| | 02:11 | Choose my Behavior handle, and
choose Add Swap Image Behavior.
| | 02:16 | Now, when you do this unlike the
Simple Rollover Behavior, this gives you a
| | 02:19 | little more control over things.
| | 02:21 | You can see all the different slices
that are currently present in the design.
| | 02:25 | So I'm going to click on the one
that I want to work with, and it's that
| | 02:28 | big blue one there.
| | 02:29 | That's the slice we just created, and
you'll see it shows up here as Browse.
| | 02:33 | What I want to happen is I want to show
the swapped image from state number 2.
| | 02:37 | Basically, when I rollover the
hotspot, this state is going to show up.
| | 02:41 | Now, we're going to make a change to
that as well, because we don't want it to
| | 02:43 | happen on mouse-over.
| | 02:45 | I'm going to remove the option to
Restore image onMouseOut, so that the image is
| | 02:50 | sort of sticky and stays in place until
I decide that I want to get rid of it.
| | 02:54 | I'm going to click OK on that.
| | 02:55 | You'll notice that little curved line
connecting the hotspot to the slice.
| | 03:00 | So that's your indicator that there
is some connection between these two.
| | 03:03 | Now, I'm going to call my Behaviors panel
to do a little bit tweaking to that behavior.
| | 03:09 | You can see the hotspot still selected
and in the Behaviors panel we see the
| | 03:12 | Event onMouseOver, Swap Image.
| | 03:14 | Well, we want to change the event.
| | 03:16 | I'm going to switch that over to onClick.
| | 03:18 | So when this hot area is clicked, we're
going to get our Pop-up window or Browse window.
| | 03:23 | All right.
| | 03:24 | Now, we also want to incorporate a
way to cancel this process, because it's
| | 03:28 | not a real file upload.
| | 03:30 | It's just sort of a mock-up of the process.
| | 03:32 | So we want to incorporate a couple of
things that allow us to do just that.
| | 03:37 | Collapse my Behaviors panel, switch back over
to my second state, so I can see my artwork.
| | 03:41 | I'm going to draw in two more hotspots.
| | 03:44 | Now, in this case I have to draw them
in, because they're going to be smaller
| | 03:47 | parts of a larger slice.
| | 03:48 | So I'm going to draw one in over the X
box here to close the window, and I'm
| | 03:54 | going to draw one over the Cancel button.
| | 03:57 | They both are going to do the same thing.
| | 03:59 | When the user clicks on either one of
these hotspots, what will happen is we're
| | 04:03 | going to swap back to the original state.
| | 04:05 | So I'm going to grab my Pointer tool.
| | 04:08 | And again, just try to expedite the
process a bit, Shift-click to select both of
| | 04:12 | them and then just click on the
Behavior handle for one of them.
| | 04:15 | Choose Add Swap Image Behavior,
select the slice, and we're going to switch
| | 04:21 | back to state number 1.
| | 04:23 | Again, we're going to deselect the
option to Restore the image onMouseOut.
| | 04:27 | And we'll click OK.
| | 04:28 | Now, again I have to sort of do a bit
of tweaking with the behaviors here.
| | 04:32 | So I'm just going to deselect everything, and
I'll grab my Close button up at the top first.
| | 04:38 | As before, we're just going to change
the Event from onMouseOver to onClick.
| | 04:43 | Same thing down here, onMouseOver to onClick.
| | 04:48 | So now I've created the full sort of
round trip interactive experience here, the
| | 04:51 | user can click on the Browser File
button, a Browse window comes up.
| | 04:54 | And then, when they realize, well hey,
it's just pretend, they can click on
| | 04:58 | the Cancel button, or they can click on the
Close box and go back to the original state.
| | 05:02 | So let's just close that Behaviors
panel, and let's give this a try.
| | 05:05 | I'm going to hide my slices and go back
to State 1, switch to my Preview view,
| | 05:13 | and once the page loads, go
down to our Browser file button.
| | 05:17 | You can see I get my little
indicator that this is a hot area.
| | 05:19 | I'll click, up comes my dialog box.
| | 05:22 | I think I can move that in a little bit.
| | 05:24 | It looks like we're
losing a bit of the edge of it.
| | 05:26 | That's a little tweak we can make later on.
| | 05:28 | Then if I decide, well actually I
can't really upload anything, I can click
| | 05:31 | on the Close button.
| | 05:32 | I go back to my original state. Pretty cool!
| | 05:35 | Because it looks like it's actually working.
| | 05:37 | So again, we're sort of fleshing out the
experience here for the user and for the client.
| | 05:41 | And to wrap up, I just want
to show you one other example.
| | 05:44 | This one's already been built, but just to give
you a sense of what else you can do with this.
| | 05:48 | I am going to go down to
our Custom Orders page here.
| | 05:50 | I've already built in this
behavior for you and the functionality.
| | 05:56 | But let's just take a look at the situation.
| | 05:57 | I'm going to switch back to my Original view,
and I have two states on this page as well.
| | 06:02 | State 1 which is the one we've been
used the same, and then I've got State 2,
| | 06:06 | which has a little pop-up window.
| | 06:08 | So what I've done here is I've
actually added a fair amount of interactivity.
| | 06:12 | If I show my slices and hotspots here,
you can see there is a few things going on.
| | 06:17 | I have a hotspot over my Add to Cart
button, and that triggers a Swap Image
| | 06:22 | behavior that basically
brings up my little dialog box.
| | 06:25 | On top of the slice that represents the
dialog box, I have two other hotspots.
| | 06:30 | And one hotspot is the Keep Shopping hotspot,
which basically is a Swap Image behavior.
| | 06:35 | We'll take a look there and
you can see onClick, Swap Image.
| | 06:38 | So, basically it'll return us to
the original state of the page.
| | 06:41 | The other hotspot isn't a Swap Image behavior.
| | 06:45 | It's actually a live link.
| | 06:46 | So if we take a look down in the
Property Inspector, you can see we're
| | 06:49 | liking off to cart.htm.
| | 06:51 | So we're creating a very
realistic experience here.
| | 06:54 | They can add to the cart, they can be
told their cart has been updated, they can
| | 06:57 | keep shopping, or they can go to the cart.
| | 07:00 | And it's all done through states.
| | 07:01 | In the next movie, we're going to
wrap this up by exporting the entire file
| | 07:05 | out as HTML and images.
| | Collapse this transcript |
| Exporting an HTML prototype| 00:01 | Welcome back to the final movie in this chapter.
| | 00:04 | In this movie, we're going to make all
of our dreams a reality. We're going to
| | 00:06 | turn this Fireworks design into a
clickable prototype that we can upload to our
| | 00:11 | web server for the client
to review and interact with.
| | 00:14 | This is pretty straightforward process
when it comes to prototyping, because in
| | 00:17 | many cases we're just dealing with
something the client is going to look at.
| | 00:20 | We're not going to be
repurposing a lot of it to begin with.
| | 00:23 | We don't have to spend a lot
of time on the HTML export.
| | 00:26 | So let's go over to our
File menu and choose Export.
| | 00:31 | What I recommend when you're doing
this kind of thing is because Fireworks is
| | 00:34 | going to generate a table
-based layout with this.
| | 00:36 | That's going to create a lot of
images for this table-based sliced layout.
| | 00:40 | You want to have all the stuff put
into its own separate folder, and I've
| | 00:43 | already created the folder there in
my lesson 5 folder called html_export.
| | 00:48 | So I'm going to select that folder.
| | 00:50 | I want to make sure I'm
exporting HTML and Images.
| | 00:53 | I want to export the HTML files.
I want to export Slices or we'll have a
| | 00:57 | pretty boring website.
| | 00:58 | I want to put my images in a subfolder.
| | 01:01 | So the images will be
separate from the actual HTML pages.
| | 01:04 | A really important thing here is to
turn off the Current page only option.
| | 01:08 | This is something that Fireworks
doesn't really seem to remember you doing.
| | 01:12 | It's got of a little issue
there, so always check that.
| | 01:14 | Otherwise you end up only exporting out
one page, which you don't really want.
| | 01:18 | Now, we do have a lot of options
that we can look into, several of these
| | 01:22 | things like Page alignment and so on are
really only useful for the CSS and Images export.
| | 01:27 | We can go into our Table tab and make
some changes here and we can even go
| | 01:31 | into the Document Specific tab and
change file names and so on or add in
| | 01:35 | default alternate text.
| | 01:37 | But I'll be quite honest with you.
| | 01:39 | Because it's just a prototype, you
don't need to worry about this stuff.
| | 01:42 | No one else is going to see this;
| | 01:43 | this isn't going to be the final website.
| | 01:45 | It's going to go up online, the client
is going to click on the buttons and go
| | 01:49 | through the interaction, give you
feedback and then you're going to want to
| | 01:52 | slice up the individual necessary
pieces as graphics and then rebuild the site,
| | 01:58 | preferably using a Style
Sheet rather than using tables.
| | 02:01 | So we're just going to go back to our
General tab and one other little point I'd
| | 02:04 | like to mention here.
| | 02:05 | You'll notice here we have the extension, .htm.
| | 02:09 | Now you can actually change this to
uppercase, lowercase or whatever it happens to be.
| | 02:13 | But a word of warning, remember that
your Fireworks document has links to a
| | 02:17 | whole series of files that are .htm.
| | 02:20 | If you change the extension here,
there's an excellent chance, none of your
| | 02:23 | links are going to work.
| | 02:24 | So I tend to leave these as it is and
actually I don't mind this because when
| | 02:28 | I create my actual production web pages, I
always save those if they're static pages as .html.
| | 02:34 | So immediately, if I look at my folder
structure for a site or a project, I see .htm pages.
| | 02:40 | I know right off the bat
those aren't production pages.
| | 02:42 | So it's just a little thing that
reminds me of what's what, without even
| | 02:46 | having to open a file.
| | 02:47 | So I'm going to leave that
extension the way it is and we'll just click
| | 02:50 | Cancel out of there and we're back to our
main Export dialog box and we just click Save.
| | 02:55 | Now remember, we have our button
symbols placed on the master page, and we've
| | 02:59 | named each of the slices for the button
symbols to represent the function of the button.
| | 03:02 | So what this means is that as
Fireworks tries to export all the pages, it's
| | 03:05 | going to encounter these buttons
on every single page for the export.
| | 03:09 | So you're going to get this little
dialog box about the fact that the button, in
| | 03:13 | this case btn_about.png, already exists.
| | 03:16 | Continue and replace existing files?
| | 03:18 | Just click OK, because you're not
hurting anything, because you only need one
| | 03:21 | version of each of these states for the
button anyway, so you end up with that.
| | 03:25 | We'll just go ahead and we'll do this for
basically as many pages as exist in the design.
| | 03:30 | All right, export is done and we'll just
switch over to our browser and we'll go
| | 03:39 | to File > Open File and
there is my html_export folder.
| | 03:44 | Just go to my index page,
click Open and there we go.
| | 03:48 | There are my mouse-over effects,
essentially what we saw in the intro movie.
| | 03:52 | Click on my custom orders page, I
get my Login option or my option to go
| | 03:56 | to membership signup.
| | 03:58 | Click on my products page, there's my
little accordion panel, I can click on
| | 04:02 | Spicy Bliss and get my other image.
| | 04:05 | I can click back on
Caramel Truffle and get that.
| | 04:07 | I can switch over to the recipes page here.
| | 04:11 | That brings me to my Recipe Finder.
| | 04:13 | Then I can go and upload my own recipe,
and if I choose for to browse for the
| | 04:17 | file, up comes my little dialog box.
| | 04:21 | If I decide I don't want to do
that, I can just click Cancel.
| | 04:23 | I'm back to the original page.
| | 04:25 | The last one we did there
was the custom order one.
| | 04:28 | We'll just login there again,
and we can choose Add to Cart.
| | 04:32 | There is my little dialog box.
| | 04:35 | I can keep shopping, which brings me
back to the original state or I can choose
| | 04:39 | Go to Cart and that brings
me back to the Cart page.
| | 04:41 | So a nice well-rounded prototype experience.
| | 04:44 | We're seeing visual
feedback through rollover effects.
| | 04:47 | We're getting a sense of the
functionality of some of the pages such as the
| | 04:50 | custom order page and the accordion panel.
| | 04:54 | So overall, this is the kind of thing
that you can upload to other client, have
| | 04:57 | them look at it, talk to them on the phone.
| | 04:59 | If there is any other final details
they'd like to adjust, you can always export
| | 05:02 | out another HTML prototype.
| | 05:04 | If they love it just the
way it is, hey, fantastic!
| | 05:07 | You're on your way to
actually producing the final site.
| | 05:11 | That's the beauty of a prototype.
| | 05:12 | You get all the stuff resolved in a
visual manner, without any real coding and
| | 05:17 | it just makes it a lot easier to move
on and get an accurate rendition for
| | 05:21 | your final project.
| | Collapse this transcript |
|
|
6. Creating AIR prototypesUnderstanding AIR| 00:00 | Welcome to Chapter 6, where we're
going to learn about creating AIR
| | 00:03 | application prototypes.
| | 00:05 | I've got one on my screen right
now, my little Bliss Recipe Finder
| | 00:09 | application prototype.
| | 00:10 | You can see I can drag it around the Desktop.
| | 00:12 | I can even expand and collapse the control menu.
| | 00:14 | I can minimize the application.
| | 00:16 | I can close it down completely.
| | 00:19 | I've even mocked up a few behaviors.
| | 00:20 | So I can go ahead and do a search for
the occasion, and I can go inside of this
| | 00:25 | little dropdown menu, pick Bridal Shower
as an example and go ahead and click on
| | 00:30 | the actual Search button.
| | 00:32 | You can see I get a recipe
there suitable for a bridal shower.
| | 00:35 | So that's the kind of thing
we're going to be working with.
| | 00:37 | In this chapter, we're going
to be building out some of this.
| | 00:39 | Some of it already is in place for
you, but we're going to be working on
| | 00:42 | creating all the interactivity and also
creating the additional state where you
| | 00:46 | see things as collapsed like this.
| | Collapse this transcript |
| Examining the structure| 00:01 | Here we are inside of Fireworks.
| | 00:02 | We've got our first page for our Recipe
Finder application that we're going to
| | 00:07 | be working on and we're going to
be building AIR prototype of this.
| | 00:10 | I just want to stress the fact
that this is indeed a prototype.
| | 00:13 | It will function to a degree like the intended
application, but it's not a real application.
| | 00:18 | So just keep that in mind when
you're building them through Fireworks.
| | 00:21 | What you are doing really is
creating essentially a different type
| | 00:24 | of interactive mockup.
| | 00:26 | Let's take a look at how I've structured
this first page and then we're going to
| | 00:29 | add a bit to it as we go.
| | 00:30 | You can see over here on the Layers panel,
I've got three main layers, a display layer.
| | 00:34 | I'll hide that and show you what's
there and what's not there when it's hidden.
| | 00:38 | My search objects layer, which basically
has all the searching elements and then
| | 00:42 | my background, which has
all the background elements.
| | 00:45 | I just try to keep things
a little bit structured.
| | 00:47 | Now inside of the layers, I'll just
expand these guys for a second so you can
| | 00:51 | see I've got one particular extra
structure in here, the background layer.
| | 00:56 | I've put the controller elements for the
opening and closing of the application,
| | 00:59 | saving files and expanding and
collapsing the extra little control panel, in
| | 01:04 | their own sort of sub-layer, so
they're organized and structured together.
| | 01:07 | It just makes it a little easier to
find the stuff as I'm going forward.
| | 01:10 | I'll just collapse all those guys down again.
| | 01:13 | Now, what really makes this a
realistic prototype is the use of a variety of
| | 01:17 | states for the page.
| | 01:19 | Now, let's take a look at the
States panel and see what I mean.
| | 01:22 | I'm going to flip over to the States
panel here and you see currently I have
| | 01:25 | four different states.
| | 01:26 | Now if you recall in the last movie
where I introduced the prototype itself, we
| | 01:30 | saw how you could expand and collapse
the control area and we saw how you could
| | 01:33 | sort of search for a recipe.
| | 01:35 | As I go through these different
states, take a look at these guys.
| | 01:38 | There is my second state and it's
got my mouse-over effects, so my little
| | 01:43 | glowing magnifying glass, my little
glowing buttons and so on and my little sort
| | 01:48 | of blue glowed floppy disk.
| | 01:50 | If I go under State 3, this is
where my little dropdown menu appears.
| | 01:54 | In State 4, we'll see a new
result inside of our combo box.
| | 02:01 | So this has all been scripted out,
there's not really any dynamic
| | 02:04 | interactivity going on here.
| | 02:05 | When the user works with this
prototype or tries it out, at this point, only
| | 02:09 | going to get one result, the Bridal Shower.
| | 02:11 | Now, we're going to add in one more
state here as well, because the one thing
| | 02:15 | that's missing, if you notice here, I
don't have the state with my recipe.
| | 02:18 | I'm going to use State 4
and use it as a duplicate.
| | 02:22 | So what I'm going to do is I've got
the State selected, go to my Options menu
| | 02:26 | and choose Duplicate State.
| | 02:28 | I only want one state and I want it at
the very end, click OK and what I end up
| | 02:34 | with is basically a copy of State 4.
| | 02:36 | So State 5 and State 4 look exactly
the same, but we're going to change that.
| | 02:40 | We're going to go into
our little screen area here.
| | 02:43 | I'm going to delete those two bits of text
and we're going to go and import our recipe.
| | 02:50 | So File > Import and I have
a file in my lesson 6 folder,
| | 02:55 | called recipe_directions.
| | 02:57 | That's the one I'm going to use.
| | 02:58 | I'm going to click Open and I'm just
going to move my cursor inside of my screen
| | 03:04 | area, click once, to insert
everything and there we go.
| | 03:07 | Now we have a state that looks
different than the other states.
| | 03:10 | If I move through, you can see
we have a definite change there.
| | 03:16 | So, we've certainly given ourselves the
full experience here in terms of being
| | 03:20 | able to locate a recipe based on
a specific occasion in this case.
| | 03:25 | Now, a couple of things I want to
point out here with this entire file is
| | 03:28 | that in terms of the creation of it,
I've already gone ahead and drawn the
| | 03:31 | major elements for you.
| | 03:32 | But just to give you a bit of a
breakdown here, if I go back up to my first
| | 03:36 | state and I'll just switch over to my
Layers panel and grab my Pointer tool, I
| | 03:40 | can click on these different objects.
| | 03:41 | You can see that my main sort of
interface area here is a vector.
| | 03:45 | I just drew that with the Pen tool,
just played around with that, adding some
| | 03:48 | curves, creating a nice curvy,
fun candy like kind of interface.
| | 03:52 | Same kind of concept applied for
the background for the control area.
| | 03:56 | That's just another elliptical vector shape.
| | 03:58 | A lot of the button elements you see
here are not actually created by hand,
| | 04:03 | these are all available right inside
of Fireworks in the Common Library.
| | 04:06 | So my Close button, my Minimize button,
my Maximize button and my Save button
| | 04:13 | are all basically Common Library
symbols, really easy to put in.
| | 04:17 | Same thing with my little slider
elements here and my little arrowheads, another
| | 04:21 | Common Library element.
| | 04:22 | In fact, the 2-dimensional Common
Library folder, this is the little gray
| | 04:26 | Play button that I've customized with
styles and I've rotated around and made
| | 04:30 | it point up and down.
| | 04:30 | A couple of other points of note here,
we take a look over here in our display
| | 04:35 | area, rather than having just a plain
old white background, what I've done is
| | 04:38 | I've gone ahead and combined a bitmap
image, the Chocolate that you see in the
| | 04:42 | background with a rounded
rectangle vector shape and used the rounded
| | 04:46 | rectangle as a mask.
| | 04:47 | So I get a nice rounded edge around
the bitmap image and I've also added a
| | 04:53 | couple of live filters to give it
a little more depth and realism.
| | 04:56 | If you take a look down here in the
Properties Inspector, you can see we've got
| | 05:00 | a couple of different ones going on
here, an Inner Bevel, we've got a Curves
| | 05:05 | live filter which is basically
controlling the brightness and saturation of our
| | 05:08 | bitmap image, and then we've got an
Inner Shadow for one side and then another
| | 05:12 | Inner Shadow for the bottom edge.
| | 05:14 | So we get that sense of depth that's
been applied there and it's a great
| | 05:18 | example of working with vectors as masks for
your bitmap elements, so ties in really nicely.
| | 05:24 | One other little point I'll mention
here is my little logo here, my Recipe
| | 05:28 | Finder is running along in a curve and that's
plain text that's been attached to a vector path.
| | 05:33 | So I can literally go in there with my
Subselection tool if I want and I can
| | 05:37 | actually change the direction of that
path and the text will end up flowing
| | 05:41 | around that element.
| | 05:42 | So I've got a little bit
of flexibility there too.
| | 05:46 | So that's a breakdown of the design of the file.
| | 05:48 | In the next movie, we're going to be
adding interactivity to the file, so we can
| | 05:51 | start making it behave the way
we want the application to behave.
| | Collapse this transcript |
| Adding rollovers| 00:00 | We are going to be adding some
interactivity in AIR events to our prototype now.
| | 00:04 | Now, we are going to be focusing
specifically on the AIR events here, and some
| | 00:08 | of the mouse-over effects.
| | 00:10 | We'll be working with a couple of
other interactive elements once we build
| | 00:13 | out the second page.
| | 00:14 | So let's take a look over here. We've
got our three little buttons and I am
| | 00:17 | going to switch over to my second
state, just to see what these look like.
| | 00:20 | And right inside the Layers panel
I can switch between states really easily.
| | 00:24 | You can see that we have a few changes
here, basically all of these interactive
| | 00:28 | elements have changed,
including also our Search button.
| | 00:31 | So what I want to do is I want to set
up my slices based on this rendition of
| | 00:34 | the different states, because
we have a glow around these guys.
| | 00:37 | It's little hard to see maybe, but we
actually have an outer glow applied to
| | 00:41 | each of these three buttons.
| | 00:42 | And I want to make sure
the slice includes that glow.
| | 00:45 | If I was to create my slices based on
the up state, the slice might be too small.
| | 00:49 | It wouldn't get the same effect.
| | 00:51 | So I am going to go here and just
Shift+Click to select all three buttons.
| | 00:55 | You'll notice that they are very close
together, but they aren't overlapping
| | 00:59 | each other, which is important with slices.
| | 01:01 | With all three of those guys selected,
I am going to right-click and choose
| | 01:04 | Insert Rectangular Slice, and we've seen
this little message before because I've
| | 01:08 | got multiple objects selected,
Fireworks wants to know what I want to do.
| | 01:11 | Do I want a single slice or multiple?
| | 01:13 | Well, in this case, I
definitely want multiple slices.
| | 01:16 | There's my three pieces right there
and I am going to apply a simple rollover
| | 01:20 | effect to these guys.
| | 01:21 | What we are going to do here is
I've got them all currently selected.
| | 01:24 | I am just going to click on one of the
behavior candles you see, that little
| | 01:29 | circle under each slice, and just
choose Add Simple Rollover Behavior.
| | 01:33 | Now you may be wondering, why am I
doing this on the second state as opposed
| | 01:37 | to the first state?
| | 01:38 | The beauty of the slices, the
interactive elements, hotspot and slices, is they
| | 01:42 | are not state dependent.
| | 01:43 | They are going to be on every single state.
| | 01:45 | So whether I set the behavior here in
State 2 or set it in State 1, the same
| | 01:49 | behavior is going to apply.
| | 01:50 | So we've created our simple rollover effect.
| | 01:52 | So let's just do a quick little preview.
| | 01:54 | I am going to switch back over to
State 1, switch to my Preview view.
| | 01:58 | And as I mouse over the buttons, you can see
we get a little mouse-over effect. Pretty cool.
| | 02:04 | Okay very simple thing to
do, really quick and easy.
| | 02:07 | And now we are just going to hop back
to our second state again, just to take a
| | 02:11 | look here, and switch back to our Original view.
| | 02:14 | And bring our slices and
hotspots back into play.
| | 02:17 | Two other things I want to add in
here, actually three others, I want to
| | 02:20 | create a slice for my little Collapse button
to reduce the panel down to a minimize state.
| | 02:26 | I also want to create a slice for my
floppy disk and also for my magnifying glass.
| | 02:31 | So start off with these two here, select
both of those and again just as before,
| | 02:35 | right-click, Insert Rectangular Slice,
choose multiple slices, and then again
| | 02:41 | just click on any of the behavior
handles and choose Add Simple Rollover.
| | 02:45 | So that's worked out fairly well.
| | 02:46 | Now the last one here.
| | 02:47 | You'll notice that it kind of extends into
my other fields, my combo boxes and so on.
| | 02:53 | So I am thinking that what I want to
do with this before I go any further is
| | 02:56 | probably make a change to that
glow, because it's a bit too big.
| | 02:59 | So I am just going to hop down to my
Filters in my Properties Inspector.
| | 03:03 | I am going to click on the little Eye
icon, and I am just going to reduce the
| | 03:08 | glow a little bit from the Width, so
it will be a little bit closer to the
| | 03:11 | object itself, and maybe just make
it a little bit smaller. Here we go.
| | 03:15 | So you can see now the bounding
corners for that object are now not touching
| | 03:20 | anything else, which is important to do.
| | 03:22 | You want to try to
minimize that if at all possible.
| | 03:24 | And again, just like before right-click,
Insert Rectangular Slice, and behavior handle,
| | 03:30 | Add Simple Rollover Behavior.
| | 03:32 | All right, so we've got our basic
rollover effects created for us.
| | 03:35 | Now we're ready to add in some AIR
events and we are going to work on that
| | 03:38 | in the next movie.
| | Collapse this transcript |
| Adding events| 00:01 | All right, in the last movie we added
some simple rollovers to one of our button
| | 00:04 | and control elements inside
our little AIR application.
| | 00:07 | In this movie, we're going
to add a couple of AIR events.
| | 00:10 | So that in the long run, this
application or this prototype will behave much
| | 00:13 | like the application should behave.
| | 00:15 | So I am going to select my
Pointer tool, make sure it's selected.
| | 00:18 | First thing, I am going to
do is grab my Bliss logo here.
| | 00:23 | Now the whole thing about an AIR
application is that you want to be able to move
| | 00:27 | it around the screen, especially one
like this and it obviously looks like it's
| | 00:30 | designed to be floating on top of a desktop.
| | 00:32 | You don't want to just have
to minimize it and maximize it.
| | 00:34 | You want to be able to stuff it
over in the left corner if you want.
| | 00:37 | So we're going to add a drag event to
our logo, and I am going to do this using
| | 00:41 | hotspots rather than slices.
| | 00:43 | You can use either type of
interactive element, slices or hotspots.
| | 00:46 | But we are not adding any rollover
effect to this, so I am just going to work
| | 00:49 | with the plain old hotspot.
| | 00:51 | So again, right-click on
the object, Insert Hotspot.
| | 00:55 | It's that easy to get that in there.
| | 00:56 | And the AIR events are
found inside the Commands menu.
| | 00:59 | So we're going to go up to the Commands
menu, and you can see here AIR Mouse Event.
| | 01:03 | We've have got four to choose from:
| | 01:04 | Close, Drag, Maximize and Minimize.
| | 01:07 | So we're going to choose the Drag
option, and that's going to allow us to
| | 01:10 | literally click on that little logo,
when the application is running, and drag
| | 01:14 | it anywhere we want on the screen.
| | 01:16 | Now we can also add in other hotspot
areas, so we can put draggable parts on all
| | 01:20 | four sides for that matter if you want.
| | 01:22 | So it's really up to you, how
much interactivity you want there.
| | 01:25 | What I'd recommend really is seeing
as you're running this by the client,
| | 01:28 | just to explain them that you
drag the logo and it moves the whole
| | 01:30 | application around.
| | 01:31 | But if you want to put hotspots in the bottom
or the left and the right side, go right ahead.
| | 01:35 | So there is our first AIR event. We are
going to add in a couple more and we're
| | 01:39 | going to utilize our little
button controls over here to do that.
| | 01:42 | So I am going to select the hotspot for
my closing of the application and again
| | 01:48 | with that selected, I am going to go to
my Commands menu, AIR Mouse Events, and
| | 01:53 | I am going to choose Close.
| | 01:55 | Now another thing I want to point out,
as I am adding these in, Fireworks is
| | 01:58 | actually writing the JavaScript
code for me in the Link box down in the
| | 02:01 | Property Inspector.
| | 02:02 | If you take a look down here, events,
onMouseDown equals, and basically it's a
| | 02:07 | JavaScript command for
closing the entire application.
| | 02:10 | So that command is going to be
included in the final prototype.
| | 02:12 | We'll do the same thing with our
Minimize button and we'll go up to our
| | 02:16 | Commands menu again, and we will
choose AIR Mouse Events > Minimize and
| | 02:21 | this will minimize the
application down to the Task Bar.
| | 02:24 | And then the last one here, our plus
sign, although we don't really have a
| | 02:27 | lot to maximize too.
| | 02:28 | We are going to add that in there anyway.
| | 02:30 | We'll go to Commands > AIR
Mouse Events and choose Maximize.
| | 02:34 | So we've added all four different AIR
events pretty quickly and if you are
| | 02:38 | proficient with JavaScript, you can
actually create your own JavaScript commands
| | 02:41 | that can be added into that Commands menu.
| | 02:43 | In the next movie, we're going to add
additional interactivity to really make
| | 02:47 | the prototype appear functional.
| | Collapse this transcript |
| Adding interactivity for realism| 00:01 | In the last movie, we added in our AIR
events to help our prototype be a little
| | 00:04 | more like an AIR prototype.
| | 00:06 | In this movie, we're going to be adding
an additional interactivity to make some
| | 00:09 | of the screens appear functional.
| | 00:11 | Before we get into that though, just a
couple of little things, you'll notice
| | 00:14 | I've added a lot of different slices
and hotspots, and they are all appearing
| | 00:17 | inside of our Web layer.
| | 00:18 | Now, by default when you add hotspots and
slices, they just come up with a generic name.
| | 00:23 | So, before you get too far into things,
you may want to just go through and give
| | 00:27 | these especially the slices, because
they could end up being exported to those
| | 00:30 | graphics, you may want to just name
these, if for no other reason than the fact
| | 00:34 | they are easier to find later on.
| | 00:36 | I'll just go ahead and do that.
| | 00:38 | Search, and save, and collapse.
| | 00:48 | So, I am basically giving these names that
are based on the function of the buttons.
| | 00:53 | I am selecting them in the Layers panel,
and then we're having a quick look over
| | 00:56 | on the canvas to see what
button is currently selected.
| | 01:00 | Slice, this one here is my minimize and
the last one was going to be my close, okay.
| | 01:07 | And the hotspot ones, unless you
have a lot of hotspots again, you don't
| | 01:10 | necessarily have to add those, but I'll just go
up there and change that name as well to drag.
| | 01:15 | Just so I know what it's for,
because we're going to be adding more
| | 01:18 | interactive elements.
| | 01:19 | So, it's nice to sort of name
them now before you get in too deep.
| | 01:22 | All right, now we're going to switch
over to the States panel here for a minute.
| | 01:27 | You're currently on State 2, which
showed us all of our rollover effects.
| | 01:31 | State 3, you can see right
under the combobox called occasion,
| | 01:34 | we now have this little drop-down menu.
| | 01:37 | And this table is built in the same way
I've built all my tables inside our Fireworks.
| | 01:40 | I use the Grid Auto Shape and just
choose my color based on other colors that
| | 01:44 | are inside to the design, and I have
dropped in my little text labels on top.
| | 01:48 | These are all separate bits of text;
they aren't part of the actual Auto Shape.
| | 01:51 | Now, what we want to do is we need
to create some interactivity here.
| | 01:55 | I need to be able to have someone
click on the occasion combobox and have the
| | 01:58 | drop-down menu up here.
| | 01:59 | So, we're going to be
building in a couple of things here.
| | 02:02 | Start off with, we're going
to select the actual combobox.
| | 02:05 | I am going to right-click and
I am going to choose Insert Hotspot.
| | 02:08 | I am not going to worry about any
rollover effect for that combobox itself.
| | 02:13 | That's my first step.
I am adding in that hotspot.
| | 02:15 | We're going to add in little more of an
involved behavior, but I need to add in
| | 02:18 | another interactive element, so that these
two things can literally talk to each other.
| | 02:22 | So, I am going to grab my Grid Auto
Shape. I am going to right-click on that,
| | 02:27 | and in this case, I want this to be a
slice, because I am going to be swapping
| | 02:30 | out information from one area, one
state and replacing it with the information
| | 02:35 | that's on this state.
| | 02:36 | So, I am going to go ahead and
choose Insert Rectangular Slice.
| | 02:39 | All right, now that I've got these two together,
| | 02:41 | I'll just take a look at my naming
structure here. Here is my slice.
| | 02:46 | I'll call this slice menu
and there is my hotspot.
| | 02:50 | I'll call it combobox and what I want to do
is basically make these two things interact.
| | 02:56 | So, first step, I am going to click on
the little behavior handle in the hotspot.
| | 03:00 | And I am going to choose Swap Image
Behavior and what I want to do is I want to
| | 03:05 | select that little slice that I had
setup in this current state and what I want
| | 03:10 | to happen is I want that area to be
swapped out for the information in State 3,
| | 03:15 | because State 3 is where my
little drop-down menu appears.
| | 03:19 | I want to make sure I don't restore the
image on onMouseOut because I want it to
| | 03:22 | be a semi-permanent thing and click OK.
| | 03:26 | Now one of the little characteristics
of these behavior events is a lot of them
| | 03:29 | tend to be triggered onMouseOver.
| | 03:31 | Now, I don't want this to
be triggered onMouseOver.
| | 03:33 | I want this to be triggered onClick.
| | 03:35 | So, I am going to bring up a new panel here.
| | 03:37 | I'll go to my Window menu and choose
Behaviors and if you're working with
| | 03:41 | interactivity beyond the basics, the
Behaviors panel is something you're going
| | 03:44 | to be working with and you can see here
I've got an event onMouseOver and
| | 03:48 | I've got an action Swap Image and I can scroll
over and see what's happening in that Swap Image.
| | 03:53 | What I want to do is change the event,
change it from onMouseOver to onClick.
| | 03:59 | So, now when I move my mouse over to
the combobox, nothing will happen until
| | 04:02 | I click on it, which is just what I want.
| | 04:04 | Now, I am going to select the slice
where the drop-down menu is and we're going
| | 04:08 | to add an event to this as well.
| | 04:10 | I want to add another Swap Image event,
because eventually I want this little
| | 04:13 | drop-down menu to disappear.
| | 04:14 | So, we're going to be adding a
couple of other behaviors here.
| | 04:16 | So, I am going to go and choose from
my behavior handle again, Add Swap Image
| | 04:21 | Behavior. I am going to again click
on that main menu area where my little
| | 04:27 | drop-down menu is appearing and in
this case, I want this to be swapped back
| | 04:31 | out to state number 4.
| | 04:35 | And we'll take a look at what's in
the state number 4 in just a second.
| | 04:38 | Uncheck the Restore onMouseOut,
click OK, and again you'll see we get
| | 04:42 | the onMouseOver event.
| | 04:44 | So I am just going to click on
that and change it to onClick.
| | 04:47 | Now, if I switch over in my Layers panel
here to state number 4, you'll see what
| | 04:51 | state number 4 looks like.
| | 04:53 | The menu is disappeared and we
have new information in the combobox.
| | 04:56 | So, I think you can see the logic behind
this now, the steps that we're needing to do.
| | 05:00 | So, essentially by clicking on the drop-
down menu, we end up going to the next state,
| | 05:04 | and that next state shows us
Bridal Shower as the search option.
| | 05:08 | So we're sort of faking the interactivity,
but that's the idea behind a prototype.
| | 05:12 | It's not going to be dynamic
application itself. We're just trying to mock that up,
| | 05:16 | so we can get a user-
experience rolling along here.
| | 05:20 | Okay, so just take a look at that slice again.
| | 05:22 | onClick, Swap Image, and just
double check state number 4, okay great.
| | 05:27 | So, I am just going to collapse down my
Behaviors panel here and just to shift
| | 05:30 | it over to the side.
| | 05:30 | Now, if we follow through with this
interactivity, someone who has chosen a
| | 05:34 | category, the next thing we want to
be able to do is search for a recipe
| | 05:38 | within that category.
| | 05:39 | In order to do that, we're going to
tie in the Search icon here with another slice,
| | 05:43 | and that slice is not yet created.
| | 05:45 | So, we're going to hop over to state
number 5, and I am just going to go ahead
| | 05:50 | and select my three little pieces from
my recipe and what I am going to do is
| | 05:55 | right-click and choose Insert Rectangular Slice.
| | 06:00 | In this case here, even though I've got
multiple items selected, I want one big
| | 06:03 | slice, so I am going to choose Single slice.
| | 06:05 | We just want that whole area to be replaced.
| | 06:08 | Now that I've got that put in, back
over to my Search icon here, and click on
| | 06:12 | the behavior handle, Add Swap Image
Behavior. I am going to select the other new
| | 06:17 | slice I've just created.
| | 06:18 | Now notice I haven't got a name for
that yet, so I'll have to watch that.
| | 06:21 | And I am going to switch
that over to state number 5.
| | 06:25 | And again, I am going to deselect my
Restore image onMouseOut. Click OK.
| | 06:30 | If I bring up the Behaviors panel one
more time, you'll see here I've got two
| | 06:33 | onMouseOver events going on.
| | 06:35 | In this case, I've got the onMouseOver
event, a simple onMouseOver event, which
| | 06:38 | is changing the magnifying glass from
its regular state to that glowing state,
| | 06:43 | and I've got this other one that we've
just added in and this is the one we are
| | 06:45 | going to change, with the
event from onMouseOver to onClick.
| | 06:50 | And we'll just double-check and see yeah,
there is our basic concept there and
| | 06:54 | I'll just minimize that.
| | 06:56 | Now, one last little bit I'll do in
here, a little bit of housekeeping.
| | 06:59 | I've got that last slice I added in.
| | 07:01 | I am just going to double-click on
that and I am going to call it directions.
| | 07:06 | Just to be sure, I am going to double
check my events here to make sure that
| | 07:10 | nothing got amiss and Fireworks has
handily updated the information and said
| | 07:14 | okay, it's not now grabbing
from some generic auto named slice.
| | 07:18 | It's now grabbing from the slice called
directions, which is exactly what I wanted to see.
| | 07:21 | All right, so we've now added in a
whole bunch of different interactivity.
| | 07:26 | In the next movie, we're going to
take this entire page and we're going to
| | 07:29 | move it into a new state, so that we can
show a collapsed version of our Control menu.
| | Collapse this transcript |
| Adding a new state with pages| 00:00 | Well, our prototype is moving along
quite nicely but there is a few more
| | 00:04 | things I'd like to do to make it even more
realistic and really add to the user experience.
| | 00:08 | We've got this little Control panel up top
here and it's currently always maximized.
| | 00:13 | I'd like to set up a view of this
application, where that Control panel is
| | 00:17 | minimized or it's out of the way.
| | 00:19 | So we are getting a more
interactive kind of feel.
| | 00:22 | Now, I can't do this with just slices,
because I already have multiple slices
| | 00:26 | setup inside of the Control panel, and
if it worked at all, it would probably be
| | 00:31 | a bit of a mess in terms of organizing things.
| | 00:33 | So we are going to work with this in a
different way by generating a new page.
| | 00:37 | The great thing is everything we
need is already here to get rolling.
| | 00:41 | So we're going to create a brand new
duplicate of this page by dragging from the
| | 00:45 | Pages panel, right down, and create a new copy.
| | 00:49 | I am going to right away rename this to
Collapsed and we can work on this file.
| | 00:55 | This is the one where we are going to
actually change location of those Control
| | 00:58 | buttons and the little rich magenta background.
| | 01:02 | Now, it's tempting to think I could do
this by sharing this layer to different
| | 01:05 | states, but remember I've got mouse-
over states involved that if I try to share
| | 01:09 | this layer, I am going to
lose my mouse-over events.
| | 01:12 | So we are going to do this in another
way that is actually kind of cool as well.
| | 01:16 | I am going to separate my States panel
from my Layers panel so that I can see
| | 01:19 | both of them, and I am going to
minimize, make some room here. There we go.
| | 01:26 | One of the nice things about the States
panel is it also supports onion skinning,
| | 01:30 | which is really handy for
animation, but it also has other uses.
| | 01:34 | If we take a look over here on the
left hand side of the States panel, we can
| | 01:37 | see our Onion Skin Setting.
| | 01:38 | I am just going to go and
click on the bottom state here.
| | 01:41 | So I grabbed all my five states, and
I am going to now go over to my Canvas area,
[00:01:448.07]
my Pointer tool.
| | 01:49 | And I am going to click and drag
around all of the different objects on my
| | 01:53 | screen here, of my background.
| | 01:55 | Now I don't need to worry about
grabbing everything. As long as my cursor runs
| | 01:58 | through all the objects I need and not
through any of the objects I don't need,
| | 02:02 | then this will work out just great.
| | 02:04 | So I have got all of them selected
including the slices at this point.
| | 02:08 | What I am going to do now is use my Arrow
key and my Shift key to move down, five clicks.
| | 02:14 | There we go.
| | 02:15 | Now what's really cool about this that
you may not realize is what we have done
| | 02:19 | is we have selected the objects on
every single state at the same time, and
| | 02:24 | we've moved them all at the same time.
| | 02:26 | So we have saved a lot of steps.
| | 02:29 | So if I go into any one of these individual
states, I will get rid of my onion skinning.
| | 02:33 | I'll move the State 2, State 3, State 4.
| | 02:35 | You can see the collapsing has
happened on every single one.
| | 02:38 | I haven't had to go into every single
state and make all those moves myself.
| | 02:42 | I still have a little bit of cleaning up
to do, but this has saved a lot of steps.
| | 02:47 | So first thing I want to do is
get rid of these extra slices.
| | 02:51 | These are no longer needed, because
those buttons aren't going to be functional
| | 02:54 | in the collapsed version.
| | 02:55 | So I am going to delete those, and I do
need my slice for my Collapse icon, but
| | 02:59 | I want to make some changes to this.
| | 03:01 | So I am going to hide my slices and
I am going to select that little graphic,
| | 03:07 | right-click on it, go to
Transform, and choose Flip Vertical.
| | 03:12 | So now it's pointing upwards and I
think I will nudge it up by 1 pixel, just so
| | 03:16 | it's not quite touching the
base of our little interface.
| | 03:18 | I will bring the slice back in place,
and do the same thing with that.
| | 03:22 | Just nudge it up by 1 pixel. There we go.
| | 03:24 | We have to deselect and then
reselect the slice, there we go.
| | 03:28 | So now that's in place.
| | 03:30 | Let's take a look at State number 2.
| | 03:32 | Here again, we'll have I guess a
little bit of cleaning up to do.
| | 03:35 | So we moved a lot of stuff all at once,
but it's not quite so easy to move
| | 03:38 | little individual bits.
| | 03:39 | So these fellows here, we are going to
have to flip around essentially on our own.
| | 03:43 | So Transform > Flip
Vertical, move it up 1 pixel.
| | 03:47 | Same idea for the next one, Transform
> Flip Vertical and move it up 1 pixel,
| | 03:53 | and second last one, Transform.
| | 03:57 | Remember, I am right-clicking on the
object or Ctrl-Clicking with the Mac to
| | 04:00 | bring up the context menu.
| | 04:02 | Flip vertical, and nudge it up 1 pixel,
and that one is already done. So, oops!
| | 04:06 | I knew there was one in there,
somewhere I missed, okay. Transform > Flip
| | 04:12 | Vertical, and nudge it up 1 pixel.
| | 04:15 | So now, we have essentially got a
whole new condition to our application.
| | 04:19 | We have got an expanded version
and we have got a collapsed version.
| | 04:24 | Last thing I want to do with this is
I want to take a look at that hotspot
| | 04:26 | again, because it's going to
have to change what it does.
| | 04:30 | So I am going to click once on it and
you can see right now, it actually has no link,
| | 04:34 | not pointing to anything.
| | 04:35 | So I want to change that link.
| | 04:37 | I am going to click on the List option
and choose Expanded and just lock that
| | 04:43 | into place by pressing the Return key.
| | 04:45 | Other thing I want to do, I forgot to
do this one earlier I guess, is I want
| | 04:49 | to rename these guys.
| | 04:50 | So that's going to be my Expand option
and let's see what else we've got here.
| | 04:57 | My Search one, and let's see.
My Menu and my Directions.
| | 05:07 | I'll just make I do the same thing
with my other version as well.
| | 05:11 | I will just double-check my
behaviors to make sure I do have my rollover
| | 05:13 | effects still in place.
| | 05:14 | So Window > Behaviors.
| | 05:17 | They are still there, so that's good
to go, and we'll just flip over to the
| | 05:20 | expanded page again, and
just double-check and see.
| | 05:24 | These guys are all named okay.
| | 05:26 | So it looks like some of the names
got lost when we created the duplicate.
| | 05:31 | One last little step here.
| | 05:32 | My Collapse slice for the expanded page
needs to link off to our collapsed version.
| | 05:38 | So there we have gone ahead and
relatively quickly created an entirely new
| | 05:42 | look to the interface.
| | 05:44 | In this case, working with a
page to bring out that look.
| | 05:47 | In the next movie, we are going to
review and troubleshoot the prototype.
| | Collapse this transcript |
| Troubleshooting| 00:00 | Well, we are pretty close to actually
creating our AIR prototype here, but
| | 00:04 | before we actually create the file,
let's just check things out and test things
| | 00:08 | to make sure they are working fine.
| | 00:10 | So, up in the Commands menu, we see an
option here for Create AIR File, the same
| | 00:13 | command we'll use to actually create the
AIR file in the installer but there are
| | 00:17 | a couple of nice little features in
here that we can use before we even get to
| | 00:21 | the stage of having that installer built.
| | 00:23 | Right down, near the bottom, you
are going to see a Preview option.
| | 00:26 | So, we are going to click on the
preview and that will essentially generate the
| | 00:29 | entire AIR file and we can take a look
and see what's going on and what do you know?
| | 00:33 | We have a list of one issue
here and that's the fact that we have got
| | 00:37 | browser chrome all the way around things.
| | 00:39 | So, we are going to have
to do something about that.
| | 00:42 | I can certainly stretch that out but
all that doesn't get rid of my scroll bar,
| | 00:45 | as it doesn't get rid of the browser chrome.
| | 00:47 | So, we are going to want to change that.
| | 00:48 | I'll just double-check everything
else. I move my mouse over my different
| | 00:52 | buttons, they all seem to
be working, and it's great.
| | 00:55 | If I click on the collapse option, it collapses.
| | 00:57 | I click on the expand
option, it expands, excellent.
| | 01:00 | I can drag things around from the logo.
| | 01:03 | Let's try my search element here.
| | 01:04 | I can click on my combo box.
| | 01:06 | There is my little menu, click back on it,
hang on a second, I'll try that again
| | 01:11 | and again, my actual name in my combo
box isn't changing when I click away and
| | 01:16 | you might remember we set things up
so we thought to make sure that that
| | 01:20 | actually changed, to get added
to the realism of the prototype.
| | 01:23 | So, that's one thing we are going to look at.
| | 01:25 | Assuming we actually were able to set
that search parameter correctly, let's
| | 01:28 | click on the search icon and okay there
is our recipe and oh, hang on a second.
| | 01:35 | I click in the search icon, I move
my mouse away and I lose my recipe.
| | 01:39 | Okay, so there is a couple
of things we have to address.
| | 01:42 | So, let's close down this preview
version and we'll cancel out of our AIR File
| | 01:48 | dialog box and let's take a look at
these problems, a couple of ones that are
| | 01:51 | happening based on the
actual application itself.
| | 01:55 | So, the first one we were running into was
the problem with our little search area here.
| | 02:00 | So, let's take a little closer look at this.
| | 02:02 | Let's zoom in and let's bring up our
Behaviors panel as well, because we might
| | 02:07 | need that too, here we go.
| | 02:10 | So, when we take a look here, our
Behavior indicates when we select that
| | 02:15 | slice, okay, I onClick, Swap Image, but if
you take a close look, here is what's going on.
| | 02:22 | When we drew the original slice, we based
it on the actual size of that little table.
| | 02:26 | The problem we are running into is
that the combo box that changes in State 4
| | 02:30 | isn't part of the slice and in order
for the Swap Image to work correctly.
| | 02:33 | We actually have to extend the slice.
| | 02:35 | So, I am going to use my Pointer tool
and I am going to drag that up just above
| | 02:41 | the slice itself, there we go.
| | 02:44 | And now the slice includes the combobox.
| | 02:48 | Now, the other thing to watch for here
is we have the hotspot and we have the
| | 02:51 | slice, and you want to watch the
stacking order of these elements.
| | 02:54 | Right now the slice menu is on top of
the combobox hotspot, and that's probably
| | 02:59 | going to cause some issues for interactivity.
| | 03:01 | So, we are just going to go into our Web
Layer panel here and drag the menu down
| | 03:06 | below the combobox, so now the
hotspot is definitely on top of the slice.
| | 03:11 | All right, so we'll make sure we
maintain our clickable interactivity there.
| | 03:15 | Now, the other issue we have, I will zoom
back out again, was with our search area.
| | 03:20 | So, let's just select that
slice and look at the behaviors.
| | 03:24 | Okay, and what we've got
here, we've got two behaviors.
| | 03:27 | We have got the simple rollover to
change the magnifying glass to a glowing
| | 03:32 | state and we have got our onClick event,
which basically changes the display
| | 03:36 | area to show up the recipe.
| | 03:38 | Now, here's the issue.
| | 03:40 | The onMouseOver event is basically
sort of taking control of what's going on,
| | 03:45 | because it's a simple onMouseOver event.
| | 03:47 | When you move your mouse away from the
object, it's supposed to spot back to
| | 03:51 | the original state.
| | 03:52 | The problem is that swapping back is
actually controlling our recipe area or
| | 03:57 | display area as well.
| | 03:59 | There is no magic bullet to fix this one.
| | 04:01 | So, we have to sort of
decide what's more important.
| | 04:04 | Do we need to see the onMouseOver event
in the markup or do we need to have that
| | 04:07 | realism of the recipe displaying?
| | 04:09 | And my vote is to show that
little recipe in the display area.
| | 04:13 | So, all we have to do is select
the onMouseOver event and trash it.
| | 04:17 | So, now we've just our Onclick event
and that should solve that problem.
| | 04:23 | Okay, now let's have a look in our
Commands menu again, go to Create AIR File
| | 04:30 | and the other problems we ran into
are based on setting in the application
| | 04:34 | settings for the Create AIR File dialog.
| | 04:36 | You look down here where it says Window Style,
the default setting here is System Chrome.
| | 04:40 | So, we are going to change that to Transparent.
| | 04:43 | That's step number one.
| | 04:45 | Now, we have an application here that
has a drop-shadow, so chances are even
| | 04:49 | when we are set to transparent, we
could run into a problem where we
| | 04:52 | actually see the scrollbar.
| | 04:54 | So, let's just double-check and see
what happens, click on the preview and
| | 04:58 | indeed, we now have a transparent
background but you can see I still have
| | 05:01 | scrollbars along the sides.
| | 05:03 | So, we'll just close that and we'll
change these settings here and if I add
| | 05:07 | about 4 pixels to each dimension,
that gives us a nice safety zone.
| | 05:12 | So, I have set it to 554x390 and we'll
just do a quick preview again. There we go.
| | 05:19 | That's the way it should look.
| | 05:20 | So, we'll just close that down and
there we have done some troubleshooting.
| | 05:24 | Great idea to check your stuff before you
create your package and send it off to the client.
| | 05:28 | It never hurts to double-check.
| | 05:29 | It never hurts to have a second
set of eyes to go over things.
| | 05:32 | In the next movie, we are going to
actually get to that point where we create
| | 05:35 | our AIR file and have a test of
the installation, once we are done.
| | Collapse this transcript |
| Creating the AIR prototype| 00:00 | Welcome to the last movie in our
chapter on creating an AIR prototype, and if
| | 00:05 | you are like me, you are just chomping
up the bit, you want to get this puppy
| | 00:08 | created and turned into something that we
can pass off to a client and have them look at.
| | 00:13 | So a couple things I have done in the
meantime since the last movie is I have
| | 00:17 | saved my file and I have put it in its
own folder inside of my exercise files,
| | 00:23 | and this is going to be helpful
because it will keep all of the various and
| | 00:26 | sundry files that are created by AIR in
one location, and it's not going to sort
| | 00:31 | of spread them all around
inside of a folder of other stuff.
| | 00:34 | So it's a good idea, a good tip to do that.
| | 00:37 | That way you don't have to
worry about rummaging around to find
| | 00:40 | various associated files.
| | 00:41 | Now before we do the export, just a
couple of other points that I want to mention.
| | 00:45 | You noticed when we did the preview
that we actually had a transparent
| | 00:48 | background and our drop shadow looked
kind of cool when moved around the desktop.
| | 00:51 | That's a combination of couple of things.
| | 00:53 | First of all, our background here
has been set from the very beginning to
| | 00:57 | transparent or canvas.
| | 00:58 | A very important step.
| | 01:01 | The other really important step is
in the Optimize panel making sure that
| | 01:05 | everything is exporting out at PNG 32.
| | 01:09 | That gives you that variable transparency,
so you get realistic shadows and glows.
| | 01:12 | It's really important if you want to
have that odd-shaped interface like we have
| | 01:16 | got here that's not a regular rectangle,
and you want to have things like a drop
| | 01:19 | shadow and stuff like that, PNG 32 is
the way to go with this prototype export.
| | 01:24 | Now the last little bit I want to do
with this is I am going to basically drag
| | 01:29 | over the entire application, and
actually what I think I will do even to be more
| | 01:35 | assure of this is I will make use of
our little Onion Skinning feature before I
| | 01:38 | go ahead and do that. Here we go.
| | 01:41 | I have basically selected
all of the different states.
| | 01:43 | I will just drag over that one more time,
and I will just make sure by selecting
| | 01:49 | it again that everything
is being exported at PNG 32.
| | 01:51 | I will do that for the
collapsed version as well.
| | 01:56 | It never hurts to be sure on these things.
| | 01:59 | Again, just drag over the entire
application and check on to PNG 32 again just
| | 02:06 | to make sure everything
is going the way we want.
| | 02:08 | All right, so that's that.
| | 02:10 | Now we are going to go to
our Commands > Create AIR File.
| | 02:16 | That's a pretty lengthy dialog box
we've got to work with, but I am going to
| | 02:18 | help you through the whole thing here.
| | 02:20 | There are some elements that are
mandatory, some that are optional.
| | 02:23 | Anything with an asterisk you have to
have information, and anything without an
| | 02:27 | asterisk is an optional choice.
| | 02:29 | The first thing I want to do
though is change the name of this.
| | 02:32 | Rather than calling it recipe_working6,
let's call it, Bliss NO.5 Recipe Finder,
| | 02:43 | and the ID also is mandatory, and
it bases its name on the file name.
| | 02:48 | So I am going to change
that though from recipeworking.
| | 02:50 | I am going to be really positive about
this and I am going to call it recipefinal.
| | 02:54 | I am going to add in a copyright here
as well, Copyright 2009 Bliss NO.5.
| | 03:07 | There is that System Chrome.
| | 03:08 | You might recall that from the previous movie.
| | 03:10 | We will change that to Transparent.
| | 03:11 | We will set our width to 554 and our
height to 390 to eliminate any chance of any
| | 03:18 | scrollbars popping up.
| | 03:20 | Here is another one down
here, Select icon images.
| | 03:24 | This gives us the ability to actually
apply application icons to the file for
| | 03:29 | shortcuts and aliases and so on.
| | 03:31 | The trick with this is you need to
have the files ready to go, which we do,
| | 03:35 | I have already put those together for
you and they have to be exactly the same
| | 03:40 | size as are listed in this dialog box.
| | 03:43 | So 128x28 pixels and so on.
| | 03:46 | You can't cheat though.
| | 03:47 | You can't put in the same file four times
and hope that it'll scale one way or the other.
| | 03:52 | They have to be individual files
and they have to be an exact match for
| | 03:55 | the current dimensions.
| | 03:56 | So we will browse for these guys and I have
got all these fellows inside my AIR folder.
| | 04:01 | Here is my blisslrg, and grab my
blissmedium, blisssmall, and last but not least,
| | 04:11 | that really tiny
bliss icon. There we go.
| | 04:15 | So all four of them are
selected and we will click OK.
| | 04:18 | Next spot down, Installer Settings.
| | 04:21 | Contents, Use Current Document?
| | 04:22 | Yeah, that's a pretty good idea.
| | 04:24 | So we will check that and
we will select our AIR folder.
| | 04:27 | Remember, I mentioned earlier that I'd
saved my working PNG file into my AIR folder.
| | 04:32 | So I will select that and you will see
inside of this list, everything that's
| | 04:36 | part of that folder.
| | 04:38 | Now I have got one file here,
the actual working file.
| | 04:41 | That's part of the list and I don't
really need that included with the AIR package.
| | 04:45 | It's just going to add to the size of the file.
| | 04:47 | So I am going to remove that from the list.
| | 04:50 | Moving further down, Digital Signature.
| | 04:53 | Well, you are not going to get
much further without one of these.
| | 04:57 | In order to create the installer package,
you need to have a digital signature.
| | 05:00 | The good news is you can set
one right within Fireworks.
| | 05:03 | We will click on the Set button.
| | 05:05 | I have already got one created, but I will
just how you the dialog box that you need to fill out.
| | 05:09 | You can click on Create and
you will see a window pop-up.
| | 05:13 | Every single field in this window,
ladies and gentlemen, must be filled out,
| | 05:17 | otherwise you cannot create a certificate.
| | 05:19 | So I will cancel out of that
because I already have a certificate.
| | 05:23 | I will browse for my
certificate, which is up one level.
| | 05:27 | Here is my jb_sig, open that up, type
in my password, and I will remember the
| | 05:36 | password for this session, click OK,
and lastly a bit here, Destination.
| | 05:42 | Now the default destination is
going to be the folder where your file
| | 05:45 | is currently residing.
| | 05:47 | So if I just click inside that field and
mouse over it, you will see I am inside
| | 05:51 | lesson 6/air/recipe_
working6.air. So that's fine.
| | 05:54 | If you wanted Fireworks to put the
final installer package in a different
| | 05:58 | folder, this is where you would click on
the Browse button and choose a new location.
| | 06:01 | In our case, we are in the right spot.
| | 06:04 | So the last step, Create AIR File.
| | 06:06 | And as soon as that dialog box
disappears, it means Fireworks has generated the
| | 06:11 | AIR Installer Package.
| | 06:12 | So we can take a look.
| | 06:13 | We will go over to our Start menu
and we will go into my Desktop area,
| | 06:20 | Exercise_files > lesson 6 > air, and
you will see there is the recipe file right
| | 06:27 | there and there is the original PNG file.
| | 06:31 | There are all the icons I sourced
earlier on, and if I take a look in the
| | 06:34 | images folder, there are all the
images that were sliced up to create this
| | 06:39 | little AIR mock-up.
| | 06:40 | So Fireworks has cut everything up nice
and efficiently based on the slices that
| | 06:44 | we had generated during the
design of the actual prototype.
| | 06:49 | Last step would be to install the files.
| | 06:51 | So I am going to double-click on the
AIR Installer Package, and I am going to
| | 06:55 | say Install, and I am going to continue,
I will just accept all the defaults there,
| | 06:59 | and the installation is
pretty quick, and there is our application.
| | 07:03 | So I can go and drag it around from the logo.
| | 07:06 | I can move it with a different
buttons and you will see they react.
| | 07:09 | I can click on the Collapse
button. I collapse down my interface.
| | 07:12 | I click on the Expansion
button. I expand my interface.
| | 07:14 | I can go and choose my Occasion here,
and I will see Bridal Shower and I can
| | 07:19 | click on my Search option here,
and I will see my Recipe show up.
| | 07:23 | So we have got a great starting point
here from the standpoint of being able to
| | 07:26 | show the client what the application
not only looks like, but how it should behave,
| | 07:29 | so they can interact with it,
they can drag it around, they can
| | 07:33 | minimize it, maximize it, and it
really gives you a sense of what the
| | 07:36 | application is suppose to do.
| | 07:38 | From here, the client can give feedback,
if necessary or approve the project
| | 07:42 | and then it can be handed off to the developers
to actually build the real true final application.
| | Collapse this transcript |
|
|
7. Creating Flex MockupsExporting MXML| 00:00 | In this lesson, we're going to
take a look at our old friend,
| | 00:03 | the recipe_finder AIR prototype.
| | 00:05 | I've kind of simplified
things here for our example.
| | 00:08 | I've just got one page in this version
and I've also made a few other changes.
| | 00:12 | The idea behind this is we want to
look at taking this design and hopefully
| | 00:17 | make it easier for the developer in
the sense that we're going to export this out
| | 00:20 | as MXML and images.
| | 00:22 | Now before we get into the Export
Processor, a couple things to watch out for
| | 00:26 | and we'll take a look at our Layers
panel here to see what those things are.
| | 00:30 | One of the key things when you're
exporting out your elements for MXML and
| | 00:34 | images is remembering first of all that
everything is going to be exported out
| | 00:38 | as a bitmap graphic.
| | 00:39 | Essentially scaling these things inside
of Flex is not going to be a good idea
| | 00:44 | because it will wind up pixelating and so on.
| | 00:46 | Just be aware of that.
| | 00:47 | Second of all, every single object that
you export that's going to end up as a graphic,
| | 00:52 | utilizes the objects name
in the Layers panel as its file name.
| | 00:56 | So we've to watch out for couple of things here.
| | 00:58 | First of all, make sure all your
objects have names other than just object or
| | 01:03 | something along that line.
| | 01:04 | And a couple of precautions
here. On our Search objects folder,
| | 01:07 | you'll see down here our logo: 6 objects.
| | 01:10 | There is at least no-no element
here and that's the spaces between the
| | 01:15 | words inside that name.
| | 01:16 | So we're going to change
that by double-clicking on it.
| | 01:18 | I am just going to call it logo.
| | 01:20 | That's the first thing we want to watch
for is always make sure you avoid spaces.
| | 01:24 | Now you'll see here 'Give Recipe Finder a'
and that's actually my text area and
| | 01:29 | I don't need to worry about that because MXML
and images export will export that out as text.
| | 01:34 | It will recognize that it is text and I
won't have to worry about what the name is there.
| | 01:38 | So we're going to collapse that folder
and take a look in the display folder and
| | 01:42 | we've got a couple other situations
along the same line here, Group: 6 objects.
| | 01:47 | So I am just going to change that from
Group to watermark and a couple other issues here.
| | 01:52 | We've a other group
that's my little slider column.
| | 01:55 | So I am just going to call this
slider and these two here, 2DStyled_09.
| | 02:01 | Another no-no with file names for Flex
is starting a file name with a number.
| | 02:06 | So we want to change these and to be
honest we want to anyway, because these are
| | 02:09 | really useless names.
| | 02:10 | They're just the style names
that came out of the Common Library.
| | 02:13 | So I am just going to choose my first one
here and we're going to call this down_arrow.
| | 02:18 | Notice I put the underscore in there.
| | 02:21 | So we don't have any breaks in the word
and the next one is going to be up_arrow.
| | 02:26 | So we've made changes to
those guys. And recipe_finder.
| | 02:29 | This is another old tricky one to watch for.
| | 02:31 | When we do the MXML and images export,
this is going to be exported out as text
| | 02:36 | if I leave it alone.
| | 02:37 | And the reason is it is actually text.
| | 02:39 | The downside to that is the fact
that we're going to lose the curve.
| | 02:42 | It's no longer going to exist
because it will just come out as
| | 02:44 | straight-line text.
| | 02:45 | So if I want this to be exported out
looking exactly the way I see it on my screen,
| | 02:49 | I am going to need to flatten that.
| | 02:51 | So I am going to go up to my Modify menu
and I am going to choose Flatten Selection.
| | 02:55 | And that will turn it into a bitmap element.
| | 02:58 | So now you can see over
here in the Layers panel.
| | 03:00 | It is just called Bitmap.
| | 03:01 | I am just going to change this to app_name.
| | 03:05 | And those look all good and we'll just a
take a quick look at our background area.
| | 03:10 | Path is our current name for our whole
interface, so I am going to change that
| | 03:14 | to ui_bkg and the control bar,
we have some things to watch out for here.
| | 03:20 | Again, we get one of those
2DStyled symbols in there.
| | 03:23 | So I am just going to call this collapse
and all the other ones here, I am going to
| | 03:30 | at the very least, add
an underscore between them.
| | 03:33 | You could also do CamelCase typing
where you've a uppercase letter at the
| | 03:41 | beginning of the second
word but no space between them.
| | 03:51 | And lastly is our sort of control
background there and it's just named Ellipse
| | 03:54 | because it's a vector shape.
| | 03:55 | Now even though this is a vector shape
for that matter, so as our ui_bkg,
| | 04:00 | the MXML export only
exports out bitmap elements.
| | 04:03 | So if it can't recognize it as a Flex
component, we'll talk about those in just
| | 04:07 | a second, it's going to come
out as a rasterize graphic.
| | 04:10 | So I am going to change the name Ellipse,
again, just to make it a little more useful.
| | 04:14 | I am going to call it control_bkg there.
| | 04:20 | So that's make a little more sense.
| | 04:21 | At least it does to me.
| | 04:22 | So that will be helpful.
| | 04:25 | The last little bit I wanted to
address here some of the fields and
| | 04:29 | interactive elements.
| | 04:30 | Now when we were building this as a
rough prototype, we were just bringing in
| | 04:34 | combo boxes and things like that and we
even did a nice decorative text box for
| | 04:38 | Search result area, to hopefully help
the developer along here, right and
| | 04:42 | rather than utilize the symbols I just brought in,
| | 04:44 | I've gone ahead and I've removed the
old symbols and what I put in their place
| | 04:48 | are symbols from the Flex Component Library.
| | 04:50 | So if I take a look here in the Common
Library, here we have Flex Components and
| | 04:56 | there is a whole list of
different very common Flex components.
| | 04:59 | So we've got ComboBoxes as
we already got on screen.
| | 05:02 | We've got TextArea, we've got a
TextInput and I've utilized those in
| | 05:06 | this version of the design.
| | 05:07 | And the advantage of this is these elements
will be exported out as native Flex components.
| | 05:12 | So when the developer opens the file up
inside of Flex, they'll be able to make
| | 05:16 | use of them right there.
| | 05:17 | They'll be able to scale them and do
whatever they need to do with them, rather
| | 05:20 | than worry about them being
just a plain old bitmap graphic.
| | 05:23 | Okay, so with those things in
place, I think we'll do our export.
| | 05:27 | So we'll go to File and choose Export
and we'll browse to our lesson 7 folder
| | 05:34 | and I've already got an empty
folder in here for my export file.
| | 05:38 | So I am going to keep
everything in one spot there.
| | 05:39 | I am going to open that up and I've got
to choose the right Export Option here.
| | 05:43 | So I am going to click on Export drop-
down menu and choose MXML and images.
| | 05:47 | And I'll choose to put
the images in a subfolder.
| | 05:49 | And we only have one page but we'll
leave the Current page box checked as it stands
| | 05:53 | and we'll click Save.
| | 05:55 | Now let's take a look over in our folders.
| | 05:58 | Lesson 7 and our export folder and you
can see we've got recipe_flex.mxml and
| | 06:09 | inside the images folder are all the
different graphics that are been exported
| | 06:13 | out as PNGs, including for the
developer's reference a fully assembled PNG file
| | 06:18 | so they can see what it looks like.
| | 06:20 | Ideally they'll also have that AIR
prototype handy so they can sort of
| | 06:23 | experiment with that and see what the
intended interactivity was supposed to be
| | 06:27 | but now we've got essentially a whole
series of graphics they can make use of
| | 06:31 | and we've the MXML file itself which
contains the information about the Flex
| | 06:36 | components as well as the information
about where these images are actually
| | 06:40 | placed within the design.
| | Collapse this transcript |
| Using Flex skins| 00:01 | As a designer, one the ways you may be
able to help out your developer is by
| | 00:04 | creating and exporting a Flex skin
for the mockup you've been working on.
| | 00:08 | Now this can be done through Fireworks.
| | 00:10 | In the Commands menu, we have an
option here called Flex Skinning.
| | 00:13 | We have got two options,
Export Flex Skin and New Flex Skin.
| | 00:16 | Now just a word about the whole Flex
skin concept here in Fireworks, your end
| | 00:21 | result is going to become a series of
bitmap graphics, which means if those
| | 00:26 | graphics need to be scaled inside of
Flex, there could be some real problems
| | 00:30 | with the image quality.
| | 00:31 | So just be aware of that sort of
caveat before you get any further.
| | 00:35 | So we're going to choose New Flex
Skin and we can choose for multiple
| | 00:39 | components, which is an entire huge
graphical template of a wide variety of
| | 00:42 | common Flex components or we can
choose Specific components, and that's
| | 00:46 | what we're going to do.
| | 00:46 | We're going to choose Specific
components, and choose the Accordion.
| | 00:49 | We can also choose to apply that skin
that we're creating to all instances
| | 00:53 | of the Accordion panel in that project or
only instances with a certain style name.
| | 00:57 | We're just going to stick with
all instances for the time being.
| | 01:00 | Click OK and up comes our
Flex template for the Accordion.
| | 01:03 | Now if you take a look over in the
Layers panel, you'll see some very
| | 01:06 | specifically named layers.
| | 01:08 | Don't change these names.
| | 01:10 | These names are specific to Flex, so
that when Flex imports the graphics,
| | 01:14 | it will know what to do with them.
| | 01:15 | So I'm going to go to my
selectedUpSkin here at the very top, and you can see
| | 01:19 | it's a group of three objects.
| | 01:21 | So if I grab my Subselection tool, I can
mouse over those objects and see what I've got.
| | 01:25 | I've got sort of a top kind of
highlight gradient, a main fill for the panel,
| | 01:29 | and then also my outer shape.
| | 01:31 | So I'm going to start by
changing that highlight up top.
| | 01:35 | Select that with the Subselection tool
and go down to the Properties Inspector
| | 01:39 | and edit the gradient
that's creating the color effect.
| | 01:42 | I'm going to choose a
different color than white.
| | 01:45 | So I'm going to go with kind of a medium blue.
| | 01:47 | If I click away for a second here,
you'll see a subtle kind of bluish, purplish
| | 01:52 | shade there at the very top of that pane.
| | 01:54 | So that's one thing I want to do.
| | 01:56 | I'm also going to grab the main
fill and make it change with that.
| | 01:59 | So that gives us a nice kind of
selected highlighting kind of look.
| | 02:05 | Now I can continue selecting the
different objects with inside the template, but
| | 02:10 | for our purposes,
changing one of them is enough.
| | 02:12 | We're going to go up to our Commands
menu and we're going to choose Flex
| | 02:16 | Skinning > Export Flex Skin.
| | 02:19 | I want to export this off into my folder,
which will be lesson 7, and I'm going
| | 02:26 | to create a new folder for those
skins, so they are all on their own.
| | 02:29 | I'm going to call it skins.
| | 02:31 | Double-click on that and choose Select "skins".
| | 02:35 | Quite quickly, the files are exported.
| | 02:37 | If I take a look in my lesson 7 folder,
in the skins folder, you'll see the five
| | 02:43 | different essentially
states of that Accordion panel.
| | 02:46 | There is the one that I
played around with right there.
| | 02:49 | So that bit's done. Now I want to take a
look at how this sort of works inside of Flex.
| | 02:53 | So I'm going to open up Flex.
| | 02:54 | I've got a project already set to go here
and what I want to do is import that artwork.
| | 02:59 | So I'm going to go to File > Import > Skin
Artwork and I'm going to browse for my folder.
| | 03:05 | It's already set up in there as lesson
7\skins, and Flex is going to copy the
| | 03:09 | artwork to a subfolder called skins
inside my source folder, and also create a
| | 03:14 | CSS Style Sheet for the skins.
| | 03:16 | And lastly, we're going to apply
this to the bliss.mxml document
| | 03:19 | that's currently open.
| | 03:20 | So we'll choose Next.
| | 03:21 | We get a dialog box where we can
actually pick which of the skins we want to use.
| | 03:26 | I'm going to leave it set to
importing all of them and we'll choose Finish.
| | 03:33 | We'll switch over to our bliss.mxml and
you'll see here inside the code for the
| | 03:37 | MXML file, we have now got
Style source = skins.css.
| | 03:42 | Over here in our navigator area, we've
got a folder with the skins and we've
| | 03:47 | also got our skins.css file.
| | 03:48 | So, I'm just going to scroll that down,
and I'm going to go back to Design
| | 03:52 | view for my document, and I'm going
scroll down through my components and
| | 03:58 | locate the Accordion.
| | 04:00 | There it is, there.
| | 04:01 | I'll just drag that on to screen.
| | 04:04 | You can see my newly created Accordion panel.
| | 04:06 | I can go ahead and add
additional panels to this.
| | 04:08 | I'm just going to click on the Plus sign
and I'm just going to call this one panel 2.
| | 04:13 | Click OK. Now if I move back and forth between
the two of them, reposition this a little bit,
| | 04:17 | up in the corner, and I can go
back and forth between these two guys.
| | 04:21 | And you can see that my styling for the
selected pane is what shows up, which is pretty cool.
| | 04:27 | I mentioned earlier about the fact
that these are all bitmap graphics.
| | 04:29 | So if you scale them, you
can run into some difficulties.
| | 04:32 | Let's take a look at what I mean by that.
| | 04:33 | I'm just going to go ahead and
rescale this panel, run across the width of
| | 04:37 | the document there.
| | 04:38 | You can see everything stretches out.
| | 04:40 | Now it doesn't look too bad, and we're
looking at this at 100%, but if I choose
| | 04:44 | to zoom in on the panel, you'll notice
that my top border and my bottom borders
| | 04:49 | for the panel headers are much
thinner than the edges here, the sides.
| | 04:53 | Because I've been scaling laterally,
I'm getting a slightly wider or thicker
| | 04:58 | border on the left and right sides.
| | 05:00 | So in this case, the result is a little
bit more subtle, but it is still a change.
| | 05:05 | So just be aware that if you start scaling
these things, you can run into some issues.
| | Collapse this transcript |
| Exporting FXG| 00:00 | Now in terms of exporting your graphics
out for the developer, there is another
| | 00:04 | option that's available, specially
now with the release of Flash Catalyst.
| | 00:08 | That is an option called Export to FXG.
| | 00:11 | If we go to our Commands menu,
you'll see that option right there.
| | 00:15 | Now, there are a couple little things
you need to know about this process.
| | 00:19 | First of all, the best option you've
got for exporting elements from Fireworks
| | 00:23 | as FXG is to export them
out as individual graphics.
| | 00:26 | So that's step one.
| | 00:28 | So in my case here, I've taken my
little background from my controller and I've
| | 00:32 | already copied it and pasted
it into an individual file.
| | 00:35 | It's all on its own.
| | 00:36 | This tends to be the most
successful way to do this at this point.
| | 00:39 | The other thing to be aware of is that
if your vector object has any kind of
| | 00:43 | effects applied to it, it's going to
end up getting exported out as a bitmap.
| | 00:47 | So if we want to maintain the
scalability of the object, we have to remove
| | 00:52 | all the effects first.
| | 00:53 | So, I'm going to go into my
Properties Inspector here and I've got several
| | 00:57 | different effects that have been applied to
this thing to really kind of give it its styling.
| | 01:01 | But we've got to move those guys out
in order to make this work properly.
| | 01:06 | So I'm going to change my fill to my
nice bright magenta and I've got a subtle
| | 01:11 | gray stroke on there.
| | 01:12 | I'm going to leave that there as well.
| | 01:14 | So, at this point I have
basically just a regular vector graphic.
| | 01:17 | If I go to my Commands menu, and I
choose Export to FXG, I'll browse for my
| | 01:22 | folder, get an fxg folder there
for it, and I'll give it a name.
| | 01:31 | I'm going to call it
controller_bkg and click OK.
| | 01:37 | It's a pretty quick process.
| | 01:39 | If I hop over to my actual
fxg folder, take a look here.
| | 01:42 | When we do an FXG Export, you get your FXG
format file here and you also get a folder.
| | 01:48 | You notice when I mouse over
it says controller_bkg.assets.
| | 01:52 | If we had exported this out with
effects, we would have ended up with a
| | 01:56 | bitmap asset that had all the styling, the
gradients, the fills, the beveling and so on.
| | 02:02 | That bitmap object would be
sitting inside this folder.
| | 02:05 | But if I open this up, you'll
see that it's completely empty.
| | 02:07 | So we exported out a true FXG
graphic. There's no bitmap accompanying it.
| | 02:12 | If I hop over to Flash Catalyst and go
to File > Import Artwork, I can browse
| | 02:18 | for my controller, there it is there and
just open that up and it will bring it in.
| | 02:22 | If I click on it, you can see I can
reposition it, but most importantly, I can
| | 02:27 | scale it and I'm not getting any
distortion whatsoever in terms of the quality
| | 02:32 | of the asset, because it is a
completely vectorized object.
| | 02:37 | If you take a look down here in our
Properties area, you'll see we've got a
| | 02:40 | stroke, we've got a path set up,
we've got opacity and everything.
| | 02:42 | Beside from the scaling, those are all
indications that we are dealing with a
| | 02:45 | true vector graphic.
| | 02:47 | So you can see you've got the option to
export out to FXG right from Fireworks.
| | 02:51 | If it is true vector with no live
filters or styles applied to it, it will
| | 02:55 | export out as a vector graphic.
| | 02:57 | If you have live filters and such
applied to the vector, it will export out as
| | 03:02 | an FXG file, but the FXG file will have
a link to a bitmap version that has all
| | 03:06 | of those different bitmap elements in it.
| | 03:08 | As a result, it's not scalable.
| | Collapse this transcript |
|
|
8. Going Further with HTML PrototypingEmbedding an iframe into a Fireworks HTML prototype| 00:00 | Hey and welcome to Chapter 8,
the final chapter in this title.
| | 00:05 | In this particular chapter, we've
going to look at extending what Fireworks
| | 00:09 | can do and the inspiration for this
chapter is based on the excellent work
| | 00:13 | that has been done by these two
gentlemen here, David Hogue and Mariano
| | 00:18 | Ferrario from Fluid, Inc.
| | 00:19 | They've got a fantastic article on
the Adobe Developer Connection about
| | 00:23 | extending Fireworks mockups using
JavaScripts, HTML, CSS and Dreamweaver as well.
| | 00:30 | That's where we're going to be
dealing with here is a couple of these little
| | 00:33 | techniques that they've put together.
| | 00:34 | So we're going to hop over to Fireworks here.
| | 00:37 | What we're going to be doing is we're
going to be adding in an IFrame into our
| | 00:40 | HTML mockup and this is kind of a cool thing.
| | 00:43 | It's not the kind of thing that you
normally think of with Fireworks, adding in
| | 00:46 | elements like that, but
it's a pretty neat feature.
| | 00:49 | It's all thanks to a specific type of
slice that we're going to work with,
| | 00:53 | called the HTML Slice.
| | 00:54 | Now before we get into doing the
actual work, let's just take a look at the
| | 00:58 | layer structure here.
| | 00:59 | I've gone in my Layers folder.
| | 01:01 | In my page content area, I've actually
added a new sub-layer called map, so
| | 01:06 | I'm keeping all the stuff together.
| | 01:08 | Inside of this map area, I'm
going to add in a couple of things.
| | 01:10 | I'm going to add in a header
and the actual IFrame component.
| | 01:13 | So I'm just going to start off
by grabbing my Contact Us text.
| | 01:16 | I'm going to copy it, reselect my map
sub-layer and then paste it in there.
| | 01:22 | So it's all on the same spot.
I'm going to drop that down about there.
| | 01:26 | My next step is adding in a slice that's going
to basically take up the room for the IFrame.
| | 01:31 | So, I'm going to grab by Slice tool.
| | 01:33 | I'm just going to draw any old slice.
| | 01:35 | It's doesn't really matter what size,
because I'm going to control the actual
| | 01:37 | dimensions at the Properties Inspector.
| | 01:39 | The settings I'm going to use are
300x300 and I'll just move that over a little bit
| | 01:46 | and move it up a little bit.
| | 01:48 | I'm going to change my heading, while
I'm at it, from Contact Us to Find Us.
| | 01:55 | What we're going to be doing is we're going to
adding in an actual live map from Google Maps.
| | 02:01 | So I've got my slice ready to go,
I've got my text ready to go, I'm going to
| | 02:04 | change that slice from the
standard Image slice to an HTML Slice.
| | 02:10 | The advantage behind working with this
is you're actually going to be able to
| | 02:13 | put in real HTML code.
| | 02:15 | You can't type it into the actual slice itself.
| | 02:17 | You click on the little Edit
window and you'll add it in there.
| | 02:19 | We'll see how to do that in just a second.
| | 02:21 | So I'm going to hop over to my browser and
I've pulled up a location here in Ventura.
| | 02:28 | You can see that I've got options here under
a Link menu for -- close that for a second.
| | 02:33 | You'll see it again, there we go.
| | 02:34 | I've got options here for copying and
pasting the specific information for an
| | 02:38 | IFrame into a website.
| | 02:40 | What I want here is to customize this view.
| | 02:42 | So I'm going to click on
Customize and preview embedded map.
| | 02:45 | That will bring up another window.
| | 02:47 | It's currently already opened.
| | 02:48 | That gives me the
ability to set different sizes.
| | 02:52 | I can choose Small, Medium, Large or Custom.
| | 02:55 | The Custom is the one I want.
| | 02:56 | I want a specific dimension here.
| | 02:58 | So, 300x300, the same matching size as
my HTML Slice in Fireworks, and we'll see
| | 03:04 | what we get right here.
| | 03:06 | I'm just going to collapse down
the little bubble window here.
| | 03:09 | If I look down in step three, here
is all the information I need to paste
| | 03:14 | into the HTML Slice.
| | 03:15 | I'm just going to click once in there.
| | 03:16 | I'm going to press Ctrl+A to select it
all and then Ctrl+C to copy it, back over
| | 03:22 | to Fireworks and click on the Edit button.
| | 03:26 | In the Edit window, I'm just going to type
Ctrl+V to paste it all in, just like that.
| | 03:31 | You can see all the IFrame code
is put in here. Click OK on this.
| | 03:35 | See it all showing up inside the window.
| | 03:37 | I'm going to now export
this out as its own page.
| | 03:40 | So I'll just do an individual
page here and we'll see how it looks.
| | 03:43 | So, File > Export and we want to
export it to our html_export folder in the
| | 03:49 | lesson 8 folder or you can
export it to wherever you like.
| | 03:52 | Make sure you have a couple things
down below here, including all of our
| | 03:55 | areas without slices.
| | 03:57 | We're only exporting the current page and
we're putting our images in the subfolder.
| | 04:00 | That's great! We'll just click Save, overwrite the
existing file and let's take a look at it in a browser.
| | 04:07 | So I'm going to go back to Firefox and
I'm going to open up a new tab and then
| | 04:11 | I'm going to open up our file.
| | 04:14 | There's my contact page
right there and I'll choose Open.
| | 04:18 | There's the page, but ooh!
| | 04:19 | What's going on here? Take a look. Okay.
| | 04:22 | We have little bit of a breakage in the design.
| | 04:24 | Now remember, everything
here is graphically oriented.
| | 04:27 | All these text fields and combo
boxes and stuff, they're all graphical
| | 04:31 | representations of the form.
| | 04:32 | Fireworks generates a very
rigid table-based layout.
| | 04:35 | So if we scroll a little bit further
down here to where the map is you'll notice
| | 04:39 | that there's a bit of text
down in here, View Larger Map.
| | 04:43 | Now this is actually outside
of the dimensions of the map.
| | 04:45 | This is what's causing the problem.
| | 04:47 | Our map is 300 pixels by 300 pixels,
but this little bit of extra information
| | 04:51 | here has essentially forced the table
to expand beyond its original locked
| | 04:56 | region and we end up with essentially
a sort of a disconnected layout.
| | 04:59 | Easy thing to fix though, because
we are just dealing with a mockup.
| | 05:02 | While this information might be
important for the final web page and indeed
| | 05:05 | it will be easy to incorporate that
into an actual, flexible web page.
| | 05:09 | For our mockup, we don't really need it.
| | 05:11 | So we're just going to hop back over to
Fireworks and we're going to look at the code here.
| | 05:15 | So I'm going to select my HTML Slice,
click on the Edit button and this little
| | 05:20 | bit here from the <br> tag, there's
the </iframe> tag, all the way up here.
| | 05:25 | So all this extra code is what's generating
that little bit of extra space down below.
| | 05:29 | So I'm going to select all that
and I'm just going to delete it.
| | 05:32 | You can click OK and you can see that
the HTML slice, the code in there, has
| | 05:36 | significantly shortened.
| | 05:37 | We're going to export this out one more time.
| | 05:40 | So File > Export and the same settings
apply, we'll just click Save again,
| | 05:45 | we'll overwrite the existing work and then
we'll hop back over to the browser and
| | 05:49 | we'll reload the page. There we go.
| | 05:52 | We've now got an actual map
without breaking our table into pieces.
| | 05:58 | The great thing about this is I'm
currently connected to the Internet.
| | 06:00 | So, I'm not just looking at a
picture or an image grab from Google Maps.
| | 06:04 | I'm actually interacting with
the real map. I can pan around.
| | 06:09 | I can zoom out. I can zoom in.
| | 06:12 | So it really adds another
level of realism to the mockup.
| | 06:16 | In the next movie, we're going to look at
adding in a Flash slideshow into one of our pages.
| | Collapse this transcript |
| Embedding an SWF file into a Fireworks HTML prototype| 00:00 | We are going to extend the realism of
our prototype even more by adding in a
| | 00:04 | Flash slide show right
inside the Fireworks mock-up.
| | 00:08 | So in order to do that, I need to work
with an HTML slice and I need to know
| | 00:11 | what the dimensions of my movie are.
| | 00:12 | Now, my movie is 330
pixels wide by 250 pixels high.
| | 00:17 | So first thing I want to do is draw in my slice.
| | 00:20 | So I am going to grab my Slice tool,
and I will draw any slice any old size and
| | 00:24 | I will set the values in my Property
Inspector and I will reposition the slice,
| | 00:31 | grab the Pointer tool again,
reposition the slice a little bit.
| | 00:34 | So I am sort of inline with
the top of the text there.
| | 00:37 | Now, you will notice that my
slice is overlapping my text.
| | 00:40 | Now it's not a big deal,
because the text is easy to change.
| | 00:43 | The text is inside of a path,
so it's attached in a path.
| | 00:46 | So I just click on the text block, grab
my Subselection tool, and using my Shift key,
| | 00:51 | click on the upper-right control
handle and then grab the lower-right
| | 00:56 | inside control handle here
before things jog to the right.
| | 00:59 | The trick is not to let go over the
mouse when you click on that second
| | 01:01 | control handle and then just drag
across towards the left, and the text
| | 01:06 | reflows just like that.
| | 01:07 | I think what I will try and do is I
will do the same kind of thing here with
| | 01:12 | the area just below.
| | 01:13 | I am just going to raise it up and see if I
can get a little bit more of a wrap under there.
| | 01:16 | That looks better.
| | 01:17 | So we have got our text
reflowing around things just fine.
| | 01:20 | I am going to select my slice.
| | 01:22 | I am going to convert it into an HTML slice.
| | 01:24 | So once it's selected, go into my
Properties Inspector, change it to HTML and
| | 01:29 | here I need to add in the HTML code
that's going to basically call the movie.
| | 01:33 | So I am going to click on my Edit
button and I am going to paste in my code.
| | 01:38 | Now, keep in mind a couple of things here.
| | 01:39 | This is a mock-up, so this is the
absolute least amount of information you need
| | 01:45 | in order to run a Flash movie.
| | 01:46 | We are not worried about much else in
this case, because this is not going to be
| | 01:50 | a final production website at this point.
| | 01:51 | This is just to add a sense of realism.
| | 01:53 | As we get into a real webpage design
scenario, then we would obviously want to
| | 01:57 | have all the appropriate code in here.
I am going to call for the Flash Player
| | 02:01 | if it wasn't available, that kind of thing.
| | 02:02 | But for our case here, for this
prototype, this is all we need.
| | 02:06 | So I am just going to click OK.
| | 02:07 | You can see it's all inserted in there,
and I am going to click away from the slice,
| | 02:11 | and choose File > Export, and
I am going to export this into the same
| | 02:17 | folder as my slideshow.
| | 02:19 | So everything is on the same place,
just makes it really easy for this to work.
| | 02:23 | Again, we are just doing a prototype here.
| | 02:25 | So you will probably want to have a slightly
different site architecture in your real website.
| | 02:30 | We are going to save this as About.
| | 02:31 | We are going to just export the current page.
| | 02:34 | That's all we need in this case, put
the images in a sub-folder just to make it
| | 02:37 | a little neater, and we are going to
include all the areas without slices.
| | 02:41 | Now, one other option I want to point
out in here too before I click on that Save or
| | 02:44 | Export button is the Table option here.
| | 02:47 | I've found that the best results for
this type of page where we are dropping in
| | 02:50 | something like a Flash movie is to set
up a table to space it with nested tables
| | 02:54 | without any spacers.
| | 02:55 | It just resolves some table display issues.
| | 02:57 | So I am going to click OK and choose
Save and that will export out the page
| | 03:03 | with all the graphics and we will hop
over to Firefox and go to File > Open File,
| | 03:10 | and we are in Lesson 8,
and there is my Flash folder.
| | 03:13 | You can see there is my HTML
page, there's my Images folder.
| | 03:16 | I am just going to double-click on
the HTML page, and there is the file.
| | 03:21 | You notice we have a little bit
of a hiccup here in the design.
| | 03:23 | The table was a bit broken.
| | 03:25 | The HTML and images prototype is not
something you use for a final production,
| | 03:28 | because it's so rigid and again, we are
just mocking this up for the prototype.
| | 03:32 | If you were working inside of a real
webpage design, you wouldn't have these issues,
| | 03:35 | because things will be a lot more
flexible and a lot more fluid to begin with.
| | 03:38 | But we are just dealing with a prototype.
| | 03:41 | So we are going to hop over back to Fireworks.
| | 03:43 | Easy fix for this, easy fix.
| | 03:46 | Select our HTML slice first.
| | 03:48 | Go to our Property Inspector and we are just
going to add 6 pixels of height to the slice.
| | 03:54 | That's all we need, just 6 pixels of
height, and if I export this out again,
| | 03:58 | make sure we export everything and click
Save, overwrite the originals, hop back
| | 04:06 | over to our browser and reload
the page. Problem solved.
| | 04:12 | So we've resolved the issue there.
| | 04:13 | We've basically created that mock-up and again,
we are just trying to add some realism here.
| | 04:17 | We are not building the finished page.
| | 04:19 | So the client can still give us feedback.
| | 04:21 | Maybe they don't like the background
color of the movie, maybe they don't like
| | 04:24 | the buttons, whatever it happens to be.
| | 04:26 | But at least we've put something in there.
| | 04:27 | So that's the idea behind it,
adding that extra sense of realism.
| | Collapse this transcript |
|
|
ConclusionGoodbye| 00:00 | Well that, as they say, is that.
| | 00:02 | Thank you very much for joining me
in this Fireworks CS4 training series.
| | 00:05 | I hope you've learned a lot and that I've
helped you make the most out of Fireworks.
| | Collapse this transcript |
|
|
