* FAQ  * Rechercher  * @Gimlao  * Discord
 * Connexion
Nous sommes actuellement le Jeu 28 Mars 2024 20:49:11
  Consulter les messages sans réponse
Consulter les sujets actifs



Publier un nouveau sujet Répondre au sujet  [ 1 message ] 
Auteur Message
Message Publié : Mer 19 Août 2009 03:39:09    Sujet du message : [Tuto] Créer un APNG avec jAPNG Editor
Avatar de l’utilisateur
2 Super Étoiles du Temps

Message(s) : 2400
Inscription : 13 Avr 2005
Âge : 37
Localisation : Gard (30), France

Bonsoir. Ce soir nous allons voir comment créer ou éditer un APNG à l'aide du logiciel jAPNG Editor.
Je rappelle que, n'étant pas gérer par tout les programmes, le format APNG ne doit être utilisé que si l'animation n'est pas indispensable à la compréhension de l'image. (Un navigateur incompatible affichant un PNG fixe.) Dans le cas contraire, préférez le GIF.
Note : Mon choix c'est porté sur jAPNG car il est léger et permet l'édition d'APNG pré-existant.

Tout d'abord il vous faut avoir installé Java , indispensable pour jAPNG. Pour ce faire, allez sur le Site officiel de Java et téléchargez la version qui convient si vous êtes sous Windows ou MacOS, ou bien passez par les dépôts de votre distribution si vous êtes sous GNU/Linux ou un BSD.
Ensuite, récupérez jAPNG Editor sur le site officiel de jAPNG. Faites bien attention, téléchargez la dernière version de jAPNG Editor et pas l'autre jAPNG.

Maintenant il devrait vous suffire de double-cliquer sur japng-editor.jar pour lancer votre jAPNG Editor (sauf peut être sous GNU/Linux et BSD, ou vous pouvez avoir besoin de forcer l'ouverture avec OpenJDK ou une autre machine Java que vous auriez installé.)

jAPNG Editor se présente de la façon suivante :
Image
Cliquez sur l'image pour l'agrandir

Commençons par la liste des "frames" composant l'image :
Image
Les frames en bleu correspondent aux frames sélectionné. (Celle étant encadré de bleu un peu plus foncé étant la dernière à avoir été sélectionné.)
Pour sélectionner une frame, il vous suffit de cliquer dessus. Pour en sélectionner plusieurs, maintenez la couche Ctrl (aussi nommée Control ou Contrôle) lors de la sélection.
Le seul moyen pour supprimer une frame, est de la sélectionner et d'appuyer sur la touche Suppr de votre clavier. (Parfois aussi nommée "Del".)

Tout à gauche se situe le numéro de la frame, (La frame 0 étant celle qui sera visible si le logiciel charger de l'affichage de votre animation ne gère pas l'APNG.) suivit de l'image de la dite frame. Les frames composant une image ne faisant pas toujours la même taille, elles sont toujours encadré de rouge.
Par la suite, les informations se répartissent sur 2 lignes.
  • Sur la première, on voit dans l'ordre : le temps d'affichage (en milliseconde), 2 attributs d'affichage de la frame ("Dispose" et "Blend" dans le menu), le positionnement du pixel supérieur gauche de la frame et la taille de la frame.
  • Sur la seconde est affiché le nom d'image de la frame. Cette information n'étant pas enregistré, en cas d'ouverture d'une animation pré-existante, vous y verrait le nom de fichier l'animation précédé de N_ ou "N" est le numéro de frame.

Maintenant occupons nous du menu :
Image
Celui ci est vaste et mérite d'être expliqué en plusieurs étapes.

Image
  • Le premier bouton permet de charger les images (frames) qui vont composer votre animation, ou bien une animation pré-existante. ATTENTION ! En cas d'édition, veillez à toujours charger l'animation avant les frames supplémentaires, car ceci supprimera instantanément les frames précédemment chargé.
  • Le second bouton permet de sauvegarder une animation. (Ça, même sans moi vous l'auriez compris.)
  • En dessous, vous avez la case à cocher "Skip first frame" qui permet d'exclure la frame 0 de l'animation. Cette frame sera alors simplement une image de remplacement, pour les navigateurs et autres logiciels incompatible avec les APNG, et dont aucune partie ne pourra être affiché durant l'animation.
  • Le dernier choix visible dans le cadre "Animation" est celui permettant de faire une animation tournant en boucle (recommandé) ou se terminant au bout d'un certain temps.

Image
  • "Display Time" correspond au temps d'affichage de la frame (en milliseconde)
  • "Dispose Opération" influe sur l'affichage de la frame une fois l'animation passé aux suivantes.
    • "NONE" fera s'afficher la frame sous toute les frames suivantes
    • "BACKGROUND" fera afficher la couleur de fond de la frame à sa place, sous la frame suivante
    • "PREVIOUS" permettra d'afficher l'état précédent sous la frame suivante. En pratique, cette frame disparaitra donc pour faire place à la suivante
  • "Blend operation" influe sur l'affichage des frames précédentes étant visible sous la frame active.
    • "SOURCE" masquera toute frame passant sous la frame sélectionné
    • "OVER" permettra aux autres frames de s'afficher par transparence sous la frame active.
  • "Offsets (x/y)" permet de positionner la frame sélectionné où on le souhaite dans une animation dont la première image est plus grande que la frame. C'est le pixel supérieur gauche de la frame qui sert de repère pour la positionner.
Le bouton "Apply to selected" applique les propriété aux frames sélectionné, tandis que "Apply to all" les propriété à l'ensemble des frames.

Image
Ce menu gère la prévisualisation ainsi que l'ajout d'un éventuel fond de couleur pour les logiciels ne supportant pas la transparence par canal alpha (comme IE6).
  • "Enable preview" vous affiche l'animation en cour de création. Si découché vous affiche la frame sélectionné seule et comme si aucune propriété ne lui était affecté. Dans le cas d'une sélection multiple lorsque la case est décoché, c'est la frame dont le numéro est le plus proche de 0 qui sera affiché.
  • "Set Background" permet de définir une couleur de fond pour les visionneurs non compatible avec la transparence par canal alpha (comme IE6)
  • "Clear background" permet de supprimer la couleur de remplacement pour les visionneurs non compatible avec la transparence par canal alpha.

Et voilà, vous êtres désormais en mesure de créer un APNG avec jAPNG Editor !
Je vous recommande très fortement d'optimiser vos frames AVANT assemblage de votre animation, sous peine de transformation de celle si en simple PNG fixe.



Note WebMasters désireux d'afficher ce tuto dans leur site :
Si vous décidez de mette ce tuto sur le site, aucun souci à condition de :
  • Prendre la peine d'indiquer qui a fait ce tuto (en l'occurrence, Bigou)
  • Prendre la peine d'héberger les images vous-même

"La concurrence fait avancer le monde, pas les monopoles." Bigou
Image
Image
Haut
Profil  
Afficher les messages publiés depuis :  Trier par  
Publier un nouveau sujet Répondre au sujet  [ 1 message ] 

Le fuseau horaire est UTC+1 heure [Heure d’été]


Qui est en ligne ?

Utilisateur(s) parcourant ce forum : Aucun utilisateur inscrit et 3 invité(s)


Vous ne pouvez pas publier de nouveaux sujets dans ce forum
Vous ne pouvez pas répondre aux sujets dans ce forum
Vous ne pouvez pas éditer vos messages dans ce forum
Vous ne pouvez pas supprimer vos messages dans ce forum

Recherche de :
Aller vers :  
cron
Space Pilot 3K template by Jakob Persson
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group
Traduction et support en françaisHébergement phpBB