Translate

TUTO Fond d'écran animé




Aujour'hui nous allons, utiliser la fonction TWEEN, qui permet de faire des animations image par image.
Nous ne pouvons pas utiliser les gifs, ou les vidéos dans la programmation Edje, nous aurons besoin de Gimp ou de ffmpeg pour convertir nos animations en .png

Dans mon exemple, je vais convertir une animation video, puis créer l'animation frame par frame, celle-ci s'affichera en plein écran, et en continue.

Extraire une vidéo avec ffmpeg:
Ouvrez un terminal dans le dossier de votre dossier animation

ffmpeg -i *.mp4 -vf fps=1 Mon-fichier-de-sortie-%d.png

fps = 1, on extrait une trame par seconde fps = 5, cind trames par seconde etc ....
Une fois votre animation extraite en .png, vous pouvez la redimensionner. 
Comme ceci:
mogrify -resize 1920x1200 *.png

Quand tout est terminé du côté de la post-production.
Ouvrez un éditeur de texte, j'utilise Geany avec les plugins edc. ou mieux Enventor
J'ai créé un exemple type pour vous aider.
Utilisez la fonction de rechercher / remplacer
Pour remplacez les images existantes par les vôtres.
Supprimer des lignes supplémentaires, si votre animation ne comporte que X images supprimez tout le reste de l'emplacement des images et des animations.

Exemple:
image: "Your-Animations-50.png" COMP;
tween, "Your-Animations-50.png";

Voici le script que j'ai utilisé pour faire le Fond d'écran ORI.

// Title:   Your-Animations-
// Author:  Your Name Pclinux User 
// Your-Animations- loop animation, 

#define FRAME LOSSY 60
images {
   
//   image: "background.png" FRAME;

image: "Your-Animations-01.png" COMP; 
image: "Your-Animations-02.png" COMP;
image: "Your-Animations-03.png" COMP;
image: "Your-Animations-04.png" COMP;
image: "Your-Animations-05.png" COMP;
image: "Your-Animations-06.png" COMP;
image: "Your-Animations-07.png" COMP;
image: "Your-Animations-08.png" COMP;
image: "Your-Animations-09.png" COMP;
image: "Your-Animations-10.png" COMP;
image: "Your-Animations-11.png" COMP;
image: "Your-Animations-12.png" COMP;
image: "Your-Animations-13.png" COMP;
image: "Your-Animations-14.png" COMP;
image: "Your-Animations-15.png" COMP;
image: "Your-Animations-16.png" COMP;
image: "Your-Animations-17.png" COMP;
image: "Your-Animations-18.png" COMP;
image: "Your-Animations-19.png" COMP;
image: "Your-Animations-20.png" COMP;
image: "Your-Animations-21.png" COMP;
image: "Your-Animations-22.png" COMP;
image: "Your-Animations-23.png" COMP;
image: "Your-Animations-24.png" COMP;
image: "Your-Animations-25.png" COMP;
image: "Your-Animations-26.png" COMP;
image: "Your-Animations-27.png" COMP;
image: "Your-Animations-28.png" COMP;
image: "Your-Animations-29.png" COMP;
image: "Your-Animations-30.png" COMP;
image: "Your-Animations-31.png" COMP;
image: "Your-Animations-32.png" COMP;
image: "Your-Animations-33.png" COMP;
image: "Your-Animations-34.png" COMP;
image: "Your-Animations-35.png" COMP;
image: "Your-Animations-36.png" COMP;
image: "Your-Animations-37.png" COMP;
image: "Your-Animations-38.png" COMP;
image: "Your-Animations-39.png" COMP;
image: "Your-Animations-40.png" COMP;
image: "Your-Animations-41.png" COMP;
image: "Your-Animations-42.png" COMP;
image: "Your-Animations-43.png" COMP;
image: "Your-Animations-44.png" COMP;
image: "Your-Animations-45.png" COMP;
image: "Your-Animations-46.png" COMP;
image: "Your-Animations-47.png" COMP;
image: "Your-Animations-48.png" COMP;
image: "Your-Animations-49.png" COMP;
image: "Your-Animations-50.png" COMP;
   }

collections {
   group {
      name: "e/desktop/background";
      parts {
part {
    name: "background_image";
    type: IMAGE;
    mouse_events: 0;
    description {
    state: "default" 0.00;
    visible: 1;
       
       rel1 {
        relative: 0.00 0.00;
        offset: 0 0;
        }
       rel2 {
relative: 1.00 1.00;
offset: -1 -1;
    }
    image {
normal: "Your-Animations-01.png";
          }
           }
           }

part {
    name: "anim";
    description {
    state:    "default" 0.0;
    min: 1920 1200;
    max: 1920 1200;
          //  align: 0.5 0.5;
   
    rel1 {
relative: 0.5 0.0;
offset: 0 -50;
        }
rel2 {
  relative: 0.5 1.0;
offset: 0 -50;
}
    image {
normal: "Your-Animations-01.png";
tween, "Your-Animations-02.png";
tween, "Your-Animations-03.png";
tween, "Your-Animations-04.png";
tween, "Your-Animations-05.png";
tween, "Your-Animations-06.png";
tween, "Your-Animations-07.png";
tween, "Your-Animations-08.png";
tween, "Your-Animations-09.png";
tween, "Your-Animations-10.png";
tween, "Your-Animations-11.png";
tween, "Your-Animations-12.png";
tween, "Your-Animations-13.png";
tween, "Your-Animations-14.png";
tween, "Your-Animations-15.png";
tween, "Your-Animations-16.png";
tween, "Your-Animations-17.png";
tween, "Your-Animations-18.png";
tween, "Your-Animations-19.png";
tween, "Your-Animations-20.png";
tween, "Your-Animations-21.png";
tween, "Your-Animations-22.png";
tween, "Your-Animations-23.png";
tween, "Your-Animations-24.png";
tween, "Your-Animations-25.png";
tween, "Your-Animations-26.png";
tween, "Your-Animations-27.png";
tween, "Your-Animations-28.png";
tween, "Your-Animations-29.png";
tween, "Your-Animations-30.png";
tween, "Your-Animations-31.png";
tween, "Your-Animations-32.png";
tween, "Your-Animations-33.png";
tween, "Your-Animations-34.png";
tween, "Your-Animations-35.png";
tween, "Your-Animations-36.png";
tween, "Your-Animations-37.png";
tween, "Your-Animations-38.png";
tween, "Your-Animations-39.png";
tween, "Your-Animations-40.png";
tween, "Your-Animations-41.png";
tween, "Your-Animations-42.png";
tween, "Your-Animations-43.png";
tween, "Your-Animations-44.png";
tween, "Your-Animations-45.png";
tween, "Your-Animations-46.png";
tween, "Your-Animations-47.png";
tween, "Your-Animations-48.png";
tween, "Your-Animations-49.png";
tween, "Your-Animations-50.png";
       }
    }
}
     }
programs {
program {
name: "anim_rotator";
signal: "show";
source: "";
action: STATE_SET "default" 0.0;
transition: LINEAR 16.0;
target: "anim";
after: "anim_rotator";
}
}
}
}
Enregistrer le en tant que Your-Title.edc dans votre dossier animations.
Pour compiler votre fond d'écran, ouvrez votre éditeur de texte copier/coller ceci

#!/bin/sh
edje_cc $@ -id . -fd . Your-Title.edc -o Your-Title.edj

Enregistrez le en tant que build.sh donnez lui les droits d'éxécution.
Dans votre dossier animation ouvrez un terminal et taper cette commande
./build.sh

Aucun commentaire:

Enregistrer un commentaire