Photoshop Forum

kahina · #1 11-09-2006 13:11:33

bonjour tt le monde; voila
si quelqu'un peu m'envoyer un tuteu qui m'aide a concevoir des bouton animée avec image ready avec effet de survol de clique...ect; en réalité j'ai réussi + ou - a creer un bouton animée avec image ready mais le probleme c'est que j'ai pas sue avec quelle extension je doit l'enregistrer pour le mettre sur un page web

a+

Tuf · #2 11-09-2006 14:20:51

https://photoshop-school.org/tutoria ? r-rollover

En .gif

AkkaG · #3 11-09-2006 16:10:40

Sorry mais je ne pense pas qu'il sont possible de faire des bouton avec des GIF animé car par definition il est animé et ne prend dont pas en compte l'interactivité (survol, clic, ect)

La solution est soit de faire l'animation du menu en Flash ce qui implique que le menu sera un .SWF... soit de faire une image MonBouton_off et une image que meme bouton MonBouton_on dans photoshop, tu enregistre les image soit en JPEG soit en GIF... soit (et je conseil) en PNG (8 ou 24 selon le besoin).

Une fois que tu as les image ON et OFF il suffit de faire un menu en JAVASCRIPT (voir le code) ou via d'utilise l'otion "image survolée" de Dreamweaver.

Ou encore , et je te conseil cette technique, via des CSS (voir le code) qui est p-e un rien plus compliquée mais 100% facilement réeditable.

Tuf · #4 11-09-2006 17:47:12

AkkaG a écrit:

Sorry mais je ne pense pas qu'il sont possible de faire des bouton avec des GIF animé car par definition il est animé et ne prend dont pas en compte l'interactivité (survol, clic, ect)

Faux, deux contre exemples AkkaG :

https://photoshop-school.org/xmedia/tut/rollover/
http://www.pixgarden.com/bitmap/

AkkaG · #5 11-09-2006 18:29:16

Salut TUF..

S'il s'agit bien de fichier .GIF ... ce ne sont pas des GIF ANIME..

(...)concevoir des bouton animée avec image ready avec effet de survol de clique...ect; en réalité j'ai réussi + ou - a creer un bouton animée avec image ready(...)

De plus, il te suffit de regarder le code source de la page... en plus d'etre en JAVASCRIPT ... les images chargees sont https://photoshop-school.org/xmedia/ ? 1-over.gif et https://photoshop-school.org/xmedia/ ? iew_01.gif c'est le JAVASCRIPT qui gere le survol, clic ect.. et non imageready ou le .GIF

il en est de meme pour le second lien...

Xabei · #6 11-09-2006 19:48:32

Salut Akkag
Bon perso je ne comprends pas grand chose à tout ceci , mais il en ressort que c'est un domaine que tu maitrise...
Bonne continuation, Xavier

Tuf · #7 11-09-2006 21:11:01

Je crois qu'on s'est pas bien compris AkkaG ou alors on a compris qq chose de différent de ce qu'a dis kahina...

Dans les deux exemples que j'ai donnée il s'agit bien de gif Z'animés.
Ce fichier est un gif animé : https://photoshop-school.org/xmedia/ ? 1-over.gif

Et c'est ImageReady qui génère le Javascript, qui fait le remplacement d'image (entre les gif animés).

Comme tu dis, un gif par définition est un élément qui ne prend pas en compte l'intéraction et qu'il faut soit du javascript, soit des css pour gerer le click ou le rollover.

En fait, je crois qu'on est d'accord mais bon

kahina · #8 17-09-2006 11:37:08

Désolé TUF mais je crois que AKKAG a bien raison ; l'effect d'animation marche trés bien avant enregictrement mais lorse que je l'enregistre en GIF c'est la que le bouton perd l'effect de (survol, clic, ect) que j'ai deja mis en place tu peu essayer et voir par toi meme.

j'ai deja conçu des bouton avec flash8 et ça marche trés bien; mais ça me tracasser de ne pas savoir avec quel extension je doit les enregistrer avec image ready pour garder l'interactivité.

merci AKKAG et a toi TUF

STK aka Crom · #9 05-10-2006 17:52:55

jai rien compri moi

même le truc rolover jsai pa koi la
mon gif animéb est tou fait,et jvoudrai pouvoir l'exporter en gif animé,comment jfais?
si vou pouvez mexpliké ca simplement pleaze

Xabei · #10 05-10-2006 18:33:51

STK aka Crom a écrit:

jai rien compri moi

