Mode d`emploi - What`s this button?A Simple Site
Contents
1. e Le premier param tre est le nom du fichier ex cuter e 300 et 120 sont la largeur et hauteur e 9 0 0 est le num ro de version du Flash Player pas d importance e _ Expressinstall lance l installation de Flash Player s il est manquant Note importante il faut indiquer ce fichier si on veut d finir des flashvars ou des param tres ce qui est en g n ral n cessaire Insertion de vid o et sons page 4 Fichier mp3 Exemple code d un exercice Hot Potatoes Voir les explications Voir la pratique Code de l en t te lt The following insertion allows you to add your own code directly to this head tag from the configuration screen gt lt script type text javascript src _private swfobject js gt lt script gt lt script type text javascript gt lt CDATA var params params src _private hbs_mp3player3but swf params movie _private hbs_mp3player3but swf params data _private hbs_mp3player3but swf params codebase _private hbs_mp3player3but swf params wmode transparent params TheSound 060103 starbucks e mp3 params quality high params allowScriptAccess sameDomain params loop false var flashvars flashvars TheSound 060103 starbucks e mp3 swfobject embedSWF _ private hbs_ mp3player3but swf version2 160 20 9 0 0 _private expressinstall swf flashvars params N gt lt script gt Code du corps D2. Insertion de vid o et sons Flash avec swfobject version et JavaScript Mode d emploi pour Hot Potatoes Permet la lecture d animations swf de vid os flv et de fichiers son mp3 Sommaire Insertion de vid o et sons Flash avec swfobject version2 et JavaScript 1 Insertion de vid o et sons Flash avec swfobject version et JavaScript Mode d emploi pour Hot Potatoes Insertion dynamique des objets swf Avantages e C est la m thode la plus simple pour int grer les fichiers Hot Potatoes o Une modification est faire dans l en t te Ensuite il faut une modification pour int grer le player au sous titre ou dans un Reading Text e Le code est aux normes Inconv nient Il faut activer le JavaScript Mais c est obligatoire pour Hot Potatoes Fichiers installer e _Le fichier swfobject js joint l adresse Internet est au d but du fichier e Le fichier expressinstall swf pour charger Flash Player s il est absent livr avec et obligatoire e Pour les mp3 un lecteur mp3 joint un exemple e Pour les flv un lecteur flv joint voir les explications e Votre fichier mp3 flv ou swf Etape 1 Installation e Choisir le r pertoire de destination e Copier les fichiers dans le r pertoire voulu Il faut d cider de l endroit o placer les fichiers pour la gestion des liens hypertextes Dans les exemples j ai plac swfobject js expressinstall swf et le lecteur mp3 dans le m me r pertoire pour simplifier l acc s P
3. TA D claration de l objet param tres suivi des diff rents param tres var params params allowScriptAccess sameDomain params allowfullscreen false D claration de l objet flashvars suivi des diff rentes variables Le mode plein cran est d sactiv displayheight est inf rieur height pour afficher la barre de contr le La lecture d marre automatiquement Notes sur le lecteur var flashvars flashvars width 600 flashvars file cycle_safety flv flashvars shownavigation true flashvars height 360 flashvars displayheight 338 flashvars overstretch fit flashvars showstop true flashvars usefullscreen false flashvars autostart true Cr ation de l objet swf swfobject embedSWF mediaplayer swf version2 600 360 9 0 0 _private expressinstall swf flashvars params n gt lt script gt J ai volontairement indiqu une largeur importante pour le lecteur J ai donc ensuite effectu les modifications de style suivantes lt style type text css gt lt l div LeftContainer width auto limportant position fixed div RightContainer width auto limportant max width 25 gt lt style gt Ainsi la largeur de la zone reading text s adaptera la taille du lecteur avec width auto et position fixed permettra de toujours voir le lecteur m me quand on fait d filer les questions La zone de droite est limit e en largeur pour n
4. ans le sous titre de l exercice j ai ajout Listen lt div id version2 gt Version2 lt div gt Qui affichera Listen et la barre de boutons Et qui appara t dans le code de l exercice comme lt h3 class ExerciseSubtitle gt Listen lt div id version2 gt Version2 lt div gt lt h3 gt Insertion de vid o et sons page 5 Explications La premi re ligne en vert est le marqueur de Hot Potatoes lt The following insertion allows you to add your own code directly to this head tag from the configuration screen gt Ensuite le lien vers le script swfobject js lt script type text javascript src _private swfobject js gt lt script gt Noter le chemin _private Ici tous les utilitaires sont dans ce r pertoire Et j utilise pour les exercices le chemin exercices cat gorie place de l exercice D claration du script lt script type text javascript gt Les signes cabalistiques sont l pour respecter les normes XHTML lt CDATA D claration de l objet param tres suivi des diff rents param tres var params params src _private hbs_mp3player3but swf params movie _private hbs_mp3player3but swf params data _private hbs_mp3player3but swf params codebase _private hbs_mp3player3but swf params wmode transparent params quality high params allowScriptAccess sameDomain params loop false Tous les param tres ne sont sans doute pas n cessair
5. ar contre pour la gestion des liens il vaut mieux placer le lecteur vid o dans le m me r pertoire que l exercice et que le film Etape2 Modification du code html Approche g n rale Dans l en t te il faut e Lier le fichier JavaScript swfobject js e Cr er un script sp cifique variable en fonction du type et des caract ristiques du fichier ex cuter Dans le corps il faut cr er un l ment qui sera remplac par l objet Flash Il faut donc choisir la position de l l ment Pour cela noter que e Le lecteur de son prend peu de place juste une barre magn to o il peut aussi tre masqu e Le lecteur vid o prend plus de place cran o Ilest aussi utile de le redimensionner en fonction de la taille du fichier d origine Facultatif Insertion de vid o et sons page 3 Code placer dans l en t te header 1 Le chargement du fichier swfobject js Bien indiquer le chemin du fichier lt script type text javascript src swfobject js gt lt script gt 2 Le script de d finition de l objet Ici code simple donn en exemple lt script type text javascript gt swfobject embedSWF test swf myContent 300 120 9 0 0 expressinstall swf Code placer dans le corps body lt div id myContent gt 1l faut ex cuter JavaScript lt div gt Explications e Le param tre myContent dans l appel de l objet indique que l l ment d identit myContent est remplacer par l objet
6. ar flashvars flashvars TheSound 060103 starbucks e mp3 swfobject embedSWF _private hbs_mp3player3but swf version2 160 20 9 0 0 _private expressinstall swf flashvars params IN gt lt script gt Et ceci dans le sous titre Listen lt div id version2 gt Version2 lt div gt Ce qu il faut modifier en rouge flashvars TheSound 060103 starbucks e mp3 Mettre le nom de fichier qui convient A contr ler le chemin en bleu _private hbs_mp3player3but swf Indiquer le chemin que vous utilisez En option Le wmode transparent Changer l id et le contenu de la div lt div id version2 gt Version2 lt div gt Noter que si vous changez l id vous devrez aussi modifier swfobject embedSWF _private hbs_mp3player3but swf version2 160 20 9 0 0 _private expressinstall swf flashvars params Insertion de vid o et sons page 7 Fichier fiv Le lecteur utilis est JW FLV MEDIA PLAYER 3 15 Modifications de code d un exercice Hot Potatoes Voir les explications Voir la pratique Code de l en t te lt The following insertion allows you to add your own code directly to this head tag from the configuration screen gt lt script type text javascript src _private swfobject js gt lt script gt lt script type text javascript gt lt CDATA var params params allowScriptAccess sameDomain params allowfullscreen fa
7. e pas tre masqu e par le lecteur Selon les vid os on pourra faire varier ces param tres Insertion de vid o et sons En pratique coller ceci dans Hot Potatoes code ins rer dans l en t te lt script type text javascript src _private swfobject js gt lt script gt lt script type text javascript gt lt CDATA var params params allowScriptAccess sameDomain params allowfullscreen false var flashvars flashvars width 600 flashvars file cycle_safety flv flashvars shownavigation true flashvars height 360 flashvars displayheight 338 flashvars overstretch fit flashvars showstop true flashvars usefullscreen false flashvars autostart true swfobject embedSWF mediaplayer swf version2 600 360 9 0 0 _private expressinstall swf flashvars params gt lt script gt lt style type text css gt lt l div LeftContainer width auto limportant position fixed div RightContainer width auto limportant max width 25 gt lt style gt Et dans reading text Je donne un titre Watch Et je copie lt div id version2 gt Version 2 lt div gt dans la fen tre Ce qu il faut modifier Le nom de fichier en rouge cycle_safety flv Modifications recommand es Et il vaut mieux modifier la taille l ments en bleu Attention largeur et hauteur apparaissent deux fois flashvars width 600 flashvars heig
8. es Mais on est s r que a fonctionne wmode laisse transparaitre la couleur du fond utile s il n est pas blanc D claration de l objet flashvars suivi des diff rentes variables Ici une seule qui indique le mp3 lire var flashvars flashvars TheSound 060103 starbucks e mp3 Cr ation de l objet swf swfobject embedSWF _ private hbs mp3player3but swf version2 160 20 9 0 0 private expressinstall swf flashvars params Balises de fin de fin de script IN lt script gt Par rapport l exemple de base deux s ries de donn es ont t ajout es flashvars et params R sum hbs_mp3player3but swf est un lecteur trois boutons et un curseur qui va jouer le fichier 060103 starbucks e mp3 qui se trouve dans le m me r pertoire que l exercice Insertion de vid o et sons page 6 En pratique coller ceci dans Hot Potatoes code ins rer dans l en t te lt script type text javascript src _private swfobject js gt lt script gt lt script type text javascript gt lt CDATA var params params src _private hbs_mp3player3but swf params movie _private hbs_mp3player3but swf params data _private hbs_mp3player3but swf params codebase _private hbs_mp3player3but swf params wmode transparent params TheSound 060103 starbucks e mp3 params quality high params allowScriptAccess sameDomain params loop false v
9. ht 360 swfobject embedSWF mediaplayer swf version2 600 360 On peut aussi modifier ce qui est en vert Voir ici pour les autres l ments page 9 Insertion de vid o et sons page 10 Exemple fichier swf C est le plus simple Un seul fichier Pas de param tres Exemple code d un exercice Hot Potatoes Code de l en t te lt The following insertion allows you to add your own code directly to this head tag from the configuration screen gt lt script type text javascript src _private swfobject js gt lt script gt lt script type text javascript gt lt CDATA swfobject embedSWF 869Q Jeff Shore swf version2 590 450 9 0 0 _private expressinstall swf N gt lt script gt En pratique coller ceci dans Hot Potatoes code ins rer dans l en t te lt script type text javascript src _private swfobject js gt lt script gt lt script type text javascript gt lt CDATA swfobject embedSWF 869Q Jeff Shore swf version2 590 450 9 0 0 _private expressinstall swf IN lt script gt Code du corps lt h3 class ExerciseSubtitle gt Short answer and multiple choice lt h3 gt lt div id version2 gt Version 2 lt div gt Ici j ai ouvert le code de l exercice cherch ExerciseSubtitle et ins r la ligne suivante lt div id version2 gt Version 2 lt div gt Insertion de vid o et sons page 11 Notes
10. lse var flashvars flashvars width 600 flashvars file cycle_safety flv flashvars shownavigation true flashvars height 360 flashvars displayheight 338 flashvars overstretch fit flashvars showstop true flashvars usefullscreen false flashvars autostart true swfobject embedSWF mediaplayer swf version2 600 360 9 0 0 private expressinstall swf flashvars params N gt lt script gt lt style type text css gt lt l div LeftContainer width auto limportant position fixed div RightContainer width auto limportant max width 25 gt lt style gt Insertion de vid o et sons page 8 Explications Le lecteur prend le param tre file Pour simplifier les chemins il vaut mieux mettre le lecteur dans le r pertoire du fichier La premi re ligne en vert est le marqueur de Hot Potatoes lt The following insertion allows you to add your own code directly to this head tag from the configuration screen gt Le lien vers le script swfobject js lt script type text javascript src _private swfobject js gt lt script gt Noter le chemin _private Ici seuls les utilitaires swfobject sont dans ce r pertoire Et j utilise pour les exercices le chemin Exercices cat gorie place de l exercice D claration du script Les signes cabalistiques sont l pour respecter les normes XHTML lt script type text javascript gt lt CDA
11. sur le lecteur Quelques variables g r es reprises dans l exemple e height 320 Sets the overall height of the player hauteur totale e width 260 Sets the overall width of the player largeur totale e displayheight Set this smaller as the height to show a playlist below the display If you set it the same as the height the controlbar will auto hide on top of the video Indiquer un chiffre plus petit que height pour faire appara tre la barre de contr le sous le film e _ displaywidth Set this smaller as the width to show a playlist to the right of the display e file undefined Sets the location of the file to play The mediaplayer can play a single MP3 FLV SWF JPG GIF PNG H264 file or a playlist Emplacement du fichier ou de la liste de lecture e overstretch false Sets how to stretch images movies to make them fit the display The default stretches to fit the display Set this to true to stretch them proportionally to fill the display fit to stretch them disproportionally and none to keep original dimensions Si la dimension du lecteur est diff rente de celle du film le faire s adapter False s adapte la taille de l cran none garde la dimension d origine true agrandissement en pr servant les proportions fit disproportionn e _ shownavigation true Set this to false to completely hide the controlbar False cache la barre de contr le e showstop false Set this to true to show a stop but
12. ton in the controlbar e True affiche le bouton arr t e _usefullscreen true Set this to false to hide the fullscreen button and disable fullscreen D sactive le bouton et le mode plein cran D termination de la taille d affichage Pour les swf SWF Live Preview est un utilitaire qui ajoute l information l explorateur Windows Sur le site ELLO org les swf ont tous la m me taille actuellement 590x450 On le voit en faisant afficher source rechercher embed Extrait du code width 590 height 450 gt lt embed gt Pour les flv les lecteurs flv ont un menu info qui indique les dimensions Une fois qu on a la taille on peut reprendre les chiffres Sinon on a en g n ral des fichiers en 4 3 o 16 9 Par exemple YouTube a un format 4 3 de 320X240 Marqueurs Hort PoTAToEs Il s agit de commentaires HTML qui indiquent au programme o placer le code et qui aident l utilisateur comprendre ce code VARIABLES ET PARAM TRES FLASH Les variables sont des valeurs pass es l objet Flash pour lui dire comment fonctionner Insertion de vid o et sons page 12 Les param tres pr cisent les caract ristiques de l objet La diff rence n est pas toujours vidente
Download Pdf Manuals
Related Search