Home

Archive » February, 2010 «

Quick test of FCSS

Sunday, February 14th, 2010 | Author: dehash

fcss test Spent an hour testing the cool Flash AS3 FCSS library. Seems fine to set any public property so it can trigger tweens, image loads, filters etc as in this example
There is a good FCSS video tutorial here

Trees image from here released under CC license


Code below all in one file for now as it was just a quick test. Aside from FCSS it also uses three other AS3 libraries - Tweener and MinimalComps and BumpSlide

You can view the swf here

PLAIN TEXT
Actionscript:
  1. /**
  2. * v0.1 code by dehash.com 2010
  3. * Quick Test of FCSS
  4. * Released as open source under the BSD License
  5. * http://www.opensource.org/licenses/bsd-license.php
  6. */
  7. package {
  8.  
  9.     // http://code.google.com/p/minimalcomps/
  10.     import com.bit101.components.*;
  11.  
  12.     // http://github.com/theflashbum/fcss
  13.     import com.flashartofwar.fcss.applicators.StyleApplicator;
  14.     import com.flashartofwar.fcss.managers.SingletonManager;
  15.     import com.flashartofwar.fcss.styles.IStyle;
  16.     import com.flashartofwar.fcss.stylesheets.*;
  17.  
  18.     import flash.display.Sprite;
  19.     import flash.events.Event;
  20.     import flash.events.MouseEvent;
  21.  
  22.     // trees image from http://www.flickr.com/photos/cybot586/4356730349/
  23.  
  24.     public class Main extends Sprite
  25.     {
  26.  
  27.         private var css:XML = <css><![CDATA[
  28.         #boxStyle {
  29.             x: 50;
  30.             y: 10;
  31.             alpha: 0.95;
  32.             width: 300;
  33.             height: 250;
  34.             color: 0x1C2331;
  35.             tweenYto: 333;
  36.             dropShadowDistance: 20;
  37.             loadImage: 4356730349_2cfcbdff4d.jpg;
  38.         }
  39.         ]]>
  40.         </css>;
  41.  
  42.         private var styleSheetCollection:IStyleSheetCollection =
  43. SingletonManager.getClassReference(StyleSheetCollection) as IStyleSheetCollection;
  44.  
  45.         private var txt:Text;
  46.  
  47.         private var box:BoxExtended;
  48.  
  49.         public function Main():void
  50.         {
  51.             if (stage) init();
  52.             else addEventListener(Event.ADDED_TO_STAGE, init);
  53.         }
  54.  
  55.         private function init(e:Event = null):void
  56.         {
  57.             removeEventListener(Event.ADDED_TO_STAGE, init);
  58.  
  59.             // entry point
  60.             addControls();
  61.             addBox();
  62.         }
  63.  
  64.         private function addControls():void {
  65.  
  66.             var window:Window = new Window(this, 400, 50, "Box CSS Window");
  67.             window.width = 320;
  68.             window.height = 460;
  69.  
  70.             var vBox:VBox = new VBox(window.content);
  71.  
  72.             txt = new Text(vBox, 10, 20);
  73.             txt.text = css.toString();
  74.             txt.width = 300;
  75.             txt.height = 400;
  76.  
  77.             new PushButton(vBox, 180 , 0, "Apply CSS to Box", parseButtonHandler);
  78.  
  79.         }
  80.  
  81.         private function parseButtonHandler(e:MouseEvent):void {
  82.  
  83.             var styleSheet:IStyleSheet = new FStyleSheet( );
  84.             styleSheet.parseCSS(txt.text.toString());
  85.  
  86.             styleSheetCollection.removeStyleSheet("boxStyleSheet");
  87.             styleSheetCollection.addStyleSheet(styleSheet, "boxStyleSheet");
  88.  
  89.             var boxStyle:IStyle = styleSheetCollection.getStyle("#boxStyle");
  90.  
  91.             var styleApplicator:StyleApplicator = new StyleApplicator();
  92.             styleApplicator.applyStyle(box,boxStyle);
  93.         }
  94.  
  95.         private function addBox():void {
  96.             box = new BoxExtended();
  97.             addChild(box);
  98.         }
  99.  
  100.     }
  101. }
  102.  
  103. // http://code.google.com/p/tweener/
  104. import caurina.transitions.Tweener;
  105. import flash.filters.DropShadowFilter;
  106. // http://code.google.com/p/bumpslide/
  107. import com.bumpslide.events.UIEvent;
  108. import com.bumpslide.ui.Box;
  109. import com.bumpslide.ui.Image;
  110.  
  111. class BoxExtended extends Box {
  112.  
  113.     private var image:Image = new Image(null, Image.SCALE_CROP, -1, -1, imageLoaded);
  114.     private var _tweenYto:Number;
  115.     private var _loadImage:String;
  116.     private var _dropShadowDistance:Number;
  117.  
  118.     public function BoxExtended() {
  119.         super(0xccccff,100,100,20,20);
  120.     }
  121.  
  122.     public function set tweenYto(value:Number):void {
  123.         _tweenYto = value;
  124.         Tweener.addTween(this, { y:_tweenYto, time:2.5, delay:0.5, transition:"easeInOutExpo" } );
  125.     }
  126.  
  127.     public function set loadImage(value:String):void {
  128.         _loadImage = "/demoimages/"+ value.split("/").pop();
  129.         if (_loadImage == "null") {
  130.             tileBitmap = null;
  131.         }else {
  132.             image.url = _loadImage;
  133.         }
  134.     }
  135.  
  136.     public function set dropShadowDistance(value:Number):void {
  137.         _dropShadowDistance = value;
  138.         filters = [new DropShadowFilter(_dropShadowDistance)];
  139.     }
  140.  
  141.     private function imageLoaded(e:UIEvent):void {
  142.         tileBitmap = image.imageBitmap.bitmapData;
  143.     }
  144.  
  145. }

Category: Code Examples, Flash | 3 Comments