Tutoriel flash : Utiliser l’effet de flou sous Flash

Voici un tutoriel expliquant la méthode pour incorporer un flou de mouvements dans une animation Flash.

Introduction : Un tutoriel pour vous faire découvrir l’effet de flou que peux générer Flash grâce à un filtre. Il sera combiné avec un objet en mouvement pour lui donner un effet de vitesse lors de sa chute.

L’animation est ralentie pour pouvoir observer le flou lors de la descente de l’objet.

Etape 1 :

1. Créer un nouveau document Flash : Créer > Fichier Flash (AS 2.0)

2. Redimensionner le document à 250x400 et régler la cadence à 24 ips.

3. Renommer le Calque 1 en Balle.

Etape 2 :

1. Tracer un cercle avec l’outil Ovale (raccourci clavier : O)

2. Transformer ce cercle en symbole : Clic Droit > Convertir en Symbole.

3. Nous allons le nommer « clip_ball » et son comportement sera celui d’un clip.

Etape 3 :

Nous allons appliquer un effet de Flou sur la balle :

1. Ouvrir la fenêtre des Filtres, puis sélectionner la Balle et ajouter un effet de flou en cliquant sur l’icône « + ». Attention les filtres ne peuvent être appliqués qu’au texte, aux clips et aux boutons.

2. Vue que notre objet va faire une chute, nous n’allons appliquer qu’un flou vertical donc mettre une valeur de 20 à « flou Y » et 0 à « flou X » (Penser à déverrouiller le cadenas pour ne pas avoir les deux même valeurs).

Etape 4 :

1. Sur le calque Balle, Nous allons créer une image- clé à la frame 19 sur la Time Line : Clic Droit > Insérer une image-clé.

2. Sur la frame 19, Nous déplaçons le clip_ball vers le bas de notre animation, tout en gardant le même axe horizontal.

3. Maintenant, nous créons une interpolation de mouvements à partir de notre image de départ, la frame 1 : Clique droit > Créer une interpolation de mouvement. Voila notre balle est happée par la gravité :)

Etape 5 :

1. Nous allons créer une autre image-clé à la frame 20 : Clic Droit > Insérer une image-clé.

2. Sur la frame 20, nous allons lui enlever l’effet de Flou : dans la fenêtre des Filtres, sélectionner la Balle et retirer l’effet de flou en cliquant sur l’icône « - ».

3. Toujours sur la frame 20, nous allons arrêter l’animation : ouvrir le Panneau Action (raccourci clavier : F9) et taper la ligne de code suivant : stop() ;

Etape 6 :

En bonus rien que pour vous, cher lecteur, nous allons créer l’ombre de cette balle.

1. Créer un nouveau calque, qui se nommera « Ombre » et se situera sous le 1er calque.

2. Tracer un large cercle noir avec l’outil Ovale (raccourci clavier : O) .

3. Convertir le cercle en symbole : Clic Droit > Convertir en Symbole. Pour le nommer ombre et de type graphique.

4. Sur le calque Ombre, nous allons créer une image- clé à la frame 20 sur la Time Line : Clic Droit > Insérer une image-clé.

Etape 7 :

1. Sur la frame 1, nous allons modifier l’alpha (opacité) de notre ombre. Dans le panneau propriétés, lui appliquer un alpha de 0 grâce au menu déroulant Couleur.

2. Sur la frame 20, modifier la taille de notre ombre pour devenir aussi large que la balle avec l’outil de transformation libre (raccourci clavier : Q).

3. Toujours sur la frame 20, nous allons modifier l’alpha. Dans le panneau propriétés, lui appliquer un alpha de 30 grâce au menu déroulant Couleur.

4. Maintenant, nous créons une interpolation de mouvements à partir de notre image de départ, la frame 1 : Clic droit > Créer une interpolation de mouvement. Ainsi nous avons un rendu réaliste de la chute de notre balle sur le sol.

Conclusion : Le tutoriel est fini, j’espère avoir éclairci le sujet et avoir rendu l’effet de flou plus clair :-P . Il peut servir dans d’autres situations (pour une image en arrière plan par exemple). Je vous invite à essayer les autres filtres que propose Flash, aussi utiles que méconnus.

Post-Scriptum : Ce tutoriel a été effectué sous Flash CS3, certains menus ou fenêtres peuvent être différents de la version Flash MX, Flash 8 ou Flash CS4, mais rien de dramatique, les raccourcis clavier et le fonctionnement du filtre flou restent inchangés.

Téléchargement des fichiers sources liés à ce tutorial