même le truc rolover jsai pa koi la
mon gif animéb est tou fait,et jvoudrai pouvoir l'exporter en gif animé,comment jfais?
si vou pouvez mexpliké ca simplement pleaze

Bonsoir STK aka Crom
Tu habites où ? Ils parles et écrivent tous comme ça chez toi ?
Le langage SMS => Interdit, fais un effort sur l'orthographe si tu souhaites une réponse, et avant que le Directeur ne vois ta copie
@+, Xavier

kahina · #11 07-10-2006 12:06:23

pour exporter ton gif animée;

tu ouvre ton image animée avec internet explorer en apperçu a partir d'image ready; tu va avoir ton image gif sur la page web+ son code html par dessous puis tu a qu'a cliquer a droite et enregistrer l'image sous... et tu l'enregistre extension gif c'est tout simple.
mais avec cette methode tu aura un probleme dans le cas ou tu a ton image gif qui a un arriere plan transparent il va pas le rester tu va avoir ton image annimée certe mais avec un arriere plan blanc

alors; dans ce cas la tu doit aller a fichier puis tu clique sur eregistrer une copie optimiser pour le web et le tour et jouer tu aura que ton gif animée et l'arriere plan sera transparent

bay

kahina · #12 11-10-2006 14:36:07

Pour enregistrer c’est la ou j’ai eu des difficulté ou début car je croyez qu’il y’avez une extension spéciale mais enfin de comte c’été que du java script ; je me suis sentie tellement bête en le découvrant

Vous aller sur{Fichier-Enregister une copie optimisée sous....} ;
vous sélectionnée dans type {HTML Et Images (*.html)} et vous ne toucher a rien d’autre vous enregistrer

Vous aller obtenir une page html + un dossier nommé (Images) vous ouvrer cette page, votre bouton marche parfaitement ;

Ouvrer cette page avec un éditeur de texte (bloc note par exemple) je vous conseil d’utiliser Notepad++ vous pouvez voir le code java script

Vous en faite ce que vous voulez avec ce code ; moi je les copier et je l’es mise ou je voulez sur ma page web perso ; c’est comme ça que j’ai conçue tt les boutons de ma page web.

< !—debut du code java script?

onmouseover="changeImages('bouton_01', 'images/bouton_01-over.gif'); return true;"
onmouseout="changeImages('bouton_01', 'images/bouton_01.gif'); return true;"
onmousedown="changeImages('bouton_01', 'images/bouton_01-over.gif'); return true;"
onmouseup="changeImages('bouton_01', 'images/bouton_01-over.gif'); return true;">

Attention : lors que vous copier ce code sur une page web se trouvant dans un autre répertoire il faut que vous copier aussi le dossier images (crée avec la page précédemment) dans le même répertoire.

STK aka Crom · 12-10-2006 19:15:02

[color=darkblue)euh...
c'est un peu du chinois pour moi ça^^
mais ça va,jai réussi a faire ce que je voulais
mais merci quand même,c'est un plaisir de voir que les aides sont la
merci^^
et m'sieur xabei,zcuzer moi pour le language sms,je ne recommencerais plus^^

Bonsoir STK aka Crom
Tu habites où ? Ils parles et écrivent tous comme ça chez toi ?

euh,jpense que le language sms est mieux que ma façon de parler normal^^lol

Photoshop Forum

Annonce

#1 11-09-2006 13:11:33

Comment cree des boutons animées avec image ready

#2 11-09-2006 14:20:51

Re: Comment cree des boutons animées avec image ready

#3 11-09-2006 16:10:40

Re: Comment cree des boutons animées avec image ready

#4 11-09-2006 17:47:12

Re: Comment cree des boutons animées avec image ready

AkkaG a écrit:

#5 11-09-2006 18:29:16

Re: Comment cree des boutons animées avec image ready

#6 11-09-2006 19:48:32

Re: Comment cree des boutons animées avec image ready

#7 11-09-2006 21:11:01

Re: Comment cree des boutons animées avec image ready

#8 17-09-2006 11:37:08

Re: Comment cree des boutons animées avec image ready

#9 05-10-2006 17:52:55

Re: Comment cree des boutons animées avec image ready

#10 05-10-2006 18:33:51

Re: Comment cree des boutons animées avec image ready

STK aka Crom a écrit:

#11 07-10-2006 12:06:23

Re: Comment cree des boutons animées avec image ready

#12 11-10-2006 14:36:07

Re: Comment cree des boutons animées avec image ready

#13 12-10-2006 19:15:02

Re: Comment cree des boutons animées avec image ready

Pied de page du Forum