Using gsap haxelib

GREAT!
Let me… sorry… US know how it works! Are you including the latest GSAP?

Hi, @GiG!

I’m using GSAP v2.0.1 in my dependencies (as you can sorta see from my code above), and everything seems to be working fine, but I’m having issues with easing.

(I’m still very new at using haxe/openfl, and I’m running into a lot of problems re: syntax; I suspect that may be the root of my problems with easing. I dunno…)

ASIDE:
If anyone’s wondering why I’m obsessing, it’s because most of the portfolio samples on my website are dependent on Flash, and I need to convert them to html5 in order to better my chances at getting a job. (It’s a major setback if potential employers can’t view your work. DOH!)

And, of course, I chose the most challenging piece as my first endeavor. (Circa 2011… DERP!)

I have a VERY long way to go, but if you wanna see what I have so far…
http://www.shigimcp.com/Xstage/AX/AXX_FA11_openfl/Export/html5/bin/

What kind of issues?

DumDum Alert!
I forgot to add the line:

import com.greensock.easing.*;

It’s working fine now!

:sunglasses:

What’s the next level? Heavy test of performance? Did you test the events? onUpdate, onComplete, onStart, onRepeat etc…?

I am so far away from that, @GiG! LOL!

I’m still very new to this, so I’m taking a really ham-fisted approach to the code just to get it to look like the [outdated] Flash microsite (http://www.shigimcp.com/Xstage/shigimcp_2018/img/ax/flash/fa11_axx/index.php).

TBH, I haven’t even thought about how I’m going to get from one section to the next; I just wanted to see if I could get it to work on a basic level!

Ok ok, no need to rush.

Hi,

I’m testing OpenFL right now, trying to evaluate the work needed to port my AS3 code to haxe.

My goal is to see if I can reuse the libraries I used with AS3, and just focus on the syntax translation from AS3 to Haxe. I’m targetting Flash.

So I added gsap to my project XML, as explained above in this thread. Here is my simple code:

package;
import com.greensock.*;
import openfl.display.*;
import openfl.events.*;

class Main extends Sprite
{
	public function new()
	{
		super();

		stage.align = StageAlign.TOP_LEFT;
		stage.scaleMode = StageScaleMode.EXACT_FIT;
		stage.quality = StageQuality.LOW;	
	

		var value:Int = 0;

		TweenLite.to (this, 4, { value: 100 });

		addEventListener (Event.ENTER_FRAME, function (_) trace (value));
	}
}

When I run this code in the Flash player, I get this error:

[Fault] exception, information=ReferenceError: Error #1065: TweenLite variable is not defined

Is it supposed to work for Flash target, as suggested by @singmajesty ?

Thank you! :slight_smile:

Hello!

I do not use Greensock myself (disclaimer) but at a glance it appears there is a regression in the library you using.

Each of the com.greensock.* classes has a @:native tag which only should apply for HTML5 – this rewrites what value will be searched for at runtime, so that com.greensock.TweenMax becomes only TweenMax for use with the JavaScript library (for example). This is probably what is going on for you because it probably should be com.greensock.TweenLite at runtime in Flash Player?

Look at this fix and see that his changes are reverted in the newest versions of the TweenMax/TweenLite classes that I see on Github:

Thank you @singmajesty. For some reason I had not been notified about your reply, so I had missed it. :slight_smile:

However, I’m not totally sure of what I’m supposed to do. :slight_smile: Can I fix this on my side? (sorry, I’m not too good at GitHub)

Are you using the latest GSAP?

Yes, it’s version 1.0.4. (installed it with “haxelib install gsap”)

As singmajesy says, there seems to be a regression in the official gsap library and it has stopped working for flash target …

There are several ways to solve it. One of them is “patching” several files:

Go to C: \ HaxeToolkit \ haxe \ lib \ gsap \ 1,0,4 where you will find all the gsap libraries and externs that you have installed using haxelib.

Open the two files that need patching:
src \ com \ greensock \ TweenLite.hx
src \ com \ greensock \ TweenMax.hx

In the case of TweenLite at the top you will see: @: native (“TweenLite”)
You have to patch it so that it only compiles that instruction in the case of js target (html5), like this:

#if (js)
@:native(“TweenLite”)
#end

Do the same with TweenMax.hx but with “TweenMax” as the class name in @: native.

There is one more file you need in the lib gsap directory (and for some reason it is not downloaded when installing with haxelib) … That file is called “extraParams.hxml” and you can download it from the official github: https: // github.com/mathieuanthoine/haxe-gsap

What this file does (-swf-lib greensock.swc) is to tell the compiler to include the greensock.swc in the case of flash target.

Copy it to C: \ HaxeToolkit \ haxe \ lib \ gsap \ 1,0,4

With this patches, must work in flash target.

To make it work also in html5 target you have to add the greensock js library to the openfl project. Download the greensock js library and copy it to your assets folder within the project. For example here: Assets / js / greensock / TweenMax.min.js

Now you have to add the js dependency lib, in proyect.xml, in this way:
< dependency path = “Assets / js / greensock / TweenMax.min.js” />

There is one last “problem”. In html5 target the movieclip properties that work in flash target do not work. That is, if you try to move an object using the “x” property of the movieclip in the same way as in flash, so for example:
TweenLite.from (bitmap, 0.5, {x: 500, delay: 0.5, ease: Quad.easeInOut});

It will not work … The way it works in html5 is prefixed “set_” to each property. It would look like this:
TweenLite.from (bitmap, 0.5, {set_x: 500, delay: 0.5, ease: Quad.easeInOut});

The problem you have with this, is that it will not work as a multiplatform compilation, unless you do something different for each version …

As I commented in another post in the starling forum (I’m Pedro Fernandez there ;-), it’s better to use specific Haxe libraries (Actuate in this case), because they are much more supported. And it’s also better to get used to the characteristics of the platform. At the end of the day gsap will only serve you for flash target and for html5 target, but for no other output.

2 Likes

Wow Pedro, thank you so much for such a detailed explanation, it helps a lot! I’ll have a try asap, even if I understand your suggestion for using Actuate for multi-platform support. Cheers !

Edit: It works! Awesome, thank you Pedro!