Ella : projet de logiciel d'animation Flash & SVG pour Linux

lovasoa · Le 15/05/2010, à 10:45

Bon, alors on en revient au développement.
Avec ton pointeur *pListLayer, je n'ai pas compris si on aurait une liste de frames ou une liste d'action.
En fait, est-ce qu'on doit coder en js un truc du genre:
-à l'instant t on affiche telles chose à telles places.
-à l'instant t+1 on affiche telles chose à telles places.

Ou un truc du genre:
-à l'instant t on affiche telles chose à telles places.
-à l'instant t+1 on déplace le bitmap X de 7px, et on diminue l'alpha de tel triangle de 20% et on supprime le bitmap Y.
Tu vois ce que je veux dire? En gros, est-ce que tout le calcul est fait par Ella, ou est-ce que l'on doit en faire une partie en Javascript?

iri · Le 15/05/2010, à 10:48

Si ça te tente, tu as la licence WTF Public License,
je l'ai déjà appliquée par fun pour des bouts de code, jamais pour une appli mais pourquoi pas ?!

En même temps, quelqu'un pourra alors en faire aussi une appli commerciale et fermée du coup !... C'est le cas aussi pour les BSD-like.

iri · Le 15/05/2010, à 10:54

Je sais que tu l'as déjà évoqué mais je ne retrouve plus où exactement

Le fichier Ella dont tu as publié la doc un peu plus haut, il est dans un format binaire ou texte ?
En fait, le js ne m'intéresse pas personnellement mais éventuellement pour des applis spécifiques non web. J'ai donc besoin des données brutes de l'animation sans pré traitement. Donc a priori, du fichier *.ella

kevlar · Le 15/05/2010, à 11:03

lovasoa a écrit :

Bon, alors on en revient au développement.
Avec ton pointeur *pListLayer, je n'ai pas compris si on aurait une liste de frames ou une liste d'action.
En fait, est-ce qu'on doit coder en js un truc du genre:
-à l'instant t on affiche telles chose à telles places.
-à l'instant t+1 on affiche telles chose à telles places.
Ou un truc du genre:
-à l'instant t on affiche telles chose à telles places.
-à l'instant t+1 on déplace le bitmap X de 7px, et on diminue l'alpha de tel triangle de 20% et on supprime le bitmap Y.
Tu vois ce que je veux dire? En gros, est-ce que tout le calcul est fait par Ella, ou est-ce que l'on doit en faire une partie en Javascript?

Tu as parfaitement compris, c'est la seconde version qui est la bonne ... tout le calcul est fait par Ella, qui compare, à chaque image clé, le "statut" des items. Prenons un exemple :
- un rectangle a été défini à l'image-clé 0, à la position 320,200.
- Ella lit la timeline, et arrive à l'image-clé 35. Ella constate alors que la position du rectangle est maintenant 640,10. Ella vérifie alors que le flag d'interpolation de mouvement est actif ; si oui, une animation est calculée, si non, l'objet est déplacé en une seule fois.
- c'est le même principe pour tout ce qui peut être animé : transparences, rotations, zoomings.

Tant que j'y suis, un truc important que j'avais oublié. Dans le système de fichiers d'Ella, lors de la déclaration d'un item par [ITMNEW] la structure du nom de la variable qui suit a un rôle important.
Exemples :
[ITMNEW]B1 se lit ainsi : création d'un Bitmap considéré comme objet n°1
[ITMNEW]T10 se lit ainsi : création d'un objet texte considéré come 10ème objet.
Pour résumer :
en supposant que dans la suite, x désigne un nombre :
[ITMNEW]Bx déclaration d'un bitmap
[ITMNEW]Cx déclaration d'un cercle/ellipse
[ITMNEW]Lx déclaration d'une ligne
[ITMNEW]Rx déclaration d'un rectangle/boîte

Je me suis inspiré de ce que fait en interne INkscape : vous remarquerez que chaque objet a un nom, en interne, sous Inkscape.

kevlar · Le 15/05/2010, à 11:19

iri a écrit :

Je sais que tu l'as déjà évoqué mais je ne retrouve plus où exactement
Le fichier Ella dont tu as publié la doc un peu plus haut, il est dans un format binaire ou texte ?
En fait, le js ne m'intéresse pas personnellement mais éventuellement pour des applis spécifiques non web. J'ai donc besoin des données brutes de l'animation sans pré traitement. Donc a priori, du fichier *.ella

