Flash Professional HTML5 Canvas export with GSAP

[Carl 9,066 Likes (Superhero)]

Hey Folks,

 

With so many people needing to transition their Flash banner workflow to HTML5 I thought it might be helpful to show you how to get started using GSAP in Flash Pro. 

 

The video focuses on how to

1. load TweenMax.min.js into your project and de-select the "overwrite html" option.
2. target elements and animate them with script.
3. create a very simple animation that loops 3 times.

It is not meant to be a deep-dive into the GSAP API or comprehensive overview on best practices of using Flash Pro for H5 ads.

 

 

Watch full-size on YouTube

 

See the finished animation: http://greensock.com/forums-support-files/GreenSock-H5-Banner/

 

With so many designers needing a GUI for HTML5 banner production, Flash Pro definitely deserves a solid look. Its ease of use for art creation and layout are unmatched. I think many Flash developers will be pleasantly surprised at how many of Flash's features translate to HTML5 with the help of CreateJS / Easel.js.  

 

I have 2 questions for the community:

 

1. Do you have a suggestion to prevent Flash from spawning new browser windows each time you test? I experimented with simply publishing the project and then manually refreshing the browser but that felt clunky. I prefer more "real-time" results. Over time I trained myself to close the browser window each time I was done with a preview. However it was quite common (and annoying) when the preview would show up on some browser tab on my secondary monitor or whatever window last had focus. Ultimately it would be great to have one persistent browser window that stayed open with some sort of automatic live-reload.
2. When creating HTML5 banners with Flash Pro / CreateJS how to you handle text? Do you break-apart the text as outlines (which is what I did) or do you use images, or try to load in web-fonts at run time with CSS? 

 

If you have any additional tips on using Flash Pro's canvas export in banner production or would like to share you experience, please chime in below. 

 

IMHO the industry-wide rejection of SWF banners is the best thing that could happen to Flash Pro. It would be great to see this app get a second life in the HTML5 world. 

[celli 69 Likes (Contributor)]

Thanks Carl,

 

This is great to see. I have experimented with this before, and I have a few questions about how it is creating the deliverable, maybe you can help with:

 

1. I have always used break-apart for all text, but then kept a layer of the 'live' text (hidden), in case we needed to change anything, which always seems to happen! But what is this doing ? It seems to hold the vector output... is it creating SVGs ?

 

2. I have noticed that the output creates a <canvas> layer, which seems to be quite sluggish (especially on mobile devices) and when there are sometimes a lot of elements to animate (when compared to a purely hand-coded GSAP file)--but I haven't experimented with using GSAP/TweenMax as the animation engine before in FlashPro... but from all I have seen and experienced, I assume using GSAP to actually animate rather than using the timeline in FlashPro will really keep the animation from becoming sluggish. Or is it still relying on the easelJS on a canvas element to do some of the heavy lifting, even if we are only using GSAP inside of flash as you show in the video ?

[cwiens 23 Likes (Newbie)]

This is great. My only concern is the additional createJS calls this is making. 

[Carl 9,066 Likes (Superhero)]

Hi celli,

 

I'm really not an expert at all in what CreateJS is doing behind the scenes regarding text, but yes it appears it holds onto the vector data to create nice smooth bitmaps of the characters.

 

I haven't done a ton of performance testing with canvas. I know historically it was a bit sluggish on mobile devices especially when there was a large canvas area. 

For small banners 300x250 / 300x600 I have to imagine it will perform quite well on modern hardware. Flash Pro also does WebGL output now which on supported devices should be amazing (not so sure how ready ads will be for WebGL due to browser support). 

 

For CreateJS-specific questions, I think this is where most of the action is these days: https://www.reddit.com/r/CreateJS OR http://stackoverflow.com/questions/tagged/createjs

 

--

 

Curtwiens,

 

Glad you liked the video. Yeah, I think in production you would probably minify all of createJS into one file but I'd also suspect that those files are very well-cached if you are loading off their CDN. Not sure what CreateJS or Adobe recommends here. My experience with this has all been experimental for "proof of concept". 

[OSUblake 9,990 Likes (Superhero)]

Have you tried to use WebGL to speed it up? I saw that as an option.

 

