Astuce Exploration du panneau Extraits de code de Flash CS5

Dans cette astuce, je vais vous montrer comment utiliser le tout nouveau panneau d'extraits de code Flash CS5 pour ajouter facilement une interaction clavier-souris à vos projets, sans avoir nécessairement besoin d'apprendre l'AS3. Nous allons jeter un coup d'oeil!

Aperçu du résultat final

Voici le résultat final que nous allons atteindre. À l'aide du panneau d'extraits de code, nous utilisons Click Movie Clip comme bouton pour lancer l'animation. De plus, avec les flèches du clavier, vous pouvez déplacer le logo "active.tutsplus.com". Si vous cliquez dessus, vous accédez au site. Ces fonctions sont exécutées à l’aide du panneau Extraits de code..


Étape 1: Charger le projet

Téléchargez le fichier zip source en utilisant le lien ci-dessus et extrayez-le quelque part.

Ouvrez Adobe Flash Professional, puis cliquez sur Fichier> Ouvrir..


Étape 2: Ouvrir le fichier source

Sélectionnez le fichier source téléchargé "Quick_Tip_Code_Snippets.fla".


Étape 3: Définir le nom de l'instance

Ici à notre disposition est une bannière Flash. Afin de lui donner certaines fonctionnalités, nous allons utiliser le nouveau Panneau d'extraits de code de Flash CS5. Commençons par "Cliquez" Movie Clip. Choisissez le calque "Cliquez" puis le clip avec l'outil de sélection (raccourci V). Dans la fenêtre Propriétés, donnez-lui le nom de l'instance "Click".


Étape 4: Ouvrez le panneau d'extraits de code

Ouvrez maintenant votre panneau d’extraits de code (si vous ne le voyez pas, sélectionnez Fenêtre> Extraits de code). Sélectionnez une catégorie Navigation dans la timeline> Cliquez pour aller à Image et lecture. Double-cliquez dessus.

P.S. N'oubliez pas qu'avant d'ouvrir le panneau d'extraits de code, le clip "Cliquez" doit être sélectionné..


Étape 5: Modifier le code généré automatiquement

Après cela, le panneau Action s’ouvrira et vous verrez du code avec des instructions. Suivons les instructions et modifions le nombre 5 entre crochets en numéro 2. Cela entraînera la lecture de notre animation à partir de l'image 2 si nous cliquons sur notre clip "Cliquez sur"..

J'ai ajouté des animations à la timeline à partir de l'image 2 et vous les verrez jouer une fois le bouton cliqué..


Étape 6: Clip ActiveTuts

La prochaine chose que nous devrions faire est de donner quelques fonctions à notre clip ActiveTuts. Sélectionnez-le sur la scène et donnez-lui le nom d'instance "ActiveTuts".


Étape 7: Mouvement avec clavier

Lorsque le clip "ActiveTuts" est sélectionné, sélectionnez Panneau de fragments de code> Animation> Déplacer avec les flèches du clavier. Nous ne changerons pas les paramètres par défaut du code car ils servent bien. Cette fonction nous permettra de déplacer notre clip ActiveTuts avec les flèches du clavier..


Étape 8: Lien cliquable

De plus, faisons en sorte que notre clip ActiveTuts se comporte comme un lien. Encore une fois sélectionné, sélectionnez Panneau de fragments de code> Actions> Cliquez pour aller à la page Web..

Vous devriez avoir le code suivant dans votre panneau Actions:


Étape 9: URL

Notre panneau Actions s'ouvrira et nous verrons quelques instructions sur la façon de modifier l'URL dont nous avons besoin. Dans mon cas, je le changerai en "http://active.tutsplus.com".

La dernière chose dont nous avons besoin est d’écrire un Arrêtez() fonction à la fin du code sur l'image 1. Après cela, vous pouvez prévisualiser ce que nous avons réalisé.

Conclusion

Vous savez maintenant comment utiliser le nouveau panneau d'extraits de code! C'est utile à la fois pour les personnes qui connaissent AS3 (permet d'économiser du temps) et pour celles qui commencent à s'y plonger. Cela donne l’occasion d’ajouter des actions aux objets sans écrire une seule ligne de code!

J'espère que vous avez aimé ce petit conseil et qu'il vous aidera. Merci d'avoir lu!

Éditeur: Une dernière chose - n'oubliez pas que vous pouvez stocker et partager tous vos extraits de code sur snipplr.com, le dernier-né du réseau Envato!