Format "mixte" inspiré de celui d'OpenOffice : un fichier .ella est un "binaire" car c'est un fichier compressé au format ZIP. Cependant, après décompression, tu y trouves un fichier texte tout simple, et d'éventuels fichiers bitmaps, sons.
Voici des exemples de fichiers à télécharger si tu/vous souhaitez étudier le format.
- un fichier assez simple, avec un fond d'écran et deux bitmaps : http://kevlar.legtux.org/donnees_publiq … tures.ella
- un fichier complexe, mettant en oeuvre tous les objets :
http://kevlar.legtux.org/donnees_publiq … alpha.ella

Une fois téléchargés, double-clic pour lancer le gestionnaire d'archives, et extraire les fichiers contenus. Le fichier maître se nomme descriptor.lst

lovasoa · Le 15/05/2010, à 12:47

Donc l'interpolation est calculée par Ella, pas par moi. Pour reprendre ton exemple, Ella me fournit toutes les positions du rectangle entre l'image 0 et l'image 35, et je n'ai plus qu'à dépemander à Javascript de les afficher?

kevlar · Le 15/05/2010, à 13:46

Pas exactement : seules les positions entre 0 et 35 sont connues et stockées. L'interpolation est le fait, soit de l'encodeur Flash, soit de l'encodeur SVG (j'ai commencé à y jeter un œil, le SVG fonctionne à cet égard comme Flash).

Pour le JavScript, je ne sais pas comment se fait l'animation, j'espère que si tu lui donnes un point de départ et d'arrivée, il sait la calculer lui-même. Sinon, une simple interpolation linéaire devrait suffire (tu as les couples x,y de départ et d'arrivée )

kevlar · Le 15/05/2010, à 13:55

Si je prends le tuto trouvé ici : http://www.devparadise.com/technoweb/co … pt/d39.php

Une déclaration [ITMNEW]R1 (déclaration du rectangle n°1) deviendrait :

<DIV ID="R1" STYLE="position:absolute;">
contenu à changer
</DIV>

et d'après ce que je lis ici : http://www.schillmania.com/content/proj … imation-1/ tu dois initialiser un intervalomètre qui va déplacer l'objet. Par conséquent, il te faut bien calculer une interpolation linéaire compte tenu du couple de points de départ et d'arrivée.

et voici le réponse complète ici, concernant l'interpolation de mouvement (motion tween) :
http://www.schillmania.com/content/proj … imation-3/

Dernière modification par kevlar (Le 15/05/2010, à 14:04)

lovasoa · Le 15/05/2010, à 15:49

Tu dis que tu as jeté un œil au SVG. Tu comptes l'ajouter (ou le faire ajouter)? Parceque si c'est le cas, mon <canvas> ne sert plus à grand chose . SVG peut aussi marcher avec du Javascript, est libre, gère la transparence et l'interpolation, peut intégrer des bitmaps (alors que <canvas> ne peut pas integrer de vectoriels), et le seul argument qu'il avait contre lui va disparaitre bientôt: il sera supporté par IE9...

kevlar · Le 15/05/2010, à 15:53

Oui, c'est vrai que j'aimerais bien que quelqu'un s'intègre au projet pour le SVG. Pour le moment, j'ai juste ajouté un menu+icône.

Mais je trouve que tu devrais continuer de ton côté le JavaScript, car on a encore de la marge avant que FFox utilise le SVG ...

lovasoa · Le 15/05/2010, à 15:54

Je n'avais pas vu ton message précédent. Ce qui est écrit à propos de l'interpolation de mouvement est intéressant, mais tu parles de DIVs. Or ce n'est pas exactement ce que je comptais faire. Je voulais faire ça avec la balise Canvas, qui sait gérer un certain nombre de choses toutes seules.

kevlar · Le 15/05/2010, à 16:00

Tu es libre de tes choix de développement ! Je ne connais pas l'naimation JavScript, donc tu sais mieux que moi comment faire !
Essaye de commencer par écrire un bout de routine qui pose le "cadre" de l'animation, si tu veux bien : taille scène, couleur de fond... Envois-moi le résultat, et je te renverrai le résultat intégré à Ella, si tu veux bien !
Pour moi : ta routine doit produire un fichier texte, qui sera intégré aux pages HTML.

lovasoa · Le 15/05/2010, à 17:42

