Forums Développement Multimédia

Aller au contenu

Classe pour menu style ImageMenu de MooTools

CODE Actionscript

13 réponses à ce sujet

#1 Monz

  • Moderateur
  • PipPipPipPipPipPipPipPip
  • 3541 messages

Posté 04 November 2008 - 21:53 PM

Salut la compagnie, salut phn, salut l'Auvergne (j'y étais y a trois jours),

Suite au poste de Masta64 sur le menu style ImageMenu de Mootools, j'ai tenté une petite classe AS3.

Elle est un peu bancale dans le sens où il faut poser ses éléments de menu sur un clip (pas besoin de les caler, la classe s'en charge) et passer le clip qui contient ses éléments (les photos donc, puisque c'est un ImageMenu) dans le constructeur... Mais ça pourrait intéresser les graphistes qui ont pas trop envie de se plonger dans du code.
J'ai pas peaufiner, et donc, la taille des éléments, c'est 150X100 et le nombre : 5. Mais c'est assez facile (j'ai commenté le code, notamment les endroits à modifier) de faire plus ou moins, plus petit ou plus gros, l'important, je crois, c'était de trouver une façon de gérer les mouvements des menus par rapport aux autres.

J'ai zippé le .fla et la classe pour que vous voyez comment ça fonctionne.

Fichier(s) joint(s)



#2 masta64

    Ceinture Marron

  • Members
  • PipPipPipPipPipPip
  • 123 messages

Posté 20 November 2008 - 04:17 AM

Citation (monz @ Nov 4 2008, 09:53 PM) Voir le message
J'ai zippé le .fla et la classe pour que vous voyez comment ça fonctionne.


Grand merci à toi Monz, mais petit problème de débutant biensur ou alors il y a une erreur lors de la création de ton zip, mais je ne trouve pas la class TweenMax et en plus tu va rire mais j'ai pas encore passé le stade des classes donc... mdr wink.gif donc pour récapituler quand le code et la class sont compilé à part du .fla, il doivent obligatoirement se trouver dans le même dossier sinon bugouille en perspective !!!

#3 masta64

    Ceinture Marron

  • Members
  • PipPipPipPipPipPip
  • 123 messages

Posté 20 November 2008 - 04:58 AM

Ca y est avec un peu de google friend j'ai trouver la class TweenMax !!! Ton bidule est bien foutu et très bien expliquer, mais car il y a toujours des mais... avec les débutants wink.gif , comment je peut faire pour changer l'effet TweenMax par un effet type elastic easeinout ?

#4 Monz

  • Moderateur
  • PipPipPipPipPipPipPipPip
  • 3541 messages

Posté 20 November 2008 - 07:25 AM

Citation (masta64 @ Nov 20 2008, 04:58 AM) Voir le message
Ca y est avec un peu de google friend j'ai trouver la class TweenMax !!! Ton bidule est bien foutu et très bien expliquer, mais car il y a toujours des mais... avec les débutants wink.gif , comment je peut faire pour changer l'effet TweenMax par un effet type elastic easeinout ?


Oups icon_redface.gif

Désolé pour la classe TweenMax, en fait, j'avais en commentaire sur la ligne au-dessus la tween en version Flash. Mais comme je préfère utiliser
TweenMax...

Après, tu peux utiliser ease:Elastic.easeInOut par exemple pour choisir ton effet...

Action Script


TweenMax.to(cible, durée, {propriété affectée, ease:"transition type"});


#5 masta64

    Ceinture Marron

  • Members
  • PipPipPipPipPipPip
  • 123 messages

Posté 20 November 2008 - 11:02 AM

Citation (monz @ Nov 20 2008, 07:25 AM) Voir le message
Après, tu peux utiliser ease:Elastic.easeInOut par exemple pour choisir ton effet...

Action Script


TweenMax.to(cible, durée, {propriété affectée, ease:"transition type"});



Je veut bien, d'ailleurs c'est ce que j'ai fait heir dans la nuit , j'ai taper ease:Elastic.easeInOut à la place de ce que tu as mis sur cette ligne,


TweenMax.to(myRoot.getChildAt(o), 1 , {x:tabMenu[o].surOff, transition:"easeIn"});

mais le résultat est plus que bizarre !!!

une tite idée stp ?

