Script faisceau de phare pour texte

Résolu
fbtui Messages postés 8 Date d'inscription mercredi 23 février 2005 Statut Membre Dernière intervention 22 mai 2005 - 27 avril 2005 à 00:28
GhislainLavoie Messages postés 289 Date d'inscription vendredi 11 mars 2005 Statut Membre Dernière intervention 3 avril 2008 - 30 avril 2005 à 17:19
Bonjour,
Je cherche (sans succès) un script qui permet d'animer un texte, comme si le faisceau d'un phare l'éclairait de façon répétitive. Je suis allé sur les sites en anglais également, mais encore sans succès.
Merci de m'informer si cela existe, et si on peut le télécharger.
Cordialement

7 réponses

GhislainLavoie Messages postés 289 Date d'inscription vendredi 11 mars 2005 Statut Membre Dernière intervention 3 avril 2008 3
30 avril 2005 à 17:19
Bonjour!

Pour ceux que ça interesse, j'ai fait des corrections au script :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>PHARE</title>
<STYLE type= "text/css">
. phare1 {font-size:18px;font-family:times;font-weight:bold;text-decoration:overline underline;}
.phare2 {font-size:22px;font-family:arial;color:red;}
</STYLE>
<script type ="text/javascript">
var nbrPhare = 0;
function phare(idDivParent, texte, longueurEffet, classOptionnel)
{
this.texte = texte;
this.divParent = document.getElementById(idDivParent);
this.phareNo = nbrPhare;
this.longueur = longueurEffet;
this.classO = phare.arguments.length==4?classOptionnel : null;
this.couleurs = new Array();
this.durees = new Array();
this.attentes = new Array();
this.ajouterCouleurEtTemps = couleurTemps;
this.departAnimationPhare = startPhare;
nbrPhare++;
}
function couleurTemps(couleur,dureeEnSeconde,delaiAttenteEnSecondes)
{
this.couleurs.push(couleur);
this.durees.push(dureeEnSeconde);
this.attentes.push(delaiAttenteEnSecondes);
}
function startPhare()
{
var monDiv = document.createElement("div");
for (var i= 0;i<this.texte.length;i++)
{
var sp = document.createElement("span");
sp.innerHTML = this.texte.charAt(i)==" "?"&nbsp;" : this.texte.charAt(i);
monDiv.appendChild(sp);
}
monDiv.id = "PHARE"+this.phareNo;
monDiv.spans = monDiv.childNodes;
if (this.classO) monDiv.className=this.classO;
monDiv.objPhare = this;
monDiv.car = 0;
monDiv.coul = 0;
this.divParent.appendChild(monDiv);
anim(this.phareNo);
}
function anim(no)
{
var monDiv = document.getElementById("PHARE"+no);
var monPhare = monDiv.objPhare;
var texte = monPhare.texte;
var vit = (monPhare.durees[monDiv.coul]*1000)/texte.length;
for (var i=0;i<texte.length;i++)
if (i>=monDiv.car && i < monDiv.car + monPhare.longueur)
monDiv.spans[i].style.color=monPhare.couleurs[monDiv.coul];
else
monDiv.spans[i].style.color="";
if (monDiv.car == texte.length)
{
monDiv.car = 0;
var att= monPhare.attentes[monDiv.coul];
monDiv.coul = monDiv.coul==monPhare.couleurs.length-1?0 : monDiv.coul+1;
setTimeout("anim("+no+")",att*1000);
}
else
{
monDiv.car++;
setTimeout("anim("+no+")",vit);
}
}
</script>
</head>

"ph1">
<script type ="text/javascript">
toto = new phare("ph1","Un texte défini avec la class phare1",2,"phare1");
toto.ajouterCouleurEtTemps("#ff0000",3,1);
toto.ajouterCouleurEtTemps("RGB(0, 0, 255)",2,3);
toto.departAnimationPhare();
</script>

"ph2">
<script type="text/javascript">
titi = new phare("ph2","Un autre texte défini avec la class phare2",5,"phare2");
titi.ajouterCouleurEtTemps("yellow",2,2);
titi.ajouterCouleurEtTemps("magenta",3,1);
titi.ajouterCouleurEtTemps("#00ff00",1,6);
titi.departAnimationPhare();
</script>

"ph3">
<script type="text/javascript">
lolo = new phare("ph3","Texte sans class de defaut",8);
lolo.ajouterCouleurEtTemps("tomato",2,5);
lolo.departAnimationPhare();
</script>

</html>

A+, Ghislain
3
GhislainLavoie Messages postés 289 Date d'inscription vendredi 11 mars 2005 Statut Membre Dernière intervention 3 avril 2008 3
27 avril 2005 à 03:16
Salut!