J'ai fait ce que tu me demandais. Enfin, j'ai fait le HTML et le javascript. Pour le C, je suis pas fort et je ne saurais sûrement pas faire. Bref, j'ai fait les deux fichiers à exporter pour créer une animation vide avec juste ce que tu me demandais : taille scène et couleur de fond.
Il faut remplacer

animation_name par le nom de l'animation
animation_width par la largeur
animation_height par la hauteur
animation_background_color par la couleur de fond (format HTML)

Code html: animation_name.html

<html> 
  <head> 
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> 
    <title>animation_name</title>
  </head> 
 
  <body>
  	<canvas id="animation_name" width="animation_width" height="animation_height"></canvas>
  	<div id="alert_message"></div>
	<script type="text/javascript" src="animation_name.js" onload="main_loop()">Sorry, you must have the javascript enabled to see this animation.</script> 
  </body>
</html>

Code javascript : animation_name.js

textOnFail = "Sorry, your web browser isn't able to read this animation. Please try to download <a href='http://mozilla.org/firefox/'>Firefox</a>, a free, open source and standart-compliant browser.";

canvas = document.getElementById('animation_name');
if (canvas.getContext){
	ctx = canvas.getContext('2d');
}else{
	document.getElementById('alert_message').innerHTML = textOnFail;
}

frame = 0;
function main_loop (){
	//Code à écrire seulement si il y a une couleur de fond
		ctx.fillStyle(animation_background_color);
		ctx.fillRect(0,0,animation_width,animation_height);
	//Code à écrire sinon (fond transparent)
		ctx.clearRect(0,0,animation_width,animation_height);

	frame++;
}

main_loop();

Que chacun se sente libre de l'améliorer (enfin, bon il y a 3 fois rien pour l'instant).

Et j'en reviens à la question précédente. Est-ce que l'on va coder les interpolations dans l'exportateur js ou dans le js lui-même? La première solution rendra un code javascript imbuvable, la seconde rendra l'animation lourde pour le client. Oui, je sais je vois le verre à moitié vide ...

kevlar · Le 15/05/2010, à 17:56

Peux-tu m'expliquer comment s'articulent les deux fichiers ? Je crois qu'ils sont générés séparément, et sont lus depuis le fichier HTML du site ? Correct ? Si oui, j'essaye de m'y mettre ...

lovasoa · Le 15/05/2010, à 18:01

Oui, ce sont deux fichiers séparés. On ouvre le fichier HTML, dont la ligne

    <script type="text/javascript" src="animation_name.js" onload="main_loop()">Sorry, you must have the javascript enabled to see this animation.</script>

va chercher le fichier javascript.
Si tu trouves ça plus simple, on peut tout mettre dans le fichier HTML, et inclure le code javascript dans la balise <script>, mais je trouve ça moins "propre".
La fonction d'export en html de Macromedia Flash génère un fichier html assez semblable au miens, et un swf dont il est fait référence dans le HTML.

pops · Le 15/05/2010, à 18:27

joli projet

une question tout de meme, est ce que le logiciel ne fais que de l'animtion, ou on peut aussi rajouter ses propres bout d'actionscript comme dans flash?

sinon a propos de js/canvas/svg... vous pouvez peut etre regarder burst
(ya pas mal de liens mort, le site a changé)

http://github.com/F1LT3R/burst
http://hacks.mozilla.org/2009/06/rendering-svg-canvas-burst/

lovasoa · Le 15/05/2010, à 19:03

Oups, dans la fonction main_loop, je voulais écrire

function main_loop (){
    //Code à écrire seulement si il y a une couleur de fond
        ctx.fillStyle(animation_background_color);
        ctx.fillRect(0,0,animation_width,animation_height);
    //Code à écrire sinon (fond transparent)
        ctx.clearRect(0,0,animation_width,animation_height);

    frame++;
    setTimeOut('main_loop', 1000/animation_framerate);
}

J'ai rajouté le settimeout pour que la fonction main_loop boucle sur elle même à animation_framerate images par seconde.

Dernière modification par lovasoa (Le 15/05/2010, à 19:04)

kevlar · Le 15/05/2010, à 19:18

lovasoa a écrit :

Oui, ce sont deux fichiers séparés. On ouvre le fichier HTML, dont la ligne
    <script type="text/javascript" src="animation_name.js" onload="main_loop()">Sorry, you must have the javascript enabled to see this animation.</script>
