1 Reply Latest reply on Feb 26, 2010 5:11 PM by P.o.l.a.c.o

    CSS on Flex Effects?

    mchanggg

      Hi,

      I was wondering if I can extract the property of a Flex effects out to a CSS file.

      Is that possible?

      Thanks,

      Mike

        • 1. Re: CSS on Flex Effects?
          P.o.l.a.c.o Level 1

          You mean something like the following?

           

          Create an MXML component called "GlowingImage" with this code:

          --------------------------------

          <?xml version="1.0" encoding="utf-8"?>

          <mx:Image

           

          xmlns:mx="http://www.adobe.com/2006/mxml" rollOver="glowUp()" rollOut="glowDown()">

           

          <mx:Metadata>

          [

          Style(name="glowColor",type="String",format="String",inherit="no")]

           

          </mx:Metadata>

           

          <mx:Script>

          <![CDATA[

           

           

          private var bStypePropChanged:Boolean = true;

           

           

          // Override the styleChanged() method to detect changes in your new style.

           

          override public function styleChanged(styleProp:String):void {

           

          super.styleChanged(styleProp);

           

          // Check to see if style changed.

           

          if (styleProp=="glowColor")

          {

          bStypePropChanged=

          true;

          invalidateDisplayList();

           

          return;

          }

          }

           

           

          override protected function updateDisplayList(unscaledWidth:Number,

          unscaledHeight:Number):

          void {

           

           

          super.updateDisplayList(unscaledWidth, unscaledHeight);

           

          // Check to see if style changed.

           

          if (bStypePropChanged==true)

          {

           

          // Redraw gradient fill only if style changed.

          glowEff.color = getStyle(

          "glowColor");

          bStypePropChanged=

          false;

          }

          }

           

           

          public function glowUp():void{

           

          if(!glowEff.isPlaying){

          glowEff.play([

          this],false);

          }

          }

           

           

          public function glowDown():void{

           

           

          if(glowEff.isPlaying){

          glowEff.reverse();

          }

          else{

          glowEff.play([

          this],true);

          }

          }

          ]]>

           

          </mx:Script>

           

           

          <!-- Efecto rollover imgs -->

           

          <mx:Glow id="glowEff" alphaFrom="0.5" alphaTo="0.75" blurXFrom="0.0" blurXTo="10" blurYFrom="0" blurYTo="10" color="0x666666" target="{this}" duration="200"/>

          </mx:Image>

          ---------------------------------------

           

          Add the style component declaration in your css:

          GlowingImage

           

          {

           

          glow-color:#FF0000;

          }

           

          then declare the xmlns:cimg="the.placement.package.*" and use it like:

          <gimg:GlowingImage

           

          source="assets/alertaIcon.png" width="50" height="50"/>

           

          Does it solve the question?