Bodymovin AE integration

[whitebrick]

@Richmond. Thanks for the JSON link I'd seen somewhere that LC had that but good to have ref in one place.

Just for curiosity, How could you import and play
a json animation into LiveCode without using the browser widget?

At this stage I don't think one can

Although looking at that JSON import stuff I'd be interested in seeing how Bodymovin stores the AE animation data.. if each frame is described as an .SVG maybe there's opportunity to parse the bodymovin JSON data and create a new widget using the .SVG icon widget as a starting point.

I'd have to look at the .SVG widget in more detail too but that maybe that could be a way that it could be done.

[whitebrick]

Following up further here: the .svg widget is monochromatic currently by the looks of it so it'd limit your options in After Effects considerably.

Watch this space if the scope of that improves though!

[whitebrick]

Ok so I pushed the boat out on this a bit further as I had a little bit of time... I *almost* have something working that's compelling at least at an early test stage

I basically thought what if you had a browser widget and a LC button in group. The LC Button could capture mouse/touch events and pass it up to the Group which could cue animation events by updating the HTML source of the widget.

Bodymovin plugin in AE bounces not only the .JSON data file but a playback HTML file. If you bake that HTML file that bodymovin exports from AE into the HTMLText of the browser widget then presto you get the animation working inside Livecode

I couldn't work out how to capture mousevents in the browser widget so I put a button over the top and here's where it's at:

https://www.dropbox.com/sh/uuya78ti5bss ... zemma?dl=0

It's weird cause it's trapping the mouseEnter and mouseLeave events but mouseUp doesn't register at all?!

there's room for improvement here - like directly referencing URL of the HTML file rather than baking it into the HTMLText or a custom property but I'd need to look more into how the browser widget works and I just wanted to see if it was possible... the file size of everything (4mb for all the files inc the AEP) is pretty compelling IMO to keep exploring - but my coding skills are pretty second rate so if anyone can improve and wants to share

[capellan]

Your stack works great in LiveCode 9!

Check this new version of your stack.
It's only 77k. This reduced size allows
to post the stack in this forum.

Al

Bodymovin_Browser_Widget_Test.livecode.zip

[whitebrick]

Heya. I'm running Livecode 9.1 Indy on a Mac and it's not catching the "mouseup". Can you confirm it's capturing "mouseup" when you run it? Thanks for compressing the file

[capellan]

The group and the transparent button are
not capturing the mouseup message while the
HTML widget is visible or while the HTML widget
is under the button.

If you hide the HTML widget or move the HTML widget
outside of the button area then the mouseup message
works as intended.

The mouseup message shows black letters over a
yellow background with an orange outline.

Probably you should ask LC support why this error
is occurring only with mouseup message and why
it works correctly with mouseenter and mouseleave.

Al

[richmond62]

I'm running Livecode 9.1

That's brilliant considering 9.1 hasn't even been released yet!

[whitebrick]

ok yeah it might be a bug or maybe the browser widget is built so as the HTML gets the preference for the mouseup - that would make sense in most scenarios where the browser is being used... I have no idea how to hack that message path but if we could do that presto - dynamic animated SVG UI elements ported directly from After Effects

Also Rich: I meant 9.0.1 obviously but you enjoy that sweet sweet win bud if it helps you in life - you got me fair and square....

[capellan]

ok yeah it might be a bug or maybe the browser widget is built so as the HTML gets the preference for the mouseup - that would make sense in most scenarios where the browser is being used... I have no idea how to hack that message path but if we could do that presto - dynamic animated SVG UI elements ported directly from After Effects

Actually, it would be important to learn why mouseenter and mouseleave
works fine but mouseup does not work at all. Maybe, just maybe,
the HTML widget is draw on top of all Livecode controls and it
will always receive first the mouseup message.

If that is the explanation for this case, then all mouse message
should be written in Javascript.

https://www.w3schools.com/js/js_events_examples.asp

Also Rich: I meant 9.0.1 obviously but you enjoy that sweet sweet win bud if it helps you in life - you got me fair and square....

When I read 9.1 in your post then I opened the downloads page:
https://downloads.livecode.com/livecode/
and understood than probably you are just using LC 9.0.1

Al

[bwmilby]

I have LC 9.1, but then again I compiled it from source

[capellan]

Compiling from source?
You work on the bleeding edge
of Livecode Technology!

Al