va chercher le fichier javascript.
Si tu trouves ça plus simple, on peut tout mettre dans le fichier HTML, et inclure le code javascript dans la balise <script>, mais je trouve ça moins "propre".
La fonction d'export en html de Macromedia Flash génère un fichier html assez semblable au miens, et un swf dont il est fait référence dans le HTML.

J'ai commencé à écrire la routine d'exportation basique, avec dialogues utilisateurs ... Voici le fichioer html produit, lorsque je lui ai donné comme nom d'animation : tests ; est-ce correct ? Le fichier html se nomme tests.html

<html> 
  <head> 
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> 
    <title>tests</title>
  </head> 
   
  <body>
      <canvas id="tests" width="320" height="200"></canvas>
      <div id="alert_message"></div>
    <script type="text/javascript" src="tests.js" onload="main_loop()">Sorry, you must have the javascript enabled to see this animation.</script> 
  </body>
</html>

kevlar · Le 15/05/2010, à 19:19

pops a écrit :

joli projet
une question tout de meme, est ce que le logiciel ne fais que de l'animtion, ou on peut aussi rajouter ses propres bout d'actionscript comme dans flash?
sinon a propos de js/canvas/svg... vous pouvez peut etre regarder burst
(ya pas mal de liens mort, le site a changé)
http://github.com/F1LT3R/burst
http://hacks.mozilla.org/2009/06/rendering-svg-canvas-burst/

peux-tu développer ?

kevlar · Le 15/05/2010, à 19:32

@lovasoa ; je suis en train de faire la partie javascript, mais j'ai deux questions :
- comment écrivez-vous les codes de couleur ? La variable animation_background_color est-elle un nombre ou une chaîne html ? S'il s'agit d'un nombre, comment sont codées les composantes de couleurs ? RVB 8 bits ou RVB 16 bits ? Exemple : sous Gtk, la couleur blanche s'écrit ainsi : #FFFFFF
- d'où sors-tu la variable animation_framerate ? Et quelle-est sa nature. Sous Ella, c'est un nombre entier, qui va de 1 à 30 (images par seconde, comme en télévision) ?

Voici une erreur qui se produit sous Chromium, dont l'inspecteur est bien pratique :

Dernière modification par kevlar (Le 15/05/2010, à 19:45)

lovasoa · Le 15/05/2010, à 22:50

J'utilise aussi Chromium, et je l'adore.
Sinon, honte à moi ! fillStyle n'est pas une fonction, comme nous le fait remarque Chromium. On écrit donc

ctx.fillStyle = "#FF0065"

Sinon, pour les couleurs, il y a plusieurs manières de faire. fillStyle est une chaîne de caractères, qui peut être:
-une valeur hex (apparemment commen en gtk). Ex "#FF00DD".
-une valeur décimale rgb. Ex "rgb(255,12,96)"
-une valeur decimale avec transparence "rgba(66,99,10,0.5)"
Si tu utilises la valeur avec transparence, on doit faire un clearRect avant, pour que l'on ne voit pas la frame précédente par transparence.

Dernière modification par lovasoa (Le 15/05/2010, à 23:25)

lovasoa · Le 15/05/2010, à 23:50

Sinon, pour le html, on pourrait rajouter

<!DOCTYPE html>

au tout début du fichier HTML, comme ça il passerait la validation du w3c en mode html5, et ça serait cool .

kevlar · Le 16/05/2010, à 08:48

Génial, la tournure rgb(255,12,96) va sacrément faciliter le travail.

Maintenant, une autre remarque : si j'ai bien compris, ton main_loop correspond à la durée TOTALE de l'animation ? Dans ce cas, il faudrait donc que les différents items apparaissent ou soient appelés DEPUIS l'intérieur de cette boucle ?
Pourrais-tu dans ce cas construire les primitives de dessin de base sous forme de fonctions appelées depuis n'importe quel endroit du programme ? Cercle, boîte, ligne, affichage bitmap, affichage texte ...

kevlar · Le 16/05/2010, à 09:04

çà y est, ce début de code fonctionne (par contre je n'ai pas compris si la balise <!DOCTYPE html> est sur la première ligne du fichier html
Voici le test en cours d'édition sous Ella (il ne fait rien, juste un fond d'écran) :

Et le résultat sous Chromium, en JavaScript après exportation :

