Blog | F4 Design : Créer différemment.

  • Accueil > 
  • Blog > 
  • #Flash
  •  > Intro flash/after effect pour le site web « la Plaine des Sables »

Intro flash/after effect pour le site web « la Plaine des Sables »

Vous pouvez visionner l’introduction de 6,24 secondes à part, en cliquant sur l’image ci-dessous:

l’introduction vidéo est intégré en .FLV dans Flash avec couche alpha sur le site http://www.laplainedessables.com/ , l’animation a été créée sous After effect.
J’ai créé de cette introduction de site internet  pour l’infographiste indépendante Karine Hoarau, travaillant depuis plus de 12 ans dans le secteur des industries et de la communication graphique.

A propos Loïc Tortelier

Consultant et créateur en communication. Sur F4 Design Loïc est le créateur d’identités visuelles, supports de communication, publicité web et sites internet de plusieurs 10aines de sites internet d'entreprises, sociétés et associations qui misent sur leur communication pour se démarquer et accroître leurs notoriétés. Ses sites : www.f4-design.fr , www.comment-devenir-independant.fr , www.editions-de-la-paume.com

Recevez la newsletter !

liste des supports de communication pour un projet d'entreprise

Recevez dès votre inscription la liste incontournable pour définir vos supports de communication pour votre projet.

  • 42 supports de communication proposés
  • 4 questions indispensables pour chaque supports

Ainsi que les prochains articles et vidéos des projets ou conseils en création de communication visuelle, web et multimédia pour des sociétés, entreprises et indépendants directement par email !






* champ obligatoire.

