Forums Développement Multimédia

Aller au contenu

- - - - -

AS3 - Création d’une barre de progression / navigation

CODE

5 réponses à ce sujet

#1 Nihco

    Ceinture Jaune

  • Members
  • PipPip
  • 27 messages

Posté 19 June 2015 - 08:52 AM

Bonjour.


J’ai une animation avec une piste audio.
Dans cette animation, j’ai besoin d’une barre de progression sur laquelle on peut cliquer afin de pouvoir se déplacer dans l’animation.

J’ai réussi à animer le remplissage de la barre de progression.
Pour le son, c’est aussi bon, enfin presque.
Quand je clique dans la barre de progression, je "navigue" également dans le son.

Problème 1 :

Je dis presque pour le son, parce que lorsque l’on clique après la fin de la barre de progression, juste quelques millimètres après le début du bouton pause, (voir la position du curseur sur la photo jointe) une erreur se produit, et j’obtiens le message suivant :

TypeError: Error #1009: Il est impossible d'accéder à la propriété ou à la méthode d'une référence d'objet nul. at Anim_1_fla::MainTimeline/clicSurJaugePregression()

TypeError: Error #1009: Il est impossible d'accéder à la propriété ou à la méthode d'une référence d'objet nul. at Anim_1_fla::MainTimeline/animerJaugeLecture()

Quand je teste en mode Débogage avec "Ctrl + Alt + Entrée", j’obtiens le message suivant :

TypeError: Error #1009: Il est impossible d'accéder à la propriété ou à la méthode d'une référence d'objet nul. at Anim_1_fla::MainTimeline/clicSurJaugePregression()[Anim_1_fla.MainTimeline::frame1:124]

L’erreur se situe apparemment à la ligne 124, qui est la suivante :
 pisteSon.addEventListener(Event.SOUND_COMPLETE,ecouteSonTerminee);

Mais je ne vois pas ce qui pose problème.

Problème 2 :

Mon deuxième problème est que je n’arrive pas à naviguer dans l’animation en cliquant sur la barre de progression.

J’ai cherché comment faire, mais je ne sais pas de quelle façon m’y prendre.


Je vous ai joint le.fla et le .swf . (Réalisé sous Flash CS5.5)

Quelqu’un pourrait-il me venir en aide ?


Je vous en remercie d’avance.

Miniature(s) jointe(s)

  • Image attachée: Position_curseur_Erreur_V02.jpg
  • Image attachée: Position_curseur_Erreur_V03.jpg

Fichier(s) joint(s)



#2 gustave02

    Ceinture Marron

  • Members
  • PipPipPipPipPipPip
  • 166 messages

Posté 19 June 2015 - 20:06 PM

j'ai fait un petit essais voit si ca te fait avancer



import flash.media.Sound;
import flash.events.MouseEvent;

//
//Initialisation de variables
//
var initialise:uint;

var positionTeteMemorisee:Number = 0;//variable dans laquelle sera stocké la position de la tête de lecture
//création d'une "occurence" du son placé dans la bibliothèque
var pisteSon:SoundChannel;//définition du canal audio qui va servir à "contrôler" le son
var position = 0 ;
btLecturePause.buttonMode = true;
btRetourDebut.buttonMode = true;
var ecoute:Sound ;

function inite():void{ trace(initialise);
        if(initialise == 0){
                initialise++;
                ecoute = new son1();
                pisteSon = new SoundChannel();
                faireSon();
        }
}

function faireSon():void{
        pisteSon = ecoute.play((currentFrame / 30) * 1000);
}
//*******************************************************************************
inite();

//Dessin de la barre de progression
var zoneClic:Sprite = new Sprite();
zoneClic.graphics.beginFill(0xFFFF00,0); //couleur de remplissage du Sprite
zoneClic.graphics.drawRect(jaugeProgression.x,jaugeProgression.y,120,14); //utilise les coorconnées en x et y et les mêmes dimensions
addChild(zoneClic);//ajoute le Sprite à la scène
zoneClic.buttonMode = true;

//*******************************************************************************


//
//Gestionnaire d'évènement lié aux actions exécutées à la fin de la lecture d'un son
//

//***** Fonction ecoute son terminé
pisteSon.addEventListener(Event.SOUND_COMPLETE,ecouteSonTerminee);//détecter la fin de lecture du son
function ecouteSonTerminee(evt:Event)
        {
                btLecturePause.gotoAndStop(2);//met le bouton sur l'image 2 soit "Play"
                jaugeProgression.removeEventListener(Event.ENTER_FRAME,animerJaugeLecture);//suppresion de l'écouteur sur la fonction animerJaugeLecture
                positionTeteMemorisee = 0;//"réinitialise" la valeur de la position de la tête de lecture à 0
        }
