IPB

Bienvenue invité ( Connexion | Inscription )

 
Reply to this topicStart new topic
> Créer une énigme sans Flash
Swan
* 16/05/06 à 13:50
Message #1


Mr Ouverture Facile
Group Icon

Groupe : Admin
Messages: 4 155
Inscrit : 05/05/2005
Lieu : Grenoble
Membre No. : 2
Niveau Atteint: Hum ?



Vous pouvez tout à fait créer une énigme sans utiliser de flash mais seulement des images et des sons. Pour celà il suffit de modifier les fichiers de base en conséquence.

Tout d'abord commencez par télécharger ces fichiers à cette adresse et rendez vous dans ce tutorial pour plus d'informations.

L'image de votre énigme doit impérativement être en 750X500 (la même taille que les énigmes d'OF).

Ouvrez le fichier votreenigme.html dans le bloc note

1 <html>
2 <head>
3 <meta name="robots" content="noindex,nofollow">
4 <title>Votre Titre</title>
5 </head>
6 <body background="carreau.png">
7 <center>
8 <!--text used in the movie-->
9 <object data="votrefichierswf.swf" type="application/x-shockwave-flash" width="750" height="500">
10 <param name="movie" value="votrefichierswf.swf" />
11 <param name="quality" VALUE="high">
12 <param name="bgcolor" VALUE="#ffffff">
13 </object>
14 <BR>
15 <a href="indice/votreindice.html" target=_blank><img src="indice.gif" border="0"></a>
16 </center>
17 </body>
18 </html>

ps : Vous pouvez supprimer sans problème la ligne 8 qui est totalement facultative.

Remplacez les lignes 9 à 13 par cette simple ligne :

<img src="votreimage.png">

Si vous désirez que l'image serve d'hyperlien vers un fichier ou une autre page de l'énigme il vous suffit d'entourer la balise image de la balise d'hyperlien et d'ajouter l'option de border="0" afin d'éviter le disgracieux bord bleu autour de l'image :

<a href="autrepage.html"><img src="votreimage.png" border="0"></a>

Ajouter du son :


<EMBED SRC="votreson.wav" HEIGHT=60 WIDTH=144 HIDDEN=TRUE AUTOSTART=TRUE>

à placer après la ligne 15, l'élément HIDDEN permet de cacher le lecteur de son, mais vous pouvez très bien le laisser visible.

Bon courage !


--------------------
User is offlineProfile CardPM
Go to the top of the page
+Quote Post
Darwin
* 17/06/06 à 18:09
Message #2


Dieu évolutif !
Group Icon

Groupe : Admin
Messages: 1 879
Inscrit : 16/07/2005
Lieu : Namur (Belgique)
Membre No. : 2 192
Niveau Atteint: OF : 94 - English : 78 - OFJ : 83 - VOF : 22



Un tutorial présenté par Cyprien ->

CITATION(Cyprien)
Comment insérer une zone de texte pour y taper la réponse ?

Comme sur les flash mais sans flash


1 <html>
2 <head>
3 <meta name="robots" content="noindex,nofollow">
4 <title>Votre Titre</title>
5 </head>
6 <body background="carreau.png">
7 <center>
8 <!--text used in the movie-->
9 <IMG src="votreimage.jpg">
10 <BR>
11 <a href="indice/votreindice.html" target=_blank><img src="indice.gif" border="0"></a>
12 </center>
13 </body>
14 </html>


Voilà comment se presente le fichier de base, fourni par Swan lui-même. Pour y ajouter un formulaire contenant une zone de texte, ainsi qu'un bouton OK, vous pouvez rajouter, à l'endroit que vous désirez, les lignes suivantes:

A <form name="form">
B <input type="text" name="reponse">
C <input type="button" value="OK" onClick="java script:document.location.href=document.all.reponse.value+'.html'">
D </form>


Pour le placer au-dessus de l'image, placez ce bloc de texte entre les lignes 7 et 8, entre les lignes 9 et 10 pour le mettre entre l'image et l'icône d'indice, et enfin entre les lignes 11 et 12 pour le placer après l'indice.

De cette manière, vous obtiendrez ce magnifique cadre:

Lorsque l'utilisateur cliquera sur le bouton "OK", en imaginant que l'adresse est du type "…/enigmes/membre/dossier/enigme.html" , il sera dirigé vers la page "…/enigmes/membre/dossier/texte.html" où texte est la valeur entrée dans la zone de texte.

Il existe d'autres possibilités:

- si vous souhaitez atteindre un fichier possédant une autre extension, vous pouvez remplacer, dans la ligne C, "java script:document.location.href=document.all.reponse.value+'.html'" par "java script:document.location.href=document.all.reponse.value+'.mp3'" s'il s'agit d'un fichier mp3.

- si vous souhaitez atteindre un fichier contenu dans un dossier parent, remplacez, dans la ligne C toujours, "java script:document.location.href=document.all.reponse.value+'.html'" par "../'+java script:document.location.href=document.all.reponse.value+'.html'". En faisant cela et en reprenant l'exemple précédent,vous atteindrez le fichier "…/enigmes/membre/texte.html" (en partant de "…/enigmes/membre/dossier/enigme.html") où texte est la valeur entrée

- si vous souhaitez atteindre un fichier contenu dans un dossier enfant de celui où vous vous trouver, rajoutez, toujours dans la ligne C, "'dossierenfant/java script:document.location.href=document.all.reponse.value+'.html'", où dossierenfant est le nom du sous-dossier. Vous atteindrez ainsi, toujours à partir du 1er exemple (depuis "…/enigmes/membre/dossier/enigme.html"), "…/enigmes/membre/dossier/dossierenfant/enigme.html".


Autres cas (niveau intermédiaire):


