FLEX ACTION SCRIPT 3

Buradaki açıklamalar http://digitaltools.node3000.com/download/using_actionscript_3_with_flex_tutorial_and_template.php adresindedir.

Flex ile Actionscript 3. Anlatım ve Örnekler

Flex altında hızla degiştirilecek ve yaratılacak anlar için Actionscript kullanılır. Herkes eski Flash işlemlerini Flex altında kullanmak için Actionscript kodlamasından yararlanmak isteyecektir. Adobe Flex kullanarak kolay uygulamalarda Actionscript kullanmak olanağı vardır.



İlk başlayanlar için eğlence

Bu işe başlamaya kalkıldığında Adobe öncelikle Flex-örneklerini sunar. Actionscript başlangıç kullanıcılar için oldukça gelişmiştir. Forumlardaki pekçok insan da hemen actionscript ile bir yerlere gelmek istemektedir. Bu nedenle üç dosyada kodlamanın keyfine varılmasını sağlayacak bilgi sunulmuştur.

İlk dosya kalıbı oluşturur. Actionscript ile ekranda iki biçimde görüntü oluşturmayı gösterir. İki değişik teknikten söz edilir. İlk başlayanlar için anlaşılır değildir. Ayrıntılara bakmadan projeye başlayın ve üzerine ekleme yapmaya çalışın.

