. .. : Swf.hu 1.0 archívum : Swf.hu főoldal >>> : .. .




 
 
SEGÉDLETEK

  feltöltve: 1970.01.01 | szerző: ismeretlen | olvasva: alkalommal

 

Mintakódok

Ahhoz hogy jobban megértsük AS3 működését szükség van azt egy adott feladat megvalósítása közben is látni ezért készítettem el pár minta alkalmazást amik bemutatják a fent leírtakat és segítenek bizonyos problémák megértésében és megoldásában. Úgy lettek megírva, hogy csak be kell másolni őket és futtatáskor már működniük is kell. Többségük csak a fejlesztőkörnyezeten belül fog működni máshol futtatva hibát fogunk kapni. Ez többnyire azért van, mivel más domain-ről tölt be tartalmat amit a flash security nem engedélyez de mivel csak pár alap probléma megoldását szemlélteti nincs szükség arra, hogy internetre felrakva is működjenek.

Dinamikus menu

Készítsünk egy teljesen dinamikus menüt. Ehhez egy új osztályt a SimpleButton elnevezésűt fogjuk használni. Ez az osztály reprezentál egy már régi as verziókban is megszokott Button-t. Ugyan úgy mint a fejlesztőkörnyezetben létrehozható gombnak ennek is van up, down, over és hit állapota. Ezeket az állapotokat dinamikusan adhatjuk hozzá a gombunkhoz.

//Alap beállítások
stage.align = StageAlign.TOP_LEFT
stage.scaleMode = StageScaleMode.NO_SCALE
stage.showDefaultContextMenu = false

create()

//Ez a függvény hozza létre a menünket
function create():void{

       //A menüpontok szövegeit egy tömbben tároljuk
       var menuLabels:Array = new Array("Főoldal","Hírek","Linkek","Fórum","Egyéb")

        //Létrehozzuk a menüt
       var menu:Sprite = createMenu(menuLabels,150,20)

        /*Egy figyelőt adunk a menüpontokat tartalmazó Sprite-hoz így
        az új eseménykezelésnek köszönhetően értesülni fogunk ha egy
        belső menüpontra kattintottak*/

        menu.addEventListener(MouseEvent.CLICK,onMouseClick)

       //Hozzáadjuk a menünket a display listához
      addChild(menu)
}

//Ez a függvény hívódik meg ha valaki ey menüpontra kattint
function onMouseClick(event:Event):void{
      //Az event.target mutat arra a gombra amelyikre kattintottunk
      var buttonHolder:MovieClip = event.target.parent
      trace(buttonHolder.name+" was clicked, label is: "+ buttonHolder.label)
}

//Ez a függvény hozza létre a menügombokat majd összerakja a menüt
function createMenu(labels:Array,width:Number,height:Number):Sprite{

      //Létrehozunk a gombokat tartalmazó Sprite-ot
      var holder:Sprite = new Sprite()
      var numy:Number = 0
      var index:uint = 0
      //for each segítségével végigmegyünk a menügobok szövegein
      for each(var label:String in labels){

            //Létrehozunk egy holdert amin saját változókat tárolhatunk
            var buttonHolder:MovieClip = new MovieClip()
            //Létrehozunk egy gombot
            var button:SimpleButton = createMenuButton(label,width,height)
            buttonHolder.y = numy
            //Elmentünk pár információt a holderen
            buttonHolder.label = label
            buttonHolder.index = index
            buttonHolder.name = "Button "+(index+1)

            numy += button.height
            index++

            buttonHolder.addChild(button)
            holder.addChild(buttonHolder)
      }

      return holder
}

//Ez a függvény készít el egy gombot
function createMenuButton(text:String,width:Number,height:Number):SimpleButton{
      //Létrehozunk egy SimpleButton-t
      var button:SimpleButton = new SimpleButton()

      //A gombunk alap állapota ez lesz
      var up:Sprite = new Sprite()
      up.addChild(getColorRect(0x7CAAD8,0x244D75,width,height))
      up.addChild(getButtonLabel(text,width,height))

      //A gombunk amikor az egér fölé kerül erre az állapotra vált
      var over:Sprite = new Sprite()
      over.addChild(getColorRect(0x3470A9,0xffffff,width,height))
      over.addChild(getButtonLabel(text,width,height))

      //Klikeléskor ez a Sprite fog látszani
      var down:Sprite = new Sprite()
      down.addChild(getColorRect(0x1C3D5B,0x244D75,width,height))
      down.addChild(getButtonLabel(text,width,height))

      //Beállítjuk az állapotokat
      button.upState = up
      button.downState = down
      button.overState = over
      button.hitTestState = up

      return button
}

