|
|
1. Placez deux textes dynamiques sur la scène intitulés calendrier et calendrier2
2. Placez le script ci-dessous sur l'image clé de la timelinetemps = new Date();
lannee=temps.getFullYear(), lemois=temps.getMonth(), lejour=temps.getDay(), ladate=temps.getDate();
jours = ["Dimanche", "Lundi", "Mardi", "Mercredi", "Jeudi", "Vendredi", "Samedi"];
mois = ["Janvier", "Février", "Mars", "Avril", "Mai", "Juin", "Juillet", "Aout", "Septembre", "Octobre", "Novembre", "Décembre"];
calendrier = jours[lejour]+" "+ladate+" "+mois[lemois]+" "+lannee;
calendrier2 = ladate+"/"+(Number(lemois)+1)+"/"+lannee;
Explications :
1. Des variables ne sont pas obligatoirement créées sur plusieurs lignes, elles peuvent l'être sur la même ligne séparées par des virgules.
lannee=2003,lemois=1,lenom="Oui";
revient à écrire :
lannee=2003;
lemois=1;
lenom="Oui";2. Number() permet de convertir une expression, une variable, en nombre.
3. Rappelons que l'opérateur + est un caractère de concaténation.
affichage =" Bonjour "+"tout le monde !"
L'exemple ci-dessus permet d'afficher "Bonjour tout le monde !" dans la zone de texte dynamique intitulée affichage qui se trouve sur la scène.
4. Des listes doivent être créées afin de stocker les noms des mois et jours qui seront récupérés grâce aux résultats des méthodes getMonth() et getDay().
> Méthodologie : Comment afficher l'heure sur la scène (Méthode pour débutants)
1. Placez un texte dynamique sur la scène intitulés ecran
2. Placez le script ci-dessous sur l'image clé de la timelinefunction afficherheure() {
temps = new Date();
heures = temps.getHours();
minutes = temps.getMinutes();
secondes = temps.getSeconds();
if (minutes<=9) minutes = "0"+minutes
if (secondes<=9) secondes = "0"+secondes
ecran = heures+":"+minutes+":"+secondes
}
setInterval(afficherheure,1000)Explications :
1. Il est indispensable de tester la valeur des minutes et secondes car les méthodes getMinutes() et getSeconds() renvoient des valeurs comprises entre 0 et 59. Afficher l'heure sous la forme 9:3:17 n'est pas formaté correctement. Afin d'obtenir 9:03:17 (9 heures, 3 minutes et 17 secondes) nous devons convertir les minutes et les secondes lorsque ces dernières sont comprises entre 0 et 9.
2. Le constructeur new doit être invoqué à chaque fois que vous souhaitez afficher l'heure car l'instance créée prend pour valeur l'heure et la date) à un instant T uniquement.
3. setInterval() permet d'éviter d'utiliser le gestionnaire onClipEvent(enterframe) ou la méthode onEnterFrame qui utilisent davantage de ressources microprocesseur.
4. Attention de ne pas ajouter la lettre "e" à la méthode getSeconds().
> Méthodologie : Comment afficher l'heure sur la scène (Méthode optimisée)
1. Placez un texte dynamique sur la scène intitulés ecran
2. Placez le script ci-dessous sur l'image clé de la timelinefunction afficherheure() {
temps = new Date();
heures = temps.getHours();
minutes = (temps.getMinutes()<=9?"0"+temps.getMinutes():temps.getMinutes());
secondes = (temps.getSeconds()<=9?"0"+temps.getSeconds():temps.getSeconds());;
ecran = heures+":"+minutes+":"+secondes
}
setInterval(afficherheure,1000)
Explications :
1. Consultez la rubrique Affecter une valeur à une variable avec la syntaxe conditionnelle if(?:)
2. Il est indispensable de tester la valeur des minutes et secondes car les méthodes getMinutes() et getSeconds() renvoient des valeurs comprises entre 0 et 59. Afficher l'heure sous la forme 9:3:17 n'est pas formaté correctement. Afin d'obtenir 9:03:17 (9 heures, 3 minutes et 17 secondes) nous devons convertir les minutes et les secondes lorsque ces dernières sont comprises entre 0 et 9.
> Méthodologie : Comment afficher l'heure sur la scène (Compatible Flash 5)
1. Placez un texte dynamique sur la scène intitulés ecran
2. Placez un clip sur la scène
2. Placez le script ci-dessous sur l'occurrence du cliponClipEvent (enterFrame) {
temps = new Date();
heures = temps.getHours();
minutes = temps.getMinutes();
secondes = temps.getSeconds();
if (minutes<=9) minutes = "0"+minutes
if (secondes<=9) secondes = "0"+secondes
_root.ecran = heures+":"+minutes+":"+secondes
}Explications :
1. Cette technique utilise plus de ressources microprocesseur que les 2 précédentes.
2. Il est indispensable de tester la valeur des minutes et secondes car les méthodes getMinutes() et getSeconds() renvoient des valeurs comprises entre 0 et 59. Afficher l'heure sous la forme 9:3:17 n'est pas formaté correctement. Afin d'obtenir 9:03:17 (9 heures, 3 minutes et 17 secondes) nous devons convertir les minutes et les secondes lorsque ces dernières sont comprises entre 0 et 9.
3. Il est indispensable d'utiliser la propriété _root pour atteindre la variable intitulée ecran qui se trouve sur la scène.
Lorsque vous souhaitez changer la couleur d'une occurrence, vous pouvez utiliser l'option Couleur de la palette des propriétés mais il est possible d'effectuer le même réglage par les ActionScripts. Vous devez dans ce cas utiliser l'objet Color() et les deux méthodes setRGB() et getRGB().
> Méthodologie : Comment contrôler la couleur d'une occurrence
1. Placez le script ci-dessous sur l'image clé de la timeline
palettecoul = new Color(Nez);
2. Placez un clip sur la scène
3. Nommez l'occurrence de ce clip. Ex. Nez
4. Attribuez-lui une couleur via la palette des Propriétés
5. Placez un bouton sur la scène
6. Placez le script suivant sur l'occurrence du bouton
on (press) {
palettecoul.setRGB(0xAA0000);
}
Remarques : La technique d'application d'une couleur à une occurrence est donc très simple et rapide, il vous suffit juste de connaître le mode de codage des couleurs en hexadecimal. Le chiffre 0 et la lettre x sont nécessaire en préfixe de la couleur indiquée comme paramètre de la méthode setRGB(). Voici quelques exemples de couleurs.
FF0000 : Rouge
00FF00 : Vert
0000FF : Bleu000000 : Noir
FFFFFF : BlancFFFF00 : Jaune
00FFFF : Cyan
FF00FF : Magenta333333 : Gris foncé
999999 : Gris
DDDDDD : Gris clair
> Méthodologie : Comment lire la couleur d'une occurrence
1. Placez le script ci-dessous sur l'image clé de la timeline
palettecoul = new Color(Nez);
2. Placez un clip sur la scène
3. Nommez l'occurrence de ce clip. Ex. Nez
4. Attribuez-lui une couleur via la palette des Propriétés
5. Placez un texte dynamique sur la scène et nommez la variable vcouleur
6. Placez un bouton sur la scène
7. Placez le script suivant sur l'occurrence du bouton
on (press) {
vcouleur = palettecoul.getRGB();
}Un clic sur le bouton permet de "lire" la couleur de l'occurrence nommée nez afin de l'afficher dans la variable vcouleur.
Le contrôle du son passe par l'utilisation d'un objet et de méthodes. Si vous vous ne souhaitez pas vous embêter avec l'objet Sound(), vous pouvez dans ce cas placer un son sur une image clé mais il vous sera difficile de contrôler ce dernier. Nous vous conseillons fortement la programmation du son.
Dans nos exemples, nous avons opté pour un chargement dynamique du son avec la méthode loadSound(), mais vous pouvez aussi importer vos sons dans la bibliothèque.
> Méthodologie : Importer un son et le nommer (pour une utilisation avec les ActionScripts
1. Menu Fichier/Importer
2. Sélectionnez un son situé sur votre disque dur (ou un autre volume de votre ordinateur)
3. Validez par un clic sur le bouton "Ouvrir"
4. Effectuez un clic-droit (PC) ou CTRL-Clic (Mac) sur le son qui vient d'arriver dans votre bibliothèque et sélectionnez la commande Liaison
5. Cochez la case "Exporter pour ActionScript" afin que vous puissiez nommer votre son
6. Validez
En lieu et place de la ligne d'instruction ci-dessous contenue dans les
différents scripts de nos exemples, placez la ligne d'instruction
qui suit :
Ligne à remplacer :
chainehifi.loadSound("assonintro.mp3", 0);
par :
chainehifi.attachSound("chanson1")
Remarquez que le nom utilisé avec la méthode attachSound() est celui de liaison et non celui qui est utilisé dans la bibliothèque. Voyons à présent 3 exemples, du plus simple au plus complexe, qui vous permettront de contrôler un son de différentes façons.
AVANT DE COMMENCER
L'APPRENTISSAGE DES POINTS CI-DESSOUS... |
Pour mettre en pratique les techniques de contrôle du son ci-dessous, commencez tout d'abord par créer un fichier, enregistrez le et saisissez le script ci-dessous sur la première image-clé de la timeline.
chainehifi = new Sound();
chainehifi.loadSound("assonintro.mp3", 0);
Remarques TRES IMPORTANTES :
Le nom du son précisé (ex. assonintro.mp3) n'est pas obligatoirement un fichier en local sur le serveur qui héberge le site. Il peut s'agir d'une adresse de fichier situé sur un ordinateur distant (http://www.nomd1autresitequelevotre.com/leson.mp3). De plus, si vous faites référence à un fichier son qui se trouve sur le même serveur que le site, vous devez spécifier l'adresse relative à la page HTML qui contient le SWF. Dans notre exemple, les SWF utilisés sans cette page web ne sont pas dans le même dossier que la page asobjets.html (cette page que vous consultez). Le son "assonintro.mp3" se trouve dans le dossier qui contient la page asobjets.html et non ceclui qui contient le swf qui fait appel à ce fichier.
Le paramètre 0 de la méthode loadSound() indique que le chargement du son ne se fait pas en streaming. Il faut donc attendre tout le chargement du son avant le début de la lecture. Le chiffre 1 permettrait de charger le son en streaming mais il serait alors impossible de contrôler totalement ce dernier.
Lecture, arrêt, volume et balance :
Cette partie va vous permettre à présent d'apprendre à contrôler un son pour des fonctions basiques.
> Méthodologie : Lire un son
1. Placez le script ci-dessous sur un bouton
on (press) {
chainehifi.start();
}Paramètres de la méthode start() :
start(3) : permet de lire le son à partir de la 3e seconde
start(3,2) : permet de lire 2 fois le son à partir de la 3e seconde
start(0,5) : permet de lire 5 fois le son du début> Méthodologie : Arrêter un son
1. Placez le script ci-dessous sur un bouton
on (press) {
chainehifi.stop();
}
Volume d'un son : Le réglage du volume d'un son peut se faire de différentes façons. Un simple clic peut régler le volume à un niveau précis ou l'augmenter (ou diminuer) progressivement. Un variateur que vous déplacez vous même sur un axe horizontal ou vertical peut aussi régler le niveau sonore.
> Méthodologie : Régler le volume d'un son à un niveau précis (fixe)
1. Placez le script ci-dessous sur un bouton
on (press) {
chainehifi.setVolume(50);
}Le script ci-dessus permet de régler le son à moitié. 0 représente un niveau minimum (le son n'est plus audible), 100 est le niveau maximum pour un son de bonne qualité. Au delà de 100 (pourquoi pas 400 ou + ou -) le son perd sa qualité.
> Méthodologie : Augmenter le volume sonore par un clic (sur un bouton symbolisant Volume + fort)
1. Placez le script ci-dessous sur un bouton
on (press) {
chainehifi.setVolume(chainehifi.getVolume()+5);
niveausonore = chainehifi.getVolume();
}Dans l'exemple ci-dessus, nous avons été obligé d'utiliser la méthode getVolume() afin de connaître le niveau sonore actuel. On ajoute ensuite 5. La deuxième ligne d'instruction est facultative, elle permet simplement d'afficher le niveau sonore dans une variable intitulée niveausonore qui se trouve sur la scène.
> Méthodologie : Régler la balance d'un son
1. Placez le script ci-dessous sur un bouton
on (press) {
chainehifi.setPan(-100);
}-100 permet de renvoyer tout le son dans l'enceinte gauche de votre système audio, 0 rétablit la stéréo alors que 100 joue le son uniquement dans l'enceinte de droite. Il est également possible de régler la balance à partir d'un variateur, précisons tout de même que l'échelle s'étale alors sur 200 valeurs possibles (-100 à 100).
Jauge, variateur et pause :
Dans le fichier qui suit, nous allons avoir besoin de connaître la durée d'un son ainsi que la position de la tête de lecture, lors de la lecture d'un son. Voici donc les deux propriétés qui permettent de nous renseigner sur ces types d'informations.
Durée d'un son : Utilisez la propriété duration accompagnée du nom de l'instance en préfixe. N'ajoutez pas de parenthèses après la propriété car il ne s'agit pas d'une méthode (mais d'une propriété, ça fait 3 fois que nous l'écrivons !!!) La valeur obtenue est exprimée en millièmes de secondes, vous devez donc diviser le résultat obtenu par 1000 afin d'obtenir le nombre de secondes exact.
chainehifi.duration
Voici un exemple de script qui permet d'afficher la durée d'un son dans une variable intitulée duree. Cette dernière est située sur la scène, le script est quant à lui placé sur l'image clé de la timeline.
on (press) {
duree = chainehifi.duration/1000;
}Position de la tête de lecture dans un son : Utilisez la propriété duration accompagnée du nom de l'instance en préfixe. N'ajoutez pas de parenthèses après la propriété car il ne s'agit pas d'une méthode (mais d'une propriété, ça fait 3 fois que nous l'écrivons !!!) La valeur obtenue est exprimée en millièmes de secondes, vous devez donc diviser le résultat obtenu par 1000 afin d'obtenir le nombre de secondes exact.
chainehifi.position
> Méthodologie : Réaliser une jauge indiquant le temps écoulé lors de la lecture d'un son
1. Placez le script ci-dessous sur une image-clé
function graphedureeson() {
positionson = chainehifi.position/1000;
jauge._xscale = (chainehifi.position/chainehifi.duration)*100;
}La jauge ne doit se mettre en marche qu'à partir du moment où la lecture est demandée. Ajoutez donc le code ci-dessous sur le bouton lecture.
vasy = setInterval(graphedureeson, 100);
Avec la ligne d'instruction de lecture du son, votre script doit ressembler au suivant :
on (press) {
chainehifi.start(0,1000);
vasy = setInterval(graphedureeson, 100);
}Explications :
1. La création d'une fonction (graphedureeson) est nécessaire car elle est "appelée" par la fonction setInterval() pour exécuter à intervalle régulier le code qui agrandit la jauge.
jauge._xscale = (chainehifi.position/chainehifi.duration)*100;
2. La fonction setInterval() contient deux paramètres : le nom de la fonction qui est appelée et le laps de temps entre 2 répétitions (1000 pour 1 seconde). Dans notre exemple, Tous les 10e de secondes, la fonction graphedureeson est exécutée. Le nom de la variable qui précède la fonction, vasy, est nécessaire afin que l'intervalle puisse être interrompue.clearInterval(vasy);
> Méthodologie : Réaliser un variateur pour le contrôle du son
Variateur sans son :
Ex. de variateur :
(sans son)
Variateur avec son :
Vous devez tout d'abord commencer par comprendre que nous allons simplement rendre une occurrence mobile grâceà l'utilisation de la commande startDrag() en la contraignant dans une zone. La valeur correspondant à la position de l'occurrence (_x ou _y) sert alors à régler le niveau sonore.
1. Placez le script ci-dessous sur l'image clé
surveil = new Object();
surveil.onMouseMove = function() {
chainehifi.setVolume((curseur._x-50)/2);
};2. Placez un bouton sur la scène.
3. Nommez l'occurrence (Ex. curseur)
4. Placez le script ci-dessous sur l'occurrence du boutonon (press) {
startDrag(curseur, false, 50, 30, 250, 30);
Mouse.addListener(surveil);
}
on (release) {
stopDrag();
Mouse.removeListener(surveil);
}
Remarque : Pour afficher le niveau sonore sur la scène, ajoutez un texte dynamique sur la scène que vous nommez niveausonore, ajoutez également la ligne d'instruction ci-dessous dans le script ci-dessus.
niveausonore = chainehifi.getVolume();
Explications :
1. Le curseur est rendu mobile grâce aux commandes startDrag() et stopDrag() respectivement placées sur les événementspress et release. Dés qu'un clic est effectué sur le bouton du variateur, un objet d'écoute (listener) est déclenché. Dès que ce clic est relâché, l'objet d'écoute est annulé.
2. Nous faisons la soustraction de -50 pixels car le début du variateur est situé à 50 pixels du bord gauche de la scène. Comme nous souhaitons obtenir 0 lorsque le curseur est à gauche du variateur, 50 pixels du bord gauche de la scène - 50, on obtient bien 0. LA longueur du variateur est de 200 pixels, c'est pourquoi une division par 2 suit le premier calcul.
Référez-vous au chapitre sur les Listeners (Objets d'écoute) afin de comprendre leur fonctionnement.
> Méthodologie : Créer une fonction pause (qui n'existe pas par défaut)
Il n'y a pas de réelle difficulté pour effectuer ce genre d'opération, il faut juste comprendre le principe. Un même bouton doit successivement lire puis interrompre le son. Le clic sur ce bouton doit également changer son apparence ("Pause" puis "Lecture"). A cet instant, il faut mémoriser la position de la tête de lecture avant d'arrêter le son pour pouvoir le relancer à la position mémorisée.
Avant de mettre un son en pause, nous devons vérifier son état de lecture (en pause ou en lecture). Il est donc nécessaire d'initialiser une variable sur la première image clé de la timeline, elle sera modifiée dés que la lecture et l'arrêt seront demandés. Il suffit ensuite de tester la valeur de cette variable afin d'arrêter ou lancer la lecture du son.
Remarque : Il n'existe pas de méthode ou de propriété pour l'objet Sound() qui permette de connaître l'état d'un son, c'est pourquoi cette technique est celle que nous vous proposons.
La ligne d'instruction ci-dessous a été saisie sur la première image clé de la timeline :
posison = 1;
Remarque : Initialisez cette valeur à -1 si vous demandez la lecture du son au démarrage de l'animation.
1. Placez le script ci-dessous sur un bouton
on (press) {
memoposition = chainehifi.position;
posison *= -1;
if (posison == 1) {
chainehifi.start(memoposition/1000);
} else {
chainehifi.stop();
memoposition = chainehifi.position;
}
}Afin qu'un texte dynamique intitulé etiquettepause change (Reprise <-> Pause), adaptez le script en ajoutant la ligne qui commence par etiquettepause = (eti...
on (press) {
memoposition = chainehifi.position;
posison *= -1;
if (posison == 1) {
chainehifi.start(memoposition/1000);
etiquettepause = (etiquettepause == "Pause" ? "Reprise" : "Pause");
} else {
chainehifi.stop();
etiquettepause = (etiquettepause == "Pause" ? "Reprise" : "Pause");
memoposition = chainehifi.position;
}
}Explications : A chaque clic sur le bouton pause, les instructions ci-dessous s'executent :
1. Une variable mémorise la position de la tête de lecture.
2. Une autre intitulée posison bascule de 1 à -1 à chaque clic.
3. Un test évalue la valeur de cette variable. Le résultat permet de mettre le son en pause ou au contraire de le relancer.
> Méthodologie : Ajouter une méthode pause() à l'objet Sound() -
Si vous souhaitez ajouter une méthode qui permette d'effectuer une pause lors de l'écoute d'un son, commencez par copier-coller le script ci-dessous sur la première image-clé de la timeline :
Sound.prototype.pause = function() {
if (posison == undefined) posison = 1;
posison *= -1;
if (posison == 1) {
this.stop()
this.start(memoposition/1000);
} else {
this.stop();
memoposition = this.position;
}
};Vous pouvez à présent utiliser la méthode pause() de l'objet Sound().
Exemple :
on (press) {
machaine.pause();
}Dans l'exemple ci-dessus, le script sous-entend que les lignes ci-dessous avaient été saisies préalablement sur la première image-clé.
machaine = new Sound();
machaine.loadSound("doux.mp3", 0);
Préchargement, compteur et jauge contrôlable :
> Méthodologie : Préchargement d'un son
1. Placez le script ci-dessous sur l'image cléchainehifi = new Sound();
chainehifi.loadSound("assonintro.mp3", 0);
chainehifi.setVolume(75);
//
function tpschargement() {
temps = (chainehifi.getBytesLoaded()/chainehifi.getBytesTotal())*100;
charge._xscale = 100-temps;
if (temps == 100) {
clearInterval(debut);
charge._visible = 0;
}
}
debut = setInterval(tpschargement, 10);
Les 3 premières lignes de ce script n'ont pour seules fonctions que de charger le son et de régler son niveau sonore. Une fonction est ensuite créée, c'est elle qui est chargée de contrôler à intervalle régulier, l'état du chargement du son (grâce à la fonction setInterval()). Vous avez peut-être déjà l'habitude de faire des préchargements d'animations, dans ce cas, vous pouvez constater que _root ne précède pas les méthodes getBytesTotal() et getBytesLoaded(). En effet, les préchargements ne se font pas obligatoirement sur des animations mais aussi sur des sons !!! Le préchargement d'un son se fait donc de la même façon que celui d'une animation.
> Méthodologie : Afficher le temps écoulé lors de la lecture d'un son
1. Placez un texte dynamique sur la scène
2. Nommez sa variable (ex. : positionson)
3. Placez le script ci-dessous sur le bouton "Lecture du son"on (press) {
chainehifi.start(0,1000);
vasy = setInterval(graphedureeson, 100);
}4. Placez le script ci-dessous sur l'image clé
function tempsecoule(chiffre) {
if (chiffre<=59) {
secondes = (Math.floor(chiffre)<10 ? "0"+Math.floor(chiffre) : Math.floor(chiffre));
minutes = "00";
} else {
minutes = "0"+Math.floor(chiffre/60);
secondes = (Math.floor(chiffre-(minutes*60))<10 ? "0"+Math.floor(chiffre-(minutes*60)) : Math.floor(chiffre-(minutes*60)));
}
}function graphedureeson() {
positionson = chainehifi.position/1000;
tempsecoule(positionson);
timing = minutes+":"+secondes;
}
Une première fonction (tempsecoule) est chargée de convertir l'affichage du timing. Une deuxième fonction est chargée d'afficher la position de la tête de lecture lorsque le son est en lecture.
> Méthodologie : Réaliser une jauge indiquant la position du son écoulé depuis le début, avec une poignée pour se déplacer à l'intérieur.
1. Il faut que je trouve le temps d'expliquer cette technique
2. Elle est interessante
3. Si vous téléchargez le .fla de l'exemple précédent, le code est dedans.
4. Il ressemble à ça...Code placé sur le curseur...
on (press) {
startDrag(curseur, false, 63.2, 91, 243.5, 91);
clearInterval(vasy);
Mouse.addListener(surveil);
}
on (release) {
stopDrag();
Mouse.removeListener(surveil);
vasy = setInterval(graphedureeson, 100);
chainehifi.stop();
chainehifi.start((chainehifi.duration*(jauge._xscale/100))/1000, 1);
}Code placé sur l'image clé...
// Variable permettant de savoir si lecture est en cours
posison = 1;
// Création de l'instance chainehifi
chainehifi = new Sound();
chainehifi.loadSound("assonintro.mp3", 0);
chainehifi.setVolume(75);
//
surveil = new Object();
surveil.onMouseMove = function() {
jauge._width = curseur._x-63.9;
};
Mouse.addListener(surveil);Plus les 2 fonctions présentées dans ma méthodologie précédente...
