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

superZozo · Le 11/05/2010, à 08:35

Si je peux faire une modeste contribution pour ce projet avec mon expérience de javascript concernent les optimisations :

J'ai remarqué (avec Firefox en tout cas) qu'il vaut mieux éviter les binding, closure (etc...) a outrance : cela ralentit beaucoup beaucoup l'exécution.

ex pour lier un mouseover:

addEvent(objet[i],'mouseover', objet[i].bouge.bind(obejt[i],null), false);

//avec

//Gestion des evenements
function addEvent(elm, evType, fn, useCapture){
	if(elm.addEventListener){
		elm.addEventListener(evType, fn, useCapture);
		return true;
	}else if (elm.attachEvent){
		var r=elm.attachEvent('on'+evType, fn);
		return r;
	}else {
		elm['on'+evType]=fn;
	}
}
//binding
Function.prototype.bind = function(context, arguments) {
	var m = this; // référence l'instance de Function
	return function() {
		return m.apply(context, arguments);
	}
}

C'est élégant mais TRES LENT !!!!!!!!!!!!!!

Voilà ce que j'ai fait, je capte la position de la souris de la page et si il y a survol de l'objet j'appelle une fonction :
(ici objet.bouge() )

//gestion de la souris ////////////////////////////////////////////////// //////////////
function gestionSouris(){
	this.objets = new Array(); //objets à mettre à jour
	var OBJETS = this.objets; //pointeur
	// mouvement de la souris
	this.updateMove = function(e){
		// rafrachir la position de la souris

		var DocRef;    // Variable pour IE uniquement
		// L'événement est passée à la fonction
		// donc tous sauf IE…
		if( e){                     // Dans ce cas on obtient directement la position dans la page
			Mouse_X = e.pageX;
			Mouse_Y = e.pageY;
		}else{                      // Dans ce cas on obtient la position relative à la fenêtre d'affichage
			Mouse_X = event.clientX;
			Mouse_Y = event.clientY;
			//-- Il faut traiter le CAS des DOCTYPE sous IE
			if( document.documentElement && document.documentElement.clientWidth) // Donc DOCTYPE
				DocRef = document.documentElement;   // Dans ce cas c'est documentElement qui est réfèrence
			else
				DocRef = document.body;                    // Dans ce cas c'est body qui est réfèrence
			//-- On rajoute la position liée aux ScrollBars
			Mouse_X += DocRef.scrollLeft;
			Mouse_Y += DocRef.scrollTop;
		}
		
		// rafraichir la taille de la fenêtre
		fenetre();

		//mise à jour des objets
		for (var i=0;i<OBJETS.length;i++){
			//survol
			var position = new Array();
			position = getPosition(OBJETS[i].cible);
			// alert(position);

			if((Mouse_X>position[0])&&(Mouse_X<position[2])&&(Mouse_Y>position[1])&&(Mouse_Y<position[3])){ //survol

				OBJETS[i].bouge(); // <-------------------------------------------ici le 'mouseover'
				OBJETS[i].dedans =true;
			}else{
				if(OBJETS[i].dedans){ //= mouse out
					OBJETS[i].sortie();
					OBJETS[i].dedans=false;
				}else{OBJETS[i].dedans=false;}
			}
		}
	}
	//click de la souris
	this.updateClick = function(e){
		//mise à jour des objets
		for (var i=0;i<OBJETS.length;i++){
			//survol
			var position = new Array();
			position = getPosition(OBJETS[i].cible);

			if((Mouse_X>position[0])&&(Mouse_X<position[2])&&(Mouse_Y>position[1])&&(Mouse_Y<position[3])){ //survol
				OBJETS[i].clique();
			}
		}
	}
}

C'est beaucoup plus rapide !!!!

J'ai pas mis tout le code (getPosition etc...), mais il faut comprendre l'esprit.
Tout cela n'est pas vraiment implicite quand on s'attaque à javascript.

