[mini tuto] Créer des icones animées pour e17.

Chaussette · Le 07/04/2007, à 14:11

Je vais présenter ici une méthode pour créer des icônes animées pour e17 mais sans renter dans les détails. Je laisse à d' autres tutoriels le soin d' apprendre à programmer avec edj. Sinon j' avoue ne pas avoir tout compris et il y à des zones d' ombre que je ne pourrais pas expliquer.
Toute correction ou apport d' infos sera vraiment bienvenue.

Il ne sera pour le moment question que de créer une animation simple a partir de plusieurs images. Ca laisse quand même de larges possibilités.
L' icône étant un fichier .edj nous aurons juste besoin d' un éditeur de texte simple, de l' outil de compilation edje_cc et des images de notre animation.

Le fichier de départ est un ficher texte .edc qui se compile assez facilement avec cette commande :

edje_cc source.edc -o icone.edj

et se décompile avec celle-ci:

edje_decc icone.edj

1:
En premier lieux il faut bien sûr créer toutes vos images et les mettre dans un dossier.
Dans l' exemple que l' on va créer il y en à 15, au format png.
01 02 03 04 05
06 07 08 09 10
11 12 13 14 15

2:
Ensuite on s' attaque au fichier source, qu' on nomme "source.edc" pour l' occasion, et qu' on place dans le dossier avec les images.

a:
Les première lignes de code servent à déclarer toutes les images utilisées dans notre animation :

images
{
	image: "1.png" COMP;
	image: "2.png" COMP;
	image: "3.png" COMP;
	image: "4.png" COMP;
	image: "5.png" COMP;
	image: "6.png" COMP;
	image: "7.png" COMP;
	image: "8.png" COMP;
	image: "9.png" COMP;
	image: "10.png" COMP;
	image: "11.png" COMP;
	image: "12.png" COMP;
	image: "13.png" COMP;
	image: "14.png" COMP;
	image: "15.png" COMP;
}

Le mot COMP signifie que nos images seront compressées sans perte de qualité.

b:
Viens la déclaration de deux blocs imbriqués. Ils ne trouvent vraiment leurs utilité que dans le cadre de la création d' interfaces plus complexes, mais la structure des fichiers edje nous oblige à les mettre et à y imbriquer nos informations:

collections
{
    group
    {
        name "icon";
        ...    
        ...
    }
}

Le cœur des informations se trouve dans ce bloc (group).
En premier on y déclare le nom de l' élément de l' interface par le mot (clef?) "icon".

c:
A la place des points de suspension, on y déclare les parties de cet interface(élément?) dans un bloc "parts" (ici nous n' avons qu' une seul partie) et ensuite les programmes (si on peu appeler ça comme ça) chargés de gérer les évènement de l' interface.

