Compter le nombre d’éléments en CSS

Copyright : Tabsinthe

Décidément, tous les jours je suis bluffée par le CSS ! Saviez-vous qu’il était possible de compter automatiquement des lignes, des blocs, des entités HTML en CSS ? Je ne parle pas de l’utilisation des balises <ol> qui permettent de compter les éléments d’une liste. Je veux parler de la fonction counter() !

On peut imaginer toutes sortes de cas dans lesquels il serait utile de compter automatiquement des éléments. A titre d’exemple, on pourrait s’en servir pour compter et numéroter les différents sous-titres d’une page, sans que cette donnée de lecture apparaisse pour le référencement. On pourrait aussi ajouter le nombre de lignes que possède un bloc de code, et ainsi empêcher que ses chiffres apparaissent lors d’un copier/coller. On pourrait aussi numéroter les images d’une seule page, en les indiquant au lecteur grâce à des annotations du style Fig.1 dans les légendes de ces images.

Utiliser la fonction counter

Afin d’utiliser cette fonction, il tout d’abord instancier l’élément que l’on souhaite compter. Dans l’exemple que je vais vous donner ci-dessous, je vais m’amuser à compter les balises h2 présentes sur une page, dans le but d’afficher un compte précis pour l’ensemble des sous-titres d’une page. Mais gardez à l’esprit que ce comportement est valable pour tout élément d’un code HTML.

body { // Je précise l'élément <body> ici, mais vous pouvez décider de compter votre nombre d'éléments dans un contexte précis
counter-reset: subtitleCounter; // Ici, on instancie le compteur que l'on souhaite utiliser
}

Il faut ensuite indiquer au langage CSS quel est l’élément que l’on souhaite incrémenter à chaque utilisation dans notre code HTML, et donc préciser le compteur que l’on souhaite utiliser pour ces actions.

h2 { // Je compte donc tous les <h2> présents dans la page
counter-increment: subtitleCounter; // Attention à bien utiliser le même nom pour le compteur
}

Après, on peut utiliser cet élément pour l’affichage du nombre d’éléments de type h2 devant chacun des sous-titres présent dans le contenu textuel de la page HTML.

h2:before { // A l'aide du sélecteur CSS before...
content: counter(subtitleCounter); // On ajoute le nombre d'élément devant le <h2>
}

Voilà tout ! Je dois bien vous avouer que cette fonctionnalité existe depuis bien longtemps puisque même Internet Explorer 8 est capable de l’implémenter ! Mais pour ma part, c’est une fonction que je découvre tout juste cette semaine, et qui me permettra de repenser l’organisation de bien des éléments dans mes pages HTML.

En dernier lieu, je vous propose, comme d’habitude, de visiter le site Can I Use pour connaître de manière précise le support des navigateurs vis-à-vis de cette fonction.

Un bouton de partage Google+ valide W3C

Copyright : Robert Scoble

Google propose aux développeurs une API complète leur permettant d’intégrer des fonctionnalités plutôt utiles sur leur site web comme l’implémentation de la carte interactive de Google Google Maps, ou encore l’utilisation des Google Adsense dans le but d’obtenir une rémunération sur son site, etc. Depuis la création du réseau social de Google, Google +, un répertoire est consacré aux intégrations liées à cet espace communautaire. Cette page se trouve à l’adresse suivante : Google Developpers. C’est dans ce cadre qu’il est possible d’introduire le bouton de partage G+ sur les pages de son site, une caractéristique qui ne manquera pas de vous rappeler le fameux Like de Facebook. Google nous laisse d’ailleurs un large choix de configuration concernant celui-ci : sa taille, les annotations à fournir ou encore la présence ou non d’un compte représentant le nombre d’utilisateurs ayant apprécié le contenu. Le code le plus simple qu’il soit concernant l’ajout du bouton est le suivant :

<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<g:plusone></g:plusone>

Comme vous pouvez vous en apercevoir, il s’agit d’une insertion très simple, qui requiert l’intervention d’un script JavaScript administré chez Google. A la balise <g:plusone></g:plusone>, on peut rajouter des attributs tels que size : à renseigner de la propriété small, medium ou tall ; ou encore href qui lui récupère l’url du lien concerné et count suivi de la valeur true ou false pour indiquer la présence ou non du nombre de partage. C’est un code repris tout bêtement par plusieurs plugins WordPress et par un ensemble de tutoriels que vous trouverez en ligne. Mais, cette méthode présente un petit inconvénient : le code fourni n’est pas valide W3C. Si l’on souhaite être plus rigoureux quant à la standardisation du code HTML, on utilisera un code similaire à celui situé en exemple ci-dessous.

<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<div class="g-plusone" data-size="standard" data-count="true" data-href="http://onechapteraday.fr"></div>

En HTML5, il est coutumier d’avoir des balises possédant des attributs data-*. Cette syntaxe est prévue pour préciser des informations importantes aux moteurs de recherche notamment, mais aussi aux aplicatifs web capables de comprendre ces données. On peut ainsi spécifier de manière précise le type de données que l’on possède à l’intérieur d’une balise quelconque, et avoir une utilisation particulière de celle-ci par le biais de JavaScript par exemple. Cet article écrit par Chris Bewick vous donnera quelques éléments supplémentaires pour mieux appréhender cet outil. En bref, cette deuxième méthode vous permettra de respecter les normes W3C.

Obtenir un flux de Twitter en français

Copyright : BashAlamri

Aujourd’hui, je vous propose une astuce simple pour vous permettre de traduire vos scripts et applications produites à l’aide de l’API de Twitter. J’ai récemment eu l’occasion de travailler sur les fonctionnalités que proposent cette interface de programmation. Je souhaitais avoir sur la page d’accueil de ce blog les 5 derniers tweets que j’ai écrit via mon compte Twitter. J’ai trouvé un certain nombre d’extensions dans le répertoire de WordPress permettant d’obtenir ce résultat tels que Twitter for WordPress ou encore Twitter WordPress Sidebar Widget, mais je me suis retrouvée avec un problème en matière de traduction. En réalité, si l’on étudie l’API proposée par Twitter, on se rend compte que de nombreuses fonctions aident l’utilisateur à récupérer de manière très simple les tweets de n’importe quel utilisateur du réseau social. En revanche, ces fonctions sont naturellement écrites en anglais et doivent être légèrement modifiées si on veut les utiliser dans une langue différente.

Une des fonctions proposées par l’API nous propose directement de récupérer nos tweets. Il s’agit de la fonction twitterCallback2 présente sur le fichier disponible à l’adresse suivante : https://twitter.com/javascripts/blogger.js. Vous pouvez la tester rapidement grâce aux URLs suivantes (count représente le nombre de tweets que l’on souhaite lire) :
JSON : https://twitter.com/statuses/user_timeline/username.json?callback=twitterCallback2&count=1
XML : https://twitter.com/statuses/user_timeline/username.xml?callback=twitterCallback2&count=1

En clair, vous obtiendrez le dernier tweet de l’utilisateur que vous avez spécifié. Et comme vous pouvez le remarquer, Twitter nous donne la possibilité de récupérer toutes les données contextuelles au tweet et ce, jusqu’à la couleur de background utilisée par l’utilisateur !

time_zone concerne le fuseau horaire auquel le tweet a été posté.
text possède le contenu textuel du tweet.
created_at correspond à la date de création du tweet.
source concerne le client Twitter qui a permis l’émission du tweet. Etc…

La fonction twitterCallback2 utilise la fonction relative_time qui possède pour nous, francophones, un défaut : l’acquisition de la date de création du tweet en anglais. Je vous propose une méthode toute simple pour pallier à ce problème. Nous allons créer un fichier que l’on va appeler recupererTweets.js et à l’intérieur de celui-ci y intégrer le code suivant.


