Ciao a tutti/e, sto tentando di imparare l'uso delle classi ed ho un problema con un menu verticale che sto creando. In pratica l'effetto desiderato è questo: ho quattro bottoni allineati in verticale; ogni volta che avviene un rollover su un pulsante questo si allunga passando da 24px a 64px; ovviamente gli altri pulsanti devono riposizionarsi in modo da non sovrapporsi ed occupare globalmente la solita area dello stage.
Le classi che utilizzo per l'animazione del bottone (ho usato classi trovate su "Flash Application Design Solutions - The Flash Usability Handbook" della serie FriendsOfEd e le ho riadattate in parte alle mie necessità, se ci fossero problemi di copyright cancellate pure il messaggio) sono le seguenti:
SelectionSystem
UIButtoncodice:class SelectionSystem extends MovieClip { // Array di dati passato al momento della creazione dell'istanza private var systemData:Array; // nome di linkage del bottone private var exportName:String; // Stato attuale espresso come valore numerico private var currentSelection:Number; // Riferimento agli elementi private var listItems:Array; // Costruttore public function SelectionSystem() { } public function doInit(_systemData:Array, _exportName:String):Void { systemData = _systemData; exportName = _exportName; listItems = new Array(); attachButtonItems(); } /* 1) Allega un bottone clip per ogni elemento nell'array systemData. 2) Richiama init() sul nuovo clip, e passa ID ed elemento dati (label, etc.). */ private function attachButtonItems():Void { for(var i:Number = 0; i < systemData.length; i++) { var item:MovieClip = this.attachMovie(exportName,"Item_" + i,i); item.init(this, i, systemData[i]); listItems.push(item); } } /* Richiamata dai bottoni per le variazioni di stato. ID passata dal bottone che richiama il metodo. */ public function setSelection(_id:Number):Void { if(currentSelection!=_id) { listItems[currentSelection].setUnselected(); currentSelection = _id; listItems[currentSelection].setSelected(); doAction(); } } /* Compie qualche azione in risposta alla nuova selezione; override da parte della classe estesa. */ private function doAction():Void { //override } public function getSystemData():Array { return systemData; } public function getCurrentSelection():Number { return currentSelection; } public function setCurrentSelection(_val:Number):Void { currentSelection = _val; } }
MenuButtoncodice:import SelectionSystem; class UIButton extends MovieClip { //Riferimento ad un'istanza di SelectionSystem private var selectionSystem:Object; //ID numerico passato da SelectionSystem private var id:Number; //Clip contenente il titolo private var label_mc:MovieClip; //Clip contenente lo sfondo private var sfondo_mc:MovieClip; //Controllo dello stato di selezione private var selected:Boolean; //Contenitore delle informazioni visive personalizzate private var itemData:Object; //Contenitore storia dell'oggetto public var visited:Boolean; //Costruttore del bottone public function UIButton() { } /* 1) Impostazione di riferimento, ID, e dati 2) Gestione dell'UI */ public function init(_selectionSystem:SelectionSystem, _id:Number, _itemData:Object):Void { _focusrect = false; selectionSystem = _selectionSystem; itemData = _itemData; id = _id; setLabel(itemData.label); setPosition(); initMouseEvents(); } /* Stato selezione: Rollover, Rollout */ public function setSelected():Void { selected = visited = true; killMouseEvents(); } public function setUnselected():Void { selected = false; initMouseEvents(); } private function setLabel():Void { label_mc.label_txt.text = itemData.label; } private function setPosition():Void { // Override di questo metodo } /* Avverte selectionSystem del click e passa anche laID del clip */ private function handleRelease():Void { selectionSystem.setSelection(id); } private function handlePress():Void { // Override } private function handleRollOver():Void { //override } private function handleRollOut():Void { //override } /* Cattura tutti i mouse events e li passa ai metodi interni dello handler */ private function initMouseEvents() : Void { useHandCursor = true; onRollOver = handleRollOver; onRollOut = handleRollOut; onReleaseOutside = handleRollOut; onPress = handlePress; onRelease = handleRelease; } private function killMouseEvents():Void { useHandCursor = false; delete onRollOver; delete onRollOut; delete onReleaseOutside; delete this.onPress; delete this.onRelease; } public function getId():Number { return id; } public function setId(_val:Number):Void { id = _val; } }
Come posso integrare le classi per ottenere il riposizionamento dei pulsanti?codice:import UIButton; import mx.transitions.easing.*; import mx.transitions.Tween; class MenuButton extends UIButton { private var sfondoTween:Tween; private var labelTween:Tween; public function MenuButton() { } private function setPosition():Void { _y = id * (_height + 8); } private function handleRollOver():Void { sfondoTween = new Tween(sfondo_mc, "_alpha", Regular.easeOut, sfondo_mc._alpha, 50, .5, true); sfondoTween += new Tween(sfondo_mc, "_height", Regular.easeOut, sfondo_mc._height, 48, .5, true); labelTween = new Tween(label_mc, "_x", Regular.easeOut, label_mc._x, 15, .2, true); } private function handleRollOut():Void { if (visited) { var fadeVal:Number = 25; } else { var fadeVal:Number = 25; } sfondoTween = new Tween(sfondo_mc, "_alpha", Regular.easeOut, sfondo_mc._alpha, fadeVal, .5, true); sfondoTween += new Tween(sfondo_mc, "_height", Regular.easeOut, sfondo_mc._height, 24, .5, true); labelTween = new Tween(label_mc, "_x", Regular.easeOut, label_mc._x, 5, .2, true); } private function handlePress():Void { sfondoTween = new Tween(sfondo_mc, "_alpha", Regular.easeOut, sfondo_mc._alpha, 25, .5, true); sfondoTween += new Tween(sfondo_mc, "_height", Regular.easeOut, sfondo_mc._height, 24, .5, true); labelTween = new Tween(label_mc, "_x", Regular.easeOut, label_mc._x, 5, .2, true); } public function setUnselected():Void { super.setUnselected(); handleRollOut(); } }
Rispondi quotando