To keep the same tab open and a better workflow, use Browsersync for live reloading. It will take you 5 minutes to gets started if you've never used Node before. Mac users might need to look up the term "sudo" before installing stuff with Node. So instead of testing the movie everytime, you would just publish it and have browsersync listen for changes to any html, css, or js files in your project's folder.

[Carl 9,066 Likes (Superhero)]

Thanks, Blake, I'll look into browsersync. And yeah, I've learned about "sudo" the hard way before:)

 

 

I haven't tried the Flash WebGL stuff yet. 

[cwiens 23 Likes (Newbie)]

I was using Photoshop to copy the CSS position of assets which worked great. This might be a little better provided there is no file size hit, performance issues and the calls are kept to a minimum. I have really only been using Flash for positioning its all greensock for a long time now. 

[celli 69 Likes (Contributor)]

This is all good stuff--I am still leaning towards creating all display ads with hand-coded GSAP, and using PhotoShop to position elements and just measuring with a marquee, or using Illustrator when I want SVG elements or scalability in the design process, and again using the program to just measure and position in HTML. But still experimenting with all other options along the way --

 

One additional question, maybe unrelated to this thread... How can I check the overall time of a select GSAP timeline ? If I want to loop it but I need to see if the initial animation is within the :15 time allowance ?

[cwiens 23 Likes (Newbie)]

Celli, you can right click a layer to get the CSS positions and then export those assets automatically using Generate /Image assets. I think you need at least CS6 to do the later.

[celli 69 Likes (Contributor)]

yes, very true, that is more accurate! Thanks Curtwiens--and generating SVG from shape layers is also great to get initial positioning, or PNG from image layers.

[ohem 324 Likes (Leader)]

One additional question, maybe unrelated to this thread... How can I check the overall time of a select GSAP timeline ? If I want to loop it but I need to see if the initial animation is within the :15 time allowance ?

I'm not sure if there's a better way, but I just temporarily add something to my timeline to happen exactly at the 15 second mark, so I can make sure my animation ends before then.  Like:

.set("#ctaBtn", {backgroundColor:"#ff0000"}, 15)

[Carl 9,066 Likes (Superhero)]

Celli, you can check the duration of a timeline with 

myTimeline.duration();

you can set the duration too with

myTimeline.duration(15); //forces duration to be 15 seconds

[docs id=js.TimelineLite.duration()]

 

And yes, please try to keep the conversation related to the post topic. thanks.

[Carl 9,066 Likes (Superhero)]

Just an update to my own question: 

 

When creating HTML5 banners with Flash Pro / CreateJS how to you handle text? Do you break-apart the text as outlines (which is what I did) or do you use images, or try to load in web-fonts at run time with CSS? 

 

 

It's been recommended to me that breaking apart the text and converting to MovieClip is often the safest and easiest thing to do. It is also beneficial to select the "cacheAsBitmap" option so that the vector data does not have to be re-calculated and rendered on every frame of animation. Great tips from a trusted source. 

[flysi3000 49 Likes (Newbie)]