lovasoa · Le 16/05/2010, à 10:23

kevlar a écrit :

Génial, la tournure rgb(255,12,96) va sacrément faciliter le travail.
Maintenant, une autre remarque : si j'ai bien compris, ton main_loop correspond à la durée TOTALE de l'animation ? Dans ce cas, il faudrait donc que les différents items apparaissent ou soient appelés DEPUIS l'intérieur de cette boucle ?
Pourrais-tu dans ce cas construire les primitives de dessin de base sous forme de fonctions appelées depuis n'importe quel endroit du programme ? Cercle, boîte, ligne, affichage bitmap, affichage texte ...

La fonction main_loop est appelée une fois à la fin du script, puis s'appelle elle même toutes les 1000/framerate millisecondes. Effectivement, que les éléments soient créés depuis l'intérieur de cette fonction. J'ai créé la variable frame qui s'incrémente à chaque appel de main_loop, pour que l'on puisse savoir quoi dessiner et à quel moment. Sinon, tu ne m'as pas répondu, les interpolations seront-elles calculées par Ella ou par javascript?

Dernière modification par lovasoa (Le 16/05/2010, à 10:29)

Ubuntu-fr

Navigation

Liens de recherche

Annonce

#201 Le 15/05/2010, à 10:45

Re : Ella : projet de logiciel d'animation Flash & SVG pour Linux

#202 Le 15/05/2010, à 10:48

Re : Ella : projet de logiciel d'animation Flash & SVG pour Linux

#203 Le 15/05/2010, à 10:54

Re : Ella : projet de logiciel d'animation Flash & SVG pour Linux

#204 Le 15/05/2010, à 11:03

Re : Ella : projet de logiciel d'animation Flash & SVG pour Linux

#205 Le 15/05/2010, à 11:19

Re : Ella : projet de logiciel d'animation Flash & SVG pour Linux

#206 Le 15/05/2010, à 12:47

Re : Ella : projet de logiciel d'animation Flash & SVG pour Linux

#207 Le 15/05/2010, à 13:46

Re : Ella : projet de logiciel d'animation Flash & SVG pour Linux

#208 Le 15/05/2010, à 13:55

Re : Ella : projet de logiciel d'animation Flash & SVG pour Linux

#209 Le 15/05/2010, à 15:49

Re : Ella : projet de logiciel d'animation Flash & SVG pour Linux

#210 Le 15/05/2010, à 15:53

Re : Ella : projet de logiciel d'animation Flash & SVG pour Linux

#211 Le 15/05/2010, à 15:54

Re : Ella : projet de logiciel d'animation Flash & SVG pour Linux

#212 Le 15/05/2010, à 16:00

Re : Ella : projet de logiciel d'animation Flash & SVG pour Linux

#213 Le 15/05/2010, à 17:42

Re : Ella : projet de logiciel d'animation Flash & SVG pour Linux

#214 Le 15/05/2010, à 17:56

Re : Ella : projet de logiciel d'animation Flash & SVG pour Linux

#215 Le 15/05/2010, à 18:01

Re : Ella : projet de logiciel d'animation Flash & SVG pour Linux

#216 Le 15/05/2010, à 18:27

Re : Ella : projet de logiciel d'animation Flash & SVG pour Linux

#217 Le 15/05/2010, à 19:03

Re : Ella : projet de logiciel d'animation Flash & SVG pour Linux

#218 Le 15/05/2010, à 19:18

Re : Ella : projet de logiciel d'animation Flash & SVG pour Linux

#219 Le 15/05/2010, à 19:19

Re : Ella : projet de logiciel d'animation Flash & SVG pour Linux

#220 Le 15/05/2010, à 19:32

Re : Ella : projet de logiciel d'animation Flash & SVG pour Linux

#221 Le 15/05/2010, à 22:50

Re : Ella : projet de logiciel d'animation Flash & SVG pour Linux

#222 Le 15/05/2010, à 23:50

Re : Ella : projet de logiciel d'animation Flash & SVG pour Linux

#223 Le 16/05/2010, à 08:48

Re : Ella : projet de logiciel d'animation Flash & SVG pour Linux

#224 Le 16/05/2010, à 09:04

Re : Ella : projet de logiciel d'animation Flash & SVG pour Linux

#225 Le 16/05/2010, à 10:23

Re : Ella : projet de logiciel d'animation Flash & SVG pour Linux

Pied de page des forums