Démo HTML5, Webmarketing – Comment animer votre page Facebook J’aime 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 champsautoplaysur la valeurFalsepour 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 actionpuis dans le second menu déroulant la mentionPlay. 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
520x740et nous lui avons donné un effet de disparition 3D. La vidéo a été exportée en.movet convertie en.mp4et.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 taille520x750. - 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.compar 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
- Nos tutoriaux
Nos tutoriaux interactifs en français - Notre FAQ
Notre FAQ en Anglais - La page de “Static HTML”
Pour télécharger l’application “Static HTML” - Notre page Facebook
Notre animation HTML5 sur Facebook
