Player dialog

In Longscript editor, you can preview your animation by invoking the player dialog. When opened, the player dialog will instantly play your animation. In this dialog, you can play, pause, rewind, loop and alter the speed of the animation. The controls of the dialog will appear when you move the mouse over the dialog.

By clicking the globe icon, Longscript editor will generate the code you need to insert into your webpage. The code looks something like this:

<img id="animation_id"

// Generated with app.longscript.com
eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('8 1K=(7(Z){8 l={O:{1e:20,F:[],C:\'\',1a:H,17:B,f:B,r:1h.1G*2},I:7(d){8 m=l,q=m.O;14(d){J\'1k\':4 m.P(1P[1]);J\'1g\':4 m.S()}3(/1v [1B]/i.1H(1I.1J)||q.f)4;8 u=7(n){4 Z.1Q(n)},o=7(n){4 Z.1Z(n)},13=7(e,r){4 1i(e,1j)[r]},A=u(\'N\').C=\'/\'+\'/1o.1p.1q/a.1y\',c=o(d.1C),i=1D 1E(),z,6;V(z U q){6=c.22(\'1L-\'+z);3(!6)1M;14(12(q[z])){J\'1O\':6=(6===\'H\');10;J\'Y\':6=1R.1S(6);10;1W:6=q[z].1X(6)}q[z]=6}q.5=0;m.X(q,d);m.a=u(\'M\');m.k=m.a.Q(\'R\');m.b=c.1l.1m(u(\'M\'),c.1n);m.n=m.b.Q(\'R\');m.t=u(\'M\');m.s=m.t.Q(\'R\');m.b.E.1r=\'1s\';m.b.E.1t=c.1u+\'16\';m.b.E.1w=c.1x+\'16\';m.b.E.W=13(c,\'W\');c.E.1z=0;i.1A=7(){8 t=m;t.b.g=t.a.g=t.t.g=K.g;t.b.9=t.a.9=t.t.9=K.9;t.O.N=K;3(m.O.1a)t.P()};i.C=m.O.C||c.C},S:7(){8 q=l.O;q.p=H;q.f=B;1F(q.x);q.x=B},P:7(11){8 m=l,q=m.O,a=m.a;3(11)q.5=q.F.G;3(q.5===q.F.G){m.k.L(0,0,a.g,a.9);q.5=0}m.S();q.p=B;q.f=H;m.D()},D:7(){8 m=l,q=m.O,5=q.5,y=q.F[5],15=q.r,b=m.b,n=m.n,a=m.a,k=m.k,t=m.t,s=m.s,w=t.g,h=t.9,e,v;3(q.p)4;3(!y||q.5>q.F.G){3(q.17){4 m.P()}18{3(q.19)q.19();4 m.S()}}s.L(0,0,w,h);n.L(0,0,w,h);V(8 j=0,1b=y.G;j<1b;j++){e=y[j];k.1T();k.1U(e[0],e[1],e[2],0,15,B);k.1V()}s.1c=\'1d-1Y\';s.T(m.a,0,0);s.1c=\'1d-U\';s.T(q.N,0,0);n.T(t,0,0);3(q.1f)q.1f(q.5+1);q.5++;q.x=21(m.D,q.1e)},X:7(o,e){V(8 c U e){3(!o[c]||12(e[c])!==\'Y\'){o[c]=e[c]}18{K.X(o[c],e[c])}}}};4 l.I}(1N));',62,127,'|||if|return|fI|oV|function|var|height|||||||width|||||ls||||||||||||||oN||false|src||style|frames|length|true||case|this|clearRect|canvas|img|||getContext|2d||drawImage|in|for|zIndex||object||break|rewind|typeof|css|switch|PI2|px|loop|else|complete|autoplay|jl|globalCompositeOperation|source|speed|step|stop|Math|getComputedStyle|null|play|parentNode|insertBefore|nextSibling|www|longscript|com|position|absolute|top|offsetTop|MSIE|left|offsetLeft|php|opacity|onload|678|id|new|Image|clearTimeout|PI|test|navigator|userAgent|LS|data|continue|document|boolean|arguments|createElement|JSON|parse|beginPath|arc|fill|default|constructor|over|getElementById||setTimeout|getAttribute'.split('|'),0,{}));
LS({id: 'animation_id'});

The attribute data-src can be replaced with the path to the image on your server - it's optional. The only rule is that the image must be hosted on the same server as the script animating the canvas-element.


The basic idea of Longscript is to unmask a static image, bit by bit - thus achieving an illusion of animation.

The image should preferably be of a PING type, so that the animation plays well with any background. The unmasking is made with arc's and for that purpose, a canvas element is used.

With Longscript editor, you can position arc(s) on the image and add "frames", representing animation frames. On each frame arc(s) should be moved and unmask more of your image until it's fully exposed.

You can play your animation at any time in Longscript editor and once you are satisfied with it, the application generates the code needed to embed the animation to any HTML page.


Zoom & Pan

In Longscript editor, you can zoom and pan the workspace. To pan aound, just drag and drop anywhere, except for the arc that is coloured blue-ishly. This blue arc represents the current area to unmask for the animtion. You can drag and drop this arc, in order to position the desired unmasking.

Some images requires fine-tuned positioning of the arc. On such occasions, you can zoom in to the workspace by pressing down CMD key (CTRL on PC) and move the mouse up and down.

If you use CMD key when click and draging the blue arc, you will resize it. Pretty smart, huh?


Working with frames

After working with Longscript editor, I realized that it needs keyboard shortcuts, in order to work faster.

Having keyboard shortcuts facilitates the work a lot. The most important one is CMD+F (CTRL+F on PC) which adds a new frame. Using this shortcut enables you to focus on the animation without moving around the mouse that much.

Yet another keyboards are LEFT and RIGHT keys. With these keys, you can move around the active frame, enabling you to adjust the unmasking arc(s).


What browser?

Recommended browser when using Longscript editor is Chrome. Longscript editor works fine with Firefox and Safari but the speed of Chrome is exceptional in comparison. Additionaly, the experience is just superior in Chrome.

In fact, use Chrome as your default browser - trust me; you will see & experience the web as it should be.

Whatever you do, don't use Internet Explorer. By using that software, not only you'll be breaking the internet - you'll be breaking my heart.


How to Create account

You don't have to fill in a specific form in order to create your account. Just type in your email address into the log-in dialog.

If Longscript editor recognizes your mail address, it will prompt you for your password. If it doesn't recognizes your e-mail, it'll instantly create your account and send you your password to the mail address you've typed.


How to Change password

After logging in, you can change your password. To do that, click the cogs-icon - which in turn will display a dialog, asking you to enter a new password.

If you aren't logged in and have forgotten your password (and you don't have the mail that was sent to you earlier), just type your e-mail adress. When asked for password, type ILoveLongscript and Longscript editor will send you a new password.


How to Load project

To load or switch project, click the open-icon. When clicked, Longscript will display projects-dialog.

Remeber to so save your current project before loading a new one.


How to Save project

When ever you want to save your project, just click the save-icon. You can also use the keyboard shortcut; CMD+S on MacOS and CTRL+S on PC.