Good stuff to know, re. breaking apart clips, etc. For a recent project, I did a portion of an animation on the timeline in Flash (mainly to match the art director's After Effects-based motion tests). I was able to do them far quicker than I could in code, and the animations looked great - until I looked at them on a Retina display, and next to some svg graphics. I ended up having to redo the animations in code (DrawSVG plugin, ftw!).

 

Anyway, does anyone know how to get the optimal quality out of Flash's canvas animations?

[Devotee007 6 Likes (Newbie)]

Great video, thanks!

 

Just a question about the spritesheet that the program creates. Is it possible to do it in any other way because the spritesheet, in this case, is 226 KB. The file sizes of the two images is 46 KB and 2 KB.  I used TinyPNG on the created spritesheet and got it down to 76 KB, but that is still a lot more than 48 KB.

 

//devotee007

[Carl 9,066 Likes (Superhero)]

Hi Devoteee007,

 

Not really sure how you can optimize or control the spritesheets created by CreateJS. 

 

 

You might want to ask in a forum dedicated to Flash or CreateJS

 

https://www.reddit.com/r/CreateJS

http://stackoverflow.com/questions/tagged/createjs

[Devotee007 6 Likes (Newbie)]

Hi Carl,

 

Thanks for the links, I will ask there. 

 

//Devotee007

[ohem 324 Likes (Leader)]

Good stuff to know, re. breaking apart clips, etc. For a recent project, I did a portion of an animation on the timeline in Flash (mainly to match the art director's After Effects-based motion tests). I was able to do them far quicker than I could in code, and the animations looked great - until I looked at them on a Retina display, and next to some svg graphics. I ended up having to redo the animations in code (DrawSVG plugin, ftw!).

 

Anyway, does anyone know how to get the optimal quality out of Flash's canvas animations?

The best example/guideline I've seen suggests building the banner at double the size if you're using canvas, the same way you would do with images for a retina display if file size allows: https://docs.google.com/presentation/d/1nOZK6AonDdqToZrNg2Tvok-OquwDCrhzfMoTYQIBjCU/edit#slide=id.ga16345ae9_0_96

 

If you view the source code from their example, it looks like it's as simple as this: 

<body onload="init();" style="background-color:#ffffff">
	<canvas id="canvas" width="600" height="500" style="background-color:#FFFFFF; width: 300px; height: 250px;"></canvas>
</body>

[Colin Ochel 2 Likes (Newbie)]

Thanks Carl,

 

Very helpful. I would like to point out something that got me hung up for a bit.

 

If you start with a blank HTML5 Canvas, you need to add some code to the HTML if you uncheck the auto update.

 

1st, make sure all createjs files are linked. They are not turned on if you have nothing on the stage.

 

<script src="http://code.createjs.com/easeljs-0.7.1.min.js"></script>

<script src="http://code.createjs.com/tweenjs-0.5.1.min.js"></script>

<script src="http://code.createjs.com/movieclip-0.7.1.min.js"></script>

<script src="http://code.createjs.com/preloadjs-0.4.1.min.js"></script>

 

2nd, make sure that the line below is not commented out. It was for me.

 

createjs.Ticker.addEventListener("tick", stage); 

 

After I did that, I was on my way. Cheers

[Colin Ochel 2 Likes (Newbie)]

Hey Carl,

 

I was hoping you could enlighten me how one would go about using the SplitText function in Flash's HTML5 Canvas.

 

Cheers

[Carl 9,066 Likes (Superhero)]

Sorry, SplitText only works on text inside DOM elements. No support for canvas at this time, and probably not likely in the foreseeable future. It would be a massive undertaking which would probably require that we create our own separate font-rendering API for canvas OR rely strictly on a third party one. 

[somnamblst 183 Likes (Specialist)]

Carl, not being a banner person you forgot the most important element of banners....

 

I think this could be how a clickTag for Flash CC canvas export should work.

 

 

canvas.onclick = function(event) {

    window.open("clickTag", "_blank");

}

 

Extrapolated from this lynda.com tute. I replaced the hard coded URL with clickTag. Has anyone had a Flash CC canvas export uploaded to ad software like DCM or DFP?

 

http://www.lynda.com/Flash-Professional-tutorials/WebGL-JavaScript/383037/425087-4.html

[OSUblake 9,990 Likes (Superhero)]

As some of you may know I'm a huge fan of using PIXI.js for canvas projects because it by far the best 2d renderer available. Anyways, today I was updating a PIXI project with some tools from a company called CloudKid which has started to convert all their Flash stuff over to PIXI. I just found out that they have created a tool to bridge the CreateJS exported by Flash over to PIXI, which will run much faster and includes a bunch of WebGL filters and masks. 

 

Here's two examples of a Flash animtion export to PIXI.

http://cloudkidstudio.github.io/PixiFlash/examples/shapes/

http://cloudkidstudio.github.io/PixiFlash/examples/animation/

 

Repo: https://github.com/CloudKidStudio/PixiFlash

[retropunk 126 Likes (Specialist)]

OSUBlake, killer links! Thanks for sharing. I have been a fan of Pixi JS for a while now. Haven't used it much but I am excited to try PixiFlash. I can see it coming in handy for these types of animations...very cool!

 

Thanks!

- Patrick

[freuxdesbois 1 Likes (Newbie)]

Wow, thanks for the links, it really opens up some new perspectives

But I'm not quite sure using it on banner animations, it seems too heavy ? (nearly 280ko minified)