Wallaby! Convert Flash animations to HTML5

Wallaby is a preview technology from Adobe that allows you to convert an FLA file to an HTML5 animation. On your websites, you can provide two different versions of the animation. One version is the SWF exported from Flash CS5. The other version is HTML5 and will be viewable by devices such as the iPhone or iPad. This video demonstrates how to use Wallaby to provide an alternative HTML5 animation on a webpage

---

Closed Caption:

on March ate the dough be posted
to their Labs website a new technology
called
quality this is a preview of something
that the show daddy doing maxis fall
above a technology that takes a flash
file in FL a file
and converted to a compatible html5
animation this is really cool because it
allows
animators who are familiar with flash to
be able to create banner ads or
animations
that will work on devices that do not
support Flash but
support html5 for example the iPhone or
iPad
the thing to remember is that this is a
preview technology so it's not gonna
support
every single feature in Flash I might
have a couple issues along the way but
it's a dog is way above
giving you a little preview at what
they're working on so if you haven't
done so go to lab senator with a calm
and
download quality he does click the
download link you accept the terms
and download the appropriate product
your platform after you download it
you get an application that looks like
this really simple application just
asking you to browse for
a FL a file and it will convert it to an
html5-based
animation I'd like to take you through a
good use case
up this in Flash I have
a simple flash file here if I were to
just preview
this file you'll see that its
just %uh couple love graphics sitting on
screen
you may recognize this file this is a
classic crane example which lets you use
an
armature what I'd like to do that like
to make an animation here
on the train on my crane layer I'm gonna
go to MyLibrary
and I'm going to grab the crane arm
and just sort of position at where I
want it to go
I'm gonna grab the second arm position
that and the third arm or the role
rather have that the position here as
well
now my goal is to have this
actually go down off-screen gravel logo
and pull it on screen and that's going
to be my animations are gonna make one
more layer at the top here called
local and from my library I'm gonna drag
down there
easel solutions logo it shameless
product placement that's alright
I'm gonna convert that to a movie clip
called
logo and I'm ready to go
so the first part of this is just
getting the crane
animate this has nothing to do with what
we're looking to talk about Wally this
is just
using armatures at the added into flash
cs4
I'm gonna find the bone tool with the
bone tool
I'm gonna start linking to gather the
movie clips that I pulled on screen
some just dragging little bones to each
joint know what this does is it copies
them all onto the same layer and makes
what's called armature
this allows you to drag one movieclip
and see the other ones react accordingly
so I want to animate this crane going
down
grabbing the logo and pulling it back up
on screen number to have the animation
wat
just about a second before it begins
sung-lac frame 30
and I want the crane to look the exact
same at frame 30
and that's where to start the animation
some gonna control
or come and click on this first frame
right click and choose copy polos
control-click or command click on
friends 30
and paste pose threes and peace in
opposes because
this is where I want the animation
actually start I don't want to be
animating
in his previous frames so then America
come out to about frame sixty
at miss Campbell the crane remember when
you're right
moving these bones around sometimes they
can be
a little jerky a but just work at it and
you'll
gonna be where you want I'm assuming a
little here to now
rate for yield on notice as I drag my
life my
play head back but there is a nice
animation up that whole coming down
tonight
my a local I want the logo to actually
start
on the streets on remove the keyframe
outer frame sixty
and I'm remove the logo just
on where the the hook would be
moving down my time line may go to frame
a hundred
and I'm going to animates the train
moving up
so I would assume out
I'm gonna have the crane move back up
so I've got the from crane back at the
top you'll see
it animates up really cool
and ends up that way but I actually
don't like how long the hook is actually
off-screen so I'm gonna go about halfway
through that
animation and I'm gonna actually move
the crane
so it's back
on screen a little bit earlier so
you'll see the animation just updated
animates to rate
there and then lifts everything up
awesome last step is to animate the
local
I was a little tricky I'm gonna right
click on the animation addict create a
motion tween
obviously it's in the right place at
frame one I'm gonna go to the second
polls I'm gonna move the logo
and I'm gonna go to the final position
and I'm going to move the logo up there
as well
the thing is as I move the play had the
local mmm isn't quite moving with the
crane and
this takes a little bit a tweaking but
just to show you the easiest way to do
this is on the switch the local over to
a
outline deal miners zoom in
and what I'm gonna do one frame 1 is I'm
gonna get this local positions so that
the registration point is right at the
tip for the crane
this is just for reference that way when
I moved to the city
next keyframe I can make sure
that that registration point Israel
still at the tip for the crane that way
I can guarantee that its
lined up correctly same thing with the
last frame
let me move it to the last frame get em
of a little bit here but if I move it
over I can use my arrow keys
and I'm just getting again that
registration point to beat a tip for the
crane its kinda arbitrary but with that
allows me to do
its make sure that the logo is always
in the same spot at each keyframe now as
a
watch it turn my outlines back of
it looks treaty could although it still
moves a little bit because it's not
dove animation is not just a spy linear
animation
so Mike final addition here to put my
outline back on
is I'm a zoom in and you can see that
the
path of the animation is not match the
papilla train
all I'm gonna do is just bend the motion
path
and this isn't perfect you could spend a
little bit more time tweaking it but
you'll see now
that it follows the tip a black rain I
can do that for this last
leg to you and was going about halfway
down the animation
grabbing the motion path and getting it
to match
not perfect but close enough
so if I test my movie now with
controller command enter
you'll see after about a second it goes
up
and it just keeps looping now before it
loops I might want to sit on screen just
a bit longer so all I'm gonna do in my
time line is just come out
you know maybe to frame a 140 and hit f5
on all the layers eldest insert more
frames and if I watch
now it'll hold on screen a little bit
before it looks
so this is my flash banner really
excited about this
only problem is some devices don't
support flash
soul what I'm going to do is companies
wallaby to create
html5 version others better
I'm gonna open up wala be and I'm gonna
rush hours for the South LA in the
dialog pops up
I'm gonna select my FL a I'm gonna hit
open
there are some preferences that you can
set right now to preview it in the
default browser after it does all the
converting
you can leave that on that's fine I'm
gonna hit convert
when I do it's gonna ask me where I
wanna save the HTML file on business
even in the same directory
its gonna convert it its gonna open up a
web browser and you'll see the animation
no notice it's sort of working but not
really the crane isn't moving
well this is because that armature is a
really fancy animation
it handled the motion tween just fine
but not the armature
so I'm gonna close that a medical back
to
my FL a among a select the armature
layer
I'm gonna right click on it and say
convert to a frame by frame animation
now the only way to reverse this
Pakistan on do it so you don't wanna do
too much stuff if you need edit this
sometimes it's nice to say vote a copy
before you do this step
but notice it becomes a keyframe to
animation
if I save the FL a again go fact a
wallop the
tell it to convert it again times in a
sable for the top of everything
it'll pop open the file and now I see a
nice
animation again this is HTML if I right
click 'til not you'll notice there is no
flash banner
we're almost done because I like the
fact that I was able to create an HTML 5
alternative for my banner
however I'm not happy with the fact that
have to have two separate web page is
what I'd rather do is have the website
show the HT show the flash version and
if they don't have flash
show the html5 version so I'm gonna go
to Dreamweaver to help me out with this
in Dreamweaver you'll notice I have a
site set up pointing at the directory
where I've been working
there's my FL a there's all the files it
generated
just to recap what it generated is it
made an HTML file
it made a JavaScript and CSS file to
accompany
that HTML file for doing some other
position in styling
and then all the magic is happening in
this jQuery full
filed it's using jQuery to do some of
the animation
in Dreamweaver I'm gonna create a new
HTML file a minute
save it into my directory amor called
indexed %uh HTML this is my main file
then what I'm gonna do is on the take
the SWF file on a drag and drop it into
my
window when I do so soon as i save my
file dream weavers a copy over some of
the files that it needs in order to
detect for flash
and install the Flash Player of the user
doesn't have it if I preview this in a
browser
it'll start up and play and remember
this is just flash if I right click on
it you'll see the flash
context menu when Dreamweaver creates
flash file in your web page it ads and
area above the cold where you can put
alternate content
what I'm gonna do some to delete all the
existing content at center
which is just a link to the Flash Player
I'm gonna open
up the crane that HTML file
I'm gonna find all the content of this
file now this is a little bit easier if
I switch to code feel
just to show you everything that's
inside the body take care
you can also copy this from design view
as well I tend to prefer
copied it from called you to make sure I
get what I want but you'll notice I'm
copying
all the crazy give stuff that they're
doing it's the only content in the body
I make copy that gonna go back to my
file and
haste right here now we're not done
because this crane file also had a few
dependent files will notice there is a
CSS file
and two javascript files I'm gonna copy
those as well
to come back to flash and at the top
misconduct case those under my title
property
now like index file is updated if I were
to preview that again
in a browser you'll notice it works
but that's because it's plain the flash
file I'm gonna turn
of my Flash plugin and chrome just by
going to the
plugins America BAC
and you'll notice a page that running
right now has an animation working
if I right click on the animation look
at that
it's not flash teaching of 5 now to test
this for real
what I would like to do his poll open
this file on a couple devices
and it's a little dark in here but I've
got a dark just so you can actually see
the devices
what I'm gonna do is poll up this trek
to re on my evil
Mike laptop has I'll sampe server
running
and soul you'll notice we have an
animation
cameras slowly adjusting to the
brightness here you can see it's working
now
now this is an HTC evil it's a device
that supports Flash so we're just seen
the normal flash banner
on here soul let's put this up on a
device that doesn't support flash
here's a popular device it doesn't
support flash this is the first
generation iPad
now of course out-of-date not the iPad 2
is out what I'm gonna do is on the
refresh the browser here
and you'll see this animation pull up
again the city exact same file
plane the same animation wonderful was
aged in of 51 Obama's flash
I Kercher to go download Walby and begin
try it out for yourself
like I said it's Donna preview format so
its gonna have a few issues but it's a
good look at what adobe is trying to do
to help extend the reach
love this bridge content that we can
create with their tools
I can use great animation to a like
flash create my flash banners but still
provide alternate content for
for individuals who do not have a flash
labeled device