Voilà si cela peut servir

Dans ce cas :

Elegant = lent
Brutal = rapide

Je suis sûr que plein de gens vont se mettre au javascript maintenant !!!

Dernière modification par superZozo (Le 11/05/2010, à 09:16)

kevlar · Le 11/05/2010, à 11:10

xapantu a écrit :

Si tu n'y et pas opposé, je peux t'aider ? (je suis pas un expert mais je maîtrise pas mal bazaar)

envois-moi un MP, mais en ce moment, je n'ai pas beaucoup de temps pour les loisirs

kevlar · Le 11/05/2010, à 11:17

lovasoa a écrit :

Est-ce que tu peux poster un fichier .ella, que je puisse regarder la structure, et me rendre compte si il est possible, et surtout si je suis capable de coder l'exportation vers Javascript?
Sinon, pour le C, mes competences se résument à quelques programmes de Maths que j'ai codés pour un garçon de ma classe… Aucune expérience des bibliothèques autres que standard… Mais je pense que le principal est de trouver comment convertir vers Javascript, après il suffit de mettre en œuvre avec un langage X ou Y. Le plus important est de trouver assez d'optimisations en Javascript pour éviter les lenteurs dont parlait superZozo.

Un fichiers .ella est, à la base, un fichier compressé au format ZIP, comme les fichiers OpenOffice. Donc, un fichier est construit ainsi :
- il contient SYSTEMATIQUEMENT un fichier texte nommé descriptor.lst décrivant le contenu des animations, des dessins, etc ...
- il contient ensuite EVENTUELLEMENT les "objets" intégrés à l'animation : dessins, sons ...
Exemple sur cette copie d'écran : le fichier course_voitures.ella contient le "descripteur" et deux images bitmaps représentant des voitures.

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

Quant au fichier maître descriptor.lst il est construit sur des "tokens" qui sont une sorte de langage de description de projet. Voici le fichier correspondant à la copie d'écran ci-dessus :

[VERSIO]1
[PGEWID]320
[PGEHEI]200
[MOVFRQ]24
[PGEBGR]15346
[PGEBGG]6851
[PGEBGB]6851
[LYRNEW]
[LYRNME]brm
[LYRVIS]1
[LYRMXF]100
[KEYUSD]0
[ITMNEW]B1
[ITMXPS]0,000000
[ITMYPS]234,500000
[ITMWID]160,000000
[ITMHEI]45,000000
[ITMFCR]0
[ITMFCG]0
[ITMFCB]0
[ITMFAL]100
[ITMSCR]0
[ITMSCG]0
[ITMSCB]0
[ITMSAL]100
[ITMLIW]2,000000
[ITMROT]0,000000
[ITMEND]
[KEYMVT]49
[MOTIOF]1
[ZOOMIF]0
[LUMINF]0
[ROTATF]0
[ALPHAF]0
[ITMNEW]B1
[ITMXPS]110,500000
[ITMYPS]233,500000
[ITMWID]160,000000
[ITMHEI]45,000000
[ITMFCR]0
[ITMFCG]0
[ITMFCB]0
[ITMFAL]100
[ITMSCR]0
[ITMSCG]0
[ITMSCB]0
[ITMSAL]100
[ITMLIW]2,000000
[ITMROT]0,000000
[ITMEND]
[KEYMVT]99
[MOTIOF]1
[ZOOMIF]0
[LUMINF]0
[ROTATF]0
[ALPHAF]0
[ITMNEW]B1
[ITMXPS]320,000000
[ITMYPS]233,500000
[ITMWID]160,000000
[ITMHEI]45,000000
[ITMFCR]0
[ITMFCG]0
[ITMFCB]0
[ITMFAL]100
[ITMSCR]0
[ITMSCG]0
[ITMSCB]0
[ITMSAL]100
[ITMLIW]2,000000
[ITMROT]0,000000
[ITMEND]
[LYRNEW]
[LYRNME]Ferrari
[LYRVIS]1
[LYRMXF]130
[KEYBLK]0
[KEYMVT]129
[MOTIOF]1
[ZOOMIF]0
[LUMINF]0
[ROTATF]0
[ALPHAF]0
[ITMNEW]B2
[ITMXPS]272,500000
[ITMYPS]229,500000
[ITMWID]160,000000
[ITMHEI]50,000000
[ITMFCR]0
[ITMFCG]0
[ITMFCB]0
[ITMFAL]100
[ITMSCR]0
[ITMSCG]0
[ITMSCB]0
[ITMSAL]100
[ITMLIW]2,000000
[ITMROT]0,000000
[ITMEND]
[FILEND]