//Ez a függvény visszaad egy szövegezőt ami a gomb szövegét tartalmazza
function getButtonLabel(text:String,width:Number,height:Number):TextField{
      var field:TextField = new TextField()
      field.selectable = false
      field.width = width
      field.height = height
       //Beállítjuk az alapértelmezett formázást
      field.defaultTextFormat = getTextFormat()
      field.text = text

      return field
}

//Ez a függvény visszaad egy színes téglalapot tartalmazó Shape-et
function getColorRect(color:uint,lineCol:uint,width:Number,height:Number):Shape{
      var rect:Shape = new Shape()
      rect.graphics.lineStyle(1,lineCol,1,true)
      rect.graphics.beginFill(color)
      rect.graphics.drawRoundRect(0,0,width,height,5,5)
      rect.graphics.endFill()
      return rect
}

//Ez a függvény visszaad egy formázást
function getTextFormat():TextFormat{
      var format:TextFormat = new TextFormat()
      format.align = TextFormatAlign.CENTER
      format.color = 0xffffff
      format.bold = true
      return format
}

 

sendAndLoad

Talán nem mindenkinek derül ki ebből a tutorialból, hogy hogyan is lehetne adatokat küldeni egy szervernek majd visszakapni egy módosított eredmény bár az URLRequest leírásánál halványan utaltam rá.
Készítsünk egy primitív számoló alkalmazást ami elküld egy számot php-nak majd visszakapja a dupláját. Két szövegmezőt fogunk készíteni, a felsőbe fogjuk beírni a számunkat az alsóban pedig visszakapjuk az eredményt. A változók elküldéséhez egy még nem bemutatott osztályt az URLVariables fogjuk használni. A neve ne zavarjon meg senki úgy viselkedik mint egy objektum, szabadon hozhatunk létre rajta változókat amik majd a kéréssel együtt elküldődnek.

php file:
[webroot]/adder.php

php tartalma:
<?php
$number = $_POST['number'];
echo $number*2;
?>

Actionscript:

//Definiáljuk a változóinkat amiket máshonnan is el szeretnénk érni
var dataLoader:URLLoader
var phpUrl:String
var inputField:TextField
var outputField:TextField

init()

//Ez a függvény ad értéket a fennt definiált változóinknak
function init():void{
      //Ide kerül a php elérési útvonala
      phpUrl = "http://www.prodesktop.hu/As3Tut/adder.php"
      dataLoader = new URLLoader()
      //Létrehozzuk a szövegmezőket
      inputField = createField(150,20,TextFieldType.INPUT)
      outputField = createField(150,20)
      create()
}

//Ez a függvény rakja össze és jeleníti meg az elemeket
function create():void{
      var button:Sprite = createButton()

      //Hozzáadjuk a figyelőket
      dataLoader.addEventListener(Event.COMPLETE,onLoadComplete)
      dataLoader.addEventListener(IOErrorEvent.IO_ERROR,onLoadError)
      button.addEventListener(MouseEvent.CLICK,onButtonClick)

      //Beállítjuk a pozíciókat
      inputField.x = 10
      outputField.x = 10
       button.x = 10

      inputField.y = 10
      outputField.y = inputField.y + inputField.height +10
      button.y = outputField.y + outputField.height +30

      //Hozzáadjuk a display listához az elemeket

      addChild(inputField)
      addChild(outputField)
      addChild(button)
}

//Ez a függvény hívódik meg ha rákattintunk a gombra
function onButtonClick(event:Event):void{
      var request:URLRequest = new URLRequest(phpUrl)
      //Az URLVariables osztály segítségével adjuk át a számunkat
      var variables:URLVariables = new URLVariables()
      variables.number = inputField.text

      //Elmentjük a küldeni kívánt adatot
      request.data = variables
      //Megadjuk hogy a POST metódust szeretnénk használni az adatok küldésénél
      request.method = URLRequestMethod.POST

      dataLoader.load(request)
}