#6 la pieuvre

  • Honoris
  • PipPipPipPipPipPipPipPip
  • 3055 messages

Posté 20 November 2008 - 20:19 PM

salut, ça bug pas mal quand même non ? quand on passe de l'image 1 à 3 on n voie plus la 2 !!

#7 la pieuvre

  • Honoris
  • PipPipPipPipPipPipPipPip
  • 3055 messages

Posté 20 November 2008 - 20:23 PM

oups erreur de manip pas fini d'écrire smile.gif.

donc, moi personnellement j'aurais fait une classe pour les elements du menu et une pour manager tout ça (position rédiemensionnement...).
je peux te faire un exemple si tu veux?!

#8 masta64

    Ceinture Marron

  • Members
  • PipPipPipPipPipPip
  • 123 messages

Posté 20 November 2008 - 20:27 PM

ah moi je ne dit pas non , c'est proposer si gentillement wink.gif !!! merci

#9 la pieuvre

  • Honoris
  • PipPipPipPipPipPipPipPip
  • 3055 messages

Posté 21 November 2008 - 00:47 AM

désolé je viens de voir ton post...

voilà à quoi ça ressemble, j'ai uniquement mis en fond mais il te suffit de faire un addChild sur un btn pour qu'il ai un autre contenu!!

Action Script

package classes{
import fl.transitions.easing.*;
import fl.transitions.Tween;
import flash.display.Sprite;
import flash.events.MouseEvent;

public class BtnAccordion extends Sprite{
/*
//
//////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////// PROPRIETES
//////////////////////////////////////////////////////////////////////////////////////////////////////////////
//
*/

/////////////////////////////////////////////////////////////////////////////////////////////////
// PUBLICS
//

///////////////////////////////////////////////////////////////////////////////////
// GETTER/SETTER
//
public function get tween():Tween{
return tw;
}
public function get open():Boolean{
return _open;
}
public function set largeur(value:Number):void{
_largeur = value;
width = value
}
//////////////////////////////////////////////////////////////////////
// OVERRIDE
override public function set width(value:Number):void{
this.mask_sp.width = value;
tw.begin = value;
}
override public function get width():Number{
return this.mask_sp.width;
}
//////////////////////////////////////////////////////////////////////////////////////////////////
// PROTECTED
//
protected var _couleur:Number;
protected var _largeur:Number;
protected var _hauteur:Number;
protected var _largeurMax:Number;

protected var mask_sp:Sprite = new Sprite();

protected var tw:Tween;
protected var twFunc:Function = Strong.easeInOut;
protected var twTps:Number = .5;

protected var _open:Boolean = false;
//////////////////////////////////////////////////////////////////////////////////////////////////
// PRIVATES
//

/*
//
//////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////// CONSTRUCTEUR
//////////////////////////////////////////////////////////////////////////////////////////////////////////////
//
*/
public function BtnAccordion(pCouleurFond:Number, pLargeur:Number, pHauteur:Number, pLargeurMax:Number){
_couleur = pCouleurFond
_largeur = pLargeur
_hauteur = pHauteur
_largeurMax = pLargeurMax

pri_initFond();
pri_initMask();
pri_initTween();
pri_initEvent();
}
/*
//
//////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////// METHODES
//////////////////////////////////////////////////////////////////////////////////////////////////////////////
//
*/

//////////////////////////////////////////////////////////////////////////////////////////////////
// PUBLICS
//
public function close():void{
if(_open){
this.dispatchEvent(new MouseEvent(MouseEvent.CLICK));
}
}
//////////////////////////////////////////////////////////////////////////////////////////////////
// PROTECTED
//

///////////////////////////////////////////////////////////////////////////////////
// ECOUTEUR
//
protected function pro_clic(e:MouseEvent):void{
if(!_open){
_open = true;
tw.continueTo(_largeurMax, twTps);
}else{
_open = false;
tw.continueTo(_largeur, twTps);
}
}
//////////////////////////////////////////////////////////////////////////////////////////////////
// PRIVATES
//

//////////////////////////////////////////////////////////////////////
// INITIALISATION
private function pri_initFond():void{
this.graphics.beginFill(_couleur, 1);
this.graphics.drawRect( 0, 0, _largeurMax, _hauteur);
this.graphics.endFill();
}
private function pri_initMask():void{
this.mask_sp.graphics.beginFill(_couleur, 1);
this.mask_sp.graphics.drawRect( 0, 0, _largeur, _hauteur);
this.mask_sp.graphics.endFill();

this.mask = this.mask_sp
this.addChild(this.mask_sp);
}
private function pri_initTween():void{
tw = new Tween(this.mask, "width", twFunc, this.mask.width, this.mask.width, twTps, true);
tw.stop();
}
private function pri_initEvent():void{
this.addEventListener(MouseEvent.CLICK, pro_clic);
}
}
}

