Adobe Wallaby- How to convert Flash Fla Files into HTML5

This is one of the coolest new emerging HTML5 related technologies making creating HTML5 animations so easy for us Flash Designers/Developers. In this video we will walk through the basics of it and see wha its limitations are at this current time.

---

Closed Caption:

Welcome to our newest video regarding
emerging technologies in flash in one of
the says I want to talk about today was
about a new release that Adobe just came
out with this week.
Which is called the Wallaby technology and it's
free right now it's kind of a early
adoption mode.
And I really encourage everyone that
works for flash to test it out because
it's very very very cool.
So let's see it in action before we talk too
much about it and basically what the Wallaby
the technology let's you do.
It enables you to take your Flash animations
without any code there's basically you can
use the stop code and that's about it.
Without any code you could basically
take your Flash animations and
automatically convert them from swiff
files to dhtml5 compliant.
Which means you'll be able to render them
on browsers that don't support flash
such as an iPad or I
other something that's Apples that
doesn't support Flash.
Alright so let's look at in motion
there's a few limitations that you
need to know about so I created quickly a
small little banner.
And this banner really all that it does I tried
to make it a little complicated again you
can use classes you can't use code you
have to do everything on your timeline.
In this animation actually created a
complex animation relatively speaking.
That tried to comes late that everything we
have so first of all we have here.
It's not really copy we have here
actually just like just vectors.
The vector of copy.
And we have on the layer that's actually
a mass layer.
If we double-click on it's a movie clip
and in the movie clip there is a
there are two classic tweens classic
shaped tweens that open up.
Which are suppose a creator our animation.
And we have our logo which is a movie
clip as well.
And it has to animations going on one
there's an external kind of motion tween on it.
And inside of the movie clip itself after
a few seconds or after about 2.5 seconds
The glasses of our new logo will
shake a bit.
And on top of that we have a few
static assets.
And really that's better than in the end
frame frame seventy were actually
stopping that's only code we're really
using an currently is only code that is
really supportive.
If we run our banner our banner
is really a simple
hopefully cute banner that's presenting our
new logo.
No it's kind of second and endless loop here.
So we definitely probably want to fix that.
So this stop is kind of irrelevant
because it's stopping our main animation
from going on but we still have a movie
clip right here that and movie clips
have their own time line or so I'd have to
double click into that movie clip.
Open up layer here we'll call it 'as'.
Than we could gear an other key frame
And go into our action panel.
And add here a stop.
That was a silly bugger but we've
got that sorted out.
So now our application should stop when
our banners complete.
Alright so we have our Wallaby sample.
Now we can actually take this banner
that we created its not using any action
script we diligently created.
An animation that uses any shape tween and
motion tweens and we have your mask as well.
And there's movie clips and inside of
the movie clips there are animations deliberately
to try to show the technology.
And to try to show it's limitations.
Now what you can do is you could drag
into the Wallaby preview and if you
don't have the application just
come to our website and just
find the link on our website or just do a
Google search for Adobe Wallaby.
And all you really have to do is just grab this
with you want to change or you can
grab a whole directory it will
actually loop through.
And find every FLA file inside
and start converting them.
But in our case we just want to take our
WallabySample1 so I'm just going to drop
it inside of our preview panel.
And I'm going to click on convert when I
click on convert because this application.
And I was going to give it a location
it's just going to be inside our output.
It's going to be inside our output.
That's fine we're going to replace it cause I already
did it before we're going to see that this one
even though our WallabySample has been
created successfully and it didn't give
us any warning this time around.
But if we go into our browser
and we actually render our application we're
going to see that there is an issue right.
Maybe they are not very easy to
catch but there's actually a couple
of issue one the issues we're not seeing this
animations anymore we're only see our
first animation.
And the second issue which we don't have
any control over it now and hopefully
this is just a bug in the current
version of of Wallaby is that sometimes
some of the content doesn't really come
through so even though
we've refreshed it again it's going to be
here if I refresh it again it won't be.
I don't know this because of Wallaby or
maybe because of our browser.
But hopefully at some point these issues
won't happen.
And if you go back to our Flash a
reason is because Wallaby doesn't
support masks so actually we created
another version and this other version
is really the basically the same thing
only we're not using any mask.
Instead of using a mask so obviously
really complicate animations you wouldn't be able
use with this but as long as you're not
using a mask.
You could create user application
using Wallaby.
And instead of that just take my second sample and
just paced that in there converted.
Put it into my output folder.
And run it one more time go back to my
browser and again.
By the way if you're running this in a
browser that doesn't support html5
like the current firefox3 which I
have in my application.
Then you wouldn't be able to see
anything but because I'm running this
in safari.
Safari is webkit base which is very similar to
the way the iPad and the iPhone has there
browsers so it's working.
But you have to be sure that actually
if you watch this in a browser
that doesn't support it's just going to
be funky.
And this is it how you work with
Wallaby it's that simple.
And I encourage everyone that use a Flash
should jump over and check Wallaby.
It's really new and really easy to work
with cause if you're already doing Flash
that's great.
You could say now you could also do html5
without actually learning too much new
things new features and
creating this html is actually quite
complicated.
If you look at the source of the files
at the Wallaby.
That the Wallaby files creates there's a
lot of files going on in here.
And which created something very very
simply and
instead of using this really complicated
structure that html5 kind of lends itself
when we're doing animations and csx.
And that covers it so
if you need the links come on to
everythingFLA.com check it
in our lab section.
And or just do a search on our search
for Wallaby on our web site and you'll find
the links related.