kevlar · Le 11/05/2010, à 11:26

Les fichiers sont organisés autour des tokens, qui font obligatoirement 6 caractères de long et sont encadrés par des crochets. Chaque token est suivi par un maximum d'un opérande.
Ce "langage" est extensible (je ne m'en suis pas privé depuis que je développe Ella). Les tokens correspondent à des instructions "humaines" en anglais.
Exemple :
[PGEWID] = page width ->largeur de page
[MOVFRQ] = movie frequency = fréquence de l'animation
etc ...

L'exportation a une seule contrainte : ne pas utiliser de caractères d'échappement tels que \n ou autres, ainsi que les accents. Quand on a besoin d'utiliser des accents, on utilise les fonctions de gtk qui "escapent" ...

Les "items" sont tous les objets placés sur la zone de dessin : chaque item est décrit à l'aide de couleurs, tailles etc ... Un item est décrit au sein d'un bloc de macro-commandes qui commence par :
[ITMNEW]
et finit par [ITMEND]
Cela permet d'utiliser des boucles REPEAT... UNTIL ou WHILE... WEND lors de la relecture (oui, c'est du Pascal )

Dernière modification par kevlar (Le 11/05/2010, à 11:28)

lovasoa · Le 11/05/2010, à 11:46

Humm. Je crois que je commence à comprendre. Où peut-on trouver une liste de tous tes "tokens" ?

kevlar · Le 11/05/2010, à 11:55

Il n'y en a pas, il faudrait que j'écrive un dictionnaire. C'est une chose que je peux faire assez vite.

lovasoa · Le 11/05/2010, à 16:35

Et sinon, à quoi servent les crochets? Puisque tous les tokens font six caractères...

kevlar · Le 11/05/2010, à 17:06

à rien, juste par fidélité aux vieux format d'échange 'Sylk' des premiers tableurs ...
http://en.wikipedia.org/wiki/SYmbolic_LinK_(SYLK) et le langage assembleur de certains calculateurs ...

kevlar · Le 11/05/2010, à 17:59

Voici la syntaxe utilisée dans le fichier .ella (sorry for my bad english )

Ella file format
----------------

Each ella files are zipped. It contains a text file named 'descriptor.lst' and, if necessary, multimedia files
like bitmaps.

The 'descriptor.lst' file syntax
--------------------------------
All animations from timeline, all drawings and bitmaps are described in this file. 
The 'descriptor.lst' file stands on 3 parts

1. description of movie's main characteristics (duration, background color, size, frequency)
2. description of layers and drawings on layers 
	2.1 layer's description
	2.2 items (drawings ...) description for the current item.
3. trailer.

When the file is created, all the layers are saved sequentially, and, for EACH layers, all the items 
characteristics are saved. The items aren't referenced for a layer. When they are saved, the software
must assume that the current layer ID is for the current item.
	For example, if Ella saves currently the layer #3, all subsequent items arre associed to layer #3,
until the next item declaration.

The 'descriptor.lst' tokens.
----------------------------
All tokens have 6+2 chars length, and can have only ONE operand.