//Ez a függvény hívódik meg ha befejeződött a letöltésünk
function onLoadComplete(event:Event):void{
      outputField.text = event.target.data
      inputField.text = ""
}

//Ez a függvény hívódik meg ha hiba lépett fel a betöltés közben
function onLoadError(event:Event):void{
      trace("Hiba történt")
}

//Ez a függvény készíti el a szövegmezőket
function createField(width:Number,height:Number,type:String=TextFieldType.DYNAMIC):TextField {
      var field:TextField = new TextField();
      if(type == TextFieldType.DYNAMIC){
            field.backgroundColor = 0xC7C4C0
            field.selectable = false
      }
      field.background = true
      field.type = type;
      field.width = width;
      field.height = height;
      field.border = true;
      return field;
}

//Ez a függvény készíti el a gombunkat
function createButton():Sprite{
      var button:Sprite = new Sprite()
      button.graphics.beginFill(0x3C80C4)
      button.graphics.drawRect(0,0,150,30)
      button.graphics.endFill()
      button.buttonMode = true
      return button
}

Dinamikus Képgaléria

Készítsünk egy teljesen dinamikus képgalériát, ami automatikusan alkalmazkodik a Stage méreteihez és az alapján méretezi a képeket. Egy listába fogjuk majd elhelyezni az előnézeti képeket majd azokra kattintva betöltjük a nagyokat amik szintén alkalmazkodnak.
A kódot úgy próbáltam meg elkészíteni, hogy a fent elmagyarázott függvények és osztályok közül minél többet lehessen látni működés közben.
Alapjaiban véve ez is egy másol és futtat szintű kód azonban ahhoz hogy működjön egy UIScrollBar komponenst kell a library-ba másolnunk.
A komponensek használata annyiban tér el a saját magunk által készített AS-ből elérhető osztályoktól hogy importálnunk kell a komponens osztályokat mivel azok nem a flash csomagban vannak, így nem importálja automatikusan őket a fejlesztő környezet.

//Importáljuk a komponens osztályokat
import fl.controls.UIScrollBar
import fl.events.ScrollEvent

//Pár alap beállítás
stage.scaleMode = StageScaleMode.NO_SCALE
stage.align = StageAlign.TOP_LEFT
stage.showDefaultContextMenu = false

//Definiáljuk a változóinkat
var borderPadding:Number
var thumbHolderPadding:Number
var tumbHolder:Sprite
var picHolder:Sprite
var images:Array
var loadedTumbs:Array
var thumbLoader:Loader
var picLoader:Loader
var tumbIndex:uint
var tumbPosY:Number
var tumbHolderWidth:Number
var tumbHolderHeight:Number
var picHolderWidth:Number
var picHolderHeight:Number