14 réflexions au sujet de « Intro flash/after effect pour le site web « la Plaine des Sables » »

  1. Salut, En faite tu as du appuyer trop vite la première fois, il n’y a pas de barre de « Chargement » vu qu’on ne me l’avais pas demandé et je n’ai pas pris le temps de la rajouter pour la visionner . Donc l’animation se lance toute seule, une fois charger , se qui laisse un blanc pendant quelques secondes au début.
    Si tu la laisse donc se jouer la première fois, un seul clique suffit à la rejouer à chaque fois 😉 .

    Tu as trouvé ça cool , bien cela me fais plaisir, c’est se genre de boulot que j’aime faire. Impeu créatif ça change de se qu’on me demande actuellement qui n’as rien de bien créatif… et qui commence à me « souler » 😡 .

      1. Bonjour,

        Il y a plusieurs façon de la faire, cela va aussi dépendre de ta version flash, et de ton code flash.
        Dans mon cas :
        1. Je crée la vidéo sur After Effects et je la sort en .FLV ( si tu as du son tu n’oubli pas de l’activer lors de la génération de la vidéo ) .
        2. Je crée ensuite un fichier depuis flash et je fait un import de vidéo, en chargement externe ( tu choisi donc ton fichier .FLV qui doit se trouver au même niveau que ta future page de lecture de la vidéo, pour faire simple ). Je choisi ensuite l’option avec aucun habillage de barre de lecture du player vidéo proposé lors de l’importation.
        3. Je crée 2 Frames vides sur ma time line dans flash. Je laisse vide la première . Je place le player vidéo sur la 2eme frame.
        Ensuite je crée un bouton pour la lecture de ma vidéo qui va simplement relancer l’animation flash depuis la frame vide. Se qui va relancer la lecture du player vidéo.

        Je met donc le code action script sur la frame 2 ( pas sur le bouton ) c’est un code en action script 2 :

        stop();

        btn_play.onPress = function() {
        gotoAndPlay(1);
        }

        le stop(); va stoper à la frame 2 ou se trouve le player vidéo.
        Le reste va donner une action de lecture de la frame 1 vers 2.

        Je nomme donc l’occurrence de mon bouton btn_play

        4.Maintenant on teste l’animation dans flash si la lecture est bonne et que le bouton fonction c’est ok.

        5. Si l’on souhaite jouer l’animation sur une page web il va faloire faire générer le code qui faut.
        Tu peux générer la page HTML depuis flash, il y aura un fichier javascript a ne pas oublié aui sera aussi générer : AC_RunActiveContent.js

        Voici un lien vers une page du code générer pour cette page html :

        > page html avec le code générer par flash

        6.Tu testes ta propre page HTML et si cela fonctionne, il ne te reste plus qu’a l’envoyer sur ton FTP de ton site.
        Si tu souhaite l’incorporer dans une autre page, tu utilisera donc tous les appels de javascript sur ta page. sans oublié de bien mettre les fichiers .swf de flash et .flv de la vidéo au même niveau.

        J’espère t’avoir aider dans la façon de lire une vidéo crée sous AE ou autre depuis un player flash dans une page de site web et sans barre de lecture.

        Il existe beaucoup d’autres méthodes, mais la c’était une méthode bricolé pour allé vite 🙂

  2. Salut,

    vraiment très sympa comme animation pour une intro de site web! Vraiment ce que je recherche!

    Comment as-tu créer cette animation? T’es-tu aidé d’un tuto en particuliers, site, etc.

    Ca serait sympa de voir comment tu as procéder!
    Je souhaite faire un peu le même style que toi mais avec apparition d’un texte à la fin de l’animation fondu avec la peinture.

    Peux-tu me conseiller car je débute en AE?

    Merci

    1. Ici je ne me suis pas aider de tuto, j’ai crée l’ensemble par rapport à la demande du client.
      Sachant qu’en faite l’image finale m’a été fournit, elle est faite sous photoshop. J’ai donc imaginé l’animation par rapport au rythme du son directement sous After Effect. Pour cela j’ai analysé l’image finale et j’ai coordonné les sons avec certaines parties de l’image, ensuite j’ai utilisé un jeu de masques animés pour faire apparaître les éléments au moment voulus dans les endroits voulus.
      Pour les goûtes en faite c’est tout simplement des solides que j’ai crée dans la perspective qui me convenez pour les faire tomber. Avec l’activation du flou de mouvement que j’ai réglé comme je le souhaité.
      Pour l’effet des coup de pinceau j’ai travaillé l’image finale sur photoshop pour lui donner cette effet et je jou encore sur les masques pour montrer uniquement les parties qui collent au rythme.
      Pour l’effet d’absorbtion de la peinture c’est un effet de lueur diffuse animé qui fait la blague.

      😉

  3. Dis comme ça, ça paraît simple! En tout cas joli travail…

    Je vais essayé de me former un peu avant d’essayer de le refaire.

    Encore merci pour ce post, c’est vraiment ce que je souhaitais sur le principe : animation AE + Lecteur d’animation + lisible sans nécessité de plugin vidéo sur tous les navigateurs.

    Bonne continuation à toi!
    N’hésite pas à poster tes travaux…

    1. Oui c’est vrai que dit comme cela paraît simple. Bien évidement il faut avoir les bases d’after et un peu d’imagination pour le faire sinon se sera très compliqué je pense 🙂 .

      Je posterai d’ici le mois d’avril, un article sur un travail de motion design que j’ai terminé la semaine dernière pour une série de 14 reportages sur des familles qui ont choisi d’équiper leur maison de façon écologique et économique, mais j’attend qu’il soit diffusé sur le web pour pouvoir faire cela. J’espère qu’il te plaira, tu me donnera ton avis.

  4. Petite question. J’ai un format 720×270, comment faire pour exporter le FLV sans les bandes noires générées automatiquement par AE?
    Il m’indique que les paramètres ne correspondent pas et qu’il redimensionne le fichier par 1,09 à par 1,00 afin de respecter les contraintes de format. Et de ce fait cela entraine des bandes noires en haut et en bas.

    1. Ton format n’est pas un format standard donc il te faut régler le format de pixel dans AE lorsque tu fais ta ou tes compositions. Pour les bandes noir, cela doit être du au fait que tu n’as pas réglé le format de pixel justement.
      Il t’indique qu’il faut redimensionner de 1.09 à 1.00 donc normalement tu as la solution. Il ne te reste plus qu’à changer ton format de pixel.
      Deuxième détails si tu as les bandes noir dans un lecteur vidéo comme vlc, ou autre lecteur qui n’est pas flash, c’est normal. Car tu es dans une taille de vidéo qui n’est pas un standard. De plus si ta vidéo est proportionné, mais avec des bandes noir dans un de ces lecteur vidéo non flash, alors elle est certainement bonne. Il te suffit maintenant de l’intégrer dans flash et tu n’auras plus les bandes noir.

  5. Merci pour le conseil! J’ai passé l’animation en pixel carré et de là les bordures cinéma sont parties.

    Une dernière petite question, comment fais-tu pour compresser les rendus AE?
    Faut-il mieux exporter en Flv ou en F4v et compresser à 1?
    Exporter en FLv bonne qualité puis compresser le rendu swf? Comment?

    Mon anim fait 15s, ce qui est assez long, donc assez lourd! Comment l’exporter pour un rendu maximum avec un minimum de poids?

    1. La compression s’effectue dans les options de rendu , dans le module de sortie. Je t’invite à aller voir cette url pour l’encodage flv ou f4v :
      http://www.adobe.com/fr/designcenter/cs4/articles/lrvid4097_xp.html

      Moi j’utilise la méthode décrite avec media encoder, donc je sort mes vidéos pour le web en h264 depuis after , puis je les encodes ensuite en flv ou f4v avec media encoder.
      A toi de tester le format de fichier qui te correspond le mieux en fonction de son rapport qualité/poids.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Je possède un blog et je souhaite afficher un lien vers l'un de mes articles