1. description of movie's main characteristics
token     operand                   operand value
--------------------------------------------------
[VERSIO]  number of Ella version     numeric (integer)
[PGEWID]  width of the movie's screen numeric (integer)         
[PGEHEI]  height of the movie's screen numeric (integer)
[MOVFRQ]  movie frequency              numeric (integer)
[PGEBGR]  page background red component numeric (16 bits integer)
[PGEBGG]  page background green component numeric (16 bits integer)
[PGEBGB]  page background blue component numeric (16 bits integer)

2. description of layers and drawings on layers 
2.1
[LYRNEW]  no operand -> starting of a new layer
[LYRNME]  name of the current layer  text (no escape chars allowed)
[LYRVIS]  flag of layer's visibility  numeric (only 0 or 1 allowed)
[LYRMXF]  total of frames used for this layer, i.e. stands for the layer duration numeric (integer)

2.2 items (drawings ...) description for the current item.
[KEYUSD]  frame containing a keyframe and items ; an item can't be used outside a keyframe numeric (integer)
[ITMNEW]  name of the current object (item) ; only used internaly text (no escape chars allowed)
[ITMXPS]  left  X upper position of the item numeric (floating point)
[ITMYPS]  left  Y upper position of the item numeric (floating point)
[ITMWID]  width of the bounding box of the item numeric (floating point)
[ITMHEI]  height of the bounding box of the item numeric (floating point)
[ITMFCR]  red component of the filling color of the item numeric (16 bits integer)
[ITMFCG]  green component of the filling color of the item numeric (16 bits integer)
[ITMFCB]  blue component of the filling color of the item numeric (16 bits integer)
[ITMFAL]  percentage of transparency of the filli color(alpha channel) integer (values between 0 and 100)
[ITMSCR]  red component of the stroking color of the item numeric (16 bits integer)
[ITMSCG]  green component of the stroking color of the item numeric (16 bits integer)
[ITMSCB]  blue component of the stroking color of the item numeric (16 bits integer)
[ITMSAL]  percentage of transparency of the stroke color (alpha channel) integer (values between 0 and 100)
[ITMLIW]  line width used for this item, if applies  numeric (floating point)
[ITMROT]  item's rotation numeric (floating point)
[ITMEND]  end of item's description ; if that token isn't used, Ella will hang !  no operand

2.3 animation instructions
[KEYMVT]  a keyframe containing an animation instruction numeric (integer)
[MOTIOF]  flag for a motion interpolation  numeric (boolean)
[ZOOMIF]  flag for a zooming interpolation  numeric (boolean)
[LUMINF]  flag for a luminance interpolation  numeric (boolean) [not yet used]
[ROTATF]  flag for a rotation interpolation  numeric (boolean)
[ALPHAF]  flag for a transparency interpolation  numeric (boolean)

2.4 trailer
[FILEND] no operand

lovasoa · Le 11/05/2010, à 22:20

Ouah! Ca c'est de la doc. En plus tu l'as fait super vite! Merci.

lovasoa · Le 11/05/2010, à 22:31

J'ai fini de lire, et le format n'a pas l'air trop compliqué à appréhander... Il me reste quand meme quelques questions. Par exemple, rien qu'avec [ITMNEW] B1, on sait qu'il faut aller chercher B1.png? Les sons seront gérés comment? Et les vectoriels? Mon anglais n'est pas formid' non plus , et je n'ai pas compris à quoi correspondait l'entier après [KEYMVT]...

Dernière modification par lovasoa (Le 11/05/2010, à 22:32)

iri · Le 12/05/2010, à 09:25

Idem !

[ITMNEW] B1 indique-t-il :
1 - le nom d'un objet, "B1" est une sorte d'identifiant ?
2- le nom d'une ressource (vectoriel, bitmap, son ...) ?

Si 1, alors comment détermine t-on l'éventuelle ressource associée ?

Si 2, alors deux ressources externes ne peuvent pas porter le même nom (B1.png et B1.ogg).

D'après la doc que tu as posté :
[ITMNEW] name of the current object (item) ; only used internaly text (no escape chars allowed)

