Logiciels de graphisme

Animations GIF, PNG, SWF et SVG

Ce sont des applications qui vous permetteront de faire des petites animations en boucle.
Vous avez ImageMagick, un outil très puissant, capable de créer différentes sortes d' animations. Mais la table de commandes, très simple sur Linux, n' est pas très pratique à utiliser sur Windows. Il y a déjà un convert.exe ,qui est une application microsoft, dans System32 et il faut utiliser la commande "convert" pour créer une animation. La commande "animate" vous donnera juste un aperçu de l' animation

tuto CCM

Gimp réalise facilement des GIFs animés à partir d' images JPG ou PNG .
D'autres animations dont SWF ou Apng sont possibles en utilisant GAP (GIMP Animations Pack):

GAP pour Gimp 2.0.6

GIFs animés

Gifsicle

Auteur: Eddie Kolher

Spécialisé dans la manipulation d' images au format GIF dont les GIFs animés principalement en table de commande, il est parfois utilisé comme plugin pour GIMP ou pour mtPaint

gifsicle

Prêt à l' emploi sur Linux ou Mac, il faut d' abord savoir l' installer sur Windows

installateurs pour gifsicle sur Windows

UnFREEz

Windows XP/Vista/w7/w8
Éditeur Whitsoft Dev

Très simple d' emploi. Vous placez les GIFs à assembler dans un même dossier. N' oubliez pas d' épingler UnFREEz à la barre des tâches. Lorsque vous lancez UnFREEz, il vient se placer au milieu de votre écran. Glisser-déposer les frames Gif une par une dans la fenêtre de l' interface graphique de UnFREEz. Tiquer Loop animation et Make animated GIF. UnFreez Glisser-déposer

unfreez.exe

GiftedMotion

Entreprise onyxbits.de

Logiciel Java, simple d' utilisation. Vous devez avoir l' environnement Java installé dans votre système Windows pour faire fonctionner cette application.

Téléchargement gratuit Java

L' avantage est que ce logiciel est multi-plateforme. Les fichiers obtenus avec GiftedMotion sont cependant plus lourds que ceux obtenus avec UnFREEz ou Gifsicle.

giftedmotion-1.23.jar

Animations PNG

Des photos au format PNG peuvent donner des animations en boucle d' une très grande qualité. Hélas, le très grand nombre de couleurs et nuances disponibles (jusqu' à 4 294 967 296 couleurs pour les PNG 32bit) se répercute sur le poids du fichier obtenu.

APNG

auteur: Max Stepin

Ce sont en fait six applications en rapport avec les APNG

APNG APNG Outils et Plugins
APNG Assembler Crée des animations APNG à partir d' images PNG/TGA.
APNG Disassembler Désassemble une animation APNG en frames PNG.
APNG to GIF Convertit un APNG en un GIF animé.
GIF to APNG Convertit un GIF animé en APNG.
VirtualDub APNG Mod

maxst-SourceForge

APNG Anime Maker

Éditeur probablement chinois (Hong-Kong), il vous propose ce logiciel simple mais complet pour créer des APNG.

cphktool-apng-anime-maker

APNGAnimeMaker.exe

Il y a maintenant apngasm (multi-plateforme)

Animations SWF

La suprématie du format FLV vers 2005 sur Youtube avait fait le succès de Adobe Flash Player sur le web. FLV est un format conteneur comme AVI, OGG ou Mpeg par exemple. Au format SWF il est possible d' avoir une simple image fixe (une image vectorielle comme pour le format SVG). Mais que ce soit pour un image simple (qui donne de bons rendus en plein écran) ou pour une animation SWF, vous aurez besoin du plugin Shockwave Flash pour le lire sur les navigateurs de vos appareils.

Insérer un fichier SWF dans une page HTML

<object type="application/x-shockwave-flash"
data="votre_animation.swf" width="100%" height="100%">
<param name="movie" value="votre_animation.swf">
<param name="wmode" value="transparent">
<param name="play" value="true">
<param name="loop" value="true">
</object>

Il s' agit là du code pour un affichage en plein écran, mais il est possible d' avoir les dimensions que vous désirez en pixels ou en pourcentage.

Le format SWF est souvent obtenu à partir de la conversion d' images matricielles au format gif, png ou jpeg. Pour les animations SWF ce sera le plus souvent les GIFs animés donc gif2swf

swftools windows program files

SWFTools 0.92.exe

Animations SWF du concombre masqué

Animations SVG

Le format SVG a l' avantage d' avoir un code ouvert soutenu par la w3c.
(janvier 2017) SVG2 supporte le z-index mais aucun navigateur web ne l' a encore développé.
Il est possible d' obtenir une animation SVG dans un navigateur avec du code entre des balises <svg> et </svg> dans une page HTML5. L' animation peut être générée par SVG, par CSS3 et (ou) javascript.
Dans l' exemple ci-dessous SVG assure l' animation et CSS s' occupe de la mise en forme (centrage et couleur de l' arrière-plan.

Code


<html>
<head>
    <style>
      * {
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
}

body {
  background: #FC0;
}

svg {
  position: fixed;
  top: 20%;
  height: 60%;
  left: 20%;
  width: 60%;
}
    </style>
</head>

<body translate="no" >

  <svg viewBox="0 0 160 160" width="160" height="160">
  <circle cx="80" cy="80" r="50" />
  <g transform=" matrix(0.866, -0.5, 0.25, 0.433, 80, 80)">
    <path d="M 0,70 A 65,70 0 0,0 65,0 5,5 0 0,1 75,0 75,70 0 0,1 0,70Z" fill="#FFF">
      <animateTransform attributeName="transform" type="rotate" from="360 0 0" to="0 0 0" dur="1s" repeatCount="indefinite" />
    </path>
  </g>
  <path d="M 50,0 A 50,50 0 0,0 -50,0Z" transform="matrix(0.866, -0.5, 0.5, 0.866, 80, 80)" />
</svg>
 
</body>
</html>

Rendu de ce code dans une iframe

Cette animation simple à réaliser a été trouvée dans ce tutoriel

la-cascade.io

SVG Animé en Plein Écran

Les logiciels spécialistes du format SVG:

Adobe Illustrator CC

Inskape 0.91