Flash + HTML 5 Banner Workflow

[karatechops]

Hi everyone! This is my first post but I've lurked in the GreenSock community for over 5 years. I have a pretty large campaign coming up that requires both HTML5 and Flash banners (same creative across both platforms using GSAP) and am trying to figure out the best workflow. Would it make sense to export the units from Flash to HTML 5 or do the HTML 5 units from scratch (in a text editor)? I ask this because I've never used Flash's JS export and have no idea how efficient it is. My main concern is the files will be bloated - the file max for the HTML units is zipped 100k. Any insight on Flash's export to JS would be extremely helpful.

[Carl]

Hi and welcome to the GreenSock forums,

 

I'm not an expert on this and I think even if I was, this is one of those areas where you are going to have to experiment to see what works best. 

 

I don't think Flash is at the point where one FLA is going to export a swf and also generate HTML5 content. From my understanding in Flash 2014cc you either start your project as a normal AS3 fla or a special "canvas" fla. 

 

I've had reasonable success though copying assets from a "regular fla" to a "canvas" fla and doing an export. If you rely on GSAP for animation, the good news is that writing AS3 GSAP code is virtually identical to JS GSAP code. 

 

A few weeks ago a user asked about how to use GSAP in Flash on HTML5 / canvas projects. I recorded a very quick overview of the basic setup: http://greensock.com/forums-support-files/createJS-demo.mp4

 

Keep in mind, that when you export out of Flash you can only support features that are supported in canvas, or more specifically EaselJS.

 

Personally, I'd prefer to do as much as I can with animating CSS properties of DOM elements. I was a huge Flash fan and advocate for many years, but frankly, 99% of what I see in Flash / SWF ads can be easily accomplished with pure HTML / CSS / JS (GSAP) and work all the way back to IE8 and mobile like:

 

http://codepen.io/GreenSock/pen/Fqmsa?editors=001

http://codepen.io/anon/pen/nkzHf?editors=001(very simple)
 

I know that doesn't help you with streamlining your Flash and HTML5 workflow, but I'd just encourage you to explore outside of Flash a bit, if possible. 

 

Also, concerning file size, TweenMax is roughly 30kb after compression and we are hearing reports of DoubleClick allowing devs to load it off DC's cdn and even not counting it as part of your 100kb. However we have yet to have DC confirm this.

 

Hopefully that video and some of this info helps. 

[Swellons]

I create Flash and HTML 5 banners using Flash library objects. With Flash CS6 there is a CreateJSTool kit you can install as a .mxp file. Got everything working great using createjs objects. TweenMax and Tweenlite are able to see them!!! I would watch this:

 

http://www.gotoandlearn.com/play.php?id=174

 

 

The new Flash CC has this stuff built in but I am having some issues with TweenMax recognizing my objects to animate but the browser recognizes them. But that should help you get started.

 

 

[leedium]

[posted this in the wrong section]

moved here=> http://greensock.com/forums/topic/12153-banner-layout-workflow/?p=51360