Juillet 2008
Wink est un logiciel gratuit permettant la création de tutoriel et didacticiel en Flash à partir de capture vidéo d'écran.
Les étapes permettant d'obtenir la présentation Flash sont :
- capture des frames
- annotation, modification des frames
- définition des options de génération
- génération de l'animation
Sommaire |
1 Introduction
Wink propose de rajouter à l'animation une barre de contrôle, celle-ci est placée sous la capture d'écran.
Wink propose 3 barres de contrôles :
- cartoon_cream
- rounded_green
- simple_silver
et donne la possibilité d'en créer de nouvelles, c'est l'objet de cet article.
Nous n'allons pas utiliser l'interface graphique de Wink mais travailler directement au niveau fichier, la version de Wink étudiée est la 2.0 build 1060 sous Windows XP.
2 Définition d'une Barre de Contrôle dans Wink
Wink stocke la définition des barres de contrôles dans %ProgramFiles%\DebugMode\Wink\FlashControlBars, chaque barre correspond à un fichier .wfc qui à une structure XML :
<FlashControlBar>
<PlayNormal value="" use="1" />
<PlayMouseOver value="" use="1" />
<PlayPressed value="" use="1" />
<PauseNormal value="" use="1" />
<PauseMouseOver value="" use="1" />
<PausePressed value="" use="1" />
<ProgressLeft value="" use="1" />
<ProgressRight value="" use="1" />
<ProgressThumb value="" use="1" />
<ProgressEmptyMiddle value="" use="1" />
<ProgressFilledMiddle value="" use="1" />
</FlashControlBar>
Les attributs value correspondent à une image utilisée (ou non use) pour générer la barre de contrôle.
La barre est constituée :
- d'un bouton
<Play.../> et <Pause../>qui correspond à l'état de la barre (Play ou Pause) - d'une jauge
<Progress... />
| bouton | jauge |
Les images correspondantes sont dans un dossier portant (par convention) le nom de la barre dans %ProgramFiles%\DebugMode\Wink\FlashControlBars.
Nous allons définir pour chaque balise un nom d'image générique et donc un .wfc facilement réutilisable.
La définition de la jauge étant statique nous la créerons en premier.
2.1 La Jauge
Elle est constituée par l'assemblage horizontal des images <Progress...> sur lesquelles vient s'ajouter <ProgressThumb...>.
Les différentes balises correspondent dont l'ordre d'assemblage :
| Balise | Jauge | Nombre | Nom Image |
|---|---|---|---|
ProgressLeft
| Gauche de la jauge | 1 fois | jauge-gauche |
ProgressFilledMiddle
| Animation Lue | 0 à x fois | jauge-lue |
ProgressThumb
| Curseur de lecture de l'animation | 1 fois | jauge-curseur |
ProgressEmptyMiddle
| Animation Non Lue | 0 à y fois | jauge-nonlue |
ProgressRight
| Droite de la jauge | 1 fois | jauge-droite |
2.2 Le Bouton
Le bouton correspond à une seule image qui varie en fonction de :
- état de la barre (Lecture ou Pause)
- position du curseur de la souris (Survol ou non du bouton)
- appuie sur le bouton gauche de la souris
Le nom de nos images ne va pas correspondre à celui des balises car nous avons choisi de :
- présenter l'état actuel de la barre quand le curseur ne "survol" pas le bouton
- proposer le changement d'état de la barre quand le curseur le "survol" le bouton
ce qui ne correspond pas à ce que Wink propose.
Notre diagramme d'états-transistions est le suivant :
soit les correspondances suivantes avec les balises Wink :
| Balise | Etat Barre | Souris.Curseur/Barre.Bouton | Souris.Bouton | Nom Image |
|---|---|---|---|---|
PlayNormal
| Pause | NON(Survol) | NON(Appui) | bouton-en-pause |
PlayMouseOver
| Pause | Survol | NON(Appui) | bouton-lecture-proposée |
PlayPressed
| Pause | Survol | Appui | bouton-lecture-validée |
PauseNormal
| Lecture | NON(Survol) | NON(Appui) | bouton-en-lecture |
PauseMouseOver
| Lecture | Survol | NON(Appui) | bouton-pause-proposée |
PausePressed
| Lecture | Survol | Appui | bouton-pause-validée |
3 Notre Barre de Contrôle Wink
3.1 Notre modele.wfc
Nous allons définir un modele.wfc générique qui permettra de générer différentes barres par un simple chercher/remplacer tout du nom du dossier :
<FlashControlBar>
<PlayNormal value="modele\bouton-en-pause.gif" use="1" />
<PlayMouseOver value="modele\bouton-lecture-proposee.gif" use="1" />
<PlayPressed value="modele\bouton-lecture-validee.gif" use="1" />
<PauseNormal value="modele\bouton-en-lecture.gif" use="1" />
<PauseMouseOver value="modele\bouton-pause-proposee.gif" use="1" />
<PausePressed value="modele\bouton-pause-validee.gif" use="1" />
<ProgressLeft value="modele\jauge-gauche.gif" use="1" />
<ProgressFilledMiddle value="modele\jauge-lue.gif" use="1" />
<ProgressThumb value="modele\jauge-curseur.gif" use="1" />
<ProgressEmptyMiddle value="modele\jauge-nonlue.gif" use="1" />
<ProgressRight value="modele\jauge-droite.gif" use="1" />
</FlashControlBar>
3.2 Nos Images
Voici les images qui nous allons utiliser pour construire notre barre. Elles sont créées uniquement dans le but d'illustrer de manière la plus claire possible cet article (design simple).
| Jauge | Image | Taille | Remarque |
|---|---|---|---|
| jauge-gauche | 
| 16 x 30 | - |
| jauge-lue | 
| 10 x 30 | - |
| jauge-curseur | 
| 6 x 30 | fond transparent |
| jauge-nonlue | 
| 10 x 30 | - |
| jauge-droite | 
| 16 x 30 | - |
| Bouton (Etat) | Image | Taille | Remarque |
|---|---|---|---|
| bouton-en-pause | 
| 30 x 30 | - |
| bouton-lecture-proposée | 
| 30 x 30 | - |
| bouton-lecture-validée | 
| 30 x 30 | - |
| bouton-en-lecture | 
| 30 x 30 | - |
| bouton-pause-proposée | 
| 30 x 30 | - |
| bouton-pause-validée | 
| 30 x 30 | - |
3.3 Installation de notre Barre
Le fichier F2lt_Exemple_FlashControlBars_Wink.zip regroupe :
- le fichier
f2lt_exemple.wfc - le dossier
\f2lt_exemple
Il suffit donc de :
- télécharger : F2lt_Exemple_FlashControlBars_Wink.zip
- le décompresser dans
%ProgramFiles%\DebugMode\Wink\FlashControlBars
pour que la barre soit installée.
On peut ensuite essayer différentes variantes :
- utiliser ou non le curseur
- ne pas faire le distinguo entre la jauge lue et non lue
- proposer directement un changement d'état sur le bouton sans afficher l'état actuel
- ne pas utiliser l'état Appuyé...
à partir de l'interface graphique :
Quelques précisions sur la traduction :
- Miniature = Curseur de la jauge
- Vider le milieu = Jauge non lue (à droite)
- Remplir le milieu = Jauge lue (à gauche)
3.4 Wink Erreur : Impossible de charger l'image ...
Il est fort possible que durant vos essais Wink vous gratifie du message suivant :
Wink Erreur : Impossible de charger l'image du fichier '...DebugMode\Wink\FlashControlBars\barre\nom-image' : le fichier n'existe pas
L'animation ne pourra être générée si vous utilisez la barre concernée, il faut :
- soit corriger le nom-image
- soit mettre à blanc le nom de l'image dans le .wfc :
<balise value="" .../>(use="0" ne suffit pas) et il est impossible de le faire à partir de l'interface graphique de Wink
4 Tutoriel Wink d'Installation de notre Barre (FlashControlBars)
Voici un premier exemple d'utilisation.
Ce tutoriel réalisé avec Wink :
- utilise notre barre f2lt_exemple
- décrit par l'image et le son l'installation cette même barre