Bu dersimizde Adobe Flex ile CSS değiştirmeden canvas resmini nasıl değiştireceğimizi göreceğiz.

alanBg Canvasın backgroundImage'ı olarak bir class tanımladım ve değişim aslında Class da meydana gelecek.

[Bindable]
private var alanBg:Class;

//alanBg classımızı backgroundImage olarak yazdım.
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" height="100%"
    backgroundImage="{alanBg}">

artık alanBg classını değiştirerek backgrundImage değişebilir.

Program açılışında default bir css değeri atadım gösterim karışık gelebilir ama şöyle.

• Sayfaya çağırdım myStyle.css dosyamın içinden
• getStyleDeclaration=.canvasBg ile ilgili classı ve bunun altındada alt clası seçtim
• bg2

orjinal Css

.canvasBg{
    bg1:Embed(source="assets/common/img/Bg.swf"); 
    bg2:Embed(source="assets/common/img/Bg2.swf");
}

//ilk değerimiz geldi 

private function init():void{               alanBg=StyleManager.getStyleDeclaration('.canvasBg').getStyle('bg1')        
}

// istediğimiz Eventle artık ikinci Bg2 ye geçebiliriz alanDown fonksiyonu tetiklendiğinde 
çalışmasını sağladım 

private function alanDown(evt:Event):void{              alanBg=StyleManager.getStyleDeclaration('.canvasBg').getStyle('bg2')                    
            }

.