function twitterCallback2(twitters) {
var statusHTML = [];
for (var i = 0; i < twitters.length; i++){
var username = twitters[i].user.screen_name;
var status = twitters[i].text.replace(/((https?|s?ftp|ssh)\:\/\/[^"\s\<\>]*[^.,;'">\:\s\<\>\)\]\!])/g, function(url) {
return '<a href="' + url + '">' + url + '</a>';
}).replace(/\B@([_a-z0-9]+)/ig, function(reply) {
return reply.charAt(0) + '<a href="http://twitter.com/' + reply.substring(1) + '">' + reply.substring(1) + '</a>';
});
statusHTML.push('<li><span>' + status + '</span> <a href="http://twitter.com/' + username + '/statuses/' + twitters[i].id_str + '">' + relative_time(twitters[i].created_at) + '</a></li>');
}
document.getElementById('twitter_update_list').innerHTML = statusHTML.join('');
}


function relative_time(time_value) {
var values = time_value.split(' ');
time_value = values[1] + ' ' + values[2] + ', ' + values[5] + ' ' + values[3];
var parsed_date = Date.parse(time_value);
var relative_to = (arguments.length > 1) ? arguments[1] : new Date();
var delta = parseInt((relative_to.getTime() - parsed_date) / 1000);
delta = delta + (relative_to.getTimezoneOffset() * 60);
// Informations sur la date du tweet en français
if (delta < 60) {
return 'il y a moins d\'une minute';
} else if(delta < 120) {
return 'il y a environ une minute';
} else if(delta < (60*60)) {
return 'il y a ' + (parseInt(delta / 60)).toString() + ' minutes';
} else if(delta < (120*60)) {
return 'il y a environ une heure';
} else if(delta < (24*60*60)) {
return 'il y a environ ' + (parseInt(delta / 3600)).toString() + ' heures';
} else if(delta < (48*60*60)) {
return 'il y a 1 jour';
} else {
return 'il y a ' + (parseInt(delta / 86400)).toString() + ' jours';
}
}

Vous vous apercevrez ici que les seules différences avec le fichier proposé par l’API de Twitter se situent au niveau du formatage de la date. Nous allons donc créer un nouveau document HTML avec le code suivant situé ci-dessous. Remplacez chriiistelle par le nom de l’utilisateur que vous souhaitez et transformez l’URL du fichier recupererTweets.js pour qu’elle corresponde à la vôtre. Enfin, si vous souhaitez recevoir uniquement 5 tweets par exemple, écrivez plutôt http://twitter.com/statuses/user_timeline/chriiistelle.json?callback=twitterCallback2&count=5. C’est tout pour l’astuce du jour ! N’hésitez pas à partager vos expériences ici ;)


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Obtenir le flux de Twitter en français</title>
<script type="text/javascript" src="js/recupererTweets.js"></script>
</head>

<body>
<ul id="twitter_update_list">
<li>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/chriiistelle.json?callback=twitterCallback2"></script>
</li>
</ul>
</body>
</html>

Tutoriel Flash – Lecteur MP3 (6)

Copyright : christelle.

Suite et fin de ce tutoriel Flash visant à créer un lecteur mp3 complètement opérationnel. Je vais me répéter mais encore une fois, si vous arrivez en cours de parcours, vous pouvez revenir sur les articles précédents celui-ci via les liens suivants :
1 – Présentation du lecteur
2 – Création de la playlist en tant que fichier XML
3 – Lire un morceau de la playlist créée
4 – Gestion des boutons play, pause, stop, piste suivante, piste précédente
5 – Gestion du volume

Créer un outil de progression

Aujourd’hui, nous allons donner tout d’abord à l’utilisateur la possibilité de visualiser où en est la lecture d’un morceau. Pour cela, nous allons à nouveau avoir recours aux composants fournis par Flash. Créez un nouveau calque du nom de Progression. Ouvrez la fenêtre COMPOSANTS et fait glisser l’outil SeekBar jusqu’à la scène. Donnez-lui une largeur de 100 pixels à l’aide du panel PROPRIETES et nommez l’occurrence du nom de barreProgression. Double-cliquez ensuite sur votre élément. Vous vous apercevrez en cliquant sur le calque progress que vous avez un clip du nom de progress_mc. C’est cet élément que l’on fera grandir au fur et à mesure que le son joue.

Animer l’outil de progression en AS3

Retourne donc sur votre calque Actions et ajoutez la ligne suivante à la fonction jouerLeMorceau :


stage.addEventListener(Event.ENTER_FRAME, grandir);

Ici, on spécifie que l’on souhaite que la fonction grandir soit exécutée à chaque fois que l’animation est lue par le player de Flash, autrement dit tout le temps. Ainsi, à chaque seconde on sera en mesure de mettre à jour la barre de progression. L’idée est la suivante : trouver le pourcentage déjà écouté de la chanson en cours et l’appliquer à notre barre de progression. La solution est toute simple : il suffit de récupérer la position actuelle de la chanson, et de la diviser par la durée de la chanson. Un petit exemple pour que ce soit plus clair : si un morceau dure 60 secondes soit 60 000 millisecondes, et que l’on écoute à un instant t la 45 212ème milliseconde, on est donc à 0.75 soit environ 75% du morceau : le calcul effectué est 45 212/60 000. La position actuelle dans une chanson est donnée par channel.position et la durée de la chanson écoutée correspond à song.length. scaleX correspond à l’échelle horizontale de notre barre de progression : si cette valeur est à 0, alors progress_mc semblera inexistant. La fonction que l’on crée est donc la suivante :


function grandir(event:Event):void{
var calcul:Number = channel.position/song.length;
barreProgression.progress_mc.scaleX = calcul;
}

Interagir sur la lecture d’un morceau

Si tout se passe bien, vous pouvez d’ores-et-déjà visualiser la progression de votre chanson. C’est déjà beaucoup mieux, mais ce n’est pas suffisant ! On voudrait maintenant que l’on puisse avancer ou reculer dans cette progression afin de donner la liberté à l’utilisateur de réentendre un passage d’une chanson, ou d’en entendre la fin par exemple. On va commencer par dessiner l’élément qui nous permettra d’avancer sur la barre de progression. En théorie, chaque fois qu’un utilisateur cliquera sur cet élément sans le relâcher, il sera en mesure d’agir sur le morceau et de modifier la partie en cours de lecture. Pour obtenir cette fonctionnalité, vous devez à nouveau double-cliquer sur la barre de progression car c’est à l’intérieur de celle-ci que nous allons dessiner cet outil.

J’ai bêtement choisi de représenter l’élément via un petit triangle blanc à l’aide de l’outil POLYGONE que vous trouverez dans la boîte à outils au même endroit que l’outil Rectangle (il faut maintenir le clic enfoncé pour avoir d’autres chois) et le panel de PROPRIETES qui vous permettra de préciser dans les OPTIONS (Paramètres de l’outil) que vous souhaitez dessiner un polygone possédant 3 côtés. J’ai donc créé un nouveau calque à l’intérieur de l’élément SeekBar que j’ai appelé speaker et c’est sur celui-ci que j’ai dessiné mon triangle. Placez-le en dessous de la barre de progression et alignez-le sur la gauchz. Transformez cette forme en symbole à l’aide la touche F8 et définissez-le en tant que clip. Vous nommerez ensuite l’occurrence figurant sur la scène du nom speaker.

