Share
Dans cette astuce, vous apprendrez à utiliser la fonction ExternalInterface de Flash et à ajouter un peu de jQuery pour créer un "commutateur d'éclairage" qui assombrit la page Web. Ceci est vraiment efficace pour une utilisation avec des lecteurs vidéo, diaporamas, etc..
Pour créer cet interrupteur, nous allons utiliser la commande ExternalInterface dans Flash. Nous allons créer un appel à une fonction jQuery qui assombrit la page Web lorsque l'utilisateur clique sur le bouton. Nous utiliserons ensuite Dreamweaver (ou n’importe quel programme d’édition HTML) pour créer une page Web affichant l’effet..
Il s'agit d'un effet très utile à ajouter aux applications Flash (telles que les lecteurs vidéo) pour améliorer l'expérience de l'utilisateur et ajouter quelques fonctionnalités supplémentaires à votre site Web..
Créez un nouveau document Actionscript 3 et définissez-le sur 120 x 120 pixels. Créez un carré de 100 x 100 pixels avec un rayon de 10.
Remplissez-le avec un dégradé de #BBBBBB à # 999999. Utiliser l'outil de transformation en dégradé (touche de raccourci 'F') pour faire pivoter le dégradé de sorte que le #BBBBBB soit en haut au lieu de la droite.
Sélectionnez ensuite l’arrière-plan et convertissez-le en symbole (Modify> Convert to Symbol) et nommez-le 'buttonBackground'..
Allez à l'intérieur du bouton fond MovieClip en double-cliquant dessus et sélectionnez le dégradé. Appuyez ensuite sur CTRL + C pour le copier, puis sur CTRL + SHIFT + V pour le coller au même endroit, puis, sans le désélectionner, allez dans Modifier> Forme> Développer le remplissage et insérez-le par 2px. Changer le dégradé pour qu'il passe de #CCCCCC à #AAAAAA.
Retournez à la chronologie principale et sélectionnez le bouton movieclip, puis choisissez Modifier> Convertir en symbole et choisissez Bouton avec le nom lumières éteintes.
Maintenant, allez à l'intérieur du bouton en double-cliquant dessus et créez 2 nouveaux calques au-dessus du calque de fond appelé Ampoule et Texte. Ecrire "Lights Off" sur le calque de texte. J'ai utilisé Arial Bold à 20 pt et une couleur de # 444444. J'ai également créé une simple ampoule utilisant un cercle pour le haut et des rectangles arrondis pour la base. J'ai fait l'ampoule d'une couleur de # 5D5D5D.
Accédez à l'image clé suivante pour l'état "terminé" du bouton, définissez la couleur du texte # 353535 et la couleur de l'ampoule # 4C4C4C. Attribuez à l'arrière-plan un filtre de rayonnement contenant les propriétés suivantes:
Pour l'état abaissé, supprimez simplement la lueur de l'arrière-plan et faites pivoter l'arrière-plan de 180 °..
Allez dans votre bibliothèque, faites un clic droit sur le bouton lightsOff, sélectionnez "Dupliquer" et nommez la nouvelle copie "lightsOn".
Aller dans le lumières allumées et changez le texte en "Lights On" pour tous les états. Ajoutez également quelques rayons de lumière autour de l’ampoule, comme indiqué sur la photo ci-dessous:
Retournez sur la scène principale. Assurez-vous d'avoir une instance de lumières éteintes sur la scène et un lumières allumées MovieClip. Donnez-leur des noms d'instance de "lightsOff" et "lightsOn" respectivement. Centrez les deux boutons sur la scène à l’aide du panneau d’alignement. Si vous ne le voyez pas, allez à Fenêtre> Aligner (ou appuyez sur CTRL + K). Assurez-vous de cliquer sur le bouton "aligner sur la scène" en bas du panneau..
Ouvrez un nouveau fichier Actionscript et écrivez la classe de documents de base. Si vous ne connaissez pas les classes de document, lisez le conseil rapide de Michael pour vous aider à démarrer..
Enregistrez le fichier Actionscript sous "Lights.as", puis définissez en flash la classe de document du .fla sur Lumières.
Cela peut ressembler à beaucoup de code mais une fois que vous avez lu tous les commentaires, c'est en fait assez simple.
Accentsconagua
package import flash.display.MovieClip; import flash.external.ExternalInterface; // Importer la classe nécessaire pour appeler une fonction jQuery import flash.events.MouseEvent; // Importe la classe nécessaire pour détecter un clic de souris. Classe publique Lights extend MovieClip fonction publique Lights () lightsOn.visible = false; // Rendre le bouton lightsOn invisible lightsOff.addEventListener (MouseEvent.CLICK, turnLightsOff); // Ajouter un écouteur pour un clic de souris sur le bouton lightsOff lightsOn.addEventListener (MouseEvent.CLICK, turnLightsOn); // Ajoute un écouteur pour un clic de souris sur la fonction du bouton lightsOn turnLightsOff (e: MouseEvent): void // Désactive la fonction d'éclairage lightsOn.visible = true; // Rendre le bouton lightsOn visible lightsOff.visible = false; // Rendre le bouton lightsOff invisible ExternalInterface.call ("lightsOff"); // Appelez la fonction jQuery 'lightsOff' function turnLightsOn (e: MouseEvent): void // Activer la fonction d'éclairage lightsOn.visible = false; // Rendre le bouton lightsOn invisible lightsOff.visible = true; // Rendre le bouton lightsOff visible ExternalInterface.call ("lightsOn"); // Appelez la fonction jQuery 'lightsOn' Ouvrez votre éditeur de texte pour créer des pages HTML. Dans mon cas, j'utilise Adobe Dreamweaver. Créez un document HTML vierge et enregistrez-le sous. lightswitch.html dans le même répertoire que votre fichier SWF. Ensuite, configurez votre document avec le code suivant:
Je vais ajouter dans le fichier flash en utilisant swfobject. Si vous ne connaissez pas swfobject, vous pouvez lire la section 1 du tutoriel d'Angel sur l'utilisation de swfobject pour insérer vos fichiers SWF dans votre document HTML. Une fois que vous maîtrisez swfobject et que vous avez les fichiers nécessaires, vous pouvez continuer..
Vous devrez ajouter le code suivant dans le répertoire balises dans votre page HTML. Comme vous pouvez le voir, vous aurez besoin du swfobject.js et expressInstall.swf fichiers dans le même répertoire que votre page swf et html.
Il ne reste plus qu’à écrire les fonctions jQuery. Ce sont deux fonctions simples qui seront appelées à partir du fichier SWF lorsque vous cliquerez sur le bouton..
Ceux-ci vont aussi à l'intérieur du balises sous le code swfobject. Comme vous pouvez le constater, je récupère le fichier jQuery directement à partir du serveur Google..
Maintenant, si vous testez votre fichier HTML, vous devriez voir le commutateur d'éclairage fonctionner comme dans la démo. C'est un effet très utile pour les lecteurs vidéo Flash lorsque vous souhaitez améliorer l'expérience de l'utilisateur sur votre site. Il est beaucoup plus facile pour l’utilisateur de se concentrer sur le fichier SWF..
J'espère que vous avez aimé ce tutoriel et merci d'avoir lu!
