Zync

How to import the JS Greensock into Flash CC (NEW UPDATE)

Recommended Posts

G'day all,

 

Now this is not really a Greensock question specifically but it does relate. If anyone has fired up Flash CC in the last day or so you would have seen a new option to create a HTML5 Canvas option. As far as I have tested this is really awesome and the action panel changes over to a javscript editor and you'll free to timeline animate just as you normally would too for complex animations.

 

However I'm trying to in use the TweenMax CDN library in there somewhere but I'm not too sure where to put in and in what syntax. Any JS pro shed a little light on importing external library's with the lastest Flash CC HTML5 Canvas update?

 

Cheers,

 

-Z

post-10122-0-24883100-1386114860_thumb.png

Share this post


Link to post
Share on other sites

Hi Zync,

 

Yeah, I saw this video today: 

which discusses these new HTML5 features. I even upgraded CC, but I haven't had time to dig into it at all yet.

 

I would suggest creating a simple timeline animation in CC, export as HTML and see what it generates. I think there are going to be a few challenges

 

1: importing TweenMax somewhere in the Flash IDE

2: learning how to target the symbols for animation

 

It would be great if the output html/js makes it easy to edit and animate things with TweenMax even if an external editor is needed. If they are relying on the CreateJS suite for all this and EaselJS is involved, it should be fairly straight-forward to animate easel objects. Again, this is all conjecture. Hope to be able to peak at this in the next few days.

 

let us know if you find out anything

  • Like 1

Share this post


Link to post
Share on other sites

Hey ya Carl,

 

Ah cheers for that video mate, hadn't seen that one yet. Well I got it to work but it seems a little hacky. Would prefer to import the full TweenMax Library from the CDN but I just copied and pasted the full JS code for TweenMax in frame one and then Animated like just you usually would. Works perfectly! :)

 

One little cavet is that oyu have to target objects on the stage explictly starting with this however. I don't think this is a Greensock issue though I think its just a scoping thing with JS.

TweenMax.to(this.circ,1,{x:400, yoyo:true, repeat:-1});

post-10122-0-18473900-1386126412_thumb.png

Share this post


Link to post
Share on other sites

Yeah, I've been playing around with it a little bit.

 

Instead of pasting the entire TweenMax file into Flash, open up the html file that Flash CC creates and just past the a <script> tag with the TweenMax cdn url. 

 

THEN go to Flash publish settings and de-select the "publish html file" option so that your html with the cdn link doesn't get overwritten.

 

Its important though that from that point on you use File > Publish and not Control > Test Movie.

 

I did a test where I created a simple movie clip in Flash and made to instances, circle1 and circle2.

 

I then used my custom js function runCarlsCode() in the HTML file to target and animate those symbols with TImelineLite:

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>two_circles</title>


<script src="http://code.createjs.com/easeljs-0.7.0.min.js"></script>
<script src="http://code.createjs.com/tweenjs-0.5.0.min.js"></script>
<script src="http://code.createjs.com/movieclip-0.7.0.min.js"></script>
<script src="two_circles.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.2/TweenMax.min.js"></script>


<script>
var canvas, stage, exportRoot;


function init() {
canvas = document.getElementById("canvas");
exportRoot = new lib.two_circles();


stage = new createjs.Stage(canvas);
stage.addChild(exportRoot);
stage.update();


createjs.Ticker.setFPS(60);
createjs.Ticker.addEventListener("tick", stage);
runCarlsCode();
}


function runCarlsCode() {
var circle1 = exportRoot.circle1;
var circle2 = exportRoot.circle2;


circle1.addEventListener("click", someFunction)


function someFunction() {
var tl = new TimelineLite();
tl.to(circle1, 0.5, {x:200})
 .to(circle1,1, {scaleX:4, scaleY:4}) 
 .to(circle2, 1, {scaleX:0.2, scaleY:0.2}, "-=1")
} 
}
</script>
</head>


<body onload="init();" style="background-color:#D4D4D4">
<canvas id="canvas" width="550" height="400" style="background-color:#FFFFFF"></canvas>
</body>
</html>

It is kind of cool though that you can write GSAP code in the Flash actions panel which I experimented with briefly. That would probably be my preferred workflow. I think if Adobe added a way to modify the HTML template to include any custom external library, we would be in good shape.

 

 

 

  • Like 3

Share this post


Link to post
Share on other sites

Ah nice one. That's a great workflow for what I need. Cheers.

 

And yeah I do like the option to write javascript direction in the actions window too. But I guess int he end just the familar layout design and tools will make it worthwhile.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.