İkincisi yukarıdakinin daha parçalara ayrılmış biçimidir denebilir. Boş bir Flex çerçevesiyle başlar. Actionscript için bir küvet gibidir. Bir zaman sayacı da ekrandakileri hareket ettirirken kullanılmak için tanımlanır. Fakat kodlanmış animasyonu ve Flex öğelerini de birlikte kullanabilirsiniz (zıplayan yazı kutuları ve boyutları değişen düğmeleri kullanabilirsiniz.

Üçüncüsü kolaylığın Olimpusu olur. Ekranda dönen nesneler vardır. Özelleştirilmiş sınıftan üretilmiştir.

Daha önce Flex/Actionscript projesi yapmılmamışsa Flex 3 SDK ve Flash 9 Plugin/Player kurulu olduğunu kontrol edin. FlasDevelop kodu çalıştırmak için önerilir. İyidir. Hafif içerikli IDE Flash projelerini yönetmek için kullanışlıdır.

1. Actionscript 3 tarafından yaratılan hayal doğrudan Flex altında kullanılmıştır.
   
   Bu main.mxml dosyasıdır. Başka dosyalara gerek yoktur. Çünkü Actionscript Flex script nesnesinde ele alınır. Bu dosyayı derlemek yeterlidir. Derleyicinin başlama noktasını bu dosyaya yönlendirmeyi unutmamak gerekir.
   
   Herşeyi anlamakta sorular üzeriyorsanız önce buraya bakın.

   <?xml version="1.0"?>
   <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
     backgroundColor="#123456"
     creationComplete="init();">
   	
     <mx:Script>
     <![CDATA[
   			
       import flash.display.Sprite; 
       import flash.events.TimerEvent;
       import flash.utils.Timer;	
   
       public var ticker:Timer;
   		
       public var mySprite:Sprite = new Sprite();	
       public var mySprite2:Sprite = new Sprite();	
       public var mySprite3:Sprite = new Sprite();	
   		
       public function init():void {
   			
         ticker = new Timer(10);
   								
         mySprite.graphics.beginFill(0x00FF00);
         mySprite.graphics.drawRect(0, 0, 40, 150);
         mySprite.graphics.endFill();
   									
         // Don't ask why, but you have to add the sprite with rawChilden to finally work!
         myCanvas.rawChildren.addChild(mySprite);
   			
         mySprite2.graphics.beginFill(0x33BB33);
         mySprite2.graphics.drawRect(0, 0, 40, 150);
         mySprite2.graphics.endFill();
   			
         // the other way is to use a Flex-UIComponent instead of a Flex-Canvas
         myUIComponent.addChild(mySprite2);
   			
         // This implements the timerEvent
         ticker.addEventListener(TimerEvent.TIMER, doWalk);
         ticker.start();
   			
         // You can also dispatch timed functions like this, with an interval element:
         var intervalId:uint = setInterval(doWalkInterval, 100);
   			
         // create a sprite to thest the interval
         mySprite3.graphics.beginFill(0x55BB33);
         mySprite3.graphics.drawRect(0, 0, 40, 150);
         mySprite3.graphics.endFill();			
         myUIComponent.addChild(mySprite3);
       }
   		
       public function doWalk(evt:TimerEvent):void {			
         mySprite.x += 1; 
         if (mySprite.x > myCanvas.width) mySprite.x = 0;
         mySprite2.x += 2;
         if (mySprite2.x > myUIComponent.width) mySprite2.x = 0;					
       }
       public function doWalkInterval():void {			
         mySprite3.x += 2;
         if (mySprite3.x > myUIComponent.width) mySprite3.x = 0;					
       }
   		
     ]]>
     </mx:Script>		
   	
     <mx:Box>		
       <mx:Canvas id="myCanvas" x="0" y="0" width="300" height="150" backgroundColor="#EEEEEE">  		
         <mx:UIComponent id="myUIComponent" x="0" y="0" width="300" height="150" >			
         </mx:UIComponent>		
       </mx:Canvas>		
     </mx:Box>	
   </mx:Application>
   

2. Zaman sayacı tabanlı animasyon için Actionscript 3 kullanımı.
   
   Görebileceğiniz gibi bu dosyada iyi giden şeyler daha azdır. Çerçevedeki çocuk nesnelerin ve zaman sayacının kullanımını anlamak için önemlidir.

   <?xml version="1.0"?>
   <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
     creationComplete="init();">
   	
     <mx:Script>
       <![CDATA[
   					
       import flash.events.TimerEvent;
       import flash.utils.Timer;
   		
       // Don't forget to import your libraries here...
   				
       public var ticker:Timer;						
       public function init():void {
   			
         ticker = new Timer(10);	
   			
         // Create Your objects here and add them to the canvas as childs...			
         // myCanvas.addChild();
   			
         ticker.addEventListener(TimerEvent.TIMER, doStep);
         ticker.start();
   
         // You can also dispatch timed functions like this, with an interval element:
         var intervalId:uint = setInterval(doStepInterval, 100);				
       }
   		
       public function doStep(evt:TimerEvent):void {			
         // Apply your timer action on your child-objects here....			
       }
       // use this with the interval-timer
       public function doStepInterval():void {
   			
         // Apply your timed actions on your child-objects here....
   			
       }
   		
       ]]>
       </mx:Script>		
   	
     <mx:Box>		
       <mx:Canvas id="myCanvas" width="300" height="300" backgroundColor="#ffffff">			
       </mx:Canvas>		
     </mx:Box>	
   </mx:Application>
   

3. Kendileri dönen nesneleri özelleştirmek.
   
   Bu basit olarak altı dönen nesne yaratır. hepsi de aynı sınıftan türetilmiştir. O sınıfı main.mxml altına alırsınız (import com.rotator.SimpleRotator; komutu kullanarak). Burada içe alacağımız sınıfın yeri ve adı tanımlanmıştır.
   
   Burada mxml kodlaması atlanmıştır ve yalnız actionscript gösterilmiştir. Amaç basit kodlamayı alatabilmektir.

     // This is the script in the main.mxml
     import flash.display.Sprite; 
     import com.rotator.SimpleRotator;
   
     public function init():void {
   			
       // You could made this more easy by using an array
       myRotator = new SimpleRotator(50, 60, 60);
       myRotator2 = new SimpleRotator(90, 60, 50);
       myRotator3 = new SimpleRotator(130, 60, 40);
       myRotator4 = new SimpleRotator(170, 60, 30);
       myRotator5 = new SimpleRotator(210, 60, 20);
       myRotator6 = new SimpleRotator(250, 60, 10);
       
       myUIComponent.addChild(myRotator);
       myUIComponent.addChild(myRotator2);
       myUIComponent.addChild(myRotator3);
       myUIComponent.addChild(myRotator4);
       myUIComponent.addChild(myRotator5);
       myUIComponent.addChild(myRotator6);
   			
     }
   

   SimpleRotator sınıfı ise şöyle tanımlanabilir:

     // This indicated the location of the file as well
     package com.rotator {
   	
       import flash.display.Sprite;
       import flash.display.Shape;
       import flash.utils.*;	
   	
       public class SimpleRotator extends Sprite {		
   		
         public function SimpleRotator(x:int, y:int, time:Number):void {
           this.x = x;
           this.y = y;
   					
           this.graphics.beginFill(0x00FF00);						
           this.graphics.drawRect( -13, -13, 26, 26);
           this.graphics.endFill();
   			
           this.graphics.beginFill(0x00FF00);
           this.graphics.drawCircle(0, 0, 15);
           this.graphics.endFill();
   		
           this.setTime(time);
         }
   		
         public function setTime(time:Number):void {
           var intervalId:uint = setInterval(step, time);
         }
   	
         public function step():void {
           this.rotation += 3;
         }
       }
     }