QuickTime et les Text Descriptors
Cliquez sur ce film QuickTime (à la fin) et - si
c'est bien le plug-in QuickTime qui gère son affichage
dans votre navigateur - voyez le résultat ! (et si
ça marche pas lisez ça
)
À l'heure ou la version 4 de QuickTime est rendue
publique par Apple, il n'est sans doute pas inutile de rappeler
l'une des nombreuses fonctionnalités de ce formidable
outil. Ici, le Crapo créé ou modifie une vidéo
QuickTime afin d'obtenir que d'un clic, elle commande au
navigateur. Dotez-vous vite de la version Pro ou version
enregistrée de QuickTime 3 et suivez nous...
Crée une piste texte
Notre travail commence dans un éditeur de texte
quelconque, simpleText ou le bloc-notes de Windows. Nous
allons saisir le code permettant de créer une piste
texte dans MoviePlayer. Le fichier à produire doit
respecter une syntaxe très stricte. Tout d'abord,
il doit débuter par le descripteur {QTtext} qui seul
permet de distinguer ce fichier d'un texte normal. Suivent
alors, dans un ordre indifférent, une série
de balises entourées par des accolades, les "Text
Descriptors", qui déterminent les propriétés,
le formatage et le déroulement de la piste. Le fichier
contiendra aussi des "Time Stamps" ou repères temporels.
MoviePlayer interprétera ces marqueurs lors de l'importation
du fichier. Voici un exemple simple de fichier importable :
{QTtext} {font:Times} {timeScale:30} {width:160}
{height:20}
{timeStamps:absolute} {language:0}
[00:00:00.00]
zero
[00:00:00.15]
plus
[00:00:01.00]
zero
[00:00:01.15]
égale
[00:00:02.00]
{textColor:65535,63535,0}la tête à toto
[00:00:02.15]
Le fichier doit finir par un retour chariot. Dans MoviePlayer,
on importe le texte par Fichier/Importer... MoviePlayer
va nous demander d'enregistrer ce nouveau fichier ("monTexte
- Séquence") et créer un drôle de film
QuickTime ne contenant qu'une piste texte. On obtient l'animation
suivante :
Ici toute les demi secondes (30/2 = 00.15) un texte différent
s'affiche dans la police, la couleur et le corps demandés.
Un tel résultat, dira-t-on, peut être obtenu
également en ajoutant des bribes de texte aux images
d'une vidéo "normale" via la commande "Édition/Ajouter"
de MoviePlayer Pro (Rappelons que cet article de menu ne
peut être obtenu que par Option/Alt clic sur le menu
Édition).
L'édition manuelle des Text Descriptors ne se justifie
que si l'on en veut plus. C'est notre cas...
Les principaux "Text Descriptors" de QuickTime
Un peu à la manière des balises HTML les
descripteurs doivent précéder le texte qu'il
formatent. A coté de "balises" qui ne demandent pas
de longs commentaires telles que :
{font:Geneva}
{size:12}
{bold} ou
{italic},{shadow}, {condense},etc
{justify:left} ou
{justify:center}...
{textColor:65535,63535,65535}
ou {textColor:63535,0,0} pour
du rouge (mode RVB, valeur décimale/16 bits ou 2562)
{anti-alias:on} idéal
pour ralentir l'animation !
{width:200} et {height:100}
qui définissent les dimensions de la piste. Une valeur
de zéro forçant une dimension automatique.
{shrinkTextBox:on} qui ajuste
les dimensions de la zone de texte à celui-ci.
D'autres descripteurs méritent notre attention.
{backColor:65535,63535,65535}
détermine la couleur de fond de la piste texte, ici
du blanc.
{keyedText:on} ou {keyedText:off}
crée un masque pour le fond et permet ainsi l'insertion
du texte sur une autre piste.
{hilite: 5, 7}
met en surbrillance les caractères 5 à 7
inclus. Aussi {hiliteColor:32000,0,65535}
qui change la couleur de mise en surbrillance.
{dropShadow:on}
Eh oui ! QuickTime sait faire de vraies ombres portées,
les placer au pixel près grâce à {dropShadowOffset:2,
3} et même contrôler leur transparence
sur 255 valeurs ! {dropShadowTransparency:
128}. Rien à voir avec le style "Shadow" (voir
plus haut).
{scrollIn:on}
fait défiler le texte jusqu'à afficher sa
fin. {scrollOut:on} chasse
le texte jusqu'au dernier mot. Les descripteurs liés
à ceux-ci sont {horizontalScroll:on}
et {reverseScroll:on} qui inverse
le sens du défilement quel qu'il soit.
Enfin il faut mentionner quelques-uns des marqueurs plus
techniques comme :
{timeStamps:absolute}
Les indicateurs temporels sont par défaut référés
au début de la piste, ou au time Stamp précédent
avec {timeStamps:relative}.
A noter : un piste QuickTime ne commence pas forcément
avec le début du film. Par conséquent, même
avec {timeStamps:absolute}
les indicateurs n'indiquent pas nécessairement un
timing absolu (depuis le début du film).
{timeScale: 30}
qui détermine les fractions de secondes affichés
par les time Stamps. Avec {timeScale:
25}, on divise une seconde en 25 images (PAL/SÉCAM).
MoviePlayer lui divise les secondes par 30.
Crée un générique défilant
Nous voilà en mesure de créer une animation
plus intéressante ! Nous reprenons notre éditeur
de texte et nous saisissons le texte ci-dessous (sauts de
lignes compris) :
{QTtext} {font:Times} {italic} {size:36} {textColor:
13379, 49806, 11457} {backColor: 0, 0, 0} {justify:center}
{timeScale:30} {width:400} {height:136} {timeStamps:absolute}
{language:0} {textEncoding:0} {scrollIn:on}
[00:00:00.00]
Cette animation a été réalisée
à l'aide de simpleText et de MoviePlayer.
La création d'un fichier texte contenant
Text Descriptors et time Stamps est très simple
!
Cette animation pèse moins d'un kilo-octet !
© Le CrapoWeb - 1999
{font:Arial} {bold}http://crapo.citeweb.net/
{font:Times} {textColor: 0, 0, 0} {size:14}Clic !
[00:00:08.00]
Un fois le texte enregistrée et importée
dans MoviePlayer, on obtient notre film. Il ne pèse
pas bien lourd vu ses dimensions et sa durée : 453
octets pour 8 secondes ! Ce film ("générique.mov")
vous pouvez le voir en haut de cette page.
Rendre le film interactif (Ajout
d'une deuxième piste)
Important : La manipulation
qui suit N'AURA PAS D'EFFET si dans votre navigateur, un
autre plug-in que QuickTime prend en charge les fichier
.MOV. C'est le plug-In QuickTime qui sera l'intermédiaire
entre notre film et le navigateur. Afin que votre navigateur
fasse appel au bon plug-in, faites le ménage dans
le dossier Plug-ins ! Une fois le plug-in en place pour
accueillir nos film... on peut commencer.
Pour rendre notre film interactif, c'est-à-dire
par exemple pour obtenir qu'un clic sur une image commande
l'ouverture d'une fenêtre, c'est encore d'une piste
texte que nous allons nous servir. Une deuxième piste
parallèleà la première, contenant des
instructions. Quand le film multipistes resultant sera affiché
par le navigateur, le plug-in QuickTime interpretera ces
instructions.
Ceux d'entre nous qui ont détruit le fichier texte
dont nous nous sommes servi la première fois n'ont
pas à ressaisir tous les descripteurs ! MoviePlayer
peut très bien en effet exporter une piste intégrée.
La manipulation est intéressante car elle reprend,
en sens inverse, les étapes que nous avons déjà
effectuées :
On ouvre notre générique dans MoviePlayer.
On appelle la commande Fichier/Exporter. Dans le dialogue
d'enregistrement, on choisit "Texte vers Texte" et surtout,
ON CLIQUE SUR LE BOUTON "OPTIONS" qui va nous permettre
d'exporter le texte avec les infos nécessaires.
Nous devons demander l'exportation du texte mais aussi
des "Text Descriptors" et des "Time Stamps" (voir plus haut).
On spécifie aussi un fractionnement des secondes
par 30 pour l'affichage de l'échelle de temps. Cette
options nous évitera des conversions fastidieuses.
Le résultat de notre exportation est un nouveau
fichier texte en tous points semblable au premier saisi.
Évidemment nous allons devoir le modifier . On supprime
d'abord les éléments inutiles de façon
à ne conserver que ce qui suit :
{QTtext}{timeScale:30} {width:400} {height:136}
{timeStamps:absolute} {language:0} {textEncoding:0}
[00:00:00.00]
[00:00:08.00]
Nous allons pouvoir maintenant saisir ici le code nécessaire
au déclenchement d'une action à un instant
donné. Un time Stamps permettra de définir
précisément le début d'une action.
Si l'on veut choisir l'instant avec rigueur, on doit faire
les répèrages préalables dans le générique.
En utilisant la commande Séquence/Lire les infos
(Movie/Get Infos) de MoviePlayer, menu de droite, article
"chrono" (Time) on peut aisément faire ces repérages :
Si nous voulions que le film parvenu à 7 secondes
et demi, cède sa place dans la fenêtre du navigateur
à une autre page Web, nous saisirions dans le fichier
texte :
{QTtext}{timeScale:30} {width:400} {height:136}
{timeStamps:absolute} {language:0} {textEncoding:0}
[00:00:00.00]
[00:00:07.15]
A<http://www.lebeausite.com/unepage.html>
[00:00:08.00]
Attention, les Time Stamps ont un format un peu particulier :
crochet ouvrant - deux chiffres - deux points - deux chiffres
- deux points - deux chiffres - UN SEUL POINT - deux chiffres
ou plusieurs selon le timeScale choisi.
Le A majuscule indique un changement d'adresse automatique.
Sans le A, l'utilisateur devra cliquer pour obtenir le déclenchement
de l'action par le plug-in du navigateur.
Afin d'obtenir l'ouverture de l'URL dans une autre fenêtre,
on peut spécifier la cible :
[00:00:07.15]
A<http://www.lebeausite.com/unepage.html> T<_blank>
ou encore quand on utilise des frames :
[00:00:07.15]
A<http://www.lebeausite.com/unepage.html> T<maFenetreCadreDeGauche>
Et bien sûr, si l'on peut lancer une requête
URL au navigateur, il est possible aussi d'appeler une fonction
JavaScript ! Cette fonction peut-être déclarée
dans la page HTML intégrant le film et seulement
appelée par QuickTime comme ici, ou encore directement
être définie dans le descripteur.
{QTtext}{timeScale:30} {width:400} {height:136}
{timeStamps:absolute} {language:0} {textEncoding:0}
[00:00:00.00]
[00:00:07.15]
<javascript:faisCeQuonTeDit()>
[00:00:08.00]
Au clic et seulement au clic, a partir de la 7,5 ème
seconde du film, le plug-in appellera la fonction JavaScript
"faisCeQuonTeDit()"
Notre fichier texte peut dès lors être enregistré.
voyons maintenant comment nous l'intégrons sous forme
de piste additionnelle au générique.
Ajouter une piste HREF
Pour convertir notre fichier texte en piste de texte, on
l'importe dans MoviePlayer par Fichier/Importer. si l'on
joue la séquence que l'on obtient alors, on obtient
un écran noir pendant 7 secondes puis l'on voit apparaître
l'écran qui suit. Aucun intérêt !
Pour ajouter cette séquence sous forme de piste
supplémentaire à notre premier film "générique.mov",
on se place au début et l'on appelle Édition/Tout
sélectionner, puis l'on fait Édition/Copier.
On ferme alors la séquence et l'on ouvre "générique.mov".
La copie que l'on vient de faire et le film du générique
ont normalement la même durée et l'on va pouvoir
de ce fait exactement les superposer. On affiche la première
image du générique puis on appelle Édition/tout
sélectionner. Avec la touche Option/Alt enfoncée,
Edition/Ajouter (Add). Une nouvelle piste texte vient se
placer par dessus la première et la masque.
Afin que le plug-in QuickTime soit attentif aux instructions
qu'elle contient, nous devons d'abord renommer cette deuxième
piste texte. Menu Séquence/Lire les infos. On sélectionne
la piste dans le menu pop-up à gauche, puis l'article
Généralités à droite. Clic sur
"Modifier le nom". Le nom de cette piste interactive DOIT
être "HREFTrack".
Ensuite, pour que cette piste n'apparaissent pas on l'a
désactive vie le menu Édition/Activer les
pistes... Contrairement aux apparence, cette manipulation
a pour seul effet de rendre la piste invisible mais ne la
désactive pas.
On enregistre notre travail PAR FICHIER/ENREGISTRER SOUS...
afin de créer une séquence autonome et l'on
peut dès lors quitter MoviePlayerPro.
Nota : Les manipulations que nous venons de mettre en uvre,
à savoir, la création d'une piste HREF et
son ajout à une vidéo QuickTime peuvent être
effectués quelque soit le type de la vidéo
(piste texte, piste vidéo, piste de sprites ou tout
cela ensemble!). Ajoutons que pour créer une vidéo
QuickTime, point n'est besoin d'une caméra et d'une
carte de capture vidéo. De nombreuses applications
savent exporter un fichier .MOV. On peut très bien
aussi utiliser Director pour créer une mini vidéo.
L'article Exporter du menu Fichier de Director offre tout
ce qu'il faut.
Insérer le film dans la page HTML
L'insertion d'une vidéo QuickTime dans une page
HTML ne requiert qu'un peu de code mais nous devons aussi
penser à déclarer la fonction que notre film
appellera. Nous rédigeons le code HTML de la sorte :
<HTML><HEAD><SCRIPT LANGUAGE="JavaScript">
function faisCeQuonTeDit() {
crapo= window.open("","pub","width=200,height=200");
crapo.document.write("<HTML><BODY BGCOLOR='Forestgreen'><CENTER>");
crapo.document.write(" <H2><FONT COLOR='white'>Le
CrapoWeb</FONT>");
crapo.document.write("</H2>C'est depuis deux ans<BR>");
crapo.document.write(" <blink><font color='Yellow'>CHAQUE
JOUR</font>");
crapo.document.write("</blink><P>16 Mo transferés<BR>Plus
de 40 visiteurs !<P>");
crapo.document.write("Venus du monde entier<P>");
crapo.document.write(" <P>LeCrapoWeb<BR><a
href='http://crapo.citeweb.net/' TARGET=_blank>");
crapo.document.write("http://crapo.citeweb.net/</A></CENTER>");
crapo.document.write(" </BODY></HTML>");
crapo.document.close();
}
</SCRIPT></HEAD><BODY BGCOLOR=white>
<EMBED SRC="generik.mov" PLUGINSPAGE="http://quicktime.apple.com"
WIDTH=400 HEIGHT=136 CONTROLLER=true LOOP=false AUTOPLAY=false>
</BODY>
</HTML>
La page enregistrée à coté du fichier
.MOV, on peut l'ouvrir dans le navigateur et... laisser
faire QuickTime !
Dans un article ancien l'on explicait
déjà la manipulation des pistes de QuickTime.
|