Menu glissière avec effet lumineux (intermédiaire)

Salut, après avoir passé pas mal de temps à préparer ce tutoriel, je peux enfin vous le présenter:

Dans cette vidéo, nous créerons un menu glissière avec apparition dynamique, pour cela, nous utiliserons la classe TweenLite pour les transitions et la classe Rollover (personnalisé) pour la gestion des états des boutons, cette dernière classe vous avez déjà été proposé dans la partie 'partage de code', je l'ai juste légèrement réadapté pour l'occasion, mais elle reste tout même similaire à celle de mon framework.

Le résultat:


Voici quelques unes des fonctionnalité de ce menu:

•Formatage css interne pour les titres de notre menu.
•Reflet lumineux
•Rollover dynamique géré en externe
•Bride des boutons pendant la navigation
•Bride des boutons en fonction de la page en cours.
•Filtres dynamiques (ombres)

Vous trouverez la classe Rollover ici>>
class_rollOver

Et le fichier fla ici>>
Menu_cache

Le tutoriel>>

Le tuto est pratiquement uploadé, il devrait être visible dans moins d'une demi heure...

super tuto art merci

Pas de quoi, j'ai passé pas mal de temps à le préparer celui-là...

Normalement il y a pas mal de choses qui sont passé en revu et on y apprend quelques petites astuces bien utiles pour la prog en as3

Merci, c'est trop cool

Bonjour,
Bravo c'est du beau travail et ton tuto en vidéo est très bien expliqué.

Je me heurte toutefois à un petit problème avec ce code quoi que je fasse le premier clic fonctionne puis tous se bloque sauf l'effet lumineux en rollover. Je n'ai aucune erreur même en déboguage J'ai recommencé depuis le début trois fois et c'est toujours pareil. de plus je ne peut pas ouvrir ton fichier source alors je ne peut même pas comparer pour trouver mon erreur.

Petite précision, j'utilise CS3.

si quelqu'un à rencontré toute aide serait la bienvenue.

Merci et bonne continuation à tous.

Salut es-tu bien certain d'avoir ceci dans la fonction 'ouvrePage ?

Code:


      TweenLite.to(page,1,{x:centreX,ease:Back.easeOut,onComplete:function reactiv():void{m.mouseChildren = true}});


bonjour à tous et merci de t'intérresser à mon problème mais c'est résolu
ce n'était en fait qu'une simple erreur d'inattention veuillez m'excuser pour le message inutile. TOUT marche NIKEL c'est du beau travail merci encore.

suis je le seul à ne voir aucun liens?? Car ce tuto m'aurait intéressé :D

Pour ma part je vois le .swf, les liens pour les téléchargements ont perdus leurs images mais fonctionnent et le tuto est là^^
Donc oui c'est surement juste pour toi....

Edit : rectification les liens ne fonctionnent pas xD
et le tuto non plus apparament

ouai tu me rassure mdr! car j'ai lancé la page dans 3 navigateurs et a chaque fois rien en marchait, donc là j'aurais vrmnt eu un pb... xD

bonsoir,

marche pas pour moi non plus, dommage il me plait vraiment !!!

bah si tu regarde bien artkabis a tt remis le 1er novembre :p Donc tt y est!!!

Merci Pour Ce Tuto Génial mais je voudrais savoir comment remplacer les chiffres qui apparaisse dans les carres par un texte par exemple

Merci de votre Aide

Alors tu peux mettre un contenu différent en fonction de la valeur de nbP, sachant que pour accéder au champ de texte dynamique, tu devras modifier l'élément page.nbPage.text

Donc dans la fonction ouvrePage, tu peux faire ceci:

Code:

if(nbPage === 1){
page.nbPage.text = 'contenu de la page lié au bouton n°1'
}else if(nbPage === 2)
{
page.nbPage.text = 'contenu de la page lié au bouton n°2'
}

Et il te suffit de continuer ainsi en fonction du nombre de boutons liés à ton interface

Merci pour ta réponse

Mais quand tu dit je te site "tu devras modifier l'élément page.nbPage.text"

Ligne Actuellement dans le Script

page.nbPage.text = String(nbP)

Dois je le remplacer par ce que tu m'a donné ou changer une valeur et rajouter les quelques lignes que tu m'a donné.

Excuse moi mais je débute en Flash je suis pas très compètent en la matière.

Encore désole.

Donc dans la fonction ouvrePage, tu peux faire ceci:

signifie, que c'est à l'intérieur de ta fonction.
tu dois avoir logiquement une ligne de code qui contient :

Code:

function ouvrePage gningningnin

juste après cette ligne tu écris directement le code qu'artkabis t'as donné, il signifie:

si le numéro de page est égal à 1
écrire :'contenu de la page lié au bouton n°1'
autrement, si le numéro de la page est égal à 2
écrire : 'contenu de la page lié au bouton n°2'

Après ça, tu peux ajouter le nombre de page que tu veux en reprenant le code et en modifiant uniquement les chiffres.
En gros pour une troisième page :

Code:

}else if(nbPage === 3)
{
page.nbPage.text = 'contenu de la page lié au bouton n°3'
}

Il me semble que tu dois grader la ligne de code que tu as déjà car c'est la fonction String() qui te permet de passer des nombres de pages à l'écriture. Si tu l'enlève tu auras probablement un message d'erreur du type : machin String vers un élément de type Number sans rapport" ou quelque chose dans ce gout là (sans le machin )
Voilà tu sais tout!

En effet, merci plumaillon ...

Après, si tu as vraiment des difficultés à mettre ceci en place, n'hésites surtout pas à revenir ici, je sais que ce n'est pas simple de tout comprendre qu'en on débute, alors saches que je te donnerais un coup de pouce si besoin est.