Ce que l’on souhaite dans un premier temps, c’est permettre le déplacement de l’élément speaker sur une zone de largeur de 98 pixels. Pour cela, on a recours à la fonction startDrag() et l’on va donc créer une nouvelle zone rectangulaire sur laquelle se déplacera notre élément. Pendant le moment où l’utilisateur sera en train de cliquer pour modifier la lecture de son fichier, on va arrêter la mise à jour automatique de la barre de progression vu que l’on souhaite que l’on devra changer cette valeur.


//Position du speaker
var posSX:Number = barreProgression.speaker.x;
var posSY:Number = barreProgression.speaker.y;
var largS:Number = 98;
var hautS:Number = 0;
var zoneS:Rectangle = new Rectangle(posSX, posSY, largS, hautS);
//Gestion du speaker
barreProgression.speaker.addEventListener(MouseEvent.MOUSE_DOWN, moveSpeaker);
function moveSpeaker(event:Event):void{
barreProgression.speaker.startDrag(false,zoneS);
//Enlever la mise à jour automatique de la barre de progression
stage.removeEventListener(Event.ENTER_FRAME, grandir);
}

Puis l’on veut que lorsque l’utilisateur relâche le speaker, il puisse entendre sa chanson à la position qu’il a indiquée. On ajoute donc un écouteur d’évènement au speaker.


barreProgression.speaker.addEventListener(MouseEvent.MOUSE_UP, modifierProgression);

Dans la fonction modifierProgression, on doit trouver la position en millisecondes à partir de la position en X du speaker. Rien de plus simple, on va procéder par équivalence. Si comme je l’expliquais précédemment, le pourcentage du son déjà écouté équivaut à la position en cours de la chanson divisée par la durée de la chanson que l’on multiplie par 100, alors la position en cours dans une chanson équivaut à la longueur de cette chanson que l’on multiplie par le pourcentage du son déjà écouté qui lui-même équivaut à la position en X du speaker divisé par 100. Bon dit comme ça, ça a l’air compliqué, mais en fait, c’est juste de la logique ! On obtient donc la fonction suivante.


function modifierProgression(event:Event):void {
//On arrête le glissement de l'élément
barreProgression.speaker.stopDrag();
//On détermine la nouvelle position à laquelle le morceau doit être
var position:Number = (song.length * Math.floor(barreProgression.speaker.x))/100;
//On stoppe la lecture en cours
channel.stop();
//Puis, on reprend la lecture à la position calculée
channel = song.play(position);
channel.addEventListener(Event.SOUND_COMPLETE,terminer);
//On réapplique le volume à l'endroit spécifié par l'utilisateur
st = new SoundTransform(vol);
channel.soundTransform = st;
//On permet à la barre de progression de se remettre à jour automatiquement
stage.addEventListener(Event.ENTER_FRAME, grandir);
}

Il nous reste plus qu’à modifier la fonction grandir afin que le speaker avance en même temps que la barre de progression. Il suffit de rajouter la ligne suivante dans la fonction :


barreProgression.speaker.x = calcul * 100;

On en est enfin venu à bout ! Le lecteur MP3 est entièrement fonctionnel. Si vous avez des questions à ce sujet, n’hésitez pas, j’essaierai de vous aider au mieux.

Tutoriel Flash – Lecteur MP3 (5)

Copyright : christelle.

Si vous arrivez en cours de tutoriel, sachez que vous pouvez toujours retourner sur les pages précédentes via les liens suivants :

1 – Présentation du lecteur
2 – Création de la playlist en tant que fichier XML
3 – Lire un morceau de la playlist créée
4 – Gestion des boutons play, pause, stop, piste suivante, piste précédente

Créer un bouton de gestion de volume

Nous allons tout d’abord créer le bouton qui nous permettra d’agir sur le volume des chansons jouées par le lecteur. Pour cela, créez un nouveau calque que vous renommerez Volume et dessinez sur celui un petit rectangle blanc de 4 pixels de largeur et 12 de hauteur (n’oubliez pas que vous pouvez utiliser le panel des PROPRIETES pour fixer des valeurs précises à vos objets). Puis, sélectionnez entièrement ce rectangle et appuyez sur la touche F8 de votre clavier pour ouvrir la fenêtre de transformation en SYMBOLE. Dans cette fenêtre, précisez que l’on souhaite que notre rectangle soit un clip. Vous pouvez lui ajouter un nom, celui-ci n’aura aucune importance. Une fois votre symbole créé, il faut que vous nommiez l’occurrence de votre clip (celle présente sur la scène) du nom de btVolume. Puis, double-cliquez sur votre nouveau symbole. Il va falloir transformer le rectangle de votre clip en clip. Appuyez donc à nouveau sur la touche F8, et choisissez à nouveau une transformation en clip. L’occurrence aura le nom de barre.

Une fois que vous avez réalisé ces étapes, dessinez un trait de 23 pixels de largeur à l’aide de l’outil trait. Ce trait doit être perpendiculaire au rectangle : le rectangle est en fait la molette qui permettra à l’utilisateur du lecteur de modifier le volume, et le trait lui permettra simplement de visualiser la zone sur laquelle cette molette peut être déplacée.

Gestion du volume

Pour pouvoir agir sur le volume de la chanson jouée, nous allons créer une nouvelle variable dans notre code. La classe SoundTransform est celle qui régit le son en ActionScript. Il faut savoir que la valeur appliquée au volume est comprise entre 0 et 1, 1 correspondant à la valeur maximale pouvant être donnée.


//Le volume est exprimé entre 0 et 1 en AS3
var vol:Number = 1;
//Permet de régler le son
var st:SoundTransform = new SoundTransform(vol);

La classe SoundTransform s’applique directement à notre canal de sortie (et donc à la classe SoundChannel). Ainsi, à la première lecture d’un morceau, le son jouera automatiquement à pleine puissance, la variable vol étant initialisée à 1. Il faut que vous rajoutiez les quelques lignes suivantes dans la fonction jouerLeMorceau pour que le volume soit appliqué à chaque lecture.


//Application du volume sonore
st = new SoundTransform(vol);
channel.soundTransform = st;

Ensuite, l’on souhaite que le déplacement effectué par le biais de la molette soit celui qui permette d’agir sur le volume sonore. En ActionScript, pour pouvoir faire glisser un élément de la scène, il faut commencer par définir la zone sur laquelle on souhaite le déplacer. En ce qui concerne notre barre de volume, on va donc créer une zone de 20 pixels de largeur et de 0 de hauteur (l’élément doit uniquement être "déplaçable" sur l’axe horizontal). On utilisera la classe Rectangle qui nous permettra, comme son nom l’indique de créer un rectangle en tant que zone. NB : la classe Rectangle se définit en x, y, width et height.


//Position du bouton VOLUME
var posX: Number = btVolume.barre.x;
var posY: Number = btVolume.barre.y;
var larg: Number = 20;
var haut: Number = 0;
var zone: Rectangle = new Rectangle(posX, posY, larg, haut);

Puis, on précisera que l’on souhaite déplacer notre bouton de telle sorte qu’il soit à 100% : ainsi, au démarrage la molette indiquera à l’utilisateur que le volume est au maximum. Pour modifier la position en x de notre molette de déplacement, on utilisera la syntaxe suivante : btVolume.barre.x car le clip que l’on souhaite modifier, barre, appartient au clip btVolume.


btVolume.barre.x = posX + larg; //Bouton à 100%

Il nous reste à fournir à l’utilisateur la possibilité de déplacer la molette. En AS3, c’est la fonction startDrag() qui permet d’effectuer le mouvement glisser. Ici, elle nous permettra de déplacer la barre et de modifier le volume à l’aide de la fonction changerVolume. Ainsi, on va modifier de manière proportionnelle à notre déplacement sur la barre le volume du morceau, en sachant que la zone de 20 pixels doit représenter les 100% de volume. Je vous fournis ici directement mon petit calcul, ce n’est pas important si vous ne le retenez pas.


