HTML5 canvas player.


I delayed this release cause I encountered a bug and I do not know how to solve it. The bug is in some matrix functions and we get as result the click event of easeljs to not work properly.
I will post in the Issues section a more detailed bug report. Maybe someone will found out the solution…

Anyway… I also decided to keep the name easelSif. It will be easier for the eye when coding.


Sorry to hear about the nasty bug. Most of the initial tests I did with the player to make a semi-animated webcomic are very positive.


A new version is up.
Changes is compatibility with the new createjs version. Not for Synfig 1.0 I haven’t checked this out yet.
There are no new futures but there is a new way to handle things and more examples and maybe some bust in speed.
Please report bugs or usage.

Also if their is anyone who reads this and knows how we can make encryption of XML or JSON or something like that please contact me (here cause I almost never check my emails…). I tried to search the net for something like this but without any luck.


Nice … i will try to have a deep look quickly !

i did’nt really read what’s inside but look like something interesting for you ? at the same time, maybe you already found those …


There goes my sleep… yet another thing to try out. :smiley: Good work on the new version. Most of my time goes to reinventing my work flow using the rc1 version of synfig but I will look at your new canvas player when I have the time. The last time I had problems previewing my work on a local server. It used to work by just (up)loading a site locally in my browser but after the previous update that stopped working.


d.j.a.y. thanks for the response. Yes I already seen those but I was unable to figure them out completely. If I remember correctly those are tricks are from the server side but my knowledge is limited on the matter… I will read them again by the way…

darkspace the problem comes from the browser restrictions. You have to create a local server to be able to do the tests. For example the way I do it is to navigate to the directory of the project with the terminal ( terminal in ubuntu is like the command prompt in windows environment) and then type : python -m SimpleHTTPServer
After that go to the browser and write on the address : localhost:8000
and you are ready. Keep in mind that sometime the local server will not refresh to show to you recent changes. I have no idea why. The way I overcome this problem is to create new server with new address. For example SimopleHTTPServer is creating the default 8000. But you can type SimpleHTTPServer 8001 and then have your locahost:8001

By the way SimpleHTTPServer is for python2 so be sure check if you have the right version. Cause ubuntu as basic python uses python2 I do not know the python3 equivalent but I am sure it will be ease to find out.

It was a necessary step to be able to have linked sif files.

The current problem is that if you upload your XML-Sif file, people will be able to download it. This is not a hacking ability it is just the way things work.
It is a common problem of the net. For example you can download all the graphics from all the html5 games.
As I understand this you can have some protection with an encryption key but this work must be done in cooperation with the server and the only server I ever did is this SimpleHTTPServer that comes with python.

Another idea I had is to transform the sif files to minimized json format. So anyone who is going to steal our work will end up with a json file that he will have to turn it to a proper XML. The conclusion I had on the matter is that : If you upload something on the net, then others can steal it…

P.S. I tested my files with RC1 and everything works great.


I am on windows 7. Guess it should not be to difficult to set up a local server.



… IMPORTANT nota that (depending on web server settings) you should request “valid” files aka .xml / .txt / … , from my nginx local web server i need to rename the .sif files to .xml to have a fake 3D plane flying … !


Gradients are back but not perfect. I just added the linear_gradient and the radius gradient but the problem right now is that those layers are going to work properly only if you use the blend method Onto.

d.j.a.y. I thought that after using the preloadjs that the problem of renaming the .sif files to .xml was eliminated. Can you test a .sif file on your server?


omg … i was still testing sifplayer ! and digging, i found something interesting :
adding xmlhttp.overrideMimeType(‘text/xml’); before xmlhttp.send(); “force to fill” xmlhttp.responseXML … because from my point of view (nginx) a .sif file was seen as a ‘text/plain’ content type.

so finally, easelSif work out of the box (for me)! aka no need to rename / tweak anything ! …


I was planing to add the sound layer today but there is a problem.
The problem is that when you choose a sound file, synfig is storing the whole path.
For example :

The test.sif file is in the assets dir. So I changed the path to snd/glass.mp3 but then synfig does not play the sound.

What I am trying to say is that we need similar behavior of storing the file path with the image import layer or the linked sif files.


webaudioapi world very welll for that kind of things … but you should already know … !

you are talking of the xml file format is int it ? so yep … feature request for .sif files (cause sfg should be able to embed the sound file)


Yes I am talking about the XML file. So I guess it will be in the future RC or Stable version.


Hey, I was working on a javascript editor to do some mods to .sif files for quicker editing and was working on a renderer. I did hit a road block when trying to render blines, specifically I don’t know how the tangents t1 and t2 convert into the control points for a canvas context.bezierCurveTo(ctrl1.x, ctrl1.y, ctrl2.x, ctrl2.y, point.x, point.y)
My current thought is that the blines work like this: - which means I move the context to the first point, then use t2 from the first point, t1 from the second point and continue working down the line until I connect back to the first. However, I can’t figure out how to calculate the x and y coordinates of the control points from the t1 and t2 values. I have the points themselves done fine, and have access to the current transformation applied to points (scale, angle, translation), its simply how does the angle and theta relate to the control points. For the record, I can convert an angle and radius into a point by a similar method to {x: cos(t)*r, y: sin(t)*r}, but I am currently stumped as to how the theta and radius of the t1 and t2 relate to points. I get that the t1 and t2 start with the related point as their “origin” but that’s as far as I have gotten. I’ll keep working on it, but I was wondering as you have already solved this problem how the control points are found.


I fixed my own problem and I just got animations working in my own project although mine is more of an additional editor to Synfig meant to fix some things I couldn’t do in Synfig itself, saving back to the Synfig file format.


o my Gosh, i thought about the same thing

anyway, its still awesome


I update this reproductor, is not perfect but works.
It does not use html5 and css alone canvas html5