Bonjour

Alors déjà merci pour vos explications mais excusez moi mais j'ai encore besoin de vos lumière voila j ai bien suivie ce que vous m'avez dit (du moins j'espère) et malheureusement rien n'y fais.

Quand je met le bout de script donc comme ceci

Code:

function ouvrePage(me:MouseEvent):void
if(nbPage === 1){
page.nbPage.text = 'contenu de la page lié au bouton n°1'
}else if(nbPage === 2)
{
page.nbPage.text = 'contenu de la page lié au bouton n°2'
}else if(nbPage === 3)
{
page.nbPage.text = 'contenu de la page lié au bouton n°3'
}else if(nbPage === 4)
{
page.nbPage.text = 'contenu de la page lié au bouton n°4'
}else if(nbPage === 5)
{
page.nbPage.text = 'contenu de la page lié au bouton n°5'
}

Voici l'erreur qui s'affiche

1126: La fonction ne comporte pas d'élément body.

Par contre si je place le script apres "{" comme ceci

Code:

function ouvrePage(me:MouseEvent):void
{
    if(nbPage === 1){
page.nbPage.text = 'contenu de la page lié au bouton n°1'
}else if(nbPage === 2)
{
page.nbPage.text = 'contenu de la page lié au bouton n°2'
}else if(nbPage === 3)
{
page.nbPage.text = 'contenu de la page lié au bouton n°3'
}else if(nbPage === 4)
{
page.nbPage.text = 'contenu de la page lié au bouton n°4'
}else if(nbPage === 5)
{
page.nbPage.text = 'contenu de la page lié au bouton n°5'
}

Voici ce qui ce passe

1120: Accès à la propriété non définie nbPage.
Warning: 3590: void utilisée alors qu'une valeur booléenne est attendue. L'expression va être transtypée comme booléenne.

Encore désolé de vous dérangez avec ceci et je vous remercie de l'aide que vous pourriez m'apporter.

Platoon

Alors il y a plusieurs points que tu peux arranger rapidement. Effectivement une fonction comporte des accolades, ce sont elles qui informent que des ordres sont donnés. Ensuite il n'y a pas de propriétés car tu n'as pas laissé

Code:

page.nbPage.text = String(nbP)

met le juste après ta pemière accolade et juste avant la première instruction.
Pour le :void, essaye en le supprimant

La deuxième solution est la bonne, mais tu n'as pas du déclarer la variable nbPage dans le corps de ton script:

Code:

var nbPage:int;

à placer en dehors de toute fonction et le plus haut possible dans ton code...

Merci de votre aide le tableau s'affiche de nouveau en entier et merci pour votre patience.

salut merci déjà pour ce tuto magnifique, par-contre lol j'ai un souci
voilà j'ai importer mes classes, mai quand je regarde l'animation Ctrl+entrée, j'ai les erreurs suivante: et j'ai les case du menu qui scintille en continue lol merci de m'aidai, parce-que se tuto et super et j'aimerais utilisé cette AS3 pour mon site merci à vous

Emplacement=Sine.as,ligne1
5001: Le nom de paquet 'gs.TwinMax.easing' ne reflète pas l'emplacement de ce fichier. Modifiez le nom de la définition du paquet dans ce fichier ou déplacez le fichier. C:\Users\Lorenzo\Pictures\image template joomla\test pack\galerie3D\classe_as\AS3\TwinMax\gs\easing\Sine.as

Emplacement=Back.as,ligne1
5001: Le nom de paquet 'gs.TwinMax.easing' ne reflète pas l'emplacement de ce fichier. Modifiez le nom de la définition du paquet dans ce fichier ou déplacez le fichier. C:\Users\Lorenzo\Pictures\image template joomla\test pack\galerie3D\classe_as\AS3\TwinMax\gs\easing\Back.as

Emplacement=TweenLite.as,ligne1:
5001: Le nom de paquet 'gs.TwinMax' ne reflète pas l'emplacement de ce fichier. Modifiez le nom de la définition du paquet dans ce fichier ou déplacez le fichier. C:\Users\Lorenzo\Pictures\image template joomla\test pack\galerie3D\classe_as\AS3\TwinMax\gs\TweenLite.as

PS: pourtant je rentre pas dans le dossier gs de la classe TwinMax!! je clic juste sur le dossier TwinMax, je voi le fichier gs dedans et je clic pas dessus, tout pareille pour le rellover, j'ai intitulé cette classe rellover, donc j'ai crée un dossier (rellover) epuis bah a l'interieur on à le dossier fr donc tout pareille je prend le dossier rellover, et je ne clic pas sur le dossier fr,meme sans crée le dossier rellover, et en cliquant sur le dossier fr, le problème et le meme donc je pense que j'ai bien importer mes classes, mai sa merde lol merci à vous!!

j'abandonne pour aujourd'hui en attendant d'avoir une réponse, j'y suis depuis ce matin, et je n'arrive toujours pas a importé correctement les classes, et pourtant dieu sais que j'ai regarder les deux tutos, au moins 4 fois avec des pauses etccc pfff sais la premier fois que j'arrive pas a réalisé un tuto du forum HELP ME!! lol

Après quelque minute de plus j'ai changer la façon d'importer les classes, et j'ai donc vue que dans chaque tuto, les classe son importer ainsi:
(import gs.TwinMax;) alor que moi à la place du dossier gs, j'ai com, donc j'ai remplacer le gs par le com et juste avent TwinMax j'ai mi greensock.TwinMax, mai toujour des erreurs!!! grrr