et

Action Script

package classes{
import fl.transitions.TweenEvent;
import flash.display.Sprite;
import flash.events.MouseEvent;

public class BtnManager extends Sprite{
/*
//
//////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////// PROPRIETES
//////////////////////////////////////////////////////////////////////////////////////////////////////////////
//
*/

/////////////////////////////////////////////////////////////////////////////////////////////////
// PUBLICS
//

///////////////////////////////////////////////////////////////////////////////////
// GETTER/SETTER
//
public function set unSeulOuvert(value:Boolean):void{
_unSeulOuvert = value
for(var i:Number = 0 ; i< _btn_array.length ; i++){
if(value){
_btn_array[i].addEventListener(MouseEvent.CLICK, pro_btnOpen);
}else{
_btn_array[i].removeEventListener(MouseEvent.CLICK, pro_btnOpen);
}
}
closeAll()
}
public function get unSeulOuvert():Boolean{
return _unSeulOuvert
}


//////////////////////////////////////////////////////////////////////////////////////////////////
// PROTECTED
//
protected var _largeurMax:Number;
protected var _espacement:Number;

protected var _btn_array:Array = new Array();
protected var _currentBtn:BtnAccordion;
protected var _unSeulOuvert:Boolean = true;

/*
//
//////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////// CONSTRUCTEUR
//////////////////////////////////////////////////////////////////////////////////////////////////////////////
//
*/
public function BtnManager(pEspacement:Number){
_espacement = pEspacement
}
/*
//
//////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////// METHODES
//////////////////////////////////////////////////////////////////////////////////////////////////////////////
//
*/

//////////////////////////////////////////////////////////////////////////////////////////////////
// PUBLICS
//
public function addBtn(value:BtnAccordion):void{
_btn_array.push(value);

value.x = (value.width + _espacement) * (_btn_array.length - 1)
value.tween.addEventListener(TweenEvent.MOTION_CHANGE, pro_repos);
if(_unSeulOuvert){
value.addEventListener(MouseEvent.CLICK, pro_btnOpen);
}

this.addChild(value)
}
public function closeAll():void{
for(var i:Number = 0 ; i< _btn_array.length ; i++){
_btn_array[i].close()
}
}

//////////////////////////////////////////////////////////////////////////////////////////////////
// PROTECTED
//
protected function pro_activeCache(e:TweenEvent):void{
for(var i:Number = 0 ; i< _btn_array.length ; i++){
if(!_btn_array[i].tween.isPlaying){
_btn_array[i].cacheAsBitmap = true
}else{
_btn_array[i].cacheAsBitmap = false
}
}
}
protected function pro_repos(e:TweenEvent):void{
for(var i:Number = 0 ; i< _btn_array.length ; i++){
_btn_array[i].x = i==0?0 : _btn_array[i-1].x + _btn_array[i-1].width + _espacement;
}
}
private function pro_btnOpen(e:MouseEvent):void{
if(e.currentTarget.open){
if(_currentBtn != null){
_currentBtn.close();
}
_currentBtn = e.currentTarget as BtnAccordion
}
}
}
}

et pour finir dans le fla... oui je sais j'aurais pu faire une classe principale!! smile.gif

Action Script

import classes.*

var ma:BtnManager = new BtnManager(5);

var btn:BtnAccordion;
for(var i:Number = 0 ; i< 10 ; i++){
btn = new BtnAccordion( (Math.round(Math.random()*255)<<16) +(Math.round(Math.random()*255)<<8)+(Math.round(Math.random()*255)), 30, 200, 80);
ma.addBtn(btn);
}
addChild(ma)

cb.width = 200;
cb.addEventListener(Event.CHANGE, unBtn);
cb.selected = true;
function unBtn(e:Event):void{
ma.unSeulOuvert = e.currentTarget.selected
}