init()
//Ez a függvény inicializálja a galériát
function init():void{

      //Megajuk mennyi hely maradjon ki a széleknél
      borderPadding = 10
      thumbHolderPadding = 10
      tumbIndex = 0
      tumbPosY = 10
      loadedTumbs = new Array()
      thumbLoader = new Loader()
      picLoader = new Loader()

      var base:String = "http://prodesktop.hu/As3Tut/"

      //A képeket ebben a tömbben fogjuk tárolni, a nagy és a kis képeket is külön
      images = new Array()
      images.push({pic:base+"pic/image001.jpg", tumb:base+"tumb/image001.jpg"})
      images.push({pic:base+"pic/image002.jpg", tumb:base+"tumb/image002.jpg"})
      images.push({pic:base+"pic/image003.jpg", tumb:base+"tumb/image003.jpg"})
      images.push({pic:base+"pic/image004.jpg", tumb:base+"tumb/image004.jpg"})
      images.push({pic:base+"pic/image005.jpg", tumb:base+"tumb/image005.jpg"})
      images.push({pic:base+"pic/image006.jpg", tumb:base+"tumb/image006.jpg"})
      images.push({pic:base+"pic/image007.jpg", tumb:base+"tumb/image007.jpg"})
      images.push({pic:base+"pic/image008.jpg", tumb:base+"tumb/image008.jpg"})
      images.push({pic:base+"pic/image009.jpg", tumb:base+"tumb/image009.jpg"})
      images.push({pic:base+"pic/image010.jpg", tumb:base+"tumb/image010.jpg"})

      //Beállítjuk a méreteket
      setSize()
      //Létrehozzuk a héttérkitöltést
      createBorder()
      //Létrehozzuk a nagyképek tárolóját
      createPicHolder()
      //Létrehozzuk a kiskép tárolót majd maszkoljuk
      createTumbHolder().mask = createTumbMask()

      //Hozzáadjuk a figyelőket
      thumbLoader.contentLoaderInfo.addEventListener(Event.COMPLETE,onTumbComplete)
      thumbLoader.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR,onTumbError)
      picLoader.contentLoaderInfo.addEventListener(Event.COMPLETE,onPicComplete)
      tumbHolder.addEventListener(MouseEvent.CLICK,onTumbClick)
      stage.addEventListener(Event.RESIZE,onStageResize)

      addChild(tumbHolder)
      addChild(picHolder)

      //Elindítjuk a kis képek betöltését
      startTumbLoad()
}

//********************************
//Ez a függvény hívódik meg ha betöltődött egy kis kép

function onTumbComplete(event:Event):void{
      //Lekérjük a képünket
      var loadedCont:Bitmap = thumbLoader.content as Bitmap
      thumbLoader.unload()
      //Hozzáadjuk a listához
      addTumb(loadedCont,tumbIndex)
      //Betöltjük a küvetkező kisképet
      loadTumb(++tumbIndex)
}

//Ez a függvény hívódik meg ha betöltődött egy nagy kép
function onPicComplete(event:Event):void{
      var loadedCont:Bitmap = picLoader.content as Bitmap
      //Lekérjük a nagyképek tárolóját név alapján
      var picBitmap:Bitmap = picHolder.getChildByName("picBitmap") as Bitmap

      /*Nem muszáj egy kép megváltoztatásához folyton eltávolítanunk a Bitmap-ot
      
majd a betöltöttet újra hozzáadni hanem elég csak a tartalmát másolni ami egy
      
BitmapData, így nem kell törődnünk a Loader referenciájának törlésével sem.*/
      picBitmap.bitmapData = loadedCont.bitmapData
      //Beállítjuk a símítást
      picBitmap.smoothing = true
      //Meghívjuk a képet pozícionáló függvényt
      updatePicPos(picBitmap)
}

//Ez a függvény hívódik meg ha nem sikerült betölteni egy kis képet
function onTumbError(event:Event):void{
      //Ha nem sikerül betölteni egy kis képet tovább ugrunk
      loadTumb(++tumbIndex)
}

//Ez a függvény hívódik meg ha a listát görgetik
function onScrollChange(event:Event=null):void{
      //Lekérjük a görgetősávot név alapján
      var scrollBar:UIScrollBar = UIScrollBar(tumbHolder.getChildByName("scrollBar"))
      //Lekérjük a listát amit mozgatunk
      var list:Sprite = Sprite(tumbHolder.getChildByName("tumbList"))
      //Beállítjuk az új pozícióját
      list.y = -scrollBar.scrollPosition
}

//Ez a függvény hívódik meg ha valaki a kisképeket tartalmazó területre kattint
function onTumbClick(event:Event):void{
      /*Mivel a kis képek tárolója egy Sprite ezért a target alapján ki tudom szűrni őket az "is"
      segítségével erre azért van szükség mivel alap esetben minden reagál az egérre és ha
      mellé kattintok és van valami kitöltés ott akkor onnan is dobódik egy esemény.
      Természetesen ezt a "mouseEnabled=false" segítségével letilthatjuk*/

      if(event.target is MovieClip){
            //Betöltjük a nagy képet
            loadPicture(event.target.picIndex)
      }
}

