Affichage des articles dont le libellé est animer. Afficher tous les articles
Affichage des articles dont le libellé est animer. 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