I tried to imitate Flash, using Synfig and javascript.
It’s complicated, and my javascript’s code is not very good, but it works, and i hope it’s funny.
It’s here :
http://skias.free.fr/bestiole/
Move the mouse over the cat 
[Edit : I dont know if this script works with a browser other than Firefox]
Nice job!
Matt
Good example of Synfig web integration!!
-G
Interesting way to make the animation interactive, at first I thought you’d have generated a set of animated gifs and replace the static images in a table by the animated one using JS (or CSS :hover selector) … but your way is nice too. thanks!
B.
Hello,
Thank you Matt, Genete and Berteh
Berteh, I did this test because I saw in another forum that we could animate png with javascript. I found a code sample on Google, and I adapted it.
I have not even thought of animated gifs, however, it would have been easier! 
But the method of moving big picture in a div has an advantage, we can also stop the animation, and not with the gifs. (I do not use it here, but it could be used in another try)
Very interesting!
For those of us who know nothing about Javascript would you mind giving us a brief overview of how you did this?
Hello Rylleman,
It is not difficult, just a little complicated.
I export the canvas of the different parts of the animation, and I make separate renders.
The images are created in Gimp as this (you put the small pictures first in the top left, second to his right … etc. and the last in the bottom right ) :
http://skias.free.fr/bestiole/oeil.png
http://skias.free.fr/bestiole/oreille1.png
Remember the size of small parts, and those of the picture.
Html div’s code like this :
#oreille1 {
width:122px;
height:94px;
background-image: url('oreille1.png');
background-repeat: no-repeat;
background-position: 0 0;
position : absolute;
top: 69px;
left: 271px;
}
(width and height : size of small part. top and left : position on the html page).
The display of the div is :
<div id="oreille1" onMouseOver="oreille1()"></div>For the javascript code, i give you mine, but it’s not very good, except the part that I copied on Google. I know very few javascript 
:
var chrono_oreille1;
function change_oreille1() {
var pos_oreille1=$('#oreille1').css('backgroundPosition').split(' ')[0].replace(/px|pt/,'');
var pos2_oreille1=$('#oreille1').css('backgroundPosition').split(' ')[1].replace(/px|pt/,'');
pos_oreille1=(pos_oreille1-122<-366)?0:pos_oreille1-122;
if (pos_oreille1==0) {pos2_oreille1=(pos2_oreille1-94<-473)?0:pos2_oreille1-94;}
$('#oreille1').css('backgroundPosition',pos_oreille1+'px '+pos2_oreille1+'px');
if (pos_oreille1==0 && pos2_oreille1==0 && chrono_oreille1!=null) {
clearInterval(chrono_oreille1);
chrono_oreille1=null;}
}
function avance_oreille1() {
chrono_oreille1=setInterval("change_oreille1()",30)}
function oreille1() {
if (chrono_oreille1==null) {avance_oreille1();}
else {return;}
}
122 is width of small part.
94 is height of small part.
366 is width of picture minus 122, width of small part.
473 is height of picture minus 94, height of small part.
I definitely like the concept… might be the topic of a future challenge!
suggestions to make your work easier for next time:
I suck at javascript, but if anyone wants to make the code I’d be willing to test it out!
B.
Hello Berteh,
You’re right, I did not say, but I actually made my renders in png.
Gimp is also good for building images, we can open the sequence with “open as layers”. Cropping is easy because the layers are transparent. And for the placement of layers, “set grid” and “align to grid”, then the layers are easily placed.
And you’re right, “horizontal-only” is better for the code, the sample was “horizontal-only”, but I thought more difficult to create an image very large.
If you want to test, I can make your code.
And I’ll make a model page that can be adapted more easily
Hello,
I’ve tried to make javascript code better, and to make various functions.
http://skias.free.fr/modele/
(all those eyes, it’s a bit weird! 
)
Image is here : http://skias.free.fr/modele/eye.png
Html file : http://skias.free.fr/modele/modele.txt - Rename the file from .txt to .html
javascript file : http://skias.free.fr/modele/modele.js
Nothing to do with javascript file. You must just :
1- create the divs
2- call the function as in the example.
If you need another function, I can try to encode it
Wonderful, I gotta try this, thanks!
XDDD Pretty clever, dude! Now if only we had a direct interface for scripting Java / Python on Synfig. Regardless, that stuff is awesome, and because it’s a cat, it’s super awesome!
Hello !
With Firefox 4, my cat was no longer working.
With help on “Site du Zéro”(javascript’s forum), I fixed it :
In the code, you must replace all
/px|pt/
by
/px|pt|%/
I don’t understand, but it works! 
Hello
I have not used synfig for a while, because I went back to Blender. But now here a new project.
http://skias.free.fr/poissons_synfig/aquarium/aquarium1.html
there is very little animation here, but is made with Synfig! it’s a aquarium game for my little son who loves fishes.
the box is a trash, but it seemed to me wrong to put fish in the trash, so I made a storage box.
You have to click two times on the gray fish: once to display the sprite, another time to move it into the aquarium. I can’t do better.
The table is used to place objects more or less at the bottom of the aquarium.
I still have to improve, and add bubbles
What a charming little game. It’s beautiful to look at and I had fun playing with it.
Beautiful work Mad!
-G
Yep good work mad0 for this “webbased synfig css/javascript sprite animation” … a wbscjsa feature !
Sprite and css speaking … do you know this multiple options “css sprite generator” online tool (opensource/bsd):
fr.spritegen.website-performance.org/
“This tool allows you to automate the process of generating CSS sprites. Simply give it a ZIP file containing 2 or more images (GIF, PNG or JPG) and it will generate a sprite image and the corresponding CSS rules to target and display each component image.”
But, this coul’d be usefull to have this kind of stuff directly in gimp?
Like :
SpriteTape&detape : registry.gimp.org/node/25101 (just tile set image)
CreateTextureAtlas and Map : registry.gimp.org/node/26161 (tile set image & map , but need others tools?)
Sprite Sheet Toolkit : registry.gimp.org/node/25915
CSS WebSprites: Arrange layers and create a CSS file : registry.gimp.org/node/25908 (found it !!!)
see(ya!
It’s 2023, I’m brand new here, and I just discovered your cat: I love it! Have there been updates to interactivity capabilities in Synfig?