//Ez a függvény hívódik meg ha a Stage mérete megváltozik
function onStageResize(event:Event):void{
      var picBitmap:Bitmap = picHolder.getChildByName("picBitmap") as Bitmap

      setSize()
      createTumbHolder().mask = createTumbMask()
      updateScrollBar()
      createBorder()
      onScrollChange()
      updatePicPos(picBitmap)

}
//********************************

//Ez a függvény ad értéket pár méretet meghatározó változónak
function setSize():void{
      tumbHolderWidth = 150
      tumbHolderHeight = stage.stageHeight-borderPadding*2-2*thumbHolderPadding
      picHolderWidth = stage.stageWidth - tumbHolderWidth-(thumbHolderPadding*2)-(borderPadding*2)
      picHolderHeight = stage.stageHeight - thumbHolderPadding*2-(borderPadding*2)
}

//Ez a függvény méretezi és pozícionálja a nagy képet
function updatePicPos(picBitmap:Bitmap):void{
      //Ha már méreteztük a képünket akkor visszaállítjuk az eredeti méretére
      picBitmap.scaleY = 1
      picBitmap.scaleX = 1

      //Ha a képünk szélesebb mint a megengedett méretezzük
      if(picBitmap.width+10 > picHolderWidth){
            var width:Number = picHolderWidth-10
            picBitmap.width = width>0?width:0
            //A méretezés után torzul a kép ezért arányosan kell állítani a másik oldalát is
            picBitmap.scaleY = picBitmap.scaleX
      }

      //Ha a képünk magasabb mint a megengedett méretezzük
      if(picBitmap.height+10 > picHolderHeight){
            var height:Number = picHolderHeight-10
            picBitmap.height = height>0?height:0
            picBitmap.scaleX = picBitmap.scaleY
      }

      //Középre igazítjuk a nagy képet
      picBitmap.x = picHolderWidth/2 - picBitmap.width/2
      picBitmap.y = picHolderHeight/2 - picBitmap.height/2
}

//Ez a függvény indítja el a kisképek betöltését
function startTumbLoad():void{
      tumbIndex = 0
      loadTumb(tumbIndex)
}

//Ez a függvény tölt be egy meghatározott sorszámú képet
function loadPicture(index:uint):void{
      var path:String = images[index].pic
      picLoader.load(new URLRequest(path))
}

//Ez a függvény tölt be egy meghatározott sorszámú előnézeti képet
function loadTumb(index:uint):void{
      if(tumbIndex < images.length){
            thumbLoader.load(new URLRequest(images[index].tumb))
      }
}

//Ez a függvény ad hozzá egy kisképet a listához
function addTumb(image:Bitmap,index:uint):void{
      //Lekérjük a kiképek tárolóját a neve alapján
      var list:Sprite = Sprite(tumbHolder.getChildByName("tumbList"))

      //Beállítjuk a kis képek szélességét
      image.width = 100
      //Arányosan méretezzük
      image.scaleY = image.scaleX
      image.smoothing = true

      //Elkészítünk egy MC-t ami majd a kis képeket fogja tartalmazni
      var imageHolder:MovieClip = new MovieClip()
      //Engedélyezzük a kéz kurzort
      imageHolder.buttonMode = true
      //Elmentjük a kisképünk indexét
      imageHolder.picIndex = index
      imageHolder.y = tumbPosY
      tumbPosY += image.height + 10
      imageHolder.addChild(image)

      list.addChild(imageHolder)

      //Frissítjuk a gördítősávot
      updateScrollBar()
}

//Ez a függvény állítja be a görgetősáv méreteit
function updateScrollBar():void{
      //Lekérjük a komponensünket
      var scrollBar:UIScrollBar = UIScrollBar(tumbHolder.getChildByName("scrollBar"))
      var list:Sprite = Sprite(tumbHolder.getChildByName("tumbList"))

      //Ezzel a metódussal tudjuk beállítani hogy mekkora a tartalom amit görgetünk
      scrollBar.setScrollProperties(tumbHolderHeight,0,list.height-tumbHolderHeight+20,100)

}