parts //bloc des parties
{
    part //bloc de la seule partie
    {
        name: "logo";         //Nom de la partie, utile (on le réutilise) plus tard.
        type: IMAGE;          //Type de la partie.
        mouse_event: 0;    //Le 0 indique que la partie n' aura pas à gérer les évènements de la souris.
        
		/* On ouvre un bloc pour décrire la partie de notre interface.
        Les descriptions contiennent l' état, l' alignement, la transparence ..etc de la partie.*/

        description
        {

            /*Ici on défini l' état par défaut dans lequel est la partie. 
            Il faut obligatoirement cet état "default".
            Le programme qui sera créé appellera cet état.
            Il faut laisser les valeurs 0.0. (..)*/

            state: "default" 0.0;    

            /*Viens l' utilisation de toutes nos images.
            La première image de l' animation est déclarée par le mot clef "normal".
            Les suivantes par le mot clef "tween".
            Elles seront affichées dans l' ordre.*/

            image 
            { 
                normal: "1.png";
                tween: "2.png";
                tween: "3.png";
                tween: "4.png";
                tween: "5.png";
                tween: "6.png";
                tween: "7.png";
                tween: "8.png";
                tween: "9.png";
                tween: "10.png";
                tween: "11.png";
                tween: "12.png";
                tween: "13.png";
                tween: "14.png";
                tween: "15.png";
	    	}
        } //description
    }//part

d:
Maintenant que la partie visible de l' interface est prête il nous reste à créer le petit programme qui gère les évènements (ici une simple boucle) en appelant la partie que l' on à décri : logo.
(Nous sommes toujours dans le bloc "group")

/*Ouverture du bloc des programmes*/
programs
{
    /*Ouverture du bloc de notre seul programme*/
    program
    {
        name: "animation";                       //Nom du programme.
        signal: "show";                             //Signal de lancement du programme. Je n' en sais pas grand chose sur ses signaux.
        action: STATE_SET "default" 0.0;    //Ici on appel l' état par défaut de la partie qui sera lancée.

        /*Le temps de transition entre les images. 
        Le mot LINEAR défini le type de transition mais quelqu' elle soit elle n' est pas visible dans notre cas.
        En revanche le chiffre qui suis donne la vitesse d' animation entre chaque image.
        Je ne sais toujours pas de quelle unité de temps il s' agit, y aller en bidouillant. */

        transition: LINEAR 4;
        target: "logo";                              //Il s' agit du nom de la partie cible à lancer.
        after: "animation";                        //Quand le programme est terminé on lance le suivant : le même. La boucle est bouclée.
    }
}

Il ne reste plus qu' a fermer les balises des bloc "group" et "collections" et notre fichier sera prêt à être compilé.

//exemple simple d' animation
//auteur : Chaussette
images
{
    image: "1.png" COMP;
    image: "2.png" COMP;
    image: "3.png" COMP;
    image: "4.png" COMP;
    image: "5.png" COMP;
    image: "6.png" COMP;
    image: "7.png" COMP;
    image: "8.png" COMP;
    image: "9.png" COMP;
    image: "10.png" COMP;
    image: "11.png" COMP;
    image: "12.png" COMP;
    image: "13.png" COMP;
    image: "14.png" COMP;
    image: "15.png" COMP;
}

collections
{
    group
    {
        name: "icon";
        parts
        {
            part
            {
                name: "logo";
                type: IMAGE;
                mouse_events: 0;

                description
                {
                    state: "default" 0.0;

                    image 
                    { 
                        normal: "1.png";
                        tween: "2.png";
                        tween: "3.png";
                        tween: "4.png";
                        tween: "5.png";
                        tween: "6.png";
                        tween: "7.png";
                        tween: "8.png";
                        tween: "9.png";
                        tween: "10.png";
                        tween: "11.png";
                        tween: "12.png";
                        tween: "13.png";
                        tween: "14.png";
                        tween: "15.png";
                    }
                } //description
            }//part

        programs
        {

            program
            {
                name: "animation";
                signal: "show";
                source: "";
                action: STATE_SET "default" 0.0;
                transition: LINEAR 4;
                target: "logo";
                after: "animation";
            }
        }

    }//group
}//collections

Correcteurs vous êtes les bienvenus

contributions/astuces
...

Je suis en train de bidouiller un programme (Gtk, etk je ne ne connais pas encore) pour générer automatiquement un edje à partir d' une simple séléction, et avec prévisualisation. On verra bien..

Dernière modification par Chaussette (Le 07/04/2007, à 19:54)

l'autre · Le 07/04/2007, à 16:45

Bonjour,

j'ajouterais que la ligne

in: 5.0 0.0;

en dessous de "transition: LINEAR 4;", permet de laisser 5 secondes entre chaque animation

est-ce que tu saurais comment régler la vitesse de transition des images, je suis en train de créer un logo f-spot qui tourne sur lui même, mais il tourne trop lentement

Dernière modification par l'autre (Le 07/04/2007, à 18:42)

Chaussette · Le 07/04/2007, à 18:57

Pour le moment je modifie le chiffre derrière LINEAR qui défini le temps (edit) en une unité iconnue, il faut tatoner.

Sinon je viens de remarquer un bug :
-Après la création de l' icone, et son utilisation, par exemple dans le shelf.
-On décide de modifier la vitesse (ça le fait au moins pour la vitesse, mais si on change par exemple une image, pour tester, le changement est pris en compte), (on prend soins de changer l' icone dans le shelf, par exemple vers une image quelconque juste le temps de recompiler) puis on recompile.
-On remet l' icone dans le shelf.

bug : la vitesse de l' animation n' a pas changé.
Solution : copier/coller le fichier dans un autre répertoire et l' utiliser. Les changements sont pris en compte.

Utile à savoir si vous n' arrivez pas à changer la vitesse.

Dernière modification par Chaussette (Le 07/04/2007, à 19:49)

l'autre · Le 07/04/2007, à 20:19

Waooooooooooouuuuuu ça marche! trop bien, j'ai une icone f-spot qui tourne sur elle même à fond les ballons

faut probablement relancer e17 par le clic gauche Enlightenment->Restart
je sais que quand je quand je recréé un icone,

Dernière modification par l'autre (Le 21/10/2007, à 20:52)

Chaussette · Le 07/04/2007, à 20:46

Trop bon !!

En revanche un shelf rempli d' icône de animées doit être visuellement bruyant. Faut voir..

l'autre · Le 07/04/2007, à 20:50

Je reconnais que l'icone lastfm, c'est un peu limite c'est pour ça que j'ai mis un délai entre les rotations du logo lastfm, sinon, ça fait vraiment too much. Mais le f-spot, je le trouve assez discret pour ne le remarquer que quand on le regarde

attention pour les zoom, le logo f-spot est de très bonne qualité (280x280) alors que le lastfm l'est un peu moins (64x64)

Dernière modification par l'autre (Le 07/04/2007, à 20:59)

l'autre · Le 08/04/2007, à 16:24

est-ce que tu saurais comment exploiter la ligne

mouse_events: 0;

?

Je souhaiterais que l'animation ne se déclanche que lorsque je place la souris sur l'icône.

J'ai passé le 0 en 1, mais ça ne change rien

Chaussette · Le 08/04/2007, à 18:32

Il te faut définir un second état (rajouter une description) à ton élément, puis traiter cet état dans un programme.

Cette page t' en apprendra plus : http://www.supinfo-projects.com/fr/2005/presentation%5Fefl/4/ et te donnera certainement d' autres envies ?!

edit : Il faut effectivement demander à la partie d' accepter les évènements de la souris comme tu l' as fait.

Tu dois faire un 1er programme chargé de lancer l' état "defaut" de ta part (juste afficher une image) d' après le signal "show" .
Et après "after" tu lances le second programme, lui chargé à la réception du signal de survol de la souris signal: mouse,in; ; de lancer l' état n°2 (la description animé) de ta "part".

Puis tu boucles vers le premier programme. (qui relancera tout de suite l' animation du second si la souris est toujours au-dessus)

edit : Je viens de tester sans succès. Si tu arrives j' au hâte de voir les sources. Voici ou j' en suis juste en modifiant l' exemple:
http://cjoint.com/data/eivc1eJfqC.htm

Dernière modification par Chaussette (Le 08/04/2007, à 20:04)

benefice · Le 01/09/2007, à 12:01

Merci pour ce tuto,

Mon problème est l' utilisation de ces icones dans la ibar, on voie que dans la ibar les icones sont au format eap et lorsque j' essaye de modifier le chemin de l' icones, en faisant un clic droit et editer icone, l' icone ne veut pas changer et reste sur l' ancien format.

Merci pour vos rèposes.

benefice · Le 02/09/2007, à 12:48

C' est bon : http://forum.ubuntu-fr.org/viewtopic.php?id=144463

Ubuntu-fr

Navigation

Liens de recherche

Annonce

#1 Le 07/04/2007, à 14:11

[mini tuto] Créer des icones animées pour e17.

#2 Le 07/04/2007, à 16:45

Re : [mini tuto] Créer des icones animées pour e17.

#3 Le 07/04/2007, à 18:57

Re : [mini tuto] Créer des icones animées pour e17.

#4 Le 07/04/2007, à 20:19

Re : [mini tuto] Créer des icones animées pour e17.

#5 Le 07/04/2007, à 20:46

Re : [mini tuto] Créer des icones animées pour e17.

#6 Le 07/04/2007, à 20:50

Re : [mini tuto] Créer des icones animées pour e17.

#7 Le 08/04/2007, à 16:24

Re : [mini tuto] Créer des icones animées pour e17.

#8 Le 08/04/2007, à 18:32

Re : [mini tuto] Créer des icones animées pour e17.

#9 Le 01/09/2007, à 12:01

Re : [mini tuto] Créer des icones animées pour e17.

#10 Le 02/09/2007, à 12:48

Re : [mini tuto] Créer des icones animées pour e17.

Pied de page des forums