Cool Tutos effet de flash!

Sommaire

Dans ce tutoriel, vous apprendrez comment créer un reflet de l'eau à appliquer sur un MovieClip en mouvement.

Voici le résultat final:

Exigences

Flash 8, Flash CS3 et Flash CS4.

Note: Les captures d'écran de ce tutoriel sont réalisés en Flash CS3. Il fonctionne exactement le même dans Flash 8. Ce tutoriel est ActionScript 2 (Bien qu'aucune ActionScript est requise).

Étape 1 - Installer le composant effet

Téléchargez le Effet reflet d'eau ici. S'il vous plaît suivez les instructions d'installation et faites glisser le composant du panneau composant dans la bibliothèque de votre fichier. FLA.

Étape 2 - Création Movieclip canard

Importer l'image de canard appuyez sur [Ctrl-R] ou "Fichier" -> "Importer" -> "Importer sur scène ...». Assurez-vous que l'image de canard est un PNG. Avec un fond transparent.

Sélectionnez cette image et la convertir en une [Movieclip appuyez sur F8] ou clic droit sur le MovieClip -> "Convertir en symbole ...». Donner le MovieClip le nom de «canard».

Étape 3 - Création d'animation Movieclip

Créer un MovieClip nouveau avec [Ctrl-F8 presse] ou Insertion -> "Nouveau symbole de la ...». Nommez cette animation Movieclip ".

Faites glisser le MovieClip de canard à partir de votre bibliothèque à la première image sur la timeline. Maintenant, cliquez sur l'image 60 et créez une nouvelle image-clé [appuyez sur F6] ou clic droit et "Insérer une image clé".

Cliquez sur l'image clé nouvellement créé et sélectionnez le MovieClip canard sur la toile. Maintenant, déplacez ce MovieClip avec le curseur de la clé à droite (disons 100px). Vous pouvez vérifier la nouvelle position dans le panneau d'informations.

Retour à la première image-clé de la timeline. Sur le panneau de propriété Select Tween: «Motion». Si vous cliquez quelque part dans la timeline maintenant, vous voyez que le canard Movieclip se déplace de gauche à droite.

Étape 4 - Mettre Movieclip animation dans le scénario principal

Maintenant, cliquez sur "Scene 1" pour revenir au scénario principal. Si le canard MovieClip est toujours là, le retirer.

Déplacez le Movieclip animation à partir de votre bibliothèque à la première image de la timeline.

Définissez le nom d'instance du MovieClip pour "animation_mc" (vous pouvez choisir un nom différent si vous voulez. Assurez-vous que le nom d'instance est unique). Sans un nom d'instance, le composant n'est pas en mesure de détecter le MovieClip.

Etape 5 - Appliquer composante effet

Créez un nouveau calque, sélectionnez la première image et faites glisser le composant effet à partir de votre bibliothèque sur le MovieClip animation. Le composant logiciel enfichable automatiquement.

Définissez le paramètre de la composante de l'intérieur du panneau Inspecteur de composants comme dans la capture d'écran. MovieClips avec tous les noms d'instance dans ce cadre sont répertoriés dans le "Target Movieclip" liste de sélection. Puisque vous avez un seul MovieClip, la composante suppose que vous voulez appliquer l'effet sur le MovieClip "animation_mc".

Note: Ces paramètres ne sont appliqués à cette instance de l'une des composante effet. Si vous dessinez le composant sur un autre MovieClip (ailleurs dans le fla. Ou dans un nouveau projet), vous devez définir les paramètres à nouveau.

Maintenant (à l'exportation [appuyez sur Ctrl-ENTRER] ou ...). Vous verrez que la tête du canard est en quelque sorte coupé. Thats parce que le composant a exactement la taille de la Movieclip canard. Mais depuis la vague réflexion sera d'augmenter la taille cela ne sera pas bon non plus.

Étape 6 - Régler Movieclip animation

Pour corriger cela, vous allez insérer une forme invisible dans l'arrière-plan du canard MovieClip, quelle taille de la Movieclip un peu.

Retournez à la Movieclip canard en double-cliquant dessus dans votre bibliothèque.

Créez un nouveau calque sous le calque interpolation.

Sélectionnez l'outil rectangle et dessinez une forme à la largeur du canard. La hauteur doit être quelque peu supérieur à un pixel alors le canard (environ 10 pixel). Elle pourrait aider à définir l'icône en lumière, dans la timeline, de ne voir que les dimensions de l'image de canard.

Grâce à la forme sélectionnée ouvrir le panneau de la couleur et mettre de l'alpha à 0.

Lorsque vous testez votre film maintenant, vous verrez que la réflexion est appliqué sur le canard trou.

Étape 6 - Ajouter une image de fond

Créez un nouveau calque sous le calque d'animation et de composants. Importer une image de ce match. Maintenant vous pouvez changer la position de la Movieclip d'animation pour le faire rentrer dans le fond.

Télécharger

Cliquez ici pour télécharger le fla de ce tutoriel. Note: La FLA. Inclut la version d'évaluation de la composante de l'effet, qui ne fonctionne que dans l'IDE Flash (Flash 8, Flash CS3 et Flash CS4) mais pas dans le navigateur.

Vous pouvez également télécharger le Effet reflet d'eau ici.