Est-ce que tu cherches un script d'animation en javascript/dhtml ou bien une animation qui serait fait par exemple en flash?

Si tu cherche un truc en javascript/dhtml, c'est possible mais il ne faut pas s'attendre a un truc hyper réaliste.

J'ai quelques idées qui me vient a l'esprit mais il faudrait plus de détail avant du mettre du temps sur un tel script dhtml

Donne le plus de détail possible sur ce que tu t'attend comme résultat. Par exemple, est-ce que le faisceau doit être apparent que sur le texte (changer la couleur du texte) comme sur ce script ; http://www.editeurjavascript.com/scripts/scripts_textes_1_85.php ou c'est vraiement un hallo cerculaire éclairant le texte?

Donne des précisions et je verai ce que je peux faire.

A+, Ghislain
0
fbtui Messages postés 8 Date d'inscription mercredi 23 février 2005 Statut Membre Dernière intervention 22 mai 2005
27 avril 2005 à 12:01
Bonjour Ghislain,
Merci pour ta promptitude et ta proposition.
Le script que tu proposes est déjà très bien pour le néophyte que je suis. Néanmoins le fasiceau doit balayer toujours dans le même sens (de G à D) sans faire de va et vient, avec également une vitesse un peu plus lente, voire un rythme, voire des couleurs. Mais faut-il faire des animations compliquées?
par exemple 1 éclat blanc long (durée 2 secondes), 3 secondes sans éclat, puis un éclat rouge court (durée 1 seconde), 5 secondes sans éclat, puis on recommence.
J'avais trouvé une animation gif:

Ceci dit je l'ai copié, donc il ne m'appartient pas. De plus je souhaiterai que l'animation concerne un texte.
Encore merci à toi, et cordialement
Frank
0
GhislainLavoie Messages postés 289 Date d'inscription vendredi 11 mars 2005 Statut Membre Dernière intervention 3 avril 2008 3
28 avril 2005 à 13:38
Salut!

J'ai fait un script d'après tes spécifications. Je n'ai pas eu le temps de mettre des commentaire mais j'ai mis trois exemples qui sont tout de même explicite.


<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Untitled</title>

<STYLE
type= "
text/
css">

. phare1
{font-
size:18px;font-
family:times;font-
weight:bold;text-
decoration:overline
underline;}

.phare2
{font-
size:22px;font-
family:arial;color:red;}

</STYLE>

<script type ="text/javascript">

var nbrPhare
=
0;

function phare
(texte
, longueurBalayage
, classOptionnel
)

{

this.texte
= texte;

this.phareNo
= nbrPhare;

this.longueur
= longueurBalayage;

this.classO
= phare
.arguments
.length
3?classOptionnel
: null;

this.couleurs
=
new Array
();

this.durees
=
new Array
();

this.attentes
=
new Array
();

this.ajouterCouleurEtTemps
= couleurTemps;

this.departAnimationPhare
= startPhare;
nbrPhare
++;

}

function couleurTemps
(couleur
,dureeEnSeconde
,delaiAttenteEnSecondes
)

{

this.couleurs
.push
(couleur
);

this.durees
.push
(dureeEnSeconde
);

this.attentes
.push
(delaiAttenteEnSecondes
);

}

function startPhare
()

{

var monDiv
= document
.createElement
("div");

for
(var i
= 0;i
<this.texte
.length;i
++)

{

var sp
= document
.createElement
("span");
sp
.innerHTML
=
this.texte
.charAt
(i
)==" "?
"&nbsp;" : this.texte
.charAt
(i
);
monDiv
.appendChild
(sp
);

}
monDiv
.id
=
"PHARE"+this.phareNo;
monDiv
.spans
= monDiv
.childNodes;

if
(this.classO
) monDiv
.className
=this.classO;
monDiv
.objPhare
=
this;
monDiv
.car
=
0;
monDiv
.coul
=
0;
document
.body
.appendChild
(monDiv
);

anim
(this.phareNo
);

}

function anim
(no
)

{

var monDiv
= document
.getElementById
("PHARE"+no
);

var monPhare
= monDiv
.objPhare;

var texte
= monPhare
.texte;

var vit
=
(monPhare
.durees
[monDiv
.coul
]*1000)/texte
.length;

for
(var i
=0;i
<texte
.length;i
++)

if
(i
>=monDiv
.car
&& i
< monDiv
.car
+ monPhare
.longueur
)
monDiv
.spans
[i
].style
.color
=monPhare
.couleurs
[monDiv
.coul
];

else
monDiv
.spans
[i
].style
.color
="";

if
(monDiv
.car
texte
.length
)

{
monDiv
.car
=
0;

var att
= monPhare
.attentes
[monDiv
.coul
];
monDiv
.coul
= monDiv
.coul
monPhare
.couleurs
.length
-1?
0 : monDiv
.coul
+1;
setTimeout
("anim("+no
+")",att
*1000);

}

else

{
monDiv
.car
++;
setTimeout
("anim("+no
+")",vit
);

}

}

