Whiteboard animation for teachers

[uelandbob]

A teacher standing in front of a blackboard writing with chalk and speaking is a powerful combination. See for instance

https://www.youtube.com/watch?v=E13gZdD ... Ge&index=3

What attracts me is seeing the letters get animated as the teacher speaks. It is a different experience then when smacking a complete letter in powerpoint. SVG contains all the necessary information that would allow for animation of the letters and graphics, that let them "grow". See for instance

https://www.youtube.com/watch?v=GUHhS2OdIEs

There are several tools that let you make up these kind of animations, VideoScribe (665 $), Easy Sketch Pro (29 $), and others

I would love to see such possibilities for LiveCode. It would give teachers nice possibilities to make great learning material. Is anyone aware of anything like it?

Looking at User Guide I read about some 3rd party libraries (p111 "At time of this writing there is also a 3rd party library that allows the import and export of SVG format graphics. Use graphic objects to create interactive interfaces, graphs, charts or games."), but the only one named is the animation engine. I have not looked at it, but does it make it possible to make such animations easy to make. Of course it is possible buy separate tools , make the videos and then import the videos into LC, but I think that having that possibility into LC itself would be fun .

[Klaus]

Hi Bob,

...What attracts me is seeing the letters get animated as the teacher speaks. It is a different experience then when smacking a complete letter in powerpoint. SVG contains all the necessary information that would allow for animation of the letters and graphics, that let them "grow". See for instance
https://www.youtube.com/watch?v=GUHhS2OdIEs

sorry, I must be missing something, but this is just a video of an artist (resp. her/his hand) who actually draws all this stuff and then played back in "fast motion"!?


Best

Klaus

[bn]

Hi Bob,

here is a little stack that lets you draw using a graphic object and lets you play back the drawing.

Just click anywhere and start drawing. Stop, start again. Then press replay button. Clear to erase drawing.

This is just a bare bone proof of principle stack but shows a way to do this.

Kind regards

Bernd

[uelandbob]

sorry, I must be missing something, but this is just a video of an artist (resp. her/his hand) who actually draws all this stuff and then played back in "fast motion"!?

Hi Klaus,
No there is no an artist, see
https://www.youtube.com/watch?v=QP_Q9_YZWHU

forward to 9:30 and take a little look

[Klaus]

AHA! An animated drawing hand, go figure

[uelandbob]

Hi Bob,

here is a little stack that lets you draw using a graphic object and lets you play back the drawing.

Just click anywhere and start drawing. Stop, start again. Then press replay button. Clear to erase drawing.

This is just a bare bone proof of principle stack but shows a way to do this.

Kind regards

Bernd

Bernd, you are my hero

Yes it proofs the concept. Can you do that with Bezier curves? If I save a bezier curve I've done in Illustrator and save it as SVG, it contains all the needed info. A bezier curve is very simple, in principle it is a small instruction that says.

1. Go to point A.
2. From there go to point B using these start-handles (two points) and these end handles (two points).
3. From there go to point C using these start-handles (two points) and these end handles (two points).
etc.

That's all there is to it an you get perfect graphics, of the type VideoScribe does. I don't know how much support LC has for Bezier curves but maybe some 3rd party externals have.

thanks again Bob

[bn]

Hi Bob,

Can you do that with Bezier curves?

unfortunately Livecode has no support for Bezier curves. All Livecode can do is cartesian graphics, X,Y points. No interpolation.
There are a couple of stacks that do Bezier curves in X,Y coordinates. And there are stacks that do smoothing of Livecode graphics, approaching the smoothness of Bezier curves.
But there is no way to import Illustrator or SVG files into Livecode.
There is a stack from Alejandro Tejado that does a conversion of SVG to Livecode graphics. But it can only handle older formats and it can only import a limited subset of SVG into LC.

http://capellan2000.000space.com

look at EPS import, it imports ai files, I guess that is Illustrator.
there are also Bezier stacks on his site.

But all that is not what you are asking for and I am afraid that we have to wait for Livecode 8 for that kind of graphic object. As far as I understand it is one of the stretch goals of the Kickstarter campaign.

Kind regards

Bernd

[uelandbob]

unfortunately Livecode has no support for Bezier curves...
There is a stack from Alejandro Tejado ... it can only import a limited subset of SVG into LC.
we have to wait for Livecode 8 for that kind of graphic object.

Thanks again Bernd

Alejandro's stack is good, although we will be able to do the full mounty in LiveCode 8 which are great news

[bn]

Hi Bob,

here is a replay from a couple of graphics I traced from an image into graphics (in Livecode). The original graphics are in a hidden group. The trace reconstructs the graphics of that group.
Note the transition that uses a fillgradient when setting the backgroundcolor.

The depicted subject was chosen because the posterization effect is nicely demonstrated, no other meaning.

There is a lot of things you can do in LIvecode once you get to know it. Even without Bezier curves.

Kind regards

Bernd

[uelandbob]

Thanks Bernd, looks nice

My interest is mainly to help science teachers make online video presentations, and I would like to make the text, formulas and graphics animated, because a picture that slows grows gives another understanding then a complete picture presented as a complete entity. And even though Bezier curves are nice, and are the ones we will use in the future, you are right in that one can do a lot with the present tools in LC, as your stacks clearly demonstrate.