donc, a priori, c'est la réponse 1 qui est la bonne (only used internaly text). Mais cela reste ambigu !

iri · Le 12/05/2010, à 09:29

lovasoa a écrit :

je n'ai pas compris à quoi correspondait l'entier après [KEYMVT]...

[KEYMVT] : il me semble qu'il indique la frame sur laquelle a été placée une animation définie par un (ou plusieurs) des flags suivants :
[MOTIOF] [ZOOMIF] [LUMINF] [ROTATF] [ALPHAF]

Je me trompe ?

kevlar · Le 12/05/2010, à 11:59

iri a écrit :

Idem !
[ITMNEW] B1 indique-t-il :
1 - le nom d'un objet, "B1" est une sorte d'identifiant ?
2- le nom d'une ressource (vectoriel, bitmap, son ...) ?
Si 1, alors comment détermine t-on l'éventuelle ressource associée ?
Si 2, alors deux ressources externes ne peuvent pas porter le même nom (B1.png et B1.ogg).
D'après la doc que tu as posté :
[ITMNEW] name of the current object (item) ; only used internaly text (no escape chars allowed)
donc, a priori, c'est la réponse 1 qui est la bonne (only used internaly text). Mais cela reste ambigu !

Oui, vous avez bien compris. Lors de l'importation d'un objet, par exemple un bitmap, un compteur interne est mis à jour. Le 1er bitmap s'appelle (en interne) B1, le second B2, etc ...
Les fichiers bitmaps ou autres sont stockés dans le fichier .ella, et les références sont "opaques" pour l'utilisateur final.
Toutes les données intégrées (bitmaps ...) sont stockées, après ouverture diun fichier .ella, dans le dossier /tmp du système.

kevlar · Le 12/05/2010, à 12:04

iri a écrit :

lovasoa a écrit :
je n'ai pas compris à quoi correspondait l'entier après [KEYMVT]...
[KEYMVT] : il me semble qu'il indique la frame sur laquelle a été placée une animation définie par un (ou plusieurs) des flags suivants :
[MOTIOF] [ZOOMIF] [LUMINF] [ROTATF] [ALPHAF]
Je me trompe ?

exactement.
Exemple :
[KEYMVT]135

se lit comme-suit : la 136 ème frame (image) contient un ordre d'animation (motion tween). Notez bien que le décompte est en logique informatique. La 1ère image a le rang 0, la seconde le rang 1, etc ...

Ensuite, les autres indicateurs sont des flags. Ainsi, la séquence :
[KEYMVT]135
[MOTIOF]1
[ZOOMIF]0
[LUMINF]0
[ROTATF]1
[ALPHAF]1

Indique que TOUS les objets placés sur l'image clé 135 du calque (layer) courant doivent :
- subir une animation de mouvement
- ne pas subir d'effet de zooming
- ne pas voir leur luminance modifiée
- subir une rotation
- subir une modification de leur transparence.

Vous noterez que les seuils des effets ne sont pas codés ici, mais au niveau de la description des éléments (ITEMS) : l'algorithme d'Ella compare leurs caractéristiques entre deux images-clés (keyframes) et décide s'il faut ou non faire un effet.

kevlar · Le 12/05/2010, à 12:06

lovasoa a écrit :

J'ai fini de lire, et le format n'a pas l'air trop compliqué à appréhander... Il me reste quand meme quelques questions. Par exemple, rien qu'avec [ITMNEW] B1, on sait qu'il faut aller chercher B1.png? Les sons seront gérés comment? Et les vectoriels? Mon anglais n'est pas formid' non plus , et je n'ai pas compris à quoi correspondait l'entier après [KEYMVT]...

Oui, pour la recherche automatique de l'item
Les vectoriels sont pour le moment convertis lors de l'import en bitmaps, d'autant que les swftools ne savent pas les gérer.
Les sont ne sont pas encore intégrés, mais ce sera sur la même logique.

