Bodymovin AE integration

Something you want to see in a LiveCode product? Want a new forum set up for a specific topic? Talk about it here.

Moderators: Klaus, FourthWorld, heatherlaine, robinmiller, kevinmiller

whitebrick
Posts: 12
Joined: Wed Jul 02, 2014 12:36 pm

Re: Bodymovin AE integration

Post by whitebrick » Sun Dec 30, 2018 10:12 am

@Richmond. Thanks for the JSON link I'd seen somewhere that LC had that but good to have ref in one place.
capellan wrote:
Sat Dec 29, 2018 10:32 pm
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
Posts: 12
Joined: Wed Jul 02, 2014 12:36 pm

Re: Bodymovin AE integration

Post by whitebrick » Sun Dec 30, 2018 1:38 pm

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
Posts: 12
Joined: Wed Jul 02, 2014 12:36 pm

Re: Bodymovin AE integration

Post by whitebrick » Wed Jan 02, 2019 11:18 am

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
Posts: 600
Joined: Wed Aug 15, 2007 11:09 pm
Contact:

Re: Bodymovin AE integration

Post by capellan » Fri Jan 04, 2019 8:09 pm

Your stack works great in LiveCode 9! :D

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
Compressed stack
(72.77 KiB) Downloaded 21 times

whitebrick
Posts: 12
Joined: Wed Jul 02, 2014 12:36 pm

Re: Bodymovin AE integration

Post by whitebrick » Wed Jan 09, 2019 12:36 pm

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 :D

capellan
Posts: 600
Joined: Wed Aug 15, 2007 11:09 pm
Contact:

Re: Bodymovin AE integration

Post by capellan » Thu Jan 10, 2019 12:55 am

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
Livecode Opensource Backer
Livecode Opensource Backer
Posts: 3140
Joined: Fri Feb 19, 2010 10:17 am
Location: Bulgaria

Re: Bodymovin AE integration

Post by richmond62 » Thu Jan 10, 2019 9:19 am

I'm running Livecode 9.1
That's brilliant considering 9.1 hasn't even been released yet! 8)

whitebrick
Posts: 12
Joined: Wed Jul 02, 2014 12:36 pm

Re: Bodymovin AE integration

Post by whitebrick » Thu Jan 10, 2019 11:26 am

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.... :P

capellan
Posts: 600
Joined: Wed Aug 15, 2007 11:09 pm
Contact:

Re: Bodymovin AE integration

Post by capellan » Thu Jan 10, 2019 8:26 pm

whitebrick wrote:
Thu Jan 10, 2019 11:26 am
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
whitebrick wrote:
Thu Jan 10, 2019 11:26 am
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.... :P
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
Posts: 249
Joined: Wed Jun 07, 2017 5:37 am
Location: Henrico, VA
Contact:

Re: Bodymovin AE integration

Post by bwmilby » Thu Jan 10, 2019 11:56 pm

I have LC 9.1, but then again I compiled it from source :D
Brian Milby

Script Tracker https://github.com/bwmilby/lc-misc/tree/master/ScriptTracker

capellan
Posts: 600
Joined: Wed Aug 15, 2007 11:09 pm
Contact:

Re: Bodymovin AE integration

Post by capellan » Fri Jan 11, 2019 2:11 am

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

Al

Post Reply

Return to “Feature Requests”