Discussion :

[Ninnon]

Bonjour.
Je suis toute nouvelle sur ce forum et comme utilisatrice de FB3.

Je cherche en ce moment à réaliser une barre de progression.
En cherchant sur le net, j'ai pu voir qu'il fallait utiliser un "HSlider" et
non une "progressBar".

Cependant, je ne sais pas du tout comment m'y prendre . Par exemple pour le label qu'il servira à afficher le timer...

Quelqu'un a-t-il déjà utilisé un HSlider qui peut être déplacé (et permettre aussi
d'avancer ou de reculer la vidéo)?

Merci d'avance (dites moi si vous n'avez pas compris mon message).

[Jim_Nastiq]

la classe progressBar est comme son nom l'indique faite pour être utilisée en tant que barre de progression!
Sinon tu peux dessiner à la volée ton rectangle de progression en AS3 en jouant sur sa largeur, en le créant comme ceci par exemple

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
this.graphics.beginFill(color);  
this.graphics.drawRect(xPos,yPos,rWidth,rHeight);  
this.graphics.endFill();

Il est certes possible d'utiliser un Hslider mais c'est moins propre et surtout le comportement n'est pas réellement celui d'une barre de progression. Cependant, si tu souhaites tout de même utiliser ce HSlider, regarde la documentation pour faire bouger le curseur(propriété value) : documentation Flex
Il en est de même pour la progressBar, je t'invite d'abord à effectuer tes recherches et des petits tests pour mieux comprendre comment cela fonctionne et ensuite revenir vers nous avec un cas concret qui te pose problème.
Te donner la solution clé en main ne t'aidera pas a comprendre et apprendre le monde Flex

[Ninnon]

la classe progressBar est comme son nom l'indique faite pour être utilisée en tant que barre de progression!
Sinon tu peux dessiner à la volée ton rectangle de progression en AS3 en jouant sur sa largeur, en le créant comme ceci par exemple

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
this.graphics.beginFill(color);  
this.graphics.drawRect(xPos,yPos,rWidth,rHeight);  
this.graphics.endFill();

Il est certes possible d'utiliser un Hslider mais c'est moins propre et surtout le comportement n'est pas réellement celui d'une barre de progression. Cependant, si tu souhaites tout de même utiliser ce HSlider, regarde la documentation pour faire bouger le curseur(propriété value) : documentation Flex
Il en est de même pour la progressBar, je t'invite d'abord à effectuer tes recherches et des petits tests pour mieux comprendre comment cela fonctionne et ensuite revenir vers nous avec un cas concret qui te pose problème.
Te donner la solution clé en main ne t'aidera pas a comprendre et apprendre le monde Flex

Merci déjà de ta réponse.
Tout d'abord, avant de poster sur ce forum, j'avais déjà effectuer
mes propres et je vois à peu près comment fonctionne une progressBar
et HSlider (je ne connais pas encore tout mais le principale).
Mais comme tu le dis toi même, leur comportement se sont pas les mêmes.
Les propriétés d'une progressBar sont bcp plus intéressantes.
J'aimerai me rapprocher des barres de progressions façon YouTube ou Dailymotion ou tout autre player que l'on peut trouver actuellement.