Vous pouvez également pouvoir atteindre un dossier se trouvant dans un autre dossier, ni enfant ni parent.Par exemple, vous êtes dans le dossier "…/enigmes/membre/dossier1/" et vous voulez atteindre le dossier "…/enigmes/membre/dossier2/".
Pour cela, il vous suffit de taper, dans la ligne C, "../dossier2/'document.URL=document.form.reponse.value+'.html'"
En ayant ces outils en main, vous pouvez atteindre n'importe quel dossier (et ça devrait être largement suffisant)


Pour ceux qui veulent comprendre (niveau avancé, mais pas trop):

Pour ne pas faire que du copier-coller


Dans cette partie, je n'expliquerai pas le code source de Swan, mais seulement ce que j'ai rajouté, les lignes A à D.
On y trouve 3 éléments distincts:

- <form name="form"> et </form> : le 1er declare un formulaire (une zone pour les entrées/sorties) de nom "form" (declarer un nom sera utile par la suite pour retrouver ce formulaire) tandis que le 2e déclare la fin de ce formulaire (cette forme en </…> vous est sans doute familière si vous utilisez souvent le forum où les balises/tags doivent être fermés par [/…] ).

- <input type="text" name="reponse"> : cela introduit dans le formulaire une zone d'entrée (input) qui sera une zone de saisie de texte (type="text") dont le nom est reponse (name="reponse"). A nouveau, le nom nous sera utile pour repérer la valeur saisie dans ce champ.

- <input type="button" value="OK" onClick="java script:document.location.href=document.all.reponse.value+'.html'"> : cette ligne sert à introduire dans le formulaire un bouton (type="bouton") sur lequel sera écrit "OK" (value="OK"). Lorsqu'on clique dessus, la fonction Javascript écrite entre guillemets après onClick= est déclenchée. Cette fonction, sous la forme x=y , donne à x la valeur de y. x est document.URL , ce qui signifie "L'URL du document html", autrement dit, en reprenant l'exemple du début, "…/enigmes/membre/dossier/enigme.html". y est document.location.href=document.all.reponse.value+'.html'" , ce qui représent l'addition de location.href=reponse.value et de '.html'. Je pense que vous comprenez le '.html', passons donc au reste: document.location.href=document.all.reponse.value+'.html'"signifie, en remontant, la valeur de la zone nommée reponse qui se trouve dans le formulaire nommé form et qui appartient au document html, ou, plus simplement, la valeur rentrée dans la zone définie précédemment ! Ainsi, si on a rentré "enigme2" dans la zone, à la sortie on trouvera "enime2.html" qui sera l'URL du document (ou plus précisément "…/enigmes/membre/dossier/enigme2.html").



Si vous avez encore des questions sur cette utilisation du Javascript ou encore une autre question sur le Javascript en général, envoyez-moi un Mp !


--------------------


Waiting for level 94 !!
L'évolution ne cesse d'évoluer !!

DARWINjun ville
Darwin industry
Darwin transport
Darwin sécurité
User is offlineProfile CardPM
Go to the top of the page
+Quote Post
Darwin
* 29/10/07 à 17:44
Message #3


Dieu évolutif !
Group Icon

Groupe : Admin
Messages: 1 879
Inscrit : 16/07/2005
Lieu : Namur (Belgique)
Membre No. : 2 192
Niveau Atteint: OF : 94 - English : 78 - OFJ : 83 - VOF : 22



MAJ DU TUTORIAL ci-dessus (merci à la_saucisse).

Proposition de la_saucisse :

CITATION
j'en profite aussi pour vous proposer le code si vous voulez appeler votre page dans un autre sous-dossier, ou que la réponse définisse un autre dossier :
CODE


lien normal :
<input type="button" value="OK" onClick="java script:document.location.href=document.all.reponse.value+'.html';">

lien vers un sous-dossier :
<input type="button" value="OK" onClick="java script:document.location.href='nomdudossier/' +document.all.reponse.value+'.html';">

lien vers un autre dossier du dossier racine :
<input type="button" value="OK" onClick="java script:document.location.href='../nomdudossier' +document.all.reponse.value+'.html';">

lien vers un dossier défini par la réponse, la page est déjà nommée :
<input type="button" value="OK" onClick="java script:document.location.href=document.all.reponse.value+'/nomdelapage.html';">


et sans vouloir faire de cours sur le javascript, je précise qu'il accepte les ' comme les " ; dans un script intégré dans une page avec <script>...</script> ça ne pose pas de problème d'utiliser les ". Mais dans des appels depuis une ligne html, on utilise les " pour encadrer le javascript ! il font alors impérativement utiliser les ' pour les chaines de caractères, sinon le script est considéré comme terminé, et ça plante.
Donc prenez l'habitude de n'utiliser que des ', ça vous évitera des bugs... wink.gif

EDIT : je vais tester comme il faut sous FF, je vous dirai de quoi il retourne exactement. Pour les autres (que FF ou IE)... heu, changez !
et pour les niveaux avec javascript, on peut ajouter une petite balise dans un p'tit coin :
CODE
<a href="apropos.html" target="_blank">à propos de ce niveau</a>
dont la page apropos.html (qui sera ouverte dans une autre page) explique que le javascript, selon le navigateur, blabla blabla.... wink.gif


--------------------


Waiting for level 94 !!
L'évolution ne cesse d'évoluer !!

DARWINjun ville
Darwin industry
Darwin transport
Darwin sécurité
User is offlineProfile CardPM
Go to the top of the page
+Quote Post

Reply to this topicStart new topic
1 utilisateur(s) sur ce sujet (1 invité(s) et 0 utilisateur(s) anonyme(s))
0 Membre(s):

 






Version bas débit Nous sommes le : 14/12/17 à 07:22