btVolume.barre.addEventListener(MouseEvent.MOUSE_DOWN, glisser);

function glisser(event:MouseEvent):void{
btVolume.barre.startDrag(false,zone);
//Fonction pour modifier le volume du morceau
btVolume.barre.addEventListener(Event.ENTER_FRAME, changerVolume);
}

function changerVolume(event:Event):void{
vol = (0 - (posX - btVolume.barre.x)) / larg;
var st:SoundTransform = new SoundTransform(vol);
channel.soundTransform = st;
}

Enfin, cela peut vous paraître bête, mais en ActionScript, si l’on ne précise pas que l’élément que l’on fait glisser sera relâché lorsque l’on stoppe de cliquer, cet élément reste collé à la souris. La fonction qui suit a donc simplement été créée pour pallier à ce souci. Elle utilise stopDrag().


btVolume.barre.addEventListener(MouseEvent.MOUSE_UP, relacher);

function relacher(event:MouseEvent):void{
btVolume.barre.stopDrag();
btVolume.barre.removeEventListener(Event.ENTER_FRAME, changerVolume);
}

Demain, nous verrons la dernière partie de ce tutoriel à savoir la gestion de la progression du temps dans une chanson : en clair, l’utilisateur sera en mesure de revenir au début ou au milieu d’une chanson si ça lui chante. :)

Tutoriel Flash – Lecteur MP3 (4)

Copyright : christelle.

Aujourd’hui, nous allons ajouter de nouvelles fonctionnalités au lecteur. Nous allons créer les boutons play, pause, précédent, suivant et stop sur la barre de lecture du lecteur. Je vais d’ailleurs vous apprendre une méthode simple pour modifier les boutons disponibles dans la Bibliothèque commune des Boutons.

Créer les boutons nécessaires au lecteur

Dans la liste d’éléments proposée par la Bibliothèque commune des Boutons, vous avez un dossier nommé playback flat et à l’intérieur de celui-ci, il existe un certain nombre de boutons tels que flat blue play par exemple (Fig.1). On va donc sélectionner tout ceux dont on aura besoin ici, à savoir : flat blue play, flat blue pause, flat blue stop, flat blue forward et flat blue back. Il vous suffit de faire glisser ces éléments vers la scène. Puis, à l’aide d’un double-clic, sur chacun d’entre eux, vous pourrez modifier la composition du bouton.

On va commencer par supprimer (à l’aide la poubelle) les calques center circle outline, center circle et outer circle. Il ne doit rester que l’étiquette avec le symbole. Comme notre barre de lecture de notre lecteur est noire, on va changer la couleur de la forme en blanc (vous êtes libres de choisir une autre couleur si cela vous tente !). Pour cela, faites CTRL+A et utilisez l’outil Couleur de Remplissage (Fig.2). Reproduisez cette étape pour tous les boutons.

Puis positionnez-les sur la barre du lecteur. Ensuite, renommez chacun des boutons de la manière suivante dans le panel de Propriétés (Fig.3) :
– Bouton Play : btPlay
– Bouton Pause : btPause
– Bouton Précédent : btPrecedent
– Bouton Suivant : btSuivant
– Bouton Stop : btStop

On va rajouter deux champs de texte dynamique pour pouvoir afficher la durée du son ainsi que sa position actuelle au moment de la lecture. NB : Un champ de texte dynamique est accessible par le biais de l’ActionScript contrairement au champ de texte statique. Prenez donc l’outil Texte (symbolisé par un T dans la barre des outils) et tracez deux zones de texte. A l’aide du panel des Propriétés, vous allez nommer ces deux zones des noms positionSon et dureeSon. Et surtout ! Il ne faut pas oublier de rendre ces deux textes dynamiques. Toujours dans le panel des Propriétés, vous avez un champ situé en dessous de l’endroit où l’on précise le nom de l’occurrence avec une zone déroulante qui possède la valeur Texte classique. Juste en-dessous, vous trouverez une zone déroulante affichant Texte statique. C’est ici que vous devez sélectionner la propriété Texte dynamique. Votre environnement de développement est enfin prêt !

Gestion des nouvelles fonctionnalités

Avant toute chose, nous allons un peu modifier le code que je vous ai donné hier. Comme nous aurons besoin à plusieurs reprises des mêmes instructions pour pouvoir déclencher la lecture d’une chanson, nous allons simplement les impacter dans une nouvelle fonction que j’ai appelée : jouerLeMorceau. Ainsi, chansonCliquee fera appel à cette fonction.


function chansonCliquee(event:ListEvent):void {
//Récupération de l'élément cliqué
var item: Object = event.item;
//Appel de la fonction avec l'URL du fichier à ouvrir
jouerLeMorceau(item.data);
}

Et la fonction jouerLeMorceau sera définie de la manière suivante :


function jouerLeMorceau(url:String):void{
//On désactive le clic du bouton Play vu qu'un son est déjà en cours de lecture
btPlay.removeEventListener(MouseEvent.CLICK, jouer);
//Si un morceau est en train de jouer, on le stoppe
try{
song.close();
} catch(error){}
try{
channel.stop();
} catch(error){}
//Lecture de la "nouvelle" chanson
song = new Sound();
song.load(new URLRequest(url));
channel = song.play();
//Afficher la durée
song.addEventListener(Event.COMPLETE, afficherDuree);
stage.addEventListener(Event.ENTER_FRAME,afficherTemps);
//A la fin d'une chanson, jouer le morceau suivant !
channel.addEventListener(Event.SOUND_COMPLETE,terminer);
}

Comme vous l’avez probablement remarqué, j’ai tout de même rajouté quelques lignes à cette fonction. Elles concernent d’une part l’affichage des durées du morceau sélectionné, et d’autre part la possibilité d’écouter la chanson suivante si le morceau en cours se termine. Ces trois petites lignes font appel à trois nouvelles fonctions afficherDuree, afficherTemps et terminer.

Dans un premier temps, je vais vous demander d’admettre la fonction que je vous donne ci-dessous. En clair, elle sert à formater convenablement un nombre exprimé en millisecondes en minutes et en secondes. Je vais tenter de vous l’expliquer mais si vous ne la comprenez pas à 100%, ce n’est pas grave car, 1° – elle ne rentre pas notre étude et 2° – vous pourrez toujours retrouver une fonction assez similaire à l’aide de Google. Pour trouver le nombre de minutes très rapidement, il vous suffit de prendre un entier et de le diviser par 60 secondes. Étant donné que nous utilisons des entiers exprimés en millisecondes, ici on utilisera la valeur de 60 000. La classe Math permet, comme son nom l’indique d’effectuer un certain nombre d’opérations mathématiques. Sa méthode floor() retourne la valeur entière d’un nombre nombre. Par exemple, si l’on fait Math.floor(4.98), la fonction retournera 4. Ensuite, la fonction toString() permet la conversion de données numériques en chaîne de caractères. Elle nous sera nécessaire afin d’affecter une nouvelle valeur à nos champs de texte dynamiques. Enfin, nous allons récupérer le nombre de secondes restantes une fois les minutes enlevées. Il existe en AS3 (comme en PHP), un opérateur qui permet directement d’avoir le reste d’une division : il s’agit de %, que l’on appelle modulo.


//Notre fonction renvoie une donnée de type String
function formatTime(time:Number):String{
//On récupère l'entier passé en paramètre que l'on divise par 60 000
var nbMin:Number = Math.floor(time/60000);
//Puis, on convertit cette donnée en chaîne de caractères
var min:String = nbMin.toString();
//Récupération du nombre de secondes restantes une fois les minutes enlevées
var nbSecRestantes:Number = Math.floor(time/1000)%60;
var sec:String = "";
//Si le nombre de secondes restantes est inférieur à 10, on rajoute un 0 devant
if(nbSecRestantes < 10) sec = "0" + nbSecRestantes.toString();
else sec = nbSecRestantes.toString();
//Enfin, on retourne le nombre de minutes correctement formaté
return(min + ":" + sec);
}

