Démo HTML5, Webmarketing – Comment animer votre page Facebook J’aime avec 3WDOC Studio ?


Démo HTML5, Webmarketing - Comment animer votre page J'aime Facebook avec 3WDOC Studio!Copyright© http://www.facebook.com/3wdoc

Vous souhaitez animer votre page Facebook perso ou professionnelle, vous pouvez maintenant l’animer grâce à 3WDOC Studio et « Static HTML », deux applications gratuites !

Nous avons créé une animation qui simule la construction du mur Facebook de notre page 3WDOC. Vous pouvez voir ce que ça donne ICI.

Comment créer l’animation ?

Pour vous expliquer, nous allons suivre l’exemple de notre page Facebook.

  • 1 – Faites une capture d’écran de votre page Facebook
  • 2 – Dans un éditeur d’image (nous avons utilisé Photoshop), découpez chaque bloc et enregistrez-les au format .jpg.
  • 3 – Ouvrez votre 3WDOC Studio ( si vous n’en avez pas vous pouvez vous enregistrer ici c’est gratuit !! )
  • 4 – Créez une séquence avec ces paramètres pour qu’elle soit lisible par Facebook

    Taille : 520x750
    Mettez le champs autoplay sur la valeur False pour le désactiver car Facebook ne supporte pas le contenu en lecture automatique.

  • 5 – Créez une image ayant la forme d’un bouton « Play », insérez-la dans le Studio en créant une piste « Image ». Affectez-lui l’action Native action puis dans le second menu déroulant la mention Play. Donnez-lui un temps de 1 seconde pour que l’image disparaisse au lancement de la séquence.
  • 6 – Insérez toutes vos images dans l’éditeur (en cliquant sur Media puis Create) ensuite importez-les dans votre séquence en créant une piste image pour chaque image importée. Vous devez donner à chaque piste une durée d’apparition et une position dans la page ainsi qu’un effet d’apparition.
  • 7 – L’effet de disparition de l’image en profondeur est en fait une vidéo créée sous After Effect. Nous avons fait une capture écran de l’image en 520x740 et nous lui avons donné un effet de disparition 3D. La vidéo a été exportée en .mov et convertie en .mp4 et .ogg (Consultez nos tutoriaux interactifs en français pour savoir comment faire ce type d’encodage !). Nous avons envoyé la vidéo dans l’éditeur et l’avons inséré dans une piste vidéo, en lui redonnant les mêmes paramètres de taille 520x750.
  • 8 – Nous avons créé une image finale « Cliquez ici » et nous l’avons insérée dans la timeline, en lui donnant un effet « Puff ».
  • 9 – Sauvegardez et publiez (en cliquant sur Publier dans la barre de Menu de l’Editeur) votre séquence pour qu’elle soit ouverte et accessible à tous.

C’est fait ! Vous venez de créer votre animation Facebook avec le 3WDOC Studio, maintenant nous allons l’importer dans la page Facebook.

Création de l’onglet Facebook

  • 1 – Ouvrez votre page Facebook, recherchez dans le moteur de recherche Facebook, l’application Static Html. Cliquez maintenant sur Installez l’application et sélectionnez la page dans laquelle vous souhaitez l’installer.
  • 2 – Sur votre page, cliquez sur Modifiez la page, puis dans l’onglet application, sélectionnez Static Html, ensuite cliquez sur Modifier les paramètres pour renommer l’onglet, nous l’avons appelé Démo HTML5.
  • 3 – Retournez dans votre page, ouvrez l’onglet Demo Html5 puis cliquez sur FAQ (la barre jaune) et ouvrez l’onglet Can I use a page from my blog or website.
    Copiez le code suivant :

    	<html> 
              	<head> 
              	<meta http-equiv='Refresh'
                    content='0; url=http://exemple.com' /> 
              	</head> 
        	</html>

    Il ne vous reste plus qu’à remplacer l’adresse donné en exemple http://example.com par l’adresse web de votre séquence publiée. Dans notre exemple, l’adresse web est la suivante : http://studio9.vip1.3wdoc.com/he3Player.php?action=local.sequence.read&sequence_id=6

  • 4 – Cliquez sur Save puis View your Tab as a non fan.



Ça y est ! Vous avez terminé et publié créer votre animation sur votre page Facebook ! N’oubliez pas que vous pouvez aussi insérer du texte, des vidéo, du son, etc. et créer le contenu que vous souhaitez à l’aide de 3WDOC Studio !

Pour aller plus loin