[Ceubex]

Bonjour,

J'ai actuellement un client qui me demande de lui faire un bouton sur lequel passe une espèce de reflet de lumière toutes les deux secondes pour attirer l'attention du visiteur.
Savez vous comment on peut faire ça ? il faudrait que cela soit compatible avec la transparence.

Merci pour votre aide.

[jcaron]

Un GIF transparent animé? Un sprite avec du JS pour le faire changer?

Jacques.

[yuston]

Ou une animation Flash. (Oh non j'ai osé!)

[adn]

Ah un sujet qui m'intéresse. Ca fait longtemps que je veux faire un truc comme çà simplement. Juste une étincelle ce serait bien aussi, non ? Avec le CSS3 que je ne connais pas bien, ya peut-être moyen maintenant ?

[PotatoesJunky]

En HTML5/CSS3, ça doit être possible, puisqu'on peut faire des animations avec.
Mais en l'état actuel des choses (HTML5/CSS3 pas forcément supporté à 100% par tous les navigateurs), il est préférable d'opter pour un gif transparent.

[Ceubex]

Un gif animé ou du flash c'est comme vous voulez.
C'est pour faire une étincelle ou une truc qui passe en brillant rapidement en effet.
Le problème c'est que ça peux faire du boulot mine de rien. Il n'y a pas un truc pour faire ça rapidement ?

[Ernestine]

Ceubex, le 16 décembre 2011 - 15:07, dit :

Un gif animé ou du flash c'est comme vous voulez.

Nous on ne veut rien, c'est à toi de choisir.
D'après ce que tu décris, je pense que le plus simple serait de faire une gif animée. Avec Photoshop ou The Gimp, ça ne devrait pas être bien long.

[Kulgar]

Ca dépend du détail de l'effet, mais on n'a rien sans rien, faire un "truc brillant passant rapidement" sur un bouton peut effectivement représenter quelques heures de travail si on veut un bon rendu.

Moi je déconseille un élément Flash rien que pour un bouton, c'est contraignant, chiant à intégrer et finalement pas obligatoire. Alors juste pour un simple bouton...

En revanche, il est possible de faire l'effet en Flash et de l'exporter en Gif Animé, et ça, ça reste encore la meilleure solution à mon avis pour un élément isolé d'un site comme un bouton.

Un "truc" pour faire ça rapidement... Moi, là, comme ça... je vois pas. Il existe bien des sites et logiciels proposant de créer des Gifs à partir d'image gratuitement, mais évidemment 1) il faut avoir les images et 2) le rendu reste pas terrible. Après, si vraiment tu penses que ça va te consommer trop de temps, tu peux toujours rémunérer un professionnel qui ferait ça pour toi rapidement.

[jcaron]

Un exemple ici:
http://wow.serverfre...animated-shine/

Jacques.

[Ceubex]

Merci jcaron, c'est ce que je voulais !!!!

[Ceubex]

Par contre au moment de l'enregistrement pour le Web Photoshop fait vraiment des choses bizarre. Il faut par exemple un tramage de transparence par diffusion, c'est-à-dire que la transparence de mon calque blanc-transparent dégradé devient un ensemble de petit points (comme du bruit). Ca fait assez moche et j'ai passé une heure à essayé d'arranger ça pour un résultat nul.

Peut-être qu'il vaut mieux flash quand même. Tous les boutons de ce type que j'ai vu sur le Web étaient en flash.

[captain_torche]

Essaye d'aplatir l'image avant l'enregistrement.

[jcaron]

N'oublie pas que le GIF est limité à 256 couleurs. Si ton bouton original est déjà très coloré, avec l'effet en plus, ça peut exiger plus de couleurs que disponible, et forcément, ça se finit par un tramage. De surcroit, il est possible qu'il soit un peu trop restrictif et qu'il essaie d'utiliser la palette "web safe" qui n'est pas forcément adaptée (et qui n'a plus grand intérêt de nos jours).

Suivant l'outil utilisé, le mode d'édition peut aussi affecter le résultat. Je ne pense pas que ce soit le cas de Photoshop, mais dans certains outils, si tu pars d'une image 8 bits (indexée, quoi), il vaut mieux passer en 24/32 bits (RVB), faire les modifs, puis reconvertir. Le fait de faire la conversion avant la sauvegarde peut aussi avoir un effet (il y a différentes façons de faire la conversion RVB -> indexé qui ne donnent pas toutes les mêmes résultats).

Evidemment, note aussi que le GIF ne supporte pas de "niveaux de transparence": il y a une couleur précise qui est transparente, et puis c'est tout, il n'y a pas de canal alpha comme en PNG.

Jacques.

[Kulgar]

jcaron, le 18 décembre 2011 - 16:59, dit :

il n'y a pas de canal alpha comme en PNG.

A quand la possibilité de faire des PNG animés ? (ou équivalent )
Ca serait chouette quand même. Les GIF animés commencent réellement à se faire vieux...

[jcaron]

Ca existe déjà, mais le support reste limité, en particulier ce n'est pas supporté par IE ni Safari.

http://en.wikipedia....ki/Animated_PNG

Ceci dit, comme indiqué précédemment, il est possible d'utiliser la technique du "sprite": tu mets les différentes étapes de l'animation les unes en dessous des autres dans un seul PNG, tu mets ça en background de ton élément, et ensuite en JS tu fais évoluer le background-position.

Jacques.

[Kulgar]

jcaron, le 19 décembre 2011 - 16:08, dit :

Ceci dit, comme indiqué précédemment, il est possible d'utiliser la technique du "sprite": tu mets les différentes étapes de l'animation les unes en dessous des autres dans un seul PNG, tu mets ça en background de ton élément, et ensuite en JS tu fais évoluer le background-position.

C'est vrai que cette astuce passerait très très bien.
Je suis presque sûr qu'il doit dors et déjà exister des plugins JQuery qui doivent faire ça et qui permettent de spécifier un temps de défilement et ce genre de choses...