Ainsi, les fonctions afficherDuree et afficherTemps vont utiliser la fonction formatTime. Pour obtenir la durée d’un élément de type Sound, il suffit de récupérer la propriété length de cet élément. Cette propriété s’exprime en millisecondes.


function afficherDuree(event:Event):void{
dureeSon.text = formatTime(song.length);
}

Pour savoir la durée écoulée à un instant t d’un morceau, il faut récupérer la propriété position de l’élément de type SoundChannel. Cette propriété s’exprime en millisecondes. Grâce à l’évènement choisi ENTER_FRAME, le champ se met automatiquement à jour.


function afficherTemps(event:Event):void {
positionSon.text = formatTime(channel.position) + " /";
}

Enfin, la fonction terminer va nous permettre d’avoir un lecteur autonome, capable de jouer le morceau suivant dans la playlist chargée. En clair, quand un morceau se termine on appelle cette fonction. Si l’élément qui vient de se finir n’est pas le dernier de notre liste, alors on jouera le suivant, sinon on jouera le tout premier élément de notre playlist.


function terminer(event:Event):void{
if(playList.length > playList.selectedIndex + 1){
//On sélectionne l'élément suivant
playList.selectedIndex++;
playList.scrollToSelected();
//On appelle notre "nouvelle" fonction pour jouer le morceau
jouerLeMorceau(playList.selectedItem.data);
} else {
playList.selectedIndex = 0;
jouerLeMorceau(playList.selectedItem.data);
}
}

On peut maintenant passer au code de nos différents boutons : play, pause, stop, précédent et suivant. On commence donc par leur assigner un clic comme évènement déclencheur. Les lignes ci-dessous appellent les fonctions jouer, fairePause, arreter, precedent et suivant.


//Fonctions
btPlay.addEventListener(MouseEvent.CLICK, jouer);
btPause.addEventListener(MouseEvent.CLICK, fairePause);
btStop.addEventListener(MouseEvent.CLICK, arreter);
btPrecedent.addEventListener(MouseEvent.CLICK, precedent);
btSuivant.addEventListener(MouseEvent.CLICK, suivant);

La méthode play() d’un élément de type Sound peut prendre en compte plusieurs arguments. On peut ainsi décider à partir de quelle seconde un fichier son sera lu. On va donc créer une variable que j’ai appelé tout bêtement decalage afin de préciser à partir de quelle seconde on lira nos fichiers. Cela nous sera utile pour la gestion du bouton pause. La variable decalage est donc initialisée à 0.


var decalage:Number = 0;

Dans la fonction fairePause, on veut donc arrêter la lecture du morceau en cours et récupérer la position à laquelle on s’est arrêté dans la chanson. Ainsi, quand l’utilisateur cliquera sur le bouton play pour le remettre en marche, on réutilisera cette fameuse variable.


function fairePause(event:MouseEvent):void{
//Le clic sur le bouton Play est réactivé
btPlay.addEventListener(MouseEvent.CLICK, jouer);
//Si (et seulement si) une chanson est en cours de lecture
if(playList.selectedIndex != -1){
//On sauvegarde où se trouve la tête de lecture
decalage = channel.position;
//Et on stoppe la lecture du morceau
channel.stop();
}
}

La fonction jouer peut intervenir à deux moments : quand on ouvre le lecteur et donc aucun morceau n’est en cours de lecture, ou quand le lecteur est actuellement en pause. Si l’utilisateur vient d’ouvrir le lecteur alors on souhaite que le morceau qu’il entende soit le premier de notre playlist. Dans le cas contraire, il s’agit simplement de reprendre la lecture du morceau à la position à laquelle on s’était arrêté (notre fameuse variable decalage).


function jouer(event:MouseEvent):void{
//Si un morceau est en cours de lecture
if(playList.selectedIndex != -1){
//On charge notre morceau à la position à laquelle on s'était arrêté
channel = song.play(decalage,1);
} else {
//Sinon, on déclenche la lecture de la première chanson de notre playlist
jouerLeMorceau("music/" + chansons[0]);
playList.selectedIndex = 0;
}
}

La fonction arreter a pour but de stopper la lecture d’un morceau. Nous allons par la même occasion, arrêter la fonction afficherTemps et effacer les champs de texte dynamiques.


function arreter(event:MouseEvent):void{
try{
channel.stop();
} catch(error){}
//La variable decalage est réinitialisée
decalage = 0;
//La playlist ne doit plus avoir aucun élément surligné
playList.selectedIndex = -1;
//Et on efface les champs texte de durée et de durée écoulée
stage.removeEventListener(Event.ENTER_FRAME,afficherTemps);
positionSon.text = "";
dureeSon.text = "";
//Le clic sur le bouton Play est réactivé
btPlay.addEventListener(MouseEvent.CLICK, jouer);
}

Les fonctions suivant et precedent permettent de déclencher la lecture des chansons suivante et précédente. Les deux seules particularités à noter sont que si le lecteur est en fin de playlist et que l’utilisateur souhaite déclencher la lecture du morceau suivant, le lecteur ouvrira le premier morceau de la playlist ; et que si le lecteur est sur le premier élément de la playlist et que l’utilisateur souhaite écouter le morceau précédent, le lecteur ouvrira le dernier morceau de la playlist.


function suivant(event:MouseEvent):void{
if(playList.length > playList.selectedIndex + 1){
playList.selectedIndex++;
playList.scrollToSelected();
} else {
playList.selectedIndex = 0;
playList.scrollToSelected();
}
jouerLeMorceau(playList.selectedItem.data);
}


function precedent(event:MouseEvent):void{
if(playList.selectedIndex - 1 >= 0){
playList.selectedIndex--;
playList.scrollToSelected();
} else {
playList.selectedIndex = playList.length - 1;
playList.scrollToSelected();
}
jouerLeMorceau(playList.selectedItem.data);
}

Voilà tout pour aujourd’hui ! Si tout s’est bien déroulé jusqu’ici, vous avez maintenant un lecteur totalement fonctionnel. On pourrait décider de s’arrêter ici, mais je vous proposerai demain de passer à la gestion du volume.

Tutoriel Flash – Lecteur MP3 (3)

Copyright : christelle.

Aujourd’hui, nous allons donc organiser l’espace graphique du lecteur et gérer la lecture d’un morceau de la playlist. Si toutefois vous arrivez en cours de tutoriel, vous pouvez toujours jeter un œil à l’article présentant Flash et le lecteur que nous réalisons ou à l’article décrivant la prise en main du logiciel et la création du fichier XML dont on aura besoin ici.

Préparation de l’interface graphique

Dans un premier temps, on va simplement créer la barre dans laquelle les boutons du lecteur seront disponibles ainsi que la liste dans laquelle s’afficheront les différents morceaux. Positionnez-vous sur le Lecteur pour la réalisation des étapes suivantes. Nous allons importer cette image dans la bibliothèque de Flash. Pour cela, il suffit que de se rendre dans le menu Fichier et de sélectionner Importer puis Importer dans la Bibliothèque. Ainsi, vous retrouverez cette image dans votre bibliothèque d’éléments. Pour l’utiliser, il suffit de cliquer dessus et de la faire glisser sur la scène. Et là, vous disposez d’un bouton "magique" pour centrer l’image sur la scène ! En pressant Ctrl+K, une fenêtre s’ouvrira (NB : vous pouvez aussi te rendre dans le menu Fenêtre et sélectionner Aligner pour la voir apparaître). Cliquez sur votre image, puis sur le bouton indiqué dans l’image ci-dessus (Fig.1), et votre image sera automatiquement centrée sur ta scène !

