| Voir le sujet précédent :: Voir le sujet suivant |
| Auteur |
Message |
Lukum
Team BP
Inscrit le: 14 Mar 2007
Messages: 2842
Localisation: Lyon
|
 Posté le: 22 Oct 2007 21:30 Sujet du message: [Flash Mx et 8]Module de lecture de fichiers sonores |
 |
|
| Citation: | Bonjour à tous  ,
Voilà un tutoriel où vous allez pouvoir créer, à l’aide de Flash, des modules de lecture de fichiers sonores, pour les ajouter dans vos animations. Voici un exemple de module
Le tutoriel peut paraître long mais ne vous découragez pas ! Il est bien détaillé. 
Pour celui-ci vous devrez quand même avoir quelques bases sur flash pour pouvoir mieux en profiter.
Les screenshots ont été réalisés sous flash 8 mais il est possible de réaliser ce tutoriel sous Flash mx. L'actionScript 1.0 est suffisant.
Tout ce qui est écrit en vert, italique sont les lignes de codes. Et tout ce qui est écrit en bleu correspond à des petites notes ou des astuces.
.: Sommaire :.
Les clips, nos éléments graphiques
La mise en scène
La bande son
Le script
Des boutons : lecture, pause et arrêt
.: Les clips, nos éléments graphiques :.
Alors pour commencer créer un document. La taille du document dépend de l’usage que vous voulez faire de notre module. Ici la taille est de 200*75.
Pour réaliser ce tutoriel, il faut créer une barre de volume qui permettra d’indiquer le volume du fichier son, un curseur ainsi que son support c’est à dire la barre sur laquelle le curseur pourra se déplacer. Tout ces objets doivent être créer dans des symboles « clip ». 
Attention il ne faut pas placer les objets, qui sont dans les clips, n’importe où. En effet lorsque l’on écrira le script, flash prendra comme repère le centre du clip. Il faut donc placer le bord gauche de l’objet sur le centre du clip. Sauf pour le curseur qui lui est placé en son centre.
Il faut maintenant assembler le clip comportant le curseur et le clip comportant le support. Ceci nous permettra une meilleure manipulation lorsque que l’on voudra bouger les occurrences. Il faut donc créer un clip où l’ont va glisser-déposer notre clip curseur et support de manière à mettre le curseur sur le support. La position du curseur sur le support aura une incidence sur le volume de départ.
Il faut toujours faire attention à la position des objets par rapport au centre du symbole.
Voilà maintenant nous avons tous nos éléments pour faire notre mise en scène.
.: La mise en scène :.
Dans un premier temps nous allons créer deux calques sur la scène. Un calque qui comportera notre script et un autre, nos éléments graphiques.
Maintenant nous allons ajouter les éléments à notre scène. Pour cela vous allez glisser-déposer, dans un premier temps notre clip comportant le support et le curseur. Après que ceci soit fait il faut que nous définissions le nom de cette occurrence de manière à ce que le script puisse le reconnaître. Pour pouvoir donner un nom a cette occurrence il faut vous assurer que vous ayez bien la fenêtre « propriété » ouverte. Si ce n’est pas le cas il faut aller dans le menu « Fenêtre » puis « Propriétés » puis « Propriétés » (ctrl+F3). Maintenant sélectionner votre occurrence, puis aller dans cette fenêtre « Propriétés » et entrer dans le champ « Nom de l’occurrence », « slide » par exemple.
Je vous conseille de l’écrire en minuscule pour éviter de vous tromper dans le script et pour éviter aussi qu’il ne vous le mette en bleu, ce qui pourrait porter à confusion. En effet la commande « Slide » existe, dans l’ActionScript, et par conséquent Flash le mettra en bleu pour montrer qu’il la reconnaît. Il faut aussi que nous donnions un nom au curseur et au support. Pour cela ouvrer votre clip où il y a votre support et le curseur et réaliser la même opération que pour l’occurrence « slide » en nommant le curseur « curseur » et le support « support », par exemple.
Maintenant nous allons ajouter notre barre de volume. Comme pour le slide, il faut glisser-déposer le clip volume sur la scène. Puis le nommer avec la même méthode expliquée avant. Ici je l’appelle « barre ».
.: La bande son :.
Après avoir réalisé tout ceci, il faut ajouter le fichier sonore à votre bibliothèque. Pour cela aller dans le menu « Fichier » puis « Importer » puis « Importer dans la bibliothèque ».
Sélectionner votre fichier sonore et valider. Il faut aussi que nous lui donnions un nom. Pour cela faite clique droit sur votre fichier sonore qui se trouve dans votre bibliothèque et sélectionner « Propriétés ». Cocher la case « Exporter pour ActionScript » et indiquer le nom que vous voulez lui donner dans le champ « Identifiant ». En l’occurrence ici, « son ». Puis valider.
Nous allons pouvoir passer au script.
.: Le script :.
Pour écrire le script il faut que vous ouvriez la fenêtre « Actions ». Si vous ne l’avez pas il faut aller dans le menu « Fenêtre » puis « Actions » (F9).
Dans un premier temps nous allons déclarer des variables.
Nous allons, pour commencer, déclarer la variable de notre fichier sonore. Pour cela écrivez dans la fenêtre « Actions » :
| Code: | | monSon = new Sound(); |
monSon est le nom de notre variable et new Sound() est une commande qui va nous permettre de créer un nouvel objet sonore.
Ensuite nous allons déclarer la variable qui va nous permettre d’attacher notre fichier son a notre animation flash :
| Code: | | monSon.attachSound("son"); |
monSon correspond à notre fichier sonore et la commande attachSound(“son”) , va nous permettre d’attacher le fichier « son » à la variable monSon .
Puis nous allons dire à notre animation de lancer le fichier « son ».
Vous pouvez, si vous le désirez, indiquer le nombre de seconde de décalage entre le début du fichier et le moment où vous voulez qu’il débute, (avec une valeur zéro, le fichier commencera au début) et le nombre de fois que vous voulez que votre fichier soit joué. Ces deux donnés devront être séparé par une virgule.
Voilà nous avons fini de déclarer nos variables, nous allons donc passer à l’étape suivante.
Nous allons maintenant dire qu’à chacune des frames, c’est à dire à chaque image, le script exécute les commandes qui suivent.
| Code: | slide.onEnterFrame = function() {
Volume = (this.curseur._x*100)/this.support._width;
monSon.setVolume(Volume);
barre._xscale = Volume;
}; |
La commande slide.onEnterFrame = function() } , va nous permettre de dire qu’à chaque frames de l’objet slide, le script exécutera le code qui suit.
La commande Volume = (this.curseur._x*100)/this.support._width; , est un simple produit, qui va nous permettre de donner un pourcentage par rapport à la position du curseur en fonction de la largeur du support.
La commande monSon.setVolume(Volume); , va permettre de dire que le volume correspond au pourcentage obtenue précédemment.
La commande barre._xscale = Volume; , va permettre de redimensionner, dans le sens de la longueur, l’occurrence barre en fonction du pourcentage.
Et pour finir nous allons dire que lorsque l’on clique sur le curseur, il se positionne en fonction du curseur de la souris.
| Code: | slide.curseur.onPress = function() {
this.startDrag(true, slide.support._width, 0, 0, 0);
};
slide.curseur.onRelease = function() {
this.stopDrag();
}; |
slide.curseur.onPress = function() { , va nous permettre de dire que lorsque je clique sur le curseur, le script exécute le code qui suit.
this.startDrag(true, slide.support._width, 0, 0, 0); ,va nous permettre de paramétrer les axes de translation du curseur en fonction de la largeur du slide. La commande startDrag se présente sous cette forme :
| Code: | | objetADéplacer.startDrag(verrouiller, gauche, haut, droite, bas) |
verrouiller correspond à une valeur booléenne qui peut prendre soit true soit false . Si verrouiller . [color=blue]est false . , le curseur de la souris reste là où vous avez cliqué, sinon il se positionne tout seul sur le point de référence de l’objet, défini lors de la création du symbole.
gauche, haut, droite, bas . correspondent à la zone dans laquelle l’objet peut se déplacer.
Ici nous aurions pu aussi mettre :
| Code: | | this.startDrag(true, 0, 0, slide.support._width, 0); |
slide.curseur.onRelease = function() { this.stopDrag();}; . va nous permettre de désactiver la commande startDrag lorsque l’on relâchera le curseur.
Vous nous avons donc fini le script de la lecture du fichier sonore ainsi que de la gestion du volume.
Nous allons donc pouvoir passer à la partie suivante.
.: Des boutons : lecture, pause et arrêt :.
Dans un premier temps créer vos boutons lecture, pause et arrêt dans des clips séparés.
Après que ceci soit fait, ajouter vos boutons à la scène dans le même calque que les objets précédents. Et nommé les, comme apprit précédemment. Ici je nommerais le bouton lecture, « lecture », le bouton pause, « pause », et le bouton arrêt, « arrêt ».
Maintenant ajoutez le script suivant au reste du code.
| Code: | arret.onPress = function() {
position_monSon = 0;
monSon.stop();
};
pause.onPress = function() {
position_monSon = monSon.position;
monSon.stop();
};
lecture.onPress = function() {
monSon.start(position_monSon/1000);
}; |
arret.onPress = function() , va nous permettre de dire que lorsque l’on appuiera sur l’occurrence « stop », le script exécutera les commandes qui sont après. position_monSon = 0; , va nous permettre de remettre la tête de lecture du fichier sonore au début. Nous verrons par la suite à quoi ceci sert. monSon.stop(); et cette commande va nous permettre d’arrêter la lecture du fichier sonore.
pause.onPress = function() , va avoir le même effet que la commande arret.onPress = function() mais sur le bouton pause. position_monSon = monSon.position . est une variable. Elle va nous permettre de connaître et de sauvegarder la position de la tête de lecture du fichier sonore.
monSon.stop(); . va permettre d’arrêter la lecture du fichier sonore. En effet lorsque l’on exécute cette commande, le script ne remet pas la tête de lecture au début mais garde à la même place.
lecture.onPress = function() . va avoir le même effet que la commande arret.onPress = function(). mais pour le bouton lecture. [color=green] monSon.start(position_monSon/1000) , va permettre de faire démarrer le fichier sonore en fonction de la position de la tête de lecture. Nous somme obligé de diviser la variable position_monSon . par 1000 car la commande monSon.position . donne la position en milliseconde, et comme la commande .start . est en seconde il faut convertir des millisecondes en seconde.
Voici le code en entier :
| Code: | monSon = new Sound();
monSon.attachSound("son");
monSon.start();
//
slide.onEnterFrame = function() {
Volume = (this.curseur._x*100)/this.support._width;
monSon.setVolume(Volume);
barre._xscale = Volume;
};
//
slide.curseur.onPress = function() {
this.startDrag(true, slide.support._width, 0, 0, 0);
};
slide.curseur.onRelease = function() {
this.stopDrag();
};
arret.onPress = function() {
position_monSon = 0;
monSon.stop();
};
pause.onPress = function() {
position_monSon = monSon.position;
monSon.stop();
};
lecture.onPress = function() {
monSon.start(position_monSon/1000);
}; |
Voilà le résultat final : http://www.lukum.fr/fichiers/tutorial.swf
Et si vous le désirez vous pouvez télécharger le .FLA ici : http://www.lukum.fr/fichiers/tutorial.fla
Voilà vous savez dorénavant créer des modules de lecture de fichiers sonores.
Je vous remercie d’avoir lu ce tutoriel jusqu’au bout et j’espère qu’il vous aura été bénéfique et facile d’accès.
Il a été réalisé par Lukum et Michto. Je vous demande de ne pas copier ce tutoriel mais d’indiquer la page Web. Merci d’avance.
Images sauvegardées. |
Boîte à Pixels, tutorial, apprendre, Flash, lecture, fichiers, sons, MP3, modules
_________________
Dernière édition par Lukum le 19 Mar 2009 10:12; édité 2 fois |
|
| Revenir en haut de page |
|
 |
Akabane
Team BP
Inscrit le: 04 Avr 2006
Messages: 7065
Localisation: Pas très loin de toi...
|
| Posté le: 22 Oct 2007 22:00 Sujet du message: |
|
|
Attention ce n'est pas du Action Script 2.0 pour ceux qui veulent savoir. On est sur une notion non objet de la chose.
En tout cas merci bien Lukum pour ce travail très sympathique et surement utile pour pas mal de personne.
Pour les droits, bah ya plus qu'a prier qu'on te le pique pas mais qu'on indique ton nom ^^
_________________
Portfolio
Eberry - blog |
|
| Revenir en haut de page |
|
|
Loira
Administratrice
Team BP
Inscrit le: 13 Nov 2004
Messages: 38922
Localisation: Rhône-Alpes
|
| Posté le: 22 Oct 2007 22:28 Sujet du message: |
|
|
Merci Lukum. J'ai la flemme de sauvegarder les images ce soir, mais j'essaierai de faire ça demain
_________________
Merci à Zarumbatus, auteur de mon avatar ! |
|
| Revenir en haut de page |
|
|
Lukum
Team BP
Inscrit le: 14 Mar 2007
Messages: 2842
Localisation: Lyon
|
| Posté le: 23 Oct 2007 6:20 Sujet du message: |
|
|
Merci.
| Akabane a écrit: | | Attention ce n'est pas du Action Script 2.0 pour ceux qui veulent savoir. |
Je l'ais dis au début, que ce n'était pas du 2.0 mais du 1.0.
| Akabane a écrit: | | On est sur une notion non objet de la chose. |
Par contre je ne comprend pas tout as fait le sens de ta phrase ^^
Pour les droits il y en aura toujours qui feront un joli copier-coller, mais ça on y peut rien ...
Merci Loïra
_________________
|
|
| Revenir en haut de page |
|
|
Loira
Administratrice
Team BP
Inscrit le: 13 Nov 2004
Messages: 38922
Localisation: Rhône-Alpes
|
| Posté le: 23 Oct 2007 7:12 Sujet du message: |
|
|
C'est Sim qu'il faut remercier : il a dû se charger de l'hébergement pendant que j'écrivais mon message !
_________________
Merci à Zarumbatus, auteur de mon avatar ! |
|
| Revenir en haut de page |
|
|
Sim
Team BP
Inscrit le: 14 Avr 2004
Messages: 7667
Localisation: ->Paris<- Toulouse
|
| Posté le: 23 Oct 2007 11:13 Sujet du message: |
|
|
Ahah plus rapide que Lucky Luke pour save les images ! 
Très sympa comme tuto en tous cas, si j'ai un jour le courage de me remettre un peu à flash, j'pense que j'testerai ça !
Merci à toi !
_________________
 |
|
| Revenir en haut de page |
|
|
Aurao
Adepte
Inscrit le: 18 Juin 2006
Messages: 907
Localisation: Derrière toi !
|
| Posté le: 23 Oct 2007 11:51 Sujet du message: |
|
|
Merci pour le tuto ! il peut s'avérer très utile et le résultat est assez sympa ^^
_________________
Comme on dit au burkinafaso : qui avale une noix de coco, fait confiance à son anus ! |
|
| Revenir en haut de page |
|
|
Akabane
Team BP
Inscrit le: 04 Avr 2006
Messages: 7065
Localisation: Pas très loin de toi...
|
| Posté le: 23 Oct 2007 17:14 Sujet du message: |
|
|
Lukum tu verras par toi meme la notion objet ^^
Cherche POO en flash ou un truc du genre. ^^
Désolé pour la premiere ligne, j'avais pas fait attention >.<
_________________
Portfolio
Eberry - blog |
|
| Revenir en haut de page |
|
|
Lukum
Team BP
Inscrit le: 14 Mar 2007
Messages: 2842
Localisation: Lyon
|
| Posté le: 23 Oct 2007 19:17 Sujet du message: |
|
|
Merci tout le monde
Merci Sim ^^
| Akabane a écrit: | Lukum tu verras par toi meme la notion objet ^^
Cherche POO en flash ou un truc du genre. ^^ |
J'ai fait une petite recherche. J'ai pas tout compris, mais au moins je sais à peut prêt ce que c'est ^^
Merci
| Akabane a écrit: | | Désolé pour la premiere ligne, j'avais pas fait attention >.< |
Pas de problème
_________________
|
|
| Revenir en haut de page |
|
|
|
|
Vous ne pouvez pas poster de nouveaux sujets dans ce forum
Vous ne pouvez pas répondre aux sujets dans ce forum
Vous ne pouvez pas éditer vos messages dans ce forum
Vous ne pouvez pas supprimer vos messages dans ce forum
Vous ne pouvez pas voter dans les sondages de ce forum
Vous ne pouvez pas joindre des fichiers
Vous pouvez télécharger des fichiers
|
[ Association 2037.org,
infrastructure & serveur model-fx ] ::
[ phpBB © 2001, 2002 phpBB Group ]
[ Guntar Ze Smiley © ZeCorp. Created by Christophe Soudron ]
|