//*******************************************************************************


//
//Gestionnaire d'évènement lié au bouton de retour au début
//

//***** Fonction Bouton retour début
btRetourDebut.addEventListener(MouseEvent.MOUSE_DOWN,retourZero);

function retourZero(evt:MouseEvent)
{
                if (btLecturePause.currentFrame == 1)//si le bouton lecture-pause affiche pause
                {
                        pisteSon.stop();//arrêter le son
                        pisteSon.addEventListener(Event.SOUND_COMPLETE,ecouteSonTerminee);
                        gotoAndPlay(1);
                        faireSon();
                }
                else
                {
                        positionTeteMemorisee = 0;//"réinitialise" la valeur de la position de la tête de lecture à 0
                        jaugeProgression.scaleX = 0;//met la jauge à 0 en largeur, donc la fait disparaître
                        gotoAndPlay(1);
                        btLecturePause.gotoAndStop(1);
                        faireSon();
                }
}
//*******************************************************************************


//
//Gestionnaire d'évènement lié au bouton Lecture/Pause
//

//***** Fonction bouton Lecture Pause
btLecturePause.addEventListener(MouseEvent.MOUSE_DOWN,ecouterSon);
function ecouterSon(evt:MouseEvent)
{
        if (btLecturePause.currentFrame == 1)//si pause est affiché avant le clic
        {
                positionTeteMemorisee = pisteSon.position;//mettre les coordonnées de la position de la tête de lecture dans la variable
                pisteSon.stop();//arrêter le son
                jaugeProgression.removeEventListener(Event.ENTER_FRAME,animerJaugeLecture);
                btLecturePause.gotoAndStop(2);
                stop();
        }
        else
        {
                pisteSon = ecoute.play(positionTeteMemorisee);//lire le son à partie de la positon mémorisée
                pisteSon.addEventListener(Event.SOUND_COMPLETE,ecouteSonTerminee);
                jaugeProgression.addEventListener(Event.ENTER_FRAME,animerJaugeLecture);
                btLecturePause.gotoAndStop(1);
                play();
        }
}
//*******************************************************************************


//***** Fonction animer Jauge Progression
jaugeProgression.addEventListener(Event.ENTER_FRAME,animerJaugeLecture);//jaugeProgression est l'instance du symbole
function animerJaugeLecture(evt:Event)
{
       
                jaugeProgression.scaleX = currentFrame / 1365; //modifier le scaleX en divisant la position par la longeur
}
//*******************************************************************************


//***** Fonction clic sur Jauge de Progression
zoneClic.addEventListener(MouseEvent.MOUSE_DOWN,clicSurJaugePregression);
function clicSurJaugePregression(evt:MouseEvent)
{

        var partClic = ( mouseX - 313 ) / 120;// (coordonnées de la souris sur l'axe X - coordonnées en X de l'occurence) / longeur de l'occurence
        positionTeteMemorisee = ecoute.length * partClic;//longeur du son * coordonnées du clic

        btLecturePause.gotoAndStop(1);
        jaugeProgression.addEventListener(Event.ENTER_FRAME,animerJaugeLecture);
        pisteSon.stop();//arrêt du son
        gotoAndPlay( uint(1365 * partClic));
        pisteSon = ecoute.play((currentFrame / 30) * 1000);//lecture du son à partir de la position de sa longeur * la valeur de partclic
        pisteSon.addEventListener(Event.SOUND_COMPLETE,ecouteSonTerminee);
       
}

jaugeProgression.addEventListener (MouseEvent.MOUSE_DOWN, clicSurLaTimeline);
        function clicSurLaTimeline (evt:MouseEvent):void
{
                line.buttonMode = true;
                btLecturePause.gotoAndStop(2);
                position = Math.floor ((evt.localX) * (totalFrames / line.width));
                gotoAndPlay (position);
                trace (position);
       
}
 

@+gustave02

modifier

#3 gustave02

    Ceinture Marron

  • Members
  • PipPipPipPipPipPip
  • 166 messages

Posté 19 June 2015 - 20:36 PM

remodifier ca doit etre ok

je prend cuurentFrame pour l'info de la position lecture