Puis, pour afficher notre playlist, nous allons utiliser un composant fourni par Flash : la liste. Ce composant représente une liste déroulante que l’on peut directement mettre à jour en AS3. Le principal avantage en utilisant ce type d’élément et de pouvoir disposer de méthodes entièrement gérées par Flash. Ainsi, on sera rapidement en mesure d’ajouter (ou de supprimer) des éléments à cette liste. Pour la trouver : rien de plus simple ! Il suffit de sélectionner ta fenêtre Composants (qui est probablement déjà ouverte, mais que vous trouverez également dans le cas contraire dans le menu Fenêtre) et de faire glisser sur votre scène l’élément List (Fig.2). J’ai préféré, en ce qui me concerne, coller la playlist à la barre de contrôle du lecteur. Ce n’est bien évidemment obligatoire, mais sachez que Flash vous fournit des indices quant à la disposition d’un élément par rapport à un autre sur la scène. J’entends par là qu’il est rapidement possible de savoir si votre élément est parallèle à un autre car le logiciel l’indique par le biais de traits en pointillé.

Pour pouvoir utiliser cette liste, il ne vous manque plus qu’à nommer l’occurrence. Mais, qu’est-ce-qu’une occurrence ? Bon, comme vous avez pu vous en apercevoir, Flash met à notre disposition un certain nombre d’éléments que l’on peut utiliser de manière infinie. On peut également créer par soi-même ses propres clips, symboles ou graphiques. Ce qu’il faut retenir donc, c’est que chaque élément posé sur ta scène est en fait, une instance (c’est-à-dire un dupliqué) de celui qui figure dans la bibliothèque. En clair, il s’agit d’une occurrence. Ainsi, si l’on souhaite programme un élément de la scène, il faut obligatoirement lui associer un nom unique, qui lui sera réutilisé en AS3. Pour nommer un élément situé sur la scène, il faut cliquer sur sur celui-ci et ouvrir le panel des Propriétés. Ici, vous allez donc cliquer sur la liste figurant sur la scène. Vous trouverez un champ vide que vous remplirez du mot playList (Fig.3). Profitez-en pour lui attribuer une largeur de 300 pixels et une hauteur de 100 pixels à notre liste déroulante (L et H). On peut désormais commencer à coder.

Lire un morceau de la playlist

Afin de charger la playlist dans le lecteur mp3, nous allons créer un tableau qui se chargera de récupérer l’ensemble des chansons fournies dans le fichier XML. Puis, nous afficherons ce tableau dans la liste déroulante que l’on a créée. Enfin, on ajoutera une fonction qui nous permettra de lire une chanson à chaque clic de l’utilisateur sur un élément de la liste. Ça a l’air long et complexe, mais c’est en réalité très simple si vous suivez les différentes que je vous donne.

Tout d’abord, on crée le tableau qui conservera tous les noms des fichiers mp3. On utilise la méthode push() pour ajouter un élément au tableau.


//Tableau qui récupérera tous les mots présents dans le fichier "playlist.xml"
var chansons:Array = new Array();

En ce qui concerne la lecture du fichier XML, il faut savoir que Flash procède par plusieurs étapes. Nous allons utiliser les classes URLLoader et URLRequest. Elles sont nécessaires pour envoyer ou charger des données en ActionScript 3. Le fichier à ouvrir est playlist.xml, c’est donc lui qui est à spécifier pour notre nouvelle requête.


//Ouverture puis lecture du fichier XML
var xmlLoader:URLLoader = new URLLoader();
xmlLoader.load(new URLRequest("playlist.xml"));

Il est nécessaire d’ajouter un évènement pour vérifier que le fichier est entièrement chargé en Flash. En gros, SI ET SEULEMENT SI le fichier est entièrement chargé ALORS nous allons pouvoir exécuter un certain nombre d’instructions. Celles-ci figureront dans la fonction précisée : loadXML.


//Une fois le fichier complètement chargé
xmlLoader.addEventListener(Event.COMPLETE, loadXML);

Dès lors, on crée un objet XML pour récupérer l’ensemble des données chargées. On appelle ensuite la fonction creerPlaylist qui sera chargée [dans un premier temps] de lire le fichier XML ligne par ligne et de les insérer dans notre tableau chansons, créé initialement.


//Récupération des données XML chargées
function loadXML(event:Event):void{
var xmlData:XML = new XML();
xmlData = new XML(event.target.data);
//Appel de la fonction "creerPlaylist"
creerPlaylist(xmlData);
}

Dans la fonction creerPlaylist, on va tout d’abord lire chaque balise <chanson> de notre fichier XML et prendre sa valeur pour l’injecter dans une liste de type XMLList. Cette classe nous permet de récupérer chaque ligne en tant qu’objet XML.


//Récupère l'ensemble des chansons de la playlist dans une variable
var lesChansons:XMLList = donneesXML.chanson;

Puis, on va parcourir cette liste afin d’ajouter chaque ligne dans notre tableau chansons.


//Sépare chaque mot et le range dans le tableau créé initialement
for each(var nouvelleChanson:XML in lesChansons){
chansons.push(nouvelleChanson);
}

Vous pouvez, par exemple, vérifier que le tableau possède bien toutes les chansons de ton fichier à l’aide de la fonction trace().


//Vérifie si le tableau possède bien l'ensemble des chansons
trace(chansons);

On va ensuite parcourir le tableau et créer véritablement la liste qui sera affichée. Pour cela, on va d’abord utiliser une fonction for() qui prendra comme valeur de fin de répétition, la longueur de notre tableau.


for(var i:uint=0; i length; i++) {
}

A l’intérieur de notre boucle for, on crée un objet qui récupérera en tant que valeur l’URL de notre fichier et en tant que label (texte affiché), le nom du fichier sans son extension. Ici, "music/" représente le dossier dans lequel se trouve mes fichiers mp3. Si vous aviez décidé de l’appeler autrement, vous devez modifier le nom du répertoire dans votre code.


var item:Object = new Object();
//La ligne de la liste affichera le nom du fichier (sans son extension)
item.label = chansons[i].substr(0,-4);
//L'élément aura pour valeur l'URL du fichier
item.data = "music/" + chansons[i];
//On ajoute l'objet créé à la liste déroulante
//Ici, on insère le nom du composant 'List' choisi

playList.addItem(item);

Puis, on précise que chaque élément de notre liste est cliquable. Ce clic appellera la fonction chansonCliquee qui permettra à l’utilisateur d’entendre le morceau voulu.


//Au clic sur un élément de la liste, on appelle la fonction "chansonCliquee"
playList.addEventListener(ListEvent.ITEM_CLICK, chansonCliquee);

Nous allons maintenant créer deux variables pour la lecture du fichier son. Ce qu’il faut savoir, c’est qu’en ActionScript 3.0, le son est lu à partir d’un canal. En clair, il faut utiliser les classes Sound et SoundChannel pour pouvoir jouer un morceau. Nous allons donc créer des instances de ces classes-là.


//Création de l'occurrence de type Sound, et du canal dans lequel il sera joué
var song:Sound = new Sound();
var channel:SoundChannel = new SoundChannel();

Puis, à l’intérieur de la fonction chansonCliquee, nous allons récupérer l’élément cliqué ainsi que les informations qu’il contient. Nous pourrons donc savoir à quelle URL l’élément fait référence. Dès lors, nous pourrons charger le morceau à l’intérieur de l’instance de Sound que nous avons créé au préalable. Puis, nous affecterons ce morceau au canal créé afin que l’on puisse entendre le morceau.


