«

»

Fév 15 2015

WINK : Réaliser des tutoriels en flash

wink

Auteur : Eric JOURDAN – Professeur de SVT au Lycée Charles Nodier – 39 DOLE

 

1- Présentation :

Diffusé gratuitement sur internet, le logiciel Wink permet de créer des tutoriels et des présentations à partir de captures d’écran.
Une fois l’assistant de création de projet lancé, il suffit de presser la touche « Pause » du clavier pour enregistrer autant d’images clés que souhaité, Wink mémorisant en parallèle les déplacements de la souris.
A la fin de l’enregistrement, le logiciel compile toutes ces informations pour créer une animation flash qui simule l’utilisation de l’ordinateur au cours de la période d’enregistrement.
Les déplacements de souris sont alors visibles et l’animation flash donne l’impression que c’est une petite vidéo qui a été enregistrée à la place des captures d’écran successives.

Lien de téléchargement du logiciel : http://www.debugmode.com/wink/
Dans le cadre du B2I, on peut créer des tutoriels expliquant comment réaliser telle ou telle compétence du B2I.
Lorsqu’un élève est bloqué, il peut consulter le tutoriel lui expliquant comment réaliser la manipulation.

 

2- Présentation et fonctionnement du logiciel :

Francisation du logiciel :
Après installation, lors de la première ouverture du logiciel, on découvre une interface totalement en anglais.
Pour passer en français, cliquer sur [File], puis [Choose Language] et sélectionner French.

wink-en

Pour que le changement de langage soit opérationnel, le logiciel doit être quitté, puis ré-ouvert.
A noter que certaines rubriques et options du logiciel seront encore en anglais, mais cela ne devrait pas trop gêner pour la compréhension du logiciel.

 

 

Paramétrage des préférences du logiciel :
Pour modifier les préférences du logiciel, cliquer sur [Fichier], puis [Préférences] (ou en tapant directement sur la touche [F4]).
La fenêtre des préférences s’affiche à l’écran :

preferences

Ce menu « Préférences » permet notamment de modifier les touches utilisées pour les 3 types de capture :
– Capture à la demande d’image simples (par défaut : touche Pause)
– Capture chronométrée (par défaut touches : Shift + Pause)
– Capture par périphérique (par défaut touches : Alt + Pause)

touche

 

Présentation des outils du logiciel :

menu

nouveau Pour créer un nouveau projet

ouvrir Pour ouvrir un projet existant

sauve Pour enregistrer un projet

pref Pour ouvrir et paramétrer les préférences du logiciel.

annul Pour annuler une action

refaire Pour refaire une action

supprimer Pour supprimer un objet ou une image (frame)

couper Pour couper un objet ou une image (frame)

copier Pour copier un objet ou une image (frame)

coller Pour coller un objet ou une image (frame)

1er Pour afficher la première image capturée (frame)

precedent Pour afficher l’image capturée (frame) précédente

compteur Permet d’afficher le numéro de l’image capturée (frame) visible à l’écran.

suivant Pour afficher l’image capturée (frame) suivante

dernier Pour afficher la dernière image capturée (frame)

palette Pour éditer la palette des couleurs

proprietes Pour afficher les propriétés du projet en cours

generer Pour générer l’animation

visuPour visualiser l’animation dans un navigateur internet

aide Pour afficher l’aide du logiciel

proprietes2

son Pour ajouter un son

image Pour ajouter une image

objet Pour ajouter un objet (flèche, formes, etc…)

texte Pour ajouter une zone de texte

suivant2 Pour ajouter un bouton « page précédente »

precedent2 Pour ajouter un bouton « page suivante »

url Pour insérer un lien URL

goto-page Pour un bouton permettant d’aller vers une page précise

 

 

Création d’un nouveau projet :
Pour créer un nouveau projet d’animation, cliquer sur [Fichier], puis [Nouveau] (ou directement sur l’icône ).
La fenêtre de l’assistant s’affiche à l’écran : le cadre vert délimite la zone de l’écran qui sera utilisé lors de la capture.

assistant1

En déroulant le menu « Fenêtre », on peut alors paramétrer précisément :
– la taille de la fenêtre qui sera utilisée pour la capture
– soit définir l’écran entier pour la capture. Dans ce cas il faudra veiller à ce qu’il n’y ait pas de fenêtres « parasites » : la fenêtre du logiciel de capture et les autres applications ouvertes ne servant pas pour la capture devront donc être réduites.

choix-fenetre

En cliquant sur le bouton [Choisir], l’utilisateur pourra lui-même choisir la taille de la fenêtre servant pour la capture.
Pour cela, placer le pointeur de souris (qui prend l’aspect d’une petite main) sur la barre de titre de la fenêtre choisie (l’ensemble de la fenêtre est alors encadré), puis cliquez sur la barre de titre pour confirmer.
Les quatre coins de la zone de capture apparaissent alors en vert.

selection-fenetre

En cas d’erreur, l’utilisateur peut modifier sa sélection en cliquant une nouvelle fois sur Choisir.