petit détail fla au format cs4.

Fichier(s) joint(s)



#10 masta64

    Ceinture Marron

  • Members
  • PipPipPipPipPipPip
  • 123 messages

Posté 21 November 2008 - 06:59 AM

C'est super cool de ta part !!! j'espère que tu as respecter la ligne de conduite en prenant compte de mon post spécial la dessus qui concerne des images pour les onglets arrondie ( http://flash.mediabox.fr/index.php?showtop...mp;#entry583454 ) !!!

Et les images peuvent elles bouger au on(rollOver) et on(rollOut) ?


Enfin, je vais regarder tout ca et étudier (à conditions que le fla cs4 soit accepter par mon cs3 wink.gif !!!

#11 masta64

    Ceinture Marron

  • Members
  • PipPipPipPipPipPip
  • 123 messages

Posté 03 January 2009 - 00:56 AM

bon je relance le topic car je ne suis toujours pas parvenu à un résultat concluant , pour l'exemple de Monz, il est bien sur le principe mais même retravailler pour la circonstance il y a encore quelque bug sur les onglets, et pour l'exemple de la Pieuvre , qui est plutot pas mal je n'y comprend pas grand chose, et j'ai peur que ce ne soit pas conçu pour des images à bords tres tres arrondi comme mes onglets donc je repart sur ma première idée qui malgré ma logique de code qui paraissait illogique pour certain, était à mon avis sur la bonne route ( http://flash.mediabox.fr/index.php?showtop...st&p=580939 ).... donc à moins qu'un âme charitable me vienne en aide pour m'expliquer deux ou trois trucs je galère toujours autant !!!

PS: en AS2 c'était deja compliquer mais en AS 3 c'est quasiment incompréhensible wink.gif

Modifié par masta64, 03 January 2009 - 00:57 AM.


#12 la pieuvre

  • Honoris
  • PipPipPipPipPipPipPipPip
  • 3055 messages

Posté 03 January 2009 - 01:20 AM

pour agrandir des formes tarabiscoté il faut les découper en des zone de taille fix et une zone de taille flexible (un rectangle) en gros sur l'image les zone en blanc ne se redimensionnent pas la zone en rouge si.

Fichier(s) joint(s)



#13 masta64

    Ceinture Marron

  • Members
  • PipPipPipPipPipPip
  • 123 messages

Posté 03 January 2009 - 01:37 AM

justement c'est toi que je cherchais la pieuvre, pourrait tu m'aider et me dire ou est ce que dans ton code je pourrais transformer tes shapes (en image à la forme tarabiscoté wink.gif que j'ai inclue dans la bibliothèque)?

#14 masta64

    Ceinture Marron

  • Members
  • PipPipPipPipPipPip
  • 123 messages

Posté 03 January 2009 - 05:15 AM

Ok, un grand merci à tous pour votre aide, je clos le topic car j'ai enfin, ehh oui enfin réussi à faire mon menu comme je le voulais, il est parfait et respecte au millième prêt ma guideline !!!

En fait j'ai comme indiquer dans mon précèdent message, repris le principe de départ de mon code et j'ai ensuite procéder par élimination et j'ai fini par réussir à créer un joli menu bien sympa avec un joli effet d'élasticité !!!

mais je tient à tous vous remerciez, enfin tous ceux qui ont généreusement pris sur leurs précieux temps pour me venir en aide, et même si j'ai repris mon principe et ma logique de départ vous m'avez quand même énormément appris et comme on dit "maintenant c'est un acquis" et "c'est pas tomber dans l'oreille d'un sourd" !!!

Et sans oublier le BONNE et HEUREUSE Année à tous !!! wink.gif



1 utilisateur(s) li(sen)t ce sujet

0 membre(s), 1 invité(s), 0 utilisateur(s) anonyme(s)

authorised training centre

Centre de Formation Mediabox - Adobe et Apple Authorised Training Center.

Déclaré auprès de la Direction du Travail et de la Formation Professionnelle

Mediabox : SARL au capital de 62.000€ - Numéro d'activité : 11 75 44555 75 - SIRET : 49371646800035

MEDIABOX, 23, rue de Bruxelles, 75009 PARIS

FFP