//Définition de la fonction chansonCliquee
function chansonCliquee(event:ListEvent):void {
//Récupération de l'élément cliqué
var item:Object = event.item;
//Lecture d'une "nouvelle" chanson
song = new Sound();
song.load(new URLRequest(item.data));
channel = song.play();
}

Il nous reste plus qu’une dernière chose à faire : interrompre la lecture d’un morceau si l’utilisateur clique à nouveau sur un élément de notre playlist. Si l’on ne précise pas que l’on ne désire plus entendre un son, Flash se charge de créer un nouveau canal auditif : en clair, plusieurs morceaux peuvent jouer en simultané sans perturber le fonctionnement du logiciel. Autre particularité de l’ActionScript 3.0, vous pouvez "essayer" quelques lignes d’instructions grâce au bloc try/catch. En clair, vous tentez une opération et si celle-ci est impossible pour le player de Flash, au lieu de vous générer une erreur, il se chargera d’effectuer les instructions spécifiées dans la boucle catch.


//Si un morceau est en train de jouer, on le stoppe
try {
song.close();
} catch(error){}
try {
channel.stop();
} catch(error){}

Si tout s’est passé sans embûches, vous pouvez dorénavant déclencher la lecture d’une chanson à partir d’un clic sur un élément de votre playlist. En revanche, vous n’avez aucun contrôle quant au déroulement de cette lecture. Demain, nous ajouterons les principaux boutons du lecteur à savoir : play, pause, stop, piste précédente et piste suivante.

Tutoriel Flash – Lecteur MP3 (2)

Copyright : christelle.

Nous allons créer un nouveau fichier dans Flash Pro et l’enregistrer sous le nom "mp3player.fla". Vérifiez que vous possédez bien un onglet Scénario avec un calque nommé "Calque 1" dans votre environnement Flash. Si ce n’est pas le cas, vous trouverez celui-ci dans le menu Fenêtre ou vous pouvez utiliser la combinaison des touches Ctrl+Alt+T (Pomme+Alt+T sur Mac) pour l’ouvrir.

La fenêtre Scénario est très importante dans la réalisation d’une animation quelle qu’elle soit. Elle permet la décomposition image par image et la modification à la milliseconde près. Pour que vous soyez à l’aise avec le vocabulaire de cette interface, je vous ai préparé quelques définitions d’après l’illustration que vous avez ci-dessus.

L’interface de Flash

(1) Vous retrouvez ici l’espace réservé aux calques. Dans Flash, un calque désigne une couche de l’animation sur laquelle on travaille. Vous pouvez y dessiner des objets ou simplement y rajouter du code. Décomposer votre travail en plusieurs calques peut se révéler primordial lors de la création d’animations complexes.

(2) Il s’agit du menu relatif à la manipulation des calques. La première icône vous permet de créer un nouveau calque pour votre animation. La deuxième sert à créer un nouveau dossier de calques qui lui vous permettra de mieux hiérarchiser vos éléments. La troisième icône vous permet de supprimer un calque.

(3) Le petit rond blanc désigne une image-clé vide. Une image-clé correspond à un moment précis de votre animation. Ici, elle est encore vide vu qu’aucun objet n’y est dessiné (dans le cas contraire, le point blanc deviendrait noir s’il s’agit d’un élément dessiné, ou se présenterait sous la forme d’un "a" s’il s’agit d’un morceau de code).

(4) La tête de lecture permet de visualiser rapidement où l’on se trouve dans l’animation. Si votre animation comporte plusieurs images, en appuyant sur la touche Entrée vous pouvez lancer la lecture de votre animation. Par ailleurs, la combinaison de touches qui vous permettra de visualiser votre animation SWF est Ctrl+Entrée (ou Pomme+Entrée sur Mac).

(5) Il s’agit de l’indicateur d’image courante. On peut, par le biais de ce bouton, sélectionner une image par sa position dans l’animation. En clair, si vous entrez le nombre 15, la tête de lecture se placera en image 15.

(6) Cet élément est un indicateur de cadence. La cadence représente le nombre d’images/seconde, c’est-à-dire la vitesse de lecture de l’animation. Plus la cadence est élevée plus l’animation est fluide. En contrepartie, une cadence trop élevée sollicite bien plus l’unité centrale. Il n’est donc pas recommander d’augmenter celle-ci au-delà des 30 images/secondes. (Ici, on conservera la valeur par défaut, soit une cadence de 24 images/seconde.)

(7) Ici, on retrouve l’indicateur du temps écoulé dans l’animation. Ce temps est exprimé en secondes.

(8) Il s’agit de la boîte à outils. Celle-ci est composé de plusieurs éléments ayant chacun une fonction différente. La flèche noire vous permet de sélectionner les objets figurant sur votre scène alors que l’outil symbolisé par un T vous permettra d’écrire un texte. Vous pouvez utiliser l’outil zoom, représenté par une loupe, pour mieux visualiser votre scène. Les formes utilisées dans Flash sont vectorielles, et n’ont donc aucun souci de pixellisation. Pour la réalisation du lecteur MP3, nous n’utiliserons pas tous ces outils, mais je reviendrai sur leur utilisation au fur et à mesure de notre progression.

Les bibliothèques communes de Flash

Nous utiliserons les bibliothèques communes de ce logiciel. Vous trouverez celles-ci dans le menu Fenêtre, puis le menu Bibliothèques communes. En sélectionnant Boutons, le logiciel vous ouvrira une fenêtre dans laquelle vous aurez accès à une large librairie de boutons prédéfinis et prêts à l’usage. Mon conseil : afin d’organiser votre espace de travail, vous pouvez "accrocher" les fenêtres dont vous avez besoin à la barre de panneaux située à la droite de votre écran. Pour cela, il suffit de cliquer sans relâcher sur le haut de votre fenêtre ouverte et de la glisser sur vers la barre de panneaux.

Grâce à l’ensemble des éléments que je vous ai décrit, vous pouvez d’ores-et-déjà mieux prendre en main votre interface. On va donc créer un nouveau calque que l’on nommera "Actions" (il suffit de double-cliquer sur un calque pour le renommer). C’est ici que nous placerons le morceau de code qui nous permettra de parcourir la playlist. Pour cela, il vous faut ouvrir la fenêtre Actions qui se trouve dans le menu Fenêtre du logiciel. Si tout se passe bien, vous avez à présent, deux calques à votre disposition : Calque 1 et Actions. Renommez votre Calque 1 en Lecteur. On va donc commencer aujourd’hui à préparer le fichier XML dont nous aurons besoin pour la lecture des fichiers mp3.

Création du fichier XML

La playlist utilisée par le lecteur mp3 est définie à l’aide d’un fichier XML. Pourquoi utiliser de l’XML ? Le langage XML permet d’organiser et de stocker des données à travers un fichier texte simple et léger que l’on pourra rapidement parcourir au moyen de l’ActionScript. En outre, il sera facilement modifiable dans le cas où l’utilisateur serait un auditeur lunatique ! Nous allons, par conséquent, créer la playlist de base du lecteur. Pour cela, vous aurez besoin d’un certain nombre de fichiers mp3, mais surtout de leur emplacement sur votre disque dur. Mon conseil : créez un sous-répertoire dans votre dossier de travail. A l’intérieur de celui-ci, vous y glisserez l’ensemble des morceaux choisis pour votre liste de lecture. Ainsi, vous ne serez pas contraint de fournir l’emplacement exact (j’entends par là, dès la racine de votre disque dur) de vos fichiers. J’ai donc créé un dossier music dans mon répertoire de travail. Vous pouvez l’appeler comme bon vous semble, mais lors de l’écriture de notre futur code, ce nom aura son importance.