Veuillez vous connecter pour télécharger les fichiers sources

Article publié par MØG

Vous aimez cet article? Partagez le !

Adepte de Photoshop et Flash depuis de nombreuses années. J’aime faire partager mes connaissances avec le plus grand nombre.
Pour en savoir plus : Mon Portfolio

Publiez une nouvelle image

Vous avez réussis à créer une belle image grâce à ce tutorial ? Soyez sympa, partagez la avec la communauté. Utilisez simplement ce formulaire :

Vous devez être connecté pour activer le bouton de validation !

La galerie des membres

Voici les images déjà publiées par les membres de ce site, merci à vous pour votre créativité !

    Questions et commentaires, Il y a 13 messages de forum.

    Vous avez besoin d’eclaircicemment sur un points évoqués dans cette leçon, dans ce cas laissez votre question en utilisant le formulaire ci dessous, notre équipe vous apportera rapidement un complètement d’information. Merci d’être le plus précis possible lors de la rédaction de votre demande.

    • 16 mars 2009 21:30, par YoYoze

      Ouai un tuto Flash ! Merci bien !

      Perso j’aurais préférer un tuto plus basique pour apprendre a utiliser flash

      Bonne continuation !

      Répondre
      • 17 mars 2009 10:25, par MØG

        Salut,

        Flash a de multiples utilisations, le seul moyen de progresser et de faire plein, plein de tuto differents. D’autant que celui-la n’est pas trés dur.

        Je t’invite à regarder ce tuto pour débuter : Présentation de l’interface Flash

        Voir en ligne : MØG Folio

        Répondre
        • 19 août 2009 14:53, par psylia

          Bonjour ! Il est vrai que depuis 2 semaines, je met en oeuvre et essaye de comprendre tous les tuto qui me passe sous les yeux et, petit à petit, il y a des choses qu’on n’a plus besoin de m’expliquer... Par contre, il y a un truc que j’aimerais savoir faire et je l’ai trouvé sur ton site, Mog ! C’est le Menu Skates Design. Crois-tu qu’il existe un tuto pour ça ?

          Répondre
          • 26 août 2009 16:24, par MØG

            Bonjour Spylia,
            Merci d’avoir visité mon site :-) et pour le Menu Skate Design, il existe un tuto sur WKS :
            http://www.wks.fr/Galerie-photo-en-Flash.html

            Voir en ligne : MØG Folio

            Répondre
    • 29 avril 2009 15:57, par Votre pseudonyme

      Ecrivez votre message ici...

      Répondre
    • 20 mai 2009 23:49, par okiloki

      merci beaucoup sa a ete cool-clair

      Répondre
    • 31 janvier 2010 16:16, par Votre pseudonyme

      tutoriel bien expliqué

      Répondre
    • 4 mai 2010 23:48, par Bulle

      Tuto tres interessant et bien explique mais je n’ai ni les filtres sur ma version complete Flash CS4, ni les effets de scenario ! Qui peut me dire comment les installer ou les faire apparaitre ? Merci pour la reponse.

      Répondre
      • 9 mai 2010 23:03, par Oxyzen2100

        Sous Flash CS4, les « effets de scénario » n’existent plus : j’ai posé la question à H Girolet de Video brain. Il faut interpoler les filtres. Les filtres tu les as obligatoirement dans ton CS4 mais comme dans Flash, tout est contextuel, il est possible que tu ne te sois pas mis en situation de les faire venir.

        Répondre
    • 6 mai 2010 13:39, par MØG

      Pour les filtres, dans le menu Fenêtre > Propriétés > Filtres
      Sinon réinstalle ta version de Flash CS4.

      Répondre
    • 5 juillet 2010 14:03, par Red1

      svp je trouve pas les filtres sur flash MX 2004 pouvez vous m’aider ?!!

      Répondre
      • 9 juillet 2010 10:35, par MØG

        Ta version commence à dater ...
        Regarde dans le Menu « Fenêtre » si il y a le Panneau « Filtres ».

        Voir en ligne : MØG Folio

        Répondre
      • 25 janvier 2011 23:51, par Bigg

        :D Effectivement flash MX 2004 ça commence à faire loin ! Surtout que ça doit être dur de trouver des tutoriels sur cette version.

        En tout cas ce tuto est très bien expliqué : c’est un incontournable pour faire des animations en flash !

        Voir en ligne : Graphiste flash

        Répondre

    Laissez un commentaire

    Remplissez correctement le formulaire puis appuyez sur Validez.