Share
ActionScript 3.0 permet aux développeurs et concepteurs Flash de créer toutes sortes de choses dans Flash avec une relative facilité. Ce didacticiel vous expliquera comment créer votre propre lecteur MP3 ActionScript 3.0 avec spectre sonore, illustrations d'album, changeur de couleurs et informations sur les chansons..
Commencez par créer un nouveau document ActionScript 3.0. Définissez la taille de la scène sur 600px x 600px et 30 FPS. J'ai choisi la couleur de fond # 333333.
Choisissez Fichier> Importer> Importer dans la bibliothèque… et importez une image (j'ai modifié une partie d'un iPod de free4illustrator.com pour cet exemple. Utilisez plutôt le format .png au format .jpg pour tirer parti de la transparence de votre objet.). Après avoir importé l’image, ouvrez votre bibliothèque (Ctrl + L) et faites glisser le fichier .png sur la scène..
Sélectionnez l'image et convertissez-la en un symbole de clip (F8). Nommez-le "Ipod" ou un autre nom si vous préférez. J'ai choisi le coin en haut à gauche comme point d'inscription.
Double-cliquez sur le symbole MovieClip "Ipod" pour entrer sa chronologie. Assurez-vous que vous êtes à l'intérieur du MovieClip et non "Scene 1".
Dans la barre de temps, insérez un nouveau calque au-dessus du calque "IpodBody" et nommez-le "calque de boutons". Nous allons mettre tous nos symboles de bouton dans cette couche.
Utilisez l'outil Rectangle, # 00ff00 comme couleur de remplissage et incolore comme couleur de trait. Nous n'avons pas besoin d'un trait ici. En fait, la couleur de remplissage peut être celle que vous voulez, elle ne sera pas affichée dans le résultat final. Dessinez une forme au-dessus de l'icône précédente, semblable à l'image ci-dessous:
Convertissez la forme que vous venez de dessiner en un symbole de bouton (F8) et nommez-la "prev" comme indiqué dans l'image ci-dessous:
Donnez au symbole du bouton "prev" un nom d'instance. Je l'ai nommé "prevBtn" et modifié le style de couleur en alpha avec 0%.
Les étapes suivantes nécessitent le même symbole de bouton que le symbole du bouton "prev". Copiez le symbole du bouton "prev" et collez-le sur l'icône "Suivant" de votre bitmap. Pour dupliquer ce symbole, allez dans la barre de propriétés et cliquez sur "Permuter". Une fenêtre Swap Symbol (Symbole d'échange) apparaît. Vous devez alors cliquer sur le bouton "Dupliquer le symbole" (assurez-vous de choisir le symbole du bouton "prev".). Nommez-le "next".
Nous avons maintenant un nouveau symbole semblable au symbole du bouton "prev", mais nommé "next". Attribuez à ce symbole le nom d’instance "nextBtn". Le style de couleur reste alpha 0%.
Répétez les étapes 9 à 10 en dupliquant le symbole "prev" pour faire apparaître les symboles des boutons "play", "pause" et "stop". Attribuer des noms d'instance de "playBtn", "pauseBtn" et "stopBtn" respectivement.
Insérez un nouveau calque au-dessus de "Couche de boutons" et nommez-le "Texte".
Dessinez une zone de texte similaire à l'image ci-dessous dans le calque "Texte". Définissez "Texte dynamique" comme type de texte, attribuez le nom de l'instance "titleTxt", la police Arial, Taille de la police définie sur 12px et Gras, couleur blanche (#ffffff) et alignée au centre..
Créez une autre zone de texte juste en dessous de la zone de texte "titleTxt". Définissez cette nouvelle zone de texte en tant que texte dynamique, attribuez-lui un nom d'instance "artistTxt", avec la police Arial, la taille de la police définie sur 10px, la couleur blanche (#ffffff) et, à nouveau, alignée au centre.
Insérez un nouveau calque au-dessus du calque "Texte" et nommez-le "Changeur de couleurs"..
Utilisez l'outil Rectangle et définissez # ff0000 comme couleur de remplissage. Dessinez un petit carré de 14 pixels x 14 pixels dans le coin supérieur droit de l'écran de l'ipod et convertissez-le en un symbole de bouton (F8) portant le nom "rouge". Donnez-lui un nom d'instance de "redBtn".
Répétez l'étape 16 et faites deux autres carrés. Remplissez un carré avec # ffff00, nommez-le "jaune" et attribuez un nom d'instance à "yellowBtn". Remplissez l'autre carré avec # 66ccff, nommez-le "bleu" avec un nom d'instance de "blueBtn". Vous pouvez définir cette couleur sur n'importe quelle couleur, cela permettra à l'utilisateur de changer la couleur du spectre sonore.
Insérez un nouveau calque au-dessus du calque "Color Changer" et nommez-le "Calque ActionScript"..
À partir de ce moment, nous allons jouer avec ActionScript 3.0. Sur la première image clé de "Couche Actionscript", appuyez sur F9. Une fenêtre d'action apparaîtra. Nous allons entrer notre script dans cette fenêtre plus tard.
Tout d’abord, nous devons dire à Flash ce que contient le lecteur ipod et ses propriétés. Nous avons besoin de plusieurs variables. Lorsque le Flash est complètement chargé, nous avons besoin de lui pour commencer à fonctionner. La fonction "Loaded" démarrera immédiatement. Le chargeur chargera un fichier XML, dont le chemin est indiqué dans "URLRequest" du "chargeur". Nous créerons le fichier "musiclist.xml" pour ce lecteur iPod ultérieurement.
Accentsconagua
var musicReq: URLRequest; var thumbReq: URLRequest; var music: Sound = new Sound (); var sndC: SoundChannel; var currentSnd: Sound = musique; position var: nombre; var currentIndex: Number = 0; var songPaused: Boolean; var songStopped: Boolean; var lineClr: uint; var changeClr: Boolean; var xml: XML; var songList: XMLList; var loader: URLLoader = new URLLoader (); loader.addEventListener (Event.COMPLETE, Loaded); loader.load (new URLRequest ("musiclist.xml")); Plus tard, nous créerons une pochette d'album qui sera affichée sur l'écran du lecteur iPod. Le script suivant indique les coordonnées de la pochette de l’album, qui sera conservée dans un symbole de clip.
var thumbHd: MovieClip = new MovieClip (); thumbHd.x = 50; thumbHd.y = 70; addChild (thumbHd);
Définissons maintenant la fonction "Loaded". Nous voulons que le fichier passe au XML et récupère l'URL du morceau à lire dans le lecteur. Lorsque la chanson est chargée, la lecture s’effectue immédiatement et la pochette de l’album de la chanson est chargée simultanément. Lorsque la chanson a fini de jouer, la lecture de la chanson suivante commence.
function Loaded (e: Event): void xml = new XML (e.target.data); songList = xml.song; musicReq = new URLRequest (songList [0] .url); thumbReq = new URLRequest (songList [0] .thumb); music.load (musicReq); sndC = music.play (); titleTxt.text = songList [0] .title; artistTxt.text = songList [0] .artist; loadThumb (); sndC.addEventListener (Event.SOUND_COMPLETE, nextSong);
Nous allons maintenant définir la fonction "loadThumb". Lorsque le pouce est chargé, il indiquera à Flash de démarrer la fonction "thumbLoaded". Cette fonction ajoutera un clip contenant la pochette de l'album.
function loadThumb (): void var thumbLoader: Loader = new Loader (); thumbReq = new URLRequest (songList [currentIndex] .thumb); thumbLoader.load (thumbReq); thumbLoader.contentLoaderInfo.addEventListener (Event.COMPLETE, thumbLoaded); function thumbLoaded (e: Event): void var thumb: Bitmap = (Bitmap) (e.target.content); titulaire de la variable: MovieClip = thumbHd; titulaire.addChild (pouce);
Ici, j'ai indiqué que les boutons que nous avons créés ont leurs fonctions respectives. Pour permettre aux utilisateurs de cliquer sur le bouton et d'exécuter la fonction, nous utilisons "MouseEvent.CLICK". Toutes les fonctions des boutons respectifs seront mentionnées dans les prochaines étapes..
prevBtn.addEventListener (MouseEvent.CLICK, prevSong); nextBtn.addEventListener (MouseEvent.CLICK, nextSong); playBtn.addEventListener (MouseEvent.CLICK, playSong); pauseBtn.addEventListener (MouseEvent.CLICK, pauseSong); stopBtn.addEventListener (MouseEvent.CLICK, stopSong);
Fonction "prevBtn" (bouton Précédent), définissez "prevSong":
function prevSong (e: Event): void if (currentIndex> 0) currentIndex--; else currentIndex = songList.length () - 1; var prevReq: URLRequest = new URLRequest (songList [currentIndex] .url); var prevPlay: Sound = new Sound (prevReq); sndC.stop (); titleTxt.text = songList [currentIndex] .title; artistTxt.text = songList [currentIndex] .artist; sndC = prevPlay.play (); currentSnd = prevPlay; songPaused = false; loadThumb (); sndC.addEventListener (Event.SOUND_COMPLETE, nextSong);
Fonction "nextBtn" (bouton Suivant), définissez "nextSong":
function nextSong (e: Event): void if (currentIndex < (songList.length() - 1)) currentIndex++; else currentIndex = 0; var nextReq:URLRequest = new URLRequest(songList[currentIndex].url); var nextPlay:Sound = new Sound(nextReq); sndC.stop(); titleTxt.text = songList[currentIndex].title; artistTxt.text = songList[currentIndex].artist; sndC = nextPlay.play(); currentSnd = nextPlay; songPaused = false; loadThumb(); sndC.addEventListener(Event.SOUND_COMPLETE, nextSong);
Fonction "playBtn" (bouton Play), définissez "playSong":
function playSong (e: Event): void if (songPaused) sndC = currentSnd.play (position); songPaused = false; else if (songStopped) sndC = currentSnd.play (position); songStopped = false; else if (! sndC) sndC = currentSnd.play (position);
Fonction "pauseBtn" (bouton Pause), définissez "pauseSong":
function pauseSong (e: Event): void if (sndC) position = sndC.position; sndC.stop (); songPaused = true;
Fonction "stopBtn" (bouton Stop), définissez "stopSong":
function stopSong (e: Event): void sndC.stop (); position = 0; songStopped = true;
Nous avons maintenant construit les contrôles du joueur.
Les boutons créés aux étapes 15 à 17 ne sont pas inutiles. Nous devons maintenant dire à Flash quel est leur rôle dans le lecteur:
redBtn.addEventListener (MouseEvent.CLICK, changeRed); yellowBtn.addEventListener (MouseEvent.CLICK, changeYellow); blueBtn.addEventListener (MouseEvent.CLICK, changeBlue);
Chaque bouton de couleur a sa fonction respective. "changeRed" définira la ligne du spectre sur "0xFF0000" (rouge). "changeYellow" le mettra sur "0xFFFF00" (jaune) et "changeBlue" définira "0x66CCFF" (cyan). Nous voulons également que Flash sache que lorsque nous cliquons sur la couleur rouge, elle héritera d'une opacité de 100%, tandis que les autres obtiendront une opacité de 50%.
Remarque: dans ActionScript 3.0, 100% = 1, 10% = 0.1, etc..
Tous les boutons de couleur auront cette fonction, nous devons donc indiquer l'opacité du bouton dans chaque fonction.
fonction changeRed (e: Event): void lineClr = 0xFF0000; changeClr = true; redBtn.alpha = 1; yellowBtn.alpha = 0,5; blueBtn.alpha = 0,5; fonction changeYellow (e: Event): void lineClr = 0xFFFF00; changeClr = true; redBtn.alpha = 0,5; yellowBtn.alpha = 1; blueBtn.alpha = 0,5; function changeBlue (e: Event): void lineClr = 0x66CCFF; changeClr = true; redBtn.alpha = 0,5; yellowBtn.alpha = 0,5; blueBtn.alpha = 1;
Définissons maintenant la couleur par défaut de la ligne. Je choisis le rouge par défaut, vous pouvez utiliser la couleur de votre choix.
if (! changeClr) lineClr = 0xFF0000; redBtn.alpha = 1; yellowBtn.alpha = 0,5; blueBtn.alpha = 0,5;
La dernière partie de notre Actionscript; nous voulons que Flash dessine le spectre de la chanson. "lineClr" dans "lineStyle" est une variable dans le bouton de couleur à l'étape 31. "pour (var i: uint = 30; i<280; i++)" stated the starting x coordinate of the line and the end coordinate of the line.
Dans "var num: Number = ba.readFloat () * 50 + 170;" le 50 permet à Flash de multiplier le Float dans la chanson et 170 est la coordonnée y du spectre.
var ba: ByteArray = new ByteArray (); addEventListener (Event.ENTER_FRAME, drawl); fonction drawl (e: Event): void graphics.clear (); graphics.lineStyle (1, lineClr, 0,5); graphics.moveTo (30, 150); SoundMixer.computeSpectrum (ba); pour (var i: uint = 30; i<280; i++) var num:Number = ba.readFloat()*50 + 170; graphics.lineTo(i, num);
Le titre et l'artiste seront affichés plus tard dans notre lecteur. "
La masse Ère pics / era.jpg chansons / themass.mp3 Dr.No thème - photos / drno.jpg chansons / drno.mp3
Créez une pochette d'album pour les chansons. La taille recommandée est 65px x 65px; il ira bien à l'écran.
Testez votre film (Ctrl + Entrée) pour vérifier le résultat. Vous aurez votre propre lecteur flash iPod! Vous pouvez l'utiliser comme lecteur de musique pour votre site Web. éditez la liste de musique comme vous le souhaitez. C'est à vous. Allez-y et expérimentez, si vous avez des résultats intéressants, assurez-vous de les partager avec nous..
J'espère que vous avez aimé ce tutoriel, merci d'avoir lu!