Quelques conseils :
– Vérifier que la case « Commencer par prendre des captures » soit cochée.
– Vérifier que la case « Cacher la fenêtre Wink » soit cochée.
– Vérifier que la case « Record audio » soit décochée. (Vous pouvez bien sûr cocher cette case pour commenter votre présentation, mais cela alourdi considérablement le fichier flash généré).
– Conservez le délai de capture chronométrée par défaut : 4 images par seconde (vous pouvez bien sûr augmenter le nombre d’images par seconde pour améliorer la fluidité de l’animation, mais cela alourdi également le fichier flash généré).

 

Après avoir validé la fenêtre, une 2ème fenêtre de l’assistant s’affiche à l’écran.

assistant2

Elle récapitule les raccourcis clavier correspondant aux 3 modes de capture proposés par le logiciel :
– Capture à la demande : à chaque pression de la touche paramétrée, une capture est réalisée (par défaut, c’est la touche Pause, mais ce réglage peut être modifié).
– Débuter / suspendre la capture chronométrée.
– Débuter / suspendre la capture par périphérique (souris et clavier).

Cliquer sur le bouton [Réduire dans la barre d’icônes].
Le logiciel est tout de même accessible depuis la barre des tâches, à coté de l’heure : icone-barre
Un double clic sur l’icône de Wink permet de réouvrir la fenêtre de l’assistant.
Un clic droit sur l’icône de Wink permet d’avoir un menu d’outils :

menu-icone

 

Personnalisation du projet :
Une fois que la capture est réalisée, l’utilisateur peut personnaliser son projet, en intégrant des vignettes informatives, des boutons, etc…
Voici les principales personnalisations possibles avec le logiciel Wink

projet

En bas du logiciel, les différentes frames (images capturées) apparaissent sous forme de vignettes. Vous pouvez à tout moment, supprimer, permuter, copier ou coller des images capturées.

– Temps d’attente sur l’image capturée :

proprietes2

Pour chaque frame (image capturée), il est possible de spécifier la durée d’attente sur l’image avant que l’animation ne passe à la suivante.
– Gestion du déplacement du curseur

curseur

La zone où se trouve la curseur pour chaque frame (image capturée) est représenté par le symbole curseur1 ou curseur2.
A tout moment, l’utilisateur peut changer la position du curseur en plaçant la zone à l’emplacement voulu.

Pour personnaliser ou modifier la forme du curseur, cliquer sur « Cursor ».
Puis cliquer sur le bouton « properties » properti :

curseur

Sélectionner la forme du curseur et valider en cliquant sur [OK].
– Insertion et personnalisation des boutons « Suivant »

next

Pour insérer un bouton « Suivant », cliquer sur l’icône precedent2:
Placer le bouton « Suivant » à l’endroit désirée sur la frame (image capturée). next-button

Pour personnaliser ou modifier la forme du curseur, cliquer sur « Button: (Next Frame) ».
Puis cliquer sur le bouton « properties » properti2 :

L’utilisateur peut charger sa propre image en guise de bouton suivant.

 

Remarque : les boutons « Précédents » et « Goto frame » fonctionnent sur le même principe.
– Insertion et personnalisation des zones de texte

text

Pour insérer une zone de texte, cliquer sur l’icône  texte:
Placer la zone de texte à l’endroit désirée sur la frame (image capturée).

text2

Pour personnaliser ou modifier la forme de la zone de texte, cliquer sur « Text »
Puis cliquer sur les différents boutons « properties » properti3:

L’utilisateur peut le fond et la forme de la zone de texte parmi une série de formes existantes :

choix-text

L’utilisateur a également la possibilité de créer ses propres zones de texte.
Pour cela, cliquer sur Dupliquer, vous nommer le nouveau bouton.
Cliquer sur Editer, puis changer les couleurs du fond, du texte, selon votre guise. Valider sur OK.

edit-text

Résultat obtenu :

text3

 

– Redimension des frames

redim

Si vous constatez que l’animation est trop grande pour la fenêtre du navigateur, imposant l’utilisation des ascenseurs. Il est donc nécessaire, dans le projet, de modifier la taille des diapositives.

Pour cela, cliquer sur [Projet] puis [redimensionner les frames].

 

 

Générer l’animation :
Une fois le projet entièrement paramétré et sauvegardé, l’utilisateur peut générer son animation flash.

Il est possible de modifier certains paramètres en cliquant sur l’icône proprietes pour faire afficher les options du projet :

Dans ces options, il est possible :
– de modifier le chemin d’enregistrement de l’animation (ainsi que son nom)
– de choisir le type de fichier généré (animation flash .swf, fichier exécutable .exe)
– de choisir l’animation de préchargement.
– de choisir la barre de contrôle de l’animation.

 

chargement
Choix de l’animation de préchargement.

 

barre-controle
Choix de la barre de contrôle de l’animation.

Pour générer l’animation, cliquer sur [Projet], puis, [Générer l’animation]

generation

L’animation créée porte le même nom que le projet et se compose de 3 fichiers :

fichiers

Il suffit de récupérer les 3 fichiers et de les placer dans le répertoire voulu. Pour visualiser l’animation, il faut utiliser le fichier htm.
Si vous souhaitez intégrer l’animation flash (swf) dans une page web, afficher la source du code html afin de récupérer et copier le code html pour les insérer dans la page web.