Structure du fichier XML :


<?xml version="1.0" encoding="utf-8"?>
<playlist>
<chanson>Emplacement_de_ton_premier_fichier_mp3</chanson>
<chanson>Emplacement_de_ton_deuxieme_fichier_mp3</chanson>
<chanson>Emplacement_de_ton_troisieme_fichier_mp3</chanson>
<chanson>Emplacement_de_ton_xxème_fichier_mp3</chanson>
</playlist>

Il est important de noter qu’il faut veiller à renseigner les balises de ce fichier de manière très précise car dans le cas contraire, la lecture des morceaux sera impossible. Aussi, si comme je vous l’avais conseillé un peu plus haut, si vous avez créé un sous-répertoire dans votre dossier, vous pouvez renseigner vos balises uniquement du nom du fichier mp3, comme dans l’exemple ci-dessous.


<chanson>Cecile – Thru Thick & Thin.mp3</chanson>

Enregistrez le fichier créé sous le nom « playlist.xml ».

Voilà tout pour aujourd’hui. Demain, nous préparerons l’interface graphique du lecteur et nous commencerons enfin à coder! Encore une fois, si vous avez des questions relatives à ces étapes, n’hésitez pas. :)

Tutoriel Flash – Lecteur MP3 (1)

Copyright : christelle.

L’objectif est simple ! Je vous propose cette semaine de créer le lecteur mp3 présenté ci-dessus en quelques étapes qui vous seront décrites ici jour après jour.

Présentation des fonctionnalités

La playlist du lecteur mp3 sera chargée à partir d’un fichier XML : l’utilisateur est donc libre de le modifier et de charger ses propres fichiers mp3 à l’intérieur du lecteur. Le premier clic sur play déclenchera automatiquement la première chanson de la playlist : l’utilisateur pourra ainsi charger automatiquement le premier élément de sa playlist à l’écoute. Le clic sur une chanson de la playlist déclenchera la lecture de celui-ci : l’utilisateur pourra alors sélectionner un morceau quelconque de sa playlist afin que celui-ci se mette à jouer. Il sera possible de mettre le morceau joué en pause ou de l’arrêter : la mise en pause ou l’arrêt d’un morceau sont deux fonctionnalités dont l’utilisateur disposera librement. Lorsque la lecture d’une chanson se terminera, la chanson suivante jouera automatiquement : le lecteur sera donc complètement autonome et pourra continuer à fonctionner sans action de l’utilisateur.

La durée d’une chanson et la durée écoulée de cette chanson seront affichées : l’utilisateur pourra ainsi rapidement savoir combien de secondes se sont écoulées pendant la lecture d’une chanson. Il sera également informé de la durée de celle-ci. Les boutons << et >> permettront respectivement de lire les sons précédents et suivants : l’utilisateur pourra par ce biais activer la lecture des sons précédents ou suivants de sa playlist.

Le volume pourra être changé à l’aide d’une petite molette : l’utilisateur pourra donc régler le volume du son en cours de lecture. La progression de la chanson sera visible : l’utilisateur pourra visualiser la durée écoulée d’une chanson d’un point de vue graphique. Le curseur de la barre de progression permettra le contrôle de l’écoulement d’une chanson en cours de lecture : l’utilisateur pourra donc agir sur la progression d’une chanson.

Pré-requis

Afin de réaliser le lecteur mp3 présenté ci-dessus, il est important de savoir prendre en main dans un premier temps le langage de programmation de Flash à savoir l’ActionScript 3.0. Ainsi, pour que vous puissiez avancer sans embûches dès demain, je préfère vous expliquer quelques manipulations dans cet article.

Tout d’abord, il faut savoir que l’AS3 a été introduit pour la première fois en 2006 avec la sortie de Flex2. Flex permet la création d’applications Flash, à la différence que le logiciel Flash offre une interface de développement beaucoup plus "visuelle", ce qui peut être un avantage quand on programme un jeu par exemple. ActionScript 3 est un langage de programmation orienté objet, comme Java, C# ou C++. Ainsi, pour déclarer par exemple une variable, on utilisera le mot clé VAR comme en JavaScript par exemple.

Le nombre de type d’objets en AS3 est infini ! Vous pouvez de ce fait créer vos propres classes et vos propres fonctions. Il faut cependant faire attention car l’AS3 est un langage sensible à la casse : playlist est différent de playList, par exemple. Dans un premier temps, les principaux types qu’il vous faut appréhender sont les suivants :
– Le type Object représente la classe Object qui est la base à toutes les classes d’ActionScript.
– Le type String représente les chaînes de caractères.
– Le type Number représente les nombres entiers et décimaux.
– Le type int représente l’ensemble des nombre entiers.
– Le type uint représente l’ensemble des nombres entiers positifs.
– Le type Boolean ne peut prendre que deux valeurs à savoir true et false.

Pour effectuer des petits tests en AS3, on utilisera la fonction trace(). C’est l’équivalent de la fonction JavaScript alert() à la différence que la valeur que vous passez en paramètre de trace() sera affichée dans une fenêtre extérieure à l’animation en cours de création : la fenêtre SORTIE. Par ailleurs, je vous recommande vivement d’utiliser cette fonction pour vérifier la bonne procédure de votre code si vous avez une erreur à débugger.

Il est également important d’assimiler la notion d’écouteurs d’évènements en AS3. Un écouteur d’évènement est en réalité une fonction que l’on applique à un élément si un évènement prédéfini se produit. C’est encore un peu confus ? Prenons le cas par exemple d’un simple bouton : ce que l’on souhaite généralement, c’est qu’une action quelconque se déclenche en cas d’un clic de l’utilisateur sur celui-ci. On va donc assigner à ce bouton un écouteur d’évènement qui détectera si quelqu’un produit cette action. Pour se faire, on va utiliser la méthode addEventListener(), qui enregistrera la fonction d’écouteur auprès de notre cible. Il se peut que malgré cette explication cette notion ne soit toujours pas claire pour vous : il faut absolument que vous pratiquiez quelques exemples simples dans un fichier nouveau par exemple. Il n’y a que la pratique qui vous permettra de mieux comprendre. En attendant, rien de mieux que l’implémentation d’un morceau de code pour simplifier ce petit paragraphe.

Un écouteur d’évènement classique

lebouton est le nom du bouton sur lequel on souhaite interagir. C’est donc sur celui-ci que l’on applique l’écouteur d’évènement. L’évènement prédéfini est le clic, défini grâce à l’expression MouseEvent.CLICK et la fonction qui est appelée en cas de clic sur le bouton est donc lafonctionDeclenchee. C’est à l’intérieur de celle-ci que la liste de nos instructions sera écrite.


lebouton.addEventListener(MouseEvent.CLICK, lafonctionDeclenchee);
function lafonctionDeclenchee(event:Event):void{
//Liste des instructions à exécuter
}

Pour supprimer un écouteur d’évènement, il te suffit d’utiliser la méthode removeEventListener(). Ici, cela donnera :


lebouton.removeEventListener(MouseEvent.CLICK, lafonctionDeclenchee);

NB : le mot clé void est mis ici pour spécifier que cette fonction ne renvoie aucun élément. Il peut arriver que l’on ait besoin de retourner un élément, et si c’est le cas, on doit impérativement préciser le type de celui-ci. Ainsi, à la place du mot-clé void, vous pourrez parfois observer String, ou int, etc..

C’est tout pour aujourd’hui ! Demain, je vous montrerai comment prendre en main l’interface de Flash. Si toutefois vous avez des questions sur un des points de cette introduction, n’hésitez pas. :)