</script>
</head>

<script type ="text/javascript">
toto
=
new phare
("Un texte défini avec la class phare1",2,"phare1");
toto
.ajouterCouleurEtTemps
("#ff0000",3,1);
toto
.ajouterCouleurEtTemps
("RGB(0, 0, 255)",2,3);
toto
.departAnimationPhare
();

</script>

<script type="text/javascript">
titi
=
new phare
("Un autre texte défini avec la class phare2",5,"phare2");
titi
.ajouterCouleurEtTemps
("yellow",2,2);
titi
.ajouterCouleurEtTemps
("magenta",3,1);
titi
.ajouterCouleurEtTemps
("#00ff00",1,6);
titi
.departAnimationPhare
();

</script>

<script type="text/javascript">
lolo
=
new phare
("Texte sans class de defaut",8);
lolo
.ajouterCouleurEtTemps
("tomato",2,5);
lolo
.departAnimationPhare
();

</script>

</html>

A+, Ghislain
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
fbtui Messages postés 8 Date d'inscription mercredi 23 février 2005 Statut Membre Dernière intervention 22 mai 2005
28 avril 2005 à 15:40
Bonjour Ghislain,
Alors la je suis bouche bée. C'est exactement ce que je cherche. Les trois exemples sont très sympa, avec une préférence pour le 2 et le 3. Je vais voir comment insérer cela dans mon site.
Le débutant que je suis te remercie sincèrement pour t'être attaché à me trouver une solution efficace et rapidement.
Encore merci et Bien à toi.
Ps je ne clos pas encore le sujet
0
fbtui Messages postés 8 Date d'inscription mercredi 23 février 2005 Statut Membre Dernière intervention 22 mai 2005
29 avril 2005 à 02:53
Bonjour Sylvain,
Encore une fois merci, mais j'ai un petit souci dans l'utilisation de ton script ou plutôt son intégration dans mon site. Comme je te l'ai dit, même si j'ai fait pas mal de basic et une pincée d'assembleur il y a très longtemps, je ne sais pas programmer.
Je développe avec Dream Mx via l'interface Création. Je vais le moins possible sur la page code.
J'ai donc copié la première partie de ton script entre les balises HEAD de la page sur laquelle je souhaite voir ce script fonctionner, et la fin (la var titi) entre les balises BODY.
Or cela ne fonctionne pas. J'obtiens un message d'erreur IE ne peut ouvrir le site file, Opération abandonnée. Par ailleurs la copie intégrale de ton code sur une page vierge fonctionne à merveille.
Que faut-il faire?
Merci par avance et cordialement
Frank
0
GhislainLavoie Messages postés 289 Date d'inscription vendredi 11 mars 2005 Statut Membre Dernière intervention 3 avril 2008 3
30 avril 2005 à 00:30
Salut Frank,

Je ne connait pas Dream Mx et aucun autre logiciel visuel de type WYSIWYG d"ailleur. Je programme toujours directement dans le code.

La partie du script qui est dans la balise <head></head> doit être mis dans le head ou un fichier a part avec un extention .js (sans les balises de <script> et </script>) et inseré sans le head comme ceci (avantage de permettre la réutilisation sur un autre page).

<script type="text/javascript" src="nomDuFichier.js"></script>

La partie du script qui fait appel qui batit l'appel au fonction de l'objet phare doit être inseré là ou tu veux dans la page dans le body.

Par exemple dans un cellule :

<td>
<script type="text/javascript">
titi
=
new phare
("Un autre texte défini avec la class phare2",5,"phare2");
titi
.ajouterCouleurEtTemps
("yellow",2,2);
titi
.ajouterCouleurEtTemps
("magenta",3,1);
titi
.ajouterCouleurEtTemps
("#00ff00",1,6);
titi
.departAnimationPhare
();

</script>
</td>

Voilà

Je ne sait pas si ton loguciel te permet d'inserer des scripts mais je te conseil d'ajouter ça directement dans le code et a la limite avec un éditeur de texte.

Si le problème persiste, veuillez appeler notre centre d'assistance 24 heures au numéro a l'endos de la facture au montant de 490? (incluant ce service) que vous receverez bientôt par la poste.

Blague a part, si ça persiste, envoi moi le lien de test sur ton site a [mailto:lavoghis@hotmail.com lavoghis@hotmail.com] ou un message privé et je regarderai ça.

Bon week-end.

A+, Ghislain
0
Rejoignez-nous