//Ez a függvény hozza létre a kisképek listájának maszkját
function createTumbMask():Shape{
      //Megpróbáljuk lekérni a maszkot
      var holderMask:Shape = getChildByName("holderMask") as Shape

      //Ha már létezik a maszkunk töröljük belőle a grafikát
      if(holderMask){
            holderMask.graphics.clear()
      }else{
            //Ha nem létezik létrehozzuk
            holderMask = new Shape()
            //Adunk neki egy nevet ami alapján majd getChildByName-el tudunk rá hivatkozni
            holderMask.name = "holderMask"
      }

      //Megrajzoljuk a maszkunkat
      holderMask.graphics.beginFill(0,1)
      holderMask.graphics.drawRect(0,0,tumbHolderWidth,tumbHolderHeight)
      holderMask.graphics.endFill()
      holderMask.x = holderMask.y = borderPadding+ thumbHolderPadding

      return holderMask
}

//Ez a függvény hozza létre a lista és a görgetősáv tárolóját
function createTumbHolder():Sprite{
      var tumbList:Sprite
      var scrollBar:UIScrollBar

      if(!tumbHolder){
            tumbHolder = new Sprite()
            tumbHolder.name = "tumbHolder"

            tumbList = new Sprite()
            tumbList.name = "tumbList"
            tumbHolder.addChild(tumbList)

            scrollBar = new UIScrollBar()
            scrollBar.name = "scrollBar"

            //Hozzáadjuk a figyelőnket a görgetősávhoz
            scrollBar.addEventListener(ScrollEvent.SCROLL,onScrollChange)
            tumbHolder.addChild(scrollBar)
      }else{
            tumbList = Sprite(tumbHolder.getChildByName("tumbList"))
            scrollBar = UIScrollBar(tumbHolder.getChildByName("scrollBar"))
            tumbHolder.graphics.clear()
      }

      tumbHolder.graphics.beginFill(0xEFECCA,1)
      tumbHolder.graphics.drawRoundRect(0,0,tumbHolderWidth,tumbHolderHeight,20,20)
      tumbHolder.graphics.endFill()

      //Beállítjuk a pozíciókat
      tumbHolder.x = tumbHolder.y = borderPadding+ thumbHolderPadding
      tumbList.x = 20
      scrollBar.height = tumbHolderHeight
      scrollBar.x = tumbHolderWidth-scrollBar.width

      return tumbHolder
}

//Ez a függvény hozza létre a nagy képet tároló Bitmap-ot
function createPicHolder():Sprite{
      if(!picHolder){
            picHolder = new Sprite()
            var picBitmap:Bitmap = new Bitmap()
            picBitmap.name = "picBitmap"
            picHolder.addChild(picBitmap)
      }

      picHolder.y = thumbHolderPadding+borderPadding
      picHolder.x = tumbHolderWidth+thumbHolderPadding+borderPadding

      return picHolder
}

//Ez a függvény hozza létre a háttér kitöltését
function createBorder():void{
      var border:Shape = getChildByName("border") as Shape
      var width:Number = stage.stageWidth-borderPadding*2
      var height:Number = stage.stageHeight-borderPadding*2

      if(border){
            border.graphics.clear()
      }else{
            border = new Shape()
            border.name = "border"
            addChild(border)
      }

      border.graphics.beginFill(0x046380,1)
      border.graphics.drawRoundRect(borderPadding,borderPadding,width,height,20,20)
      border.graphics.endFill()
}

Sajnos ez még mind csak töredéke annak, amit Actionscript 3-ról tudni lehet vagy tudni kellene, de remélhetőleg elég lesz ahhoz, hogy a neten fellelhető komolyabb tutorialokat jobban megértsük vagy egyszerűbb kódokat tudjunk írni. Remélem, hogy azok akik végigjutottak és esetleg eddig féltek belevágni most kedvet kaptak hozzá és rájöttek, hogy nem is olyan nehéz ez a nyelv. Remélhetőleg mindenki belátja hogy sokkal jobban kezelhető és logikusabb lett a flash működése, és hogy ez a változás már elengedhetetlen volt a flash továbbfejlődéséhez egy igazi világnyelvvé :)

 
 
 

© Devnet.hu. A segédletek semmilyen formában nem másolhatók, publikálhatók a Devnet.hu és a szerzők közös írásos engedélye nélkül.
 
. .. : Swf.hu 1.0 archívum : Swf.hu főoldal >>> : .. .