Share
Dans ce didacticiel, nous allons créer un révélateur d'image de masque animé, qui impliquera des clips, des masques et ActionScript 3..
Voici le résultat final sur lequel nous allons travailler.
Nous allons créer l'effet ci-dessus, mais sans la fonctionnalité "click replay". Voici un aperçu de ce que nous allons faire. Il y aura deux couches. L'un tiendra les actions et l'autre contiendra l'image. Nous allons également créer un clip d'animation qui sera ajouté à un masque au moment de l'exécution. Le Clip d'animation a pour but de révéler l'image au fur et à mesure..
Je suppose que vous avez déjà une connaissance de base de Flash et d'ActionScript 3. Cependant, je vais quand même essayer de garder chaque étape aussi claire que possible..
Créez un nouveau document ActionScript 3. Définissez la taille de la scène sur 600 x 420 pixels et 24 images par seconde. J'ai choisi cette taille car l'image que je vais utiliser s'intègrera parfaitement à ces dimensions.
Renommez le premier calque en "image" puis importez l'image. J'ai importé l'image d'une plage et l'a alignée au centre.
Sélectionnez maintenant l'image et convertissez-la en un symbole de clip. Je l'ai nommée "plage", mais ça peut vraiment être n'importe quoi. Assurez-vous que le point d'enregistrement est dans le coin supérieur gauche.
Donnez à la nouvelle image Movie Clip le nom d’instance "imageToReveal_mc". Verrouillez cette couche car nous ne la changerons plus.
Remarque: j'ai terminé le nom avec "_mc". C'est pratique si vous voulez des conseils de code automatiques dans le panneau Actions..
Faisons un peu d'animation maintenant. Créez un nouveau symbole et nommez-le "animation de cercle". Sélectionnez "Movie Clip" comme type.
Vous devriez maintenant être dans le scénario "animation de cercle". Tout d’abord, renommez le calque en "animation" puis créez un cercle de 80 x 80 pixels sur la scène. Centre l'aligner.
Sélectionnez le cercle et convertissez-le en symbole (F8). Nommez-le "cercle" et sélectionnez "Graphique" comme type. Assurez-vous que le point d'enregistrement est "centre".
Sélectionnez le cercle graphique et appliquez une interpolation de mouvement simple. La durée sera de 14 images. Assurez-vous que le cercle a une échelle de 1% sur l'image 1 et de 100% sur l'image 14. Vous pouvez ajuster la position / l'échelle / la rotation du cercle comme vous le souhaitez entre les images. J'ai seulement escaladé le mien.
Créez maintenant un nouveau calque dans le clip appelé "actions". Insérez une image clé à la toute dernière image (14). Ouvrez le panneau Actions et ajoutez une action d'arrêt. Cela arrête l'animation de la boucle.
Une fois que cela est fait, allez dans le panneau Bibliothèque, cliquez avec le bouton droit de la souris sur "animation de cercle" et sélectionnez "Propriétés ...". Assurez-vous que vous êtes dans la vue "Avancé". Cochez "Exporter pour ActionScript" - "Exporter dans l'image 1" doit être automatiquement coché. Pour la classe, entrez "CircleAnimation" et laissez la classe de base sous la forme "flash.display.MovieClip"..
Revenez maintenant au scénario principal et assurez-vous que seul le calque "image" est sur la scène. La nouvelle "animation de cercle" que vous avez créée ne doit pas apparaître sur la scène, elle doit exister uniquement dans la bibliothèque..
Créez un nouveau calque appelé "actions" et verrouillez-le. Sélectionnez la première image de ce calque et accédez au panneau Actions..
Tout d'abord, créez un masque pour l'image. Ajoutez-le ensuite à la scène et assignez le masque à l'image. Movie Clip.
Nous allons maintenant créer 4 variables: xPos, yPos, spacingX et spacingY. "xPos" et "yPos" seront utilisés pour positionner les nouvelles instances de CircleAnimation. "spacingX" et "spacingY" est l'espacement entre chaque instance CircleAnimation le long des axes x et y.
Comme nous voulons ajouter des occurrences de CircleAnimation dans le masque une par une, nous utiliserons un minuteur pour appeler une fonction à plusieurs reprises. La fonction "reflectImage" sera appelée toutes les 30 millisecondes. Pour démarrer le minuteur, vous devez également appeler la méthode "start".
Créons maintenant la fonction "discoverImage". Assurez-vous qu'il a un paramètre de type "TimerEvent".
Créez maintenant une nouvelle instance CircleAnimation et positionnez-la en fonction des "xPos" et "yPos". Puis ajoutez-le dans le masque.
Actuellement, toutes les instances de CircleAnimation se superposent car "xPos" et "yPos" sont toujours les mêmes. Ce que nous voulons, c’est que les instances apparaissent de gauche à droite et de haut en bas. Nous devons donc nous assurer que nous incrémentons le "xPos" de "spaceX". Il en va de même pour "yPos" par "spaceY". Toutefois, "yPos" ne doit être incrémenté que lorsque "xPos" dépasse la limite x maximale. Lorsque cela se produit, "xPos" doit également être réinitialisé à gauche..
Si vous testez votre film maintenant, il devrait révéler l'image comme l'effet final. Il y a une chose importante que vous n'avez peut-être pas remarquée. Les instances CircleAnimation sont toujours en cours de création même après la révélation de l'image. En effet, l'écouteur d'événements "createChildTimer" n'est jamais supprimé. Nous devons vérifier si "yPos" a dépassé la limite y maximale et, si tel est le cas, supprimer l'écouteur d'événement "createChildTimer"..
Au fait, "imageToReveal_mc.x + imageToReveal_mc.width + spacingX" et "imageToReveal_mc.y + imageToReveal_mc.height + spacingY" ne changent jamais, je les ai donc stockées dans les variables "maxXPos" et "maxYPos"..
Votre code final dans le panneau Actions devrait ressembler à ceci…
var maskImg: MovieClip = new MovieClip (); addChild (maskImg); imageToReveal_mc.mask = maskImg; var xPos: Number = imageToReveal_mc.x; var yPos: Number = imageToReveal_mc.y; var spacingX: Nombre = 50; var espacementY: Nombre = 50; var createChildTimer: Timer = new Timer (30); // createChildTimer.addEventListener (TimerEvent.TIMER, discoverImage); createChildTimer.addEventListener (TimerEvent.TIMER, tellImage, false, 0, true); createChildTimer.start (); var maxXPos: Number = imageToReveal_mc.x + imageToReveal_mc.width + spacingX; var maxYPos: Number = imageToReveal_mc.y + imageToReveal_mc.height + spacingY; function révèleImage (evt: TimerEvent): void var ca: CircleAnimation = new CircleAnimation (); ca.x = xPos; ca.y = yPos; maskImg.addChild (ca); xPos + = spacingX; if (xPos> maxXPos) xPos = imageToReveal_mc.x; yPos + = espacementY; if (yPos> maxYPos) createChildTimer.removeEventListener (TimerEvent.TIMER ,velImage);
En utilisant un peu de récursivité, nous pouvons changer l’effet pour qu’il révèle l’image image par image..
var maskImg: MovieClip = new MovieClip (); addChild (maskImg); imageToReveal_mc.mask = maskImg; var xPos: Number = imageToReveal_mc.x; var yPos: Number = imageToReveal_mc.y; var spacingX: Nombre = 50; var espacementY: Nombre = 50; var createChildTimer: Timer = new Timer (120); // createChildTimer.addEventListener (TimerEvent.TIMER, discoverImage); createChildTimer.addEventListener (TimerEvent.TIMER, tellImage, false, 0, true); createChildTimer.start (); var maxXPos: Number = imageToReveal_mc.x + imageToReveal_mc.width + spacingX; var maxYPos: Number = imageToReveal_mc.y + imageToReveal_mc.height + spacingY; function révèleImage (evt: TimerEvent): void var ca: CircleAnimation = new CircleAnimation (); ca.x = xPos; ca.y = yPos; maskImg.addChild (ca); xPos + = spacingX; if (xPos> maxXPos) xPos = imageToReveal_mc.x; yPos + = espacementY; else ThèmeImage (evt); if (yPos> maxYPos) createChildTimer.removeEventListener (TimerEvent.TIMER ,velImage);
Voici une version colonne par colonne. La plupart des variables / propriétés x et y ont des positions échangées.
var maskImg: MovieClip = new MovieClip (); addChild (maskImg); imageToReveal_mc.mask = maskImg; var xPos: Number = imageToReveal_mc.x; var yPos: Number = imageToReveal_mc.y; var spacingX: Nombre = 50; var espacementY: Nombre = 50; var createChildTimer: Timer = new Timer (120); // createChildTimer.addEventListener (TimerEvent.TIMER, discoverImage); createChildTimer.addEventListener (TimerEvent.TIMER, tellImage, false, 0, true); createChildTimer.start (); var maxXPos: Number = imageToReveal_mc.x + imageToReveal_mc.width + spacingX; var maxYPos: Number = imageToReveal_mc.y + imageToReveal_mc.height + spacingY; function révèleImage (evt: TimerEvent): void var ca: CircleAnimation = new CircleAnimation (); ca.x = xPos; ca.y = yPos; maskImg.addChild (ca); yPos + = espacementY; if (yPos> maxYPos) yPos = imageToReveal_mc.y; xPos + = spacingX; else ThèmeImage (evt); if (xPos> maxXPos) createChildTimer.removeEventListener (TimerEvent.TIMER ,velImage);
Il y a beaucoup d'autres choses que vous pouvez changer pour obtenir différents effets révélateurs tels que la forme utilisée dans l'animation, les transformations dans l'animation, la vitesse du minuteur, etc..
Merci d'avoir visionné ce tutoriel et j'espère que vous l'avez apprécié.
Accentsconagua