Click on any phrase to play the video from that point.
[Adobe Creative Suite]
[Podcast]
[5: Learn CS5]
[with]
[your host]
[Terry White]
[ODYSSEY]
Hello, and welcome to another episode of the Adobe Creative Suite podcast.
My name is Terry White
and in this episode, we're going to take a look at how to convert
the animations that you can do in InDesign
from InDesign animations that go out toFlash to HTML 5.
You might be wondering, well--why would you want an HTML 5 version of the animation?
Well, I'm going to show you how you can use those inside the new Digital Publishing Suite.
So let's go ahead and take a look.
I have a document here and I have a couple of things that are animated.
I have the Odyssey text animating in from the left.
So if we click on that, you can see the little path that goes there,
and there's a plane that kind of loops in and flies in from the top.
We can, of course, preview this animation.
Let's go ahead and do that.
And we hit the Preview, it loads an instance of the Flash Player right inside of InDesign,
and we get to see the animation happen.
And that's great--and, of course, we could export that out as a SWF file
and put it right on our Web site.
But what if you want to take that animation and do something with it that--
for example, doesn't support Flash.
In my case, I want to put that in a publication on the iPad.
So what I can do is, instead of exporting out a SWF file,
I can go up to my File menu and export out a Flash file, and then convert it.
Before I do that, though, I don't want the entire document--
I don't want the background, I don't want this text--
I just want the logo and the animation.
So what I did was, I selected both of those frames and I copied them.
Once I copied them I just simply went over to another InDesign document
and pasted them in on a blank page.
So of course you don't see the Odyssey text because it's white
on a white InDesign page right now--so you really don't get to see it.
And, by the way, here's a bonus tip:
If you go in and you make your paper color
something other than white--let's say we make it a nice blue--
we'll be able to preview that blue, and we'll be able to see what it would look like.
Now I'm going to cancel out of that because
I really don't care about the paper color at this point.
But that is how you can test things--white on a non-white background,
just by changing the paper color.
Okay--so now that I have the two frames here,
the only other thing I had to do was go into my
Timing to control which one would happen first.
Again, when I copied them in they were in reverse order.
I wanted the writing to come in first and then the airplane to come in second--
sort of like that.
And the plane flies in--great.
Now that I've got those there, we'll go ahead and do a File Export.
When we do our export--now, normally, since I'm not a Flash guy,
I would go ahead and export that out as as SWF file, meaning that that would
just be ready to go and put on my Web site.
But in this case, I'm going to export out a Flash Professional FLA file.
This is the project file for Flash Professional that a Flash developer would be
able to go in and open up, and continue working on.
Now, even though I'm going to pick an FLA file--
and we'll make this one the Creative Suite Podcast one--
even though I'm going to export that out,
I have no intention of opening that in Flash
because--again--I'm not a Flash developer so I'd be kind of lost in that particular application.
So let's go ahead and click OK.
And it happens very quickly--there's nothing else to do--it's already done it.
Now what I'm going to do is, I'm going to launch a technology preview application
that's codenamed Wallaby.
And the way you get this application is: we're going to head over to the browser,
You just simply go to labs.adobe.com--
there's the URL as it's loading:[http://labs.adobe.com/]
and in the Labs page you will find the Wallby prerelease.
And what Wallaby allows you to do is convert FLA files into HTML5.
So I've got the Wallaby application here--I'm already running it.
We'll go ahead and hide the other pieces there.
And I'll just browse, and there's the FLA file I just created--we'll go ahead and select it. .
The next thing it wants to do is just simply hit convert
and then it wants to know where to put the resulting HTML.
So I"m going to make a new folder for it.
I will make a new folder--actually, I don't want to put it in Adobe Office.
There--we'll make a new folder and we'll call it--
oh, I don't know--let's call it Odyssey HTML5CS5.
Okay--so that's the name of the folder
and we'll save it out.
And I get one warning--it says the conversion was successful, but there's a warning.
In other words, there was a potential problem.
I can drill down and it will show me what the warning is, and it's just a simple thing.
It says that one of the Blending modes or the Blend Mode is not supported.
So in other words, I got the conversion, but without the Blend Mode
that I may have applied to one of the graphics.
That's okay, I'm happy with that--in other words, I can live with that.
Let's go ahead and switch back over to the browser now--or the Finder--
and in the Finder I have that CSP folder, and I'm just going to go ahead
and drag that HTML file over to Safari so I can take a look at it.
And there's my animation.
But you notice that the animation continues to loop.
That is because, by default, that Flash file doesn't have a Stop Action in it.
So if you know Flash, you can open up that FLA file and put a Stop Action on the first frame
and then it would only play one time.
Again, that's not my thing--I'm not a Flash guy--
so I'm going to do the next best thing.
I'm going to go ahead and open up the CSS for that particular HTML export
and I'll open it up in Dreamweaver;
and Dreamweaver is showing me all of the CSS code that Wallaby generated.
But I'm going to do a simple thing.
I'm just going to click into it, do a command F for Find and Replace.
I'm searching for Infinite, which is--again, it's looping infinitely--
and I'm replacing every instance of Infinite with 1, meaning I only want it to play on time.
Now I'll just do a Replace All.
And it will typically--in my case, find three of those--and it replaced all three of those
animation/iteration counts with 1 instead of Infinite.
Then I just save the file.
So now, if I quit or go back to the browser, it may be cached sp it may take a couple tries
to get it to acknowledge the new non-looping version.
Yep--there we go--I knew it would loop again,
but if I Refresh that it should just play and stop one time.
So that's it and now that I have my HTML5 version of that animation
I can now head back to InDesign and in InDesign,
I've got this Cover File that I want to use it on.
So I'm just going to go ahead and draw a frame out
and now you can measure a frame to exactly whatever size you need.
I know this is going to be--pretty much--big enough for that animation.
But once I have my frame in place, the next thing I'm going to do is
head over to the new Overlay Creator panel, which is part of the Digital Publishing Suite.
I'm going to say that this is Web Content.
Then it gives me the option of pointing that to a URL or file.
In this case, I have a file--the one we just exported.
So I would go ahead and choose that file.
Again, we don't want the Adobe Office one--we want the Creative Suite Podcast version.
We just point to the HTML file--not the CSS--
and we choose that as our overlay
and then we have the option of controlling
how that animation will happen in our digital magazine
Since it's the cover and users may not even know it's there
I do want it to Autoplay and I do want a little bit of a delay--
maybe 1 or 11/4 seconds, something to that effect.
Now that I have that there, I also want it to have a transparent background
because--again, I want to be able to see through it to the mountain scene below here.
And that's pretty much it.
So we're going to have it Autoplay, Transparent--we don't even need to allow
any user interaction because it's just going to play.
Now hitting Preview here would normally preview this in the Desktop Viewer
but it will not preview that animation, so I'm not even going to waste my time trying it.
Of course, if I'm making this as a magazine cover for both Portrait and Landscape
I would make the Landscape version--which I've already done--
and put the exact same frame in it, which I just copied and pasted
so that we would be able to see it.
Then I would head over to my Folio Builder
and I would assign it to my Acrobat.com account and create my new Folio--
which I have already done--containing that cover so that I would be able
to look at it on my iPad or Android Tablet.
So now let's head over to the Tablet and take a look.
I'll just bring up my document camera here.
We'll go Full Screen on that.
And here we are in the Adobe Content Viewer
on the iPad, and there's my magazine cover in the upper left-hand corner.
We'll just go ahead and press View.
We'll press View--there we go--
and we'll see our animation happen
on the device, in real time and, yes--
I have the horizontal version of that as well
that will animate and come out as well.
So that is HTML5 animations created in InDesign
and then playing back on the iPad in the Digital Publishing Suite
using the animation and overlay creator in Folio Builder,
which is all part of the Digital Publishing Solution.
I showed you ways of working with that in the last episode.
So, with that, I hope you got something out how you can convert
standard animations--simple animations from InDesign--into HTML5.
And you can either use them in the DPS Suite or just on your Web site.
If you wanted to create a Web version of an animation that did not require Flash,
that's one of the quickest, easiest ways of doing it.
So thanks for your time--and thanks for watching.
Again, my name's Terry White.
[Learn the Adobe Creative Suite with Terry White]
[Enjoy the Adobe Creative Suite Podcast on you iPhone, iPad touch or Android in our custom App]
[Featuring Exclusive Bonus Content: More Tips & Tricks (Extras) that are only available in the App]
[http://bit.ly/learncsapp]
[Available on the AppStore] [Download from Market]