Voici mon code:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" cornerRadius="17" borderStyle="inset" themeColor="#00FF8A" borderColor="#BCB7BC">
 
 
    <mx:Style>
        ProgressBar {
            barColor: red;
            bar-skin:ClassReference("mx.skins.halo.ProgressBarSkin");
             track-skin: ClassReference("mx.skins.halo.ProgressTrackSkin");
            track-colors : black; 
 
        }
 
 
    </mx:Style>
 
    <mx:Script>
        <![CDATA[
        import flash.media.Sound;
        import flash.display.StageDisplayState;
        import flash.display.Stage;
        import flash.events.MouseEvent;
        import flash.events.SecurityErrorEvent;
 
        import mx.events.VideoEvent;
        import mx.controls.Alert;
        import mx.controls.ProgressBar;
        import mx.events.ResizeEvent;
 
 
            // Permet de lancer la vidéo ou de mettre pause
            private function changeMode():void {
            if(!myvideo.playing) {
                  btn_mode.label = "Pause";
                 myvideo.play();
 
            }
            else {
                  btn_mode.label = "Play";
                  myvideo.pause();
            }}
 
            // Permet d'afficher le temps total de la vidéo et le temps imparti
            private function updatePlayer(event:VideoEvent):void {
 
            progression.setProgress(myvideo.playheadTime, myvideo.totalTime);
            progression.visible=true;
 
 
            var min : int = Math.floor(myvideo.playheadTime/60);
            var sec : int = Math.floor(myvideo.playheadTime%60);
            var currentTime : String = String(min)+':'+ ( sec<=9 ? "0"+String(sec) : String(sec) );
 
            var min_tt : int = Math.floor(myvideo.totalTime/60);
            var sec_tt : int = Math.floor(myvideo.totalTime%60);
            var totalTime : String = String(min_tt)+':'+ ( sec_tt<=9 ? "0"+String(sec_tt) : String(sec_tt) );
 
            progression.label= currentTime + ' / ' + totalTime;
 
            }
 
            // gère le volume
            private function changeVolume():void{
            }
 
            // gère le mode "FULL SCREEN" et "NORMAL"
 
             private function init(evt:Event):void {
                /* Full screen handler. */
                Application.application.stage.addEventListener(FullScreenEvent.FULL_SCREEN, fullScreenHandler);
                dispState = Application.application.stage.displayState;
            }
 
             private function fullScreenHandler(evt:FullScreenEvent):void {
                dispState = Application.application.stage.displayState + " (fullScreen=" + evt.fullScreen.toString() + ")";
                if (evt.fullScreen) {
                    /* Met en mode plein écran */
                   stage.displayState=StageDisplayState.FULL_SCREEN;  
                } else {
                    /* Met en mode "NORMAL" */
                    stage.displayState=StageDisplayState.NORMAL; 
                }
            }
 
             private function toggleFullScreen():void {
                try {
                    switch (Application.application.stage.displayState) {
                        case StageDisplayState.FULL_SCREEN:
                            /* Si c'est déjà en mode plein écran, switcher en mode normal*/
                            Application.application.stage.displayState = StageDisplayState.NORMAL;
                            break;
                        default:
                             /* Si ce n'est pas en mode plein écran, switcher en mode plein écran*/
                            Application.application.stage.displayState = StageDisplayState.FULL_SCREEN;
                            break;
                    }
                } catch (err:SecurityError) {
                    // ignore
                }
            }     
 
        ]]>
    </mx:Script>
 
     <mx:String id="dispState" />
 
 
 
    <mx:HBox  width="100%" height="100%">
          <mx:Panel title="MCE Video Player" x="123" y="68" cornerRadius="10" width="100%" height="100%" >
 
 
                  <mx:VideoDisplay id="myvideo"
                  width="100%" height="100%" y="157" x="85" borderStyle="solid" cornerRadius="13"
                  source="Beyonce - Diva.flv" autoPlay="false" playheadUpdate="updatePlayer(event)"
                  volume="{slider.value}"/>
 
              <mx:ControlBar height="55">
                        <mx:Button id="btn_mode" label="Play" click="changeMode()" styleName="button"
                        width="65"  fillAlphas="[0.57, 0.81, 0.81, 0.81]" borderColor="#B7B7BC"/>
 
 
                        <mx:ProgressBar id="progression" width="100%" mode="manual" minimum="0" maximum="0"
                        label="0:00/0:00" labelPlacement="right"
                        direction="right"
                          borderColor="#567E9B" themeColor="#312EB6" alpha="0.42"
                       />
 
 
                        <mx:HSlider id="slider"
                        minimum="0.0"
                        maximum="1.0"
                        value="0.7"
                        snapInterval="0.01"
                        tickInterval="0.1"
                        liveDragging="true"   width="114"/>
 
                        <mx:Button label="Z" width="31" borderColor="#B7B7BC"
                            click="toggleFullScreen()"/>
 
 
 
              </mx:ControlBar>
 
       </mx:Panel>
 
    </mx:HBox>
</mx:Application>

Et au niveau de la progressBar, j'ai pu lire que l'on pouvait la faire fusionner avec un Slider (child) à l'aide d'une costum class. Mais je n'y arrive pas...