Vypínatelné tlačítko

11.11.2011· Autor: Ondřej Brichta· Počet komentářů: 4

Pokud potřebujeme vytvořit menu, kde lze jednotlivá tlačítka zapínat a vypínat, můžeme se spolehnout i na obyčejný symbol tlačítka – SimpleButton

Tlačítko - SimpleButton

Pokud ve flashové animaci připravujeme menu s tlačítky, nejrychlejší cestou je vytvoření nového symbolu typu Button - Tlačítko, ve kterém si nakreslíme jednotlivé stavy.

Takový symbol můžeme na straně ActionScriptu 3.0 najít a ovládat pomocí třídy SimpleButton: http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/display/SimpleButton.html?filter_flash=cs5&filter_flashplayer=10.2&filter_air=2.6#propertySummary

Vytvořená tlačítka dobře reagují na jednotlivé akce - roll-over,down, roll-out jenže co když potřebujeme zobrazit stav, kdy je tlačítko zobrazené jako stisknuté? Pak si často pomáháme tvorbou tlačítka z MovieClipu. Existuje ale i jednodušší cesta, při které lze využít stávajícího symbolu tlačítka - SimpleButton třídy.

Stisknutý stav

Třída SimpleButton nám nabízí možnost získat objekty, které se objevují při jednotlivých stavech tlačítka, jedná se především o vlastnosti downState a upState. Jejich vzájemnou kombinací a přepínáním můžeme velmi snadno zajistit, aby v klidovém stavu vypadalo tlačítko jako stisknuté:

var selectedBtn:SimpleButton;
var outState:DisplayObject;
function setNewSelection(b:SimpleButton):void{
 if(selectedBtn){
 selectedBtn.upState = outState;
 }
 selectedBtn = b;
 outState = selectedBtn.upState;
 selectedBtn.upState = selectedBtn.downState;
}

Funkce setNewSelection pak zajistí, že po každém kliknutí dojde k navrácení již stisknutého tlačítka na do stisknutého stavu přepne nové tlačítko:

 

 

Uvedená funkce je poměrně jednoduchá a určitě by si zasloužila o rozšíření tak, aby bylo možné vytvářet skupiny tlačítek, které se vzájemně vypínají a zapínají. Výsledkem takové úpravy může být následující třída:

package {
 import flash.display.SimpleButton;
 import flash.events.Event;
 import flash.events.MouseEvent;
 public class SimpleButtonSelection {
 public function SimpleButtonSelection() {
 }
 private static var groups:Array = new Array();
 private static var buttons:Array = new Array();
 public static function addButton(btn:SimpleButton,group:String):void{
 var indx:int = groups.indexOf(group);
 if(indx==-1){
 groups.push(group);
 var arr:Array = new Array();
 var pomObj:Object = new Object(); 
 arr.push(pomObj);
 arr.push(btn);
 buttons.push(arr);
 }else{
 var arr2:Array = buttons[indx];
 arr2.push(btn);
 }
 btn.addEventListener(MouseEvent.CLICK,selectBtn);
 }
 private static function selectBtn(e:Event):void{
 var btn:SimpleButton = e.currentTarget as SimpleButton;
 var selArr:Array;
 MainLoop: for(var i:uint=0;i<buttons.length;i++){
 var arr:Array = buttons[i];
 for(var b:uint=1;b<arr.length;b++){
 var btn2:SimpleButton = arr[b];
 if(btn2==btn){
 selArr = arr;
 break;
 break MainLoop;
 }
 }
 }
 var pomObj:Object = selArr[0];
 if(pomObj.selectedBtn){
 pomObj.selectedBtn.upState = pomObj.outState;
 }
 pomObj.selectedBtn = btn;
 pomObj.outState = pomObj.selectedBtn.upState;
 pomObj.selectedBtn.upState = pomObj.selectedBtn.downState;
 }
 }
}

 

Použití takové třídy je jednoduché, metoda „addButton" požaduje objekt tlačítka a název skupiny, do které bude patřit:

SimpleButtonSelection.addButton(objekt_tlacitka,"skupina");

 

Pokud budeme mít na scéně tlačítka „b1" až „b4" a stejné instance pak budeme mít umístěné v MovieClipu s názvem instance „mc", můžeme obě skupiny oddělit a aktivovat přes následující příkazy:

for(var i:uint=1;i<5;i++){
 var btn:SimpleButton = this["b"+i];
 SimpleButtonSelection.addButton(btn,"g1");
}
for(var ii:uint=1;ii<5;ii++){
 var btn2:SimpleButton = mc["b"+ii];
 SimpleButtonSelection.addButton(btn2,"g2");
}

Výsledkem jsou dvě skupiny, které se nezávisle na sobě vypínají a zapínají:

 

Zdrojové soubory jsou k dispozici zde:  data.zip

Ondřej Brichta Vývojář flashových a mobilních AIR aplikací, šéfredaktor Flash.cz, školitel produktů Flash, Flex, Flash Media Server

E-mail: ob(zavinac)obria.cz | Web: http://www.obria.cz |

Motto: <°))))><

Komentáře k článku  
Rýchle tlačítko neznám | 11.11.2011 17:58
komponenty neznám | 11.11.2011 21:34
toggle neznám | 13.11.2011 20:32
Simple GUI neznám | 14.11.2011 16:31

Přihlášení uživatele