Creating a Simple Flip Book in Flash Builder

This tutorial demonstrates how to create a simple flip book using Flash Builder. This tutorial was created by Mike Lively.

---

Closed Caption:

hello this is Michael Iowa and today
we're going to show you how to make a
simple flip book and flash catalyst if
you roll over the flipbook you click on
it
page flips over and there's my beautiful
family page to page three page 4 page
five new clothes a book so open the book
again so you actually see there's
different images on each side of the
page here and click over and my text
flips over with the book now you need to
do a few things before you actually get
into this tutorial so there's a few
things you want to do first of all
download the code from my google code
and go through it and watch the previous
video on creating a double-sided image
and flash catalyst you really need to do
that because if you don't do that you're
not gonna understand what I'm doing here
there's two key things actually creating
this particular application and one is
you need to create all the base coat and
flash catalyst and to you need to use
the affect and effect start to order
death and so let's take a look at flash
catalyst so I'm in flash catalyst right
now what I've used flash catalyst to do
is lay out my whole system so so that
all this code is written for me
automatically and i love that and maybe
i'm using flash catalyst a little
different than what a lot of people
would use it for because what i want is
I want actually to have that code
written for me without doing it myself
and so what you'll see here if you come
over here to the layers panel you can
see that I've laid everything out that
there's the top cover and here's the
first image second image third image
fourth image 15 image 6 image and and
then the back cover
just like i did in the double-sided
image case I just flipping these over
and changing the Alpha so that one page
shows and the other doesn't
so if you take a look at the transition
for example from state 2 23 you see all
this rotation code and what's happening
is there's a fade-in and fade-out so if
i bring us to the middle
ok will happen is my book flips over and
the page phase and fades out so just as
I laid everything out in the
double-sided image case so lay
everything out in flash catalyst and add
some interactivity and once you've done
that you've generated a bunch of source
code let me check the source go to you
real quick go to co.design and there's
all that code generator for your
automatic
and you know if you try to run this and
flash calluses really doesn't do very
much it's not attractive it's kinda
clunky it doesn't work there's enough
code hear from me go back and just
recopy all this stuff so I suppose a
coding and building structure is done
for me automatically flash catalyst and
then what I do is I basically is going
to recode and flash flood by cutting
pasting and putting in the right
parameters that makes it really easy
let's go to flash builder so here's
flash builder and here's all the final
code is all been written and I pretty
much is cut and paste and put the right
parameters and transitioning as I flip
the pages just as you learn to the
double flip book but there's two
important things that i want to show
here number one is what you want to do
is order death and become along here and
take a look this parameter here you see
that on my different components i have a
death component and that enables me to
order the death
each time I flip the page which I'm flip
the page what i'm doing is i'm ordering
death so as you go down here each one of
these is a page flip forward or flip
back okay
and each time I flip i use that . death
to order death
ok the other key point in this is I need
to know when to order to death and so in
my transitions what I do is when i'm at
midpoint and midpoint believe or not is
on the fade so if we call the double
images tutorial the fade happens when
the pages at 90 degrees what's facing
you so each time the pages are facing at
90 degrees i reordered apps and when
they flip back there in the right
position and pretty much that's all
there was to this program it's just
great so use the code play around with
it what we're going to do next is we're
actually going to add some data to this
and make it dynamic so let's run the
program one more time
there's my book look flip flip flip flip
god bless now i want to say one more
thing what I've done here is with the
text actually stuck in here to worry
about a double side on that front cover
and just real quick here
how do you get the text on there by the
way now if I put a double side they have
different texts on either side but how
do i get the text in there well it's
real simple
let me show you that and then we're done
what you want to do is actually navigate
to the component self so I'm gonna come
to the code i'm going to scroll down to
the first part components take a look at
the cover . here's a back cover
here's the front cover right here so i
hope my control key down i roll over
that and I click on that and that takes
me to that cover all i have to do is go
to design mode and then drag the text
components on that I want so i go to
windows components have a ton of
components know anything about this i
can drag anything over here i can drag a
button i can drag a checkbox i can drag
a video and it will flip 3d as i turn
the page isn't that so simple so this is
a million times easier than it was and
paper vision and none of that when you
flip the page it says the text lips with
it and so there's a lot of work to do
that to make components work the correct
way and flipping and rotating objects
but in flash player is just so easy
because that Z component is native I
just gotta run it one more time and get
jazzed up when I build things that work
so let's run it one more time and there
you have it and i really hope this is of
some use to you and the next few videos
we are going to take this and make it
data-driven this is mike lively thanks
for listening