Affichage des articles dont le libellé est animation. Afficher tous les articles
Affichage des articles dont le libellé est animation. Afficher tous les articles

Comment j'utilise Google Web Designer pour animer un dessin vectoriel svg et l'éditer en html5



"Google Web Designer est une application qui vous permet de concevoir et de créer des annonces HTML5 et d'autres contenus Web à l'aide d'une interface visuelle et de codage intégrée. Vous pouvez créer du contenu à l'aide d'outils de dessin, de textes et d'objets 3D, et vous pouvez animer des objets sur une timeline. Une fois le processus de création terminé, Google Web Designer génère des fichiers HTML5, CSS3 et JavaScript dans un format lisible par l'homme."


  • Comment insérer une image dans Google Web Designer:
Trop simple mais je vous le dit car j'ai essayé plusieurs méthodes avant d'y arriver:

Utiliser dans l'outil de Balisage (à gauche) l'élément image (en haut) puis entrer l'URL de l'image dans propriétés/source (à droite).
Il est alors possible d'insérer des images svg pour profiter d'images vectorielles légères avec transparence. Les png peuvent également être employées pour la gestion de la transparence. les jpg seront elles préférées comme toujours pour les photos et les dessins.

Notons que les créations peuvent consommer beaucoup de capacité de calcul et peuvent provoquer des bugs de chargement et même des plantages de navigateurs mais ne sont plus dépendantes de plug-ins comme Flash. Elles sont compatibles avec l'ensemble des navigateurs récents (enfin presque) qu'ils soient sur PC, tablettes ou téléphones. Pour info, mon animation  apparaît correctement sur chrome (W7, Ubuntu et iOS sur  iphone 4 et ipad4), sur safari ( ios sur iphone 4 et ipad4) et sur le navigateur d'Android 4  mais pas sur Firefox, Internet Explorer et Android2.2. Il est possible qu'une animation sans illustrations svg et mieux intégrée fonctionne sur plus de plateformes...

Télécharger la béta gratuite : Google Web Designer
l'aide en français de google






Comment créer grâce aux logiciels libres




Voici ce qui peut être utilisé pour créer grâce aux logiciels libres :

systeme d'exploitation Ubuntu
graphismes 3D Blender
graphismes photos Gimp
graphismes vectoriels Inkscape
graphismes peinture MyPaint
graphismes dessins Krita
graphismes sonores Audacity
graphismes édition Scribus
suite bureautique LibreOffice
éditeur de polices vectorielles FontForge
musique boite à rythmes Hydrogen
programmation Éclipse
briques de programmation LibGDX
architecture 3D SweetHome3D
éditeur vidéos Kdenlive (Linux et Mac seulement)
site web Kompozer
Animation 2D Synfistudio


Il en existe beaucoup d'autres, mais ne les utilisant pas assez je ne peux vous les conseiller:
http://fr.wikipedia.org/wiki/Portail:Logiciels_libres
dont pour la vidéo:
Retouche vidéos CinePaint ( basé sur Gimp)
Montage vidéos Lightworks (avec une clé à la con)
Montage vidéos Cinelerra (Linux seulement)
Montage vidéos OpenShot vidéo Editor (portée aussi sous Windows mais encore en béta )
Mixage vidéo live Onyx VJ (sous flash)
Performance vidéo live  Lives (Linux voir Mac seulement)
Effets spéciaux vidéo Jahshaka ( en jachère ?)
Capture vidéo VirtualDub (Windows seulement)
Edition Vidéo Avidemux (Windows seulement)
Et pour le son:
séquenceur enregistreur Ardour
LMMS
Rosegarden
SuperBoucle
KXStudio

Il existe également des logiciels non libres mais gratuits qui sont de très bonne qualité:
sculpture 3D Sculptris 
animation 2D Spriter
graphismes 3D Sketchup
graphismes paysages Terragen
DJ Mixxx
Montage vidéo Movie Maker (Windows seulement)

Les OS ou les distribution:
Ubuntu, Debian
Avec les versions portables, les live CD qui permettent de les tester ou de les utiliser rapidement. 


Vous trouverez évidemment des tutoriels sur le net dont de nombreuses vidéos.

Sources linuxfr.org