Data Driven Flip Book in Flash Builder (Part 1)

This is part 1 of a tutorial series which demonstrates how to build a data driven flip book in Flash Builder. This tutorial was created by Mike Lively.

---

Closed Caption:

hello this is my climbing today were to
start building our data-driven
flipbook know what do you do is go back
and review some videos
so if you're new to this youtube series
you and makes you go back review
a creating a double side image in flash
catalyst
and also creating a simple flip book and
Flash Builder
we're gonna start with the flipbook and
star adding data connectivity
now I wanna say that this is what
really Jazz's me up about Flash Builder
the ability to drag and drop
data services so the first thing I do
today is first make
a XML when a valid a that XML
they're going to connect that XML to our
%ah
system were based will start up with the
datagrid and we'll add it to datagrid
and then will rewire that datagrid using
a recollection
annual add that data dynamically to our
flip book
and then we'll add a caption problem get
all that done today
by we're going to be working on a series
of videos here to make sure you get all
that under your belt
the first let's take a look at where we
were so last time a create a simple flip
book one makes you wash your YouTube
video on it if you haven't yet
and and that is my beautiful family see
flip there's different pages so step
inside pages
for to the N for back over and all
that's hard could it does
built basically using Flash Catalyst
says the generator the base code base
code was reworked
in that for speedy 0 now we want to do
however want to take this a way to build
something data-driven
running by daydream I'm using brought in
for the back into XML
and I say that application so just a few
changes here the art work was done by my
son James
and I course I did the coding flip that
there's a first image right there with
the law
caption at the bottom for but again
here's this next image with caption:
next image neck image and the back cover
now
know so I have three pages but we're
gonna actually in the next series of
videos
should extend that to multiple pages
right now everything is being brought in
dynamically know this is hard coded
sprite being brought into a back in XML
that was connect using
data services and you could be so
amazing how easy it is
to connect data services so let's get to
it
na min Flash Builder and there's a few
things you wanted percy wanna do is in
your assets folder
add a data folder and then my data for a
put a XML I call it my gallery
let's take a look at the next in our
quick the comment
and over here in the cold side you have
the X amount after nothing near the exit
I'll just go to the web
n-type in XML tutorial and a million
sites will come up in XML is so easy now
what's the difference between HTML and
XML
well basically an XML you can create
your own tax
base a really cause me a mystery cuz I i
come along here and I create my own tax
okay well here I create a gallery tag I
created I am tagging a number tag
and okay cool but what does that mean
well what's important remember here's
when you create your tax you've got to
create a program that reads and parses
those tax
and when do they automatically in Flash
Builder says not so as easy as a I
create my tax what happens now or
something has to read those tax
so that's how it goes but once you
create your exit now you wanna
validate it an invalid XML in either
Dreamweaver or any other type program
so wide it is from the system editor
within sight of Flash Builder actually
navigate doing for and I've opened up
now you could is pasted onto desktop or
somewhere else and open up the drawer no
problem
want some and remember I wanted validate
to make sure that it's working correctly
in this is so simple to do
just got a file go to validate
and go to as XML says you do that
a I didn't get any errors and that's all
there is a validation other been errors
are shown below here and you wanna surf
through
and 60 there's know what happens lhasa
times your air can be higher in the code
up here and actually show an air down
there so we have in their daughters love
to wear shows air to be
actually look up love it and see if the
air is there as well so that's all there
is a validation
and as far as creating XML see
everything's well formed here when it's
Valley as well form here
say see I have it beginning tag right
here
and I have it the same ending tag at the
very end up my coat at all the way down
into the code
there's that slash our tag right there
then within a
side all those I have a bunch of chunks
up CodeRed
tax which are called item so each I know
tag has a opening and ending close this
was called
well form is good opening and ending and
with those
items I have all the various I am
different items that I wore all the
various different categories I want in
their
so I have a number I don't need that
they can use ever certain a
insist I have the title artist genres
rating description Tom screenshot and
video if I want one so I put everything
in there and the kitchen sink
so for this particular example if
they're all I can use to pieces the data
from this look item list
and one will be the thumb which is the
image to be seen your book
and the others that cash it appear below
which is the description
so let's go back to Flash Builder
see you back in Flash Builder what you
wanna do is you want to have a folder to
your assets folder called
data and add your X amount so that Lance
annoying will die
here and ICT in causing some problems so
wanna do here
this is go up to the src folder am right
click on it and go new
folder and isotype assets
slash data and is it finish
and now it's time for its sandwiches
that data and then image together in
assets for that got some guys give me
trouble and so that's a
how I do it an hour when paste are XML
in there I have in my clipboard was
pasted
and there is right there and now we're
rated put in some data and now it gets
exciting some go up here
we're gonna go are back the application
click on main
and this application actually comes from
the up
code that I posted last time on our my
Google Code so mexico to a code go to my
download list and download the simple
flip book
and that's a couple working with today
and so now that I'm here
I wanna rollover my control and click on
that components and bring up that
components now if that doesn't work for
you
just going to components open this up a
little bit
and click on custom component one that's
component right there
that's where you want actually put your
data grid so not good for our data right
here on the main screen
gonna put inside the component and the
reason I wanted to happen so I can move
that around her I want to
not worrying about having code on the
main time light so
let's go back I want to seize control
trick
click on that and there's my component
and i wanna do now is go designed to you
and that's open it up seeing see a
and there's my foot book and what I want
to do is just drag a datagrid to the
stage
now this is a way I do it you can do it
differently but I like to just drag a
datagrid
connect my day to that data gud dis
rewire everything
Solar's go to Windows DoD Components
that spring up a datagrid and this track
to stage
all right there we go and I'm put it
right from the book doesn't matter I'm
just getting connected in getting all
the code right
so there's nothing in there now XO
column 1 column to call to I want ads
and data
to go to window and go to
data services the big point I want to
make two guys right now
it doesn't matter if I'm working with
XML the procedure I'm using right here
is good for blaze ColdFusion XML or http
LCDs PHP and other
web services this is fantastic is gonna
generate all this country automatically
so be dealing with MySQL database you
connect with PHP
all the coal be generated for you
automatically I want to
HDPE this click on that and when I do
get this national data was urs bring it
down
I want to have an operation name saul
call this
get my
data an eagle at the address where is it
was in the assets for a member
assets and in data I call it my gallery
now this is beautiful because in beta 1
you couldn't do this
in Bay one you actually had to put on
the web connect to the web you can
actually do it right from folder
and once you've done that you want to
the services name others call it
get my data now and
when you're done I have to do is go
finish
and it creates all the classes that you
need to connect to that XML
and here they are so stay tuned
will finish connecting to our data next
time