import flash.media.Sound;
import flash.events.MouseEvent;
//
//Initialisation de variables
//
var initialise:uint;
var positionTeteMemorisee:Number = 0;//variable dans laquelle sera stocké la position de la tête de lecture
//création d'une "occurence" du son placé dans la bibliothèque
var pisteSon:SoundChannel;//définition du canal audio qui va servir à "contrôler" le son
var position = 0 ;
btLecturePause.buttonMode = true;
btRetourDebut.buttonMode = true;
var ecoute:Sound ;
function inite():void{
if(initialise == 0){
  initialise++;
  ecoute = new son1();
  pisteSon = new SoundChannel();
  faireSon();
}
}
function faireSon():void{
pisteSon.stop();
if(currentFrame != 1365){
  pisteSon = ecoute.play((currentFrame / 30) * 1000);
}
}
//*******************************************************************************
inite();
//Dessin de la barre de progression
var zoneClic:Sprite = new Sprite();
zoneClic.graphics.beginFill(0xFFFF00,0); //couleur de remplissage du Sprite
zoneClic.graphics.drawRect(jaugeProgression.x,jaugeProgression.y,120,14); //utilise les coorconnées en x et y et les mêmes dimensions
addChild(zoneClic);//ajoute le Sprite à la scène
zoneClic.buttonMode = true;
//*******************************************************************************

//
//Gestionnaire d'évènement lié aux actions exécutées à la fin de la lecture d'un son
//
//***** Fonction ecoute son terminé
pisteSon.addEventListener(Event.SOUND_COMPLETE,ecouteSonTerminee);//détecter la fin de lecture du son
function ecouteSonTerminee(evt:Event)
{
  btLecturePause.gotoAndStop(2);//met le bouton sur l'image 2 soit "Play"
  jaugeProgression.removeEventListener(Event.ENTER_FRAME,animerJaugeLecture);//suppresion de l'écouteur sur la fonction animerJaugeLecture
  positionTeteMemorisee = 0;//"réinitialise" la valeur de la position de la tête de lecture à 0
}
//*******************************************************************************

//
//Gestionnaire d'évènement lié au bouton de retour au début
//
//***** Fonction Bouton retour début
btRetourDebut.addEventListener(MouseEvent.MOUSE_DOWN,retourZero);
function retourZero(evt:MouseEvent)
{
  if (btLecturePause.currentFrame == 1)//si le bouton lecture-pause affiche pause
  {
   pisteSon.stop();//arrêter le son
   pisteSon.addEventListener(Event.SOUND_COMPLETE,ecouteSonTerminee);
   gotoAndPlay(1);
   faireSon();
  }
  else
  {
   positionTeteMemorisee = 0;//"réinitialise" la valeur de la position de la tête de lecture à 0
   jaugeProgression.scaleX = 0;//met la jauge à 0 en largeur, donc la fait disparaître
   gotoAndPlay(1);
   btLecturePause.gotoAndStop(1);
   faireSon();
  }
}
//*******************************************************************************

//
//Gestionnaire d'évènement lié au bouton Lecture/Pause
//
//***** Fonction bouton Lecture Pause
btLecturePause.addEventListener(MouseEvent.MOUSE_DOWN,ecouterSon);
function ecouterSon(evt:MouseEvent)
{
if (btLecturePause.currentFrame == 1)//si pause est affiché avant le clic
{
  positionTeteMemorisee = pisteSon.position;//mettre les coordonnées de la position de la tête de lecture dans la variable
  pisteSon.stop();//arrêter le son
  jaugeProgression.removeEventListener(Event.ENTER_FRAME,animerJaugeLecture);
  btLecturePause.gotoAndStop(2);
  stop();
}
else
{
  pisteSon = ecoute.play(positionTeteMemorisee);//lire le son à partie de la positon mémorisée
  pisteSon.addEventListener(Event.SOUND_COMPLETE,ecouteSonTerminee);
  jaugeProgression.addEventListener(Event.ENTER_FRAME,animerJaugeLecture);
  btLecturePause.gotoAndStop(1);
  play();
}
}
//*******************************************************************************

//***** Fonction animer Jauge Progression
jaugeProgression.addEventListener(Event.ENTER_FRAME,animerJaugeLecture);//jaugeProgression est l'instance du symbole
function animerJaugeLecture(evt:Event)
{

  jaugeProgression.scaleX = currentFrame / 1365; //modifier le scaleX en divisant la position par la longeur
}
//*******************************************************************************