kevlar · Le 14/05/2010, à 10:19

J'ai intégré un menu "exporter comme JavaScript" avec une petite icône qui va bien
Maintenant, à vous !
Si je peux me permettre un conseil, pour vos routines d'exportation JavaScript, commencez par le codage de la taille de l'écran et du film.
On peut très bien imaginer un prototype de fonction d'exportation qui serait appelé ainsi :

void export_to_js(gchar *nom_fichier_export, 
                                        gint screen_width,
                                        gint screen_height, 
                                        GdkColor screen_bc,
                                        gint movie_length, 
                                       GtkWidget *pListLayers)

GtkWidget *pListLayers -> pointeur sur l'arborescence qui décrit l'ensemble des calques, chacun des calques pointant lui sur un ensemble d'images-clés, qui pointent à leur tour sur des éléments graphiques (ITEMS).
Voilà, ne vous préoccupez pas, pour le moment, de ces paramètres, qui sont stockés en interne par Ella.
A+

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

lovasoa · Le 14/05/2010, à 12:25

Tu as fait vite, effectivement. Sinon, pour ceux qui ont parlé de javascript avant, comment on va gérer la transparence des bitmaps?

kevlar · Le 14/05/2010, à 13:36

là, faut voir avec les javascripteurs ...

lovasoa · Le 14/05/2010, à 19:04

Peut-être que tu pourrais renommer le sujet, pour attirer plus de monde justement. Un truc genre : "[Accepte les contributions] Ella, une alternative libre et gratuite à Flash MX". Ce serait un peu plus glamour

xapantu · Le 14/05/2010, à 19:23

@kevlar : je viens de t'envoyer un mp

frafa · Le 14/05/2010, à 19:30

Bonjour,
c'est quoi la Licence que ta as choisit pour Ella ?

lovasoa · Le 14/05/2010, à 20:03

Attention troll en perspective. C'est ça le problème des logiciels libres: on passe plus de temps à choisir la license qu'à coder. Mais bon, comme j'aime troller: si j'en venais à participer, et si on en venait à me demander sous quelle license je veux mettre mon code, je répondrai GPLv3.

kevlar · Le 15/05/2010, à 08:41

@xapantu : répondu en MP
@frafra & lovasoa -> pour le moment on code ; là seule certitude, c'est qu'il n'est pas question de faire un produit commercial

Les rares fois où j'ai jeté un oeil sur les licences, je me suis arrêté en chemin : trop juridique, vision pas assez cool du développement ...

Ubuntu-fr

Navigation

Liens de recherche

Annonce

#176 Le 11/05/2010, à 08:35

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

#177 Le 11/05/2010, à 11:10

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

#178 Le 11/05/2010, à 11:17

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

#179 Le 11/05/2010, à 11:19

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

#180 Le 11/05/2010, à 11:26

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

#181 Le 11/05/2010, à 11:46

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

#182 Le 11/05/2010, à 11:55

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

#183 Le 11/05/2010, à 16:35

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

#184 Le 11/05/2010, à 17:06

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

#185 Le 11/05/2010, à 17:59

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

#186 Le 11/05/2010, à 22:20

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

#187 Le 11/05/2010, à 22:31

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

#188 Le 12/05/2010, à 09:25

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

#189 Le 12/05/2010, à 09:29

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

#190 Le 12/05/2010, à 11:59

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

#191 Le 12/05/2010, à 12:04

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

#192 Le 12/05/2010, à 12:06

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

#193 Le 14/05/2010, à 10:19

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

#194 Le 14/05/2010, à 12:25

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

#195 Le 14/05/2010, à 13:36

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

#196 Le 14/05/2010, à 19:04

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

#197 Le 14/05/2010, à 19:23

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

#198 Le 14/05/2010, à 19:30

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

#199 Le 14/05/2010, à 20:03

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

#200 Le 15/05/2010, à 08:41

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

Pied de page des forums