Openlaszlo generation of animated vector graphics (GUI)

[Koba]

Hi

Recently I've been looking into the creation of animated vector graphics. Being an open source guy I first played with synfig (http://www.synfig.com/) which is very cool but also very alpha. One of my favorite features was the ability to animate bspline handles. Problem with synfig is that it doesn't export to vector formats.

Last night I was trying out Flash 8 to see if it has the same feature (it does), I wondered what other ways there are of animating vector curves. Then I remember that Openlaszlo has a drawview API and that those properties should be animatable. Currently in the documentation, the only example of animation is of a circle expanding and contracting.

If Openlaszlo had a bspline object, it would be possible to write a Flash-like GUI application where you could draw shapes (circles, rectangles etc) as well as splines. This would work as the often-requested GUI designer for openlaszlo but you could also use it to create animations with keyframes. Even better, by keyframing bspline handles, you could create shape morphs for animation.

Then it would be great if you could turn all that information into a chunk of .lzx code to include in your web applications. Openlaszlo could be a serious contender to Flash 8 for online animation. Even better it, you would have the option of using DHTML.

What do you think?

Koba

P.S> I would also like to suggest a minimalist browser with Flash that could be bundled with openlaszlo applications for offline deployment.

[d~l]

OpenLaszlo plus Fuse (http://www.mosessupposes.com/Fuse/) is an interesting co-working possibility.

Although the Fuse examples are Flash *.fla files, there is an example swf in

fuse2.1.3/examples/if not using mxp/customEasingTool2swf

this generates an output like this ..


var easeInOutBack:Array = [{Mx:0,My:0,Nx:20,Ny:0,Px:6,Py:11.95},{Mx:26,My:11. 95,Nx:62,Ny:38,Px:-18,Py:-49.95},{Mx:70,My:0,Nx:30,Ny:-38,Px:0,Py:-62},{Mx:100,My:-100,Nx:24,Ny:-138,Px:2,Py:43},{Mx:126,My:-195,Nx:28,Ny:-70,Px:14,Py:50},{Mx:168,My:-215,Nx:48,Ny:32,Px:-16,Py:-17},{Mx:200, My:-200}];


which output could be parsed into OpenLaszlo animation syntax?

...

Also inkscape (http://www.inkscape.org) is a tool for generating SVG.

[Koba]

Hi

Actually, you just gave me an idea. Blender has bezier curves and Blender Python is pretty awesome. It wouldn't be hard to export the data straight to .lzx xml - thing is laszlo doesn't have bezier curves (as far as I know), just quadratics. Calibaration could be a bit tricky but manageable. Alternatively, you could parse an .svg file from inkscape into suitable code (I've used inkscape a lot!).

In short, the request comes down to getting laszlo bsplines before anything else.

Koba

P.S> If openlaszlo got .svg import (which used to be in the works I hear) then it would be great if you had access to the svg attributes/elements for animation.

[d~l]

I forgot to mention this article on javascript beziers (http://osteele.com/archives/2006/02/javascript-beziers)

[Koba]

Yup. I've now figured that out.

I'm sure you know (it was on that link you sent me) that there are some issues. The following is meant to create a heart for example.

<canvas width="300" height="300" debug="false" >

<drawview>
<handler name="oninit">

this.beginPath();
this.moveTo(75,40);
this.bezierCurveTo(75,37,70,25,50,25);
this.bezierCurveTo(20,25,20,62.5,20,62.5);
this.bezierCurveTo(20,80,40,102,75,120);
this.bezierCurveTo(110,102,130,80,130,62.5);
this.bezierCurveTo(130,62.5,130,25,100,25);
this.bezierCurveTo(85,25,75,37,75,40);
this.fill();


</handler>
</drawview>

</canvas>

Those bezier values come from http://developer.mozilla.org so I'm wondering how those people came up with it. Did they just play with text or was there a GUI to help them?

Koba

[stuckhere90]

if open laszlo is actually using bezier, then you should be able to create almost any shape you want. Simply change the appropriate variables.