Whiteboard animation for teachers

Got a LiveCode personal license? Are you a beginner, hobbyist or educator that's new to LiveCode? This forum is the place to go for help getting started. Welcome!

Moderators: Klaus, FourthWorld, heatherlaine, kevinmiller

Post Reply
uelandbob
Posts: 72
Joined: Mon Dec 29, 2014 3:28 pm

Whiteboard animation for teachers

Post by uelandbob » Thu Jan 08, 2015 5:16 pm

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 8) .
uelandbob@gmail.com

Klaus
Posts: 11207
Joined: Sat Apr 08, 2006 8:41 am
Location: Germany
Contact:

Re: Whiteboard animation for teachers

Post by Klaus » Thu Jan 08, 2015 6:00 pm

Hi Bob,
uelandbob wrote:...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
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 3307
Joined: Sun Jan 07, 2007 9:12 pm
Location: Bochum, Germany

Re: Whiteboard animation for teachers

Post by bn » Thu Jan 08, 2015 6:14 pm

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
Attachments
DrawAndReplay_0_2.livecode.zip
(2.79 KiB) Downloaded 95 times

uelandbob
Posts: 72
Joined: Mon Dec 29, 2014 3:28 pm

Re: Whiteboard animation for teachers

Post by uelandbob » Thu Jan 08, 2015 6:18 pm

Klaus wrote: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
uelandbob@gmail.com

Klaus
Posts: 11207
Joined: Sat Apr 08, 2006 8:41 am
Location: Germany
Contact:

Re: Whiteboard animation for teachers

Post by Klaus » Thu Jan 08, 2015 6:31 pm

AHA! An animated drawing hand, go figure :D

uelandbob
Posts: 72
Joined: Mon Dec 29, 2014 3:28 pm

Re: Whiteboard animation for teachers

Post by uelandbob » Thu Jan 08, 2015 7:02 pm

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

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
uelandbob@gmail.com

bn
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 3307
Joined: Sun Jan 07, 2007 9:12 pm
Location: Bochum, Germany

Re: Whiteboard animation for teachers

Post by bn » Thu Jan 08, 2015 7:35 pm

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
Posts: 72
Joined: Mon Dec 29, 2014 3:28 pm

Re: Whiteboard animation for teachers

Post by uelandbob » Thu Jan 08, 2015 8:23 pm

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

Alejandro's stack is good, although we will be able to do the full mounty in LiveCode 8 which are great news :D :D
uelandbob@gmail.com

bn
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 3307
Joined: Sun Jan 07, 2007 9:12 pm
Location: Bochum, Germany

Re: Whiteboard animation for teachers

Post by bn » Thu Jan 08, 2015 10:31 pm

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
Attachments
replayTrace_0_1.livecode.zip
(23.36 KiB) Downloaded 78 times

uelandbob
Posts: 72
Joined: Mon Dec 29, 2014 3:28 pm

Re: Whiteboard animation for teachers

Post by uelandbob » Thu Jan 08, 2015 10:56 pm

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.
uelandbob@gmail.com

Post Reply

Return to “Getting Started with LiveCode - Complete Beginners”