Forums Développement Multimédia

Les formations Mediabox
Les formations Mediabox

Barre de Progression de temps

Compatible Director. Cliquer pour en savoir plus sur les compatibilités.Par Leedoriden, le 04 2004

Pour réaliser cet effet, il faut juste 4 éléments :

  • un script de comportement
  • 2 images ( barre de progression et l'arrière plan ( le back progress bar ))
  • et le dernier, un acteur texte


Ces deux méthodes qui vous sont présentées, décrivent le temps écoulé ( Méthode 1 ) et le temps restant ( Méthode 2 )


Méthode N°1 ( temps écoulé )

La barre de progression se présente ainsi 1.jpg
on place notre point d'alignement dans le coin supérieur en haut à gauche, ce qui équivaut en lingo à sprite(me.spritenum).regpoint = point(0,0)

Sa taille est de 100 pixels, car cela simplifie grandement les choses ;-), nous le verrons dans le code pourquoi


le back progress bar ( peut être de la forme que vous voulez ) 2.jpg


L'acteur texte quant à lui, nous servira pour l'affichage du temps écoulé ou restant selon la méthode choisie.
Dans la méthode 1, ça sera le temps écoulé qui sera utilisé.

On place notre back progress sur la piste numéro 1 par exemple

vient s'ajouter par dessus ( piste 2 ), la barre de progression, comme ceci 3.jpg

On sélectionne la barre de progression pour modifier sa largeur et la fixer à 0 (zéro) 4.jpg

Placez maintenant l'acteur texte sur la piste 3, à l'endroit de votre choix sur la scène (stage)

Voilà, la mise en place des éléments graphiques est terminée, il nous manque plus que la partie script
chose que je vais décrire maintenant

script de comportement placé sur le scénario (Timeline) en script de frame

-- Time ProgessBar
-------------------------------------------
-- Developped by Laurent Leedoriden
-- Copyright © 1996 - 2004 Leedoriden DSFW
-- All rights reserved
-- created : 04/20/2004
-- last updated :
-------------------------------------------
-- Version : 1.0.0
-------------------------------------------
property pDelay
 
on beginsprite
  pDelay = 30 -- tps en secondes
  starttimer -- on lance le timing
  the floatprecision = 0 -- on garde un nombre entier pour l'acteur texte
end
 
on exitframe  
 
  -- décompte du Timer,  une fois Timer atteint on stoppe       
  if float(the timer) > (float(pDelay) * float(60)) then
    --
  else
    -- progression de la progressbar // 100 = largeur de la progressbar
    -- progression de 0 à 100         
    sprite(2).width = 100 / ((float(pDelay) * float(60)) / float(the timer))
 
    -- afficher le nb de sec écoulées
    TempsEcoule = pDelay / ((float(pDelay) * float(60)) / float(the timer))    
    -- on affiche un 0 (zéro) si le chiffre est < à 10
    if TempsEcoule < 9.5 then TempsEcoule = "0"&TempsEcoule     
    member("temps ecoule").text = string("Temps écoulé"&&TempsEcoule&&"sec")
 
  end if  
 
  go(_movie.frame)
end


Remarque :
Pourquoi avoir mis 9.5, tout simplement car si le temps écoulé est inférieur à 10, la variable TempsEcoule affiche bien 09
si j'avais mis < 9 ou même < 9.0, le résultat serait affiché comme ceci Temps écoulé 9 sec puis de suite Temps écoulé 09 sec
et non Temps écoulé 09 sec dès la première fois, nous aurions donc eu, un saut dans l'affichage du temps.
Pas très esthétique et encore moins pro :-(
Le décompte commence à 00 sec pour finir à 30 sec

Résultat final de la méthode 1:
5.jpg


Méthode N°2 ( temps restant )

Pour la méthode 2, j'ai voulu afficher le temps restant et aussi modifier un peu les couleurs du back progress bar pour avoir un dégradé
une façon de bien différencier les deux types de progression du temps.

Cette fois, on place le point d'alignement ( le regpoint ) de notre barre de progression sur le côté supérieur droit de l'image
Sa largeur sur la scène reste inchangée ( soit largeur = 100 pixels ) comme cette image 6.jpg

Notre back progress bar avec son nouveau look 7.jpg
on vérifie la superposition des deux images pour éviter tout décalage disgracieux

Le script de comportement (toujours placé sur le scénario) diffère un peu, mais très ressemblant au premier

-- Time ProgessBar
-------------------------------------------
-- Developped by Laurent Leedoriden
-- Copyright © 1996 - 2004 Leedoriden DSFW
-- All rights reserved
-- created : 04/20/2004
-- last updated :
-------------------------------------------
-- Version : 1.0.0
-------------------------------------------
property pDelay
 
on beginsprite
  pDelay = 30 -- tps en secondes
  starttimer -- on lance le timing
  the floatprecision = 0
end
 
on exitframe  
 
  -- décompte du Timer,  une fois Timer atteint on stoppe       
  if float(the timer) > (float(pDelay) * float(60)) then
    --
  else  
 
    -- progression de 100 à 0 // 100 === > 0     
    sprite(6).width =  100 - (100 / ((float(60) * float(pDelay)) / float(the timer))) 
 
    -- affiche le nb de sec restantes
    TempsRestant = pDelay - (pDelay / ((float(pDelay) * float(60)) / float(the timer)))
 
    -- on affiche un zero si TempsRestant est < à 10
    if TempsRestant < 9.5 then TempsRestant = "0"&TempsRestant    
    member("temps ecoule").text = string("Temps restant"&&TempsRestant&&"sec")    
 
  end if  
 
  go(_movie.frame)
end

Remarque :
Pour que notre barre de progression se rétracte et non comme précédemment s'élargisse,
on soustrait 100 de sa largeur de départ ( sprite(6).width = 100 - ( 100 / …. ) ) qu'on divise ensuite par 100 pour le bon déroulement de la progression
( je devrais même dire “rétractation” de la barre de progression ) Le décompte commence à 30 sec pour finir à 00 sec

Résultat final de la méthode 2 :
8.jpg

Ceci nous donne l'impression que le dégradé s'incrémente or c'est bien la barre de progression qui se rétracte ;-)


Voilà, les barres de progressions de temps en images n'ont plus de secret pour vous.


Tutorial by Laurent Leedoriden