//***** Fonction clic sur Jauge de Progression
zoneClic.addEventListener(MouseEvent.MOUSE_DOWN,clicSurJaugePregression);
function clicSurJaugePregression(evt:MouseEvent)
{
var partClic = ( mouseX - 313 ) / 120;// (coordonnées de la souris sur l'axe X - coordonnées en X de l'occurence) / longeur de l'occurence
positionTeteMemorisee = uint(1365 * partClic);//longeur du son * coordonnées du clic
btLecturePause.gotoAndStop(1);
jaugeProgression.addEventListener(Event.ENTER_FRAME,animerJaugeLecture);
gotoAndPlay( uint(1365 * partClic));
faireSon();//lecture du son à partir de la position de sa longeur * la valeur de partclic
pisteSon.addEventListener(Event.SOUND_COMPLETE,ecouteSonTerminee);

}
jaugeProgression.addEventListener (MouseEvent.MOUSE_DOWN, clicSurLaTimeline);
function clicSurLaTimeline (evt:MouseEvent):void
{
  line.buttonMode = true;
  btLecturePause.gotoAndStop(2);
  position = Math.floor ((evt.localX) * (totalFrames / line.width));
  gotoAndPlay (position);
  trace (position);

}
 

@+gustave02

#4 renzlo

    Ceinture Blanche

  • Members
  • Pip
  • 2 messages

Posté 22 April 2016 - 14:52 PM

Bonjour à vous 2,

Je suis très intéressé par le sujet.
J'utilise Flash depuis longtemps, mais j'ai peu de connaissance en AS 3... :?
Dans le cadre de mon boulot, je dois réaliser une grande quantité d'anims en Flash (Animate CC) pour illustrer plusieurs discours en voix-off.
Plutôt qu'appeler l'audio par le code, je pensais le caler sur la timeline en pour pouvoir me servir de la forme d'onde audio pour me repérer et intercaler mes animations.

Est-il possible de créer un template avec une barre de progression qui s'adapterait automatiquement à la taille de la timeline ?

Par exemple la taille en pixels de la barre reste la même que dans l'exemple ci-dessus, mais si la timeline fait 25 frames/la progression se fait en 1seconde (je bosse à 25), si elle fait 50 frames elle se lit automatiquement en 2 secs, etc...

Merci de votre aide si ça vous paraît envisageable...
A+

Laurent

#5 Monsieur Spi

  • Community Manager
  • PipPipPipPipPipPipPipPip
  • 7001 messages

Posté 22 April 2016 - 15:28 PM

Bonjour,

Pas forcément une bonne idée, le nombre de FPS indiqué pour le lecteur Flash est une valeur qu'il essaye d'atteindre mais qu'il n’atteint jamais réellement, ça dépend de beaucoup de facteurs comme la puissance de la machine par exemple, ce n'est donc pas une valeur fixe et fiable à laquelle on peut se référer pour cadencer nos applications. Par exemple les anims peuvent se mettre à ramer alors que l'audio continue à se jouer normalement. Donc essayer de synchroniser audio et animation sur la timeline c'est risquer de voir tout se décaler et de ne plus vraiment maîtriser son appli.

Le mieux est généralement de passer par du code et des points de repères lors de la lecteur du flux audio.

Maintenant, ça fait longtemps que je n'ai pas ouvert Flash et peut-être que Animate CC à résolu ce problème de décalage que nous avions à l'époque de CS6, si ça se trouve je dis des choses un peu obsolètes :) ... à vérifier.

#6 renzlo

    Ceinture Blanche

  • Members
  • Pip
  • 2 messages

Posté 22 April 2016 - 17:15 PM

Merci de ta réponse !

En passant l'audio en "sync : en continu", je me souviens avoir déjà réussi ce genre d'exercice. L'audio et l'animation sont "accrochés" et se synchronisent.
En fait, ces animations vont sûrement être destinées à la conversion vidéo (en 25 ips) pour finir dans Captivate... à moins que je trouve un format adéquat en vectoriel.

L'histoire des marqueurs serait sûrement une bonne idée aussi mais je ne connais pas cette technique. A creuser !
En tout cas, il faut que ce soit un méthode où je n'ai pas à coder, car je suis vraiment une bille, et je n'ai pas le temps de m'y pencher...
D'où l'idée de monter une fois pour toute (avec un peu d'aide ?!) un fichier qui me servirait de gabarit, avec une barre de lecture adaptée à la timeline.
Le fichier ci-dessus pourait d'ailleurs être une bonne base.




Répondre à ce sujet



  

1 utilisateur(s) li(sen)t ce sujet

0 membre(s), 1 invité(s), 0 utilisateur(s) anonyme(s)

authorised training centre

Centre de Formation Mediabox - Adobe et Apple Authorised Training Center.

Déclaré auprès de la Direction du Travail et de la Formation Professionnelle

Mediabox : SARL au capital de 62.000€ - Numéro d'activité : 11 75 44555 75 - SIRET : 49371646800035

MEDIABOX, 23, rue de Bruxelles, 75009 PARIS

FFP