6 Replies Latest reply on Nov 2, 2009 1:06 PM by HelloWorld09

    Alpha mask with custom component

    HelloWorld09

      Hi.

      I'm building my first custom component. It loads an image and then creates a reflection effect with an alpha mask.

      I can't get my mask to work with my component. I've tried using setMask at the class level and also setMask at the MC level and neither work.

      Both my clips are set to cacheAsBitmap in the property inspector and in code.

      It makes no sense to me since I use this exact method all the time with no problem, however when trying to implement it within my custom component, it doesn't work.

      someone please shed some light into this as it's driving me mad.

       

      Here is the code I have so far. If someone with custom component experience can also check out that I am writing my class properly I would greatly appreciate it.

       

      // Import the package so you can reference 
      // the class directly.
      import mx.core.UIComponent;
      
      // Event metadata tag 
      [Event("change")]
      class FP_IMGHolder extends UIComponent
      {
          // Components must declare these to be proper
          // components in the components framework.
          static var symbolName:String = "FP_IMGHolder"; //USE PACKAGE PATH
          static var symbolOwner:Object = FP_IMGHolder; //USE PACKAGE PATH
          var className:String = "FP_IMGHolder";
      
      
          // The private members\\
           
           //Movie clips used by our component
           private var img:MovieClip;
           private var titleMC:MovieClip;
           private var ref:MovieClip;
           private var descMC:MovieClip;
           private var boundingBox_mc : MovieClip;
           private var FPIMGHolder:MovieClip;
           
           
           //These vars have a boolean and accompanying name to 
           //library MC to use
          private var __useMouseOverAni:Boolean = false;
           private var __mouseOverAniMC:String;
           private var __useTitle:Boolean = true;
           private var __titleMCIns:String;
           private var __useDescription:Boolean = false;
           private var __descriptionMC:String;
           
           private var __currentImage:Number = 0;
           private var __reflection:Boolean = false;
           private var __reflectionAlpha:Number = 55;
           private var __paused:Boolean = false;
           private var __loadImgErr:Boolean = false;
           private var __infoStack:Array;
           
           
           // Public Members\\
           
      
      
      
          // Constructor; 
          // While required for all classes, v2 components require
          // the contstructor to be empty with zero arguments. 
          // All initialization takes place in a required init() 
          // method after the class instance has been constructed.
          function FP_IMGHolder() {
          }
      
           //======================================================================================================\\
           
          // Initialization code:
          // The init() method is required for v2 components. It must also
          // in turn call its parent class init() method with super.init().
          // The init() method is required for components extending UIComponent.
          function init():Void {
              super.init();
                
                //Required initiation
              boundingBox_mc._visible = false;
              boundingBox_mc._width = 0;
              boundingBox_mc._height = 0;
      
          }
           
           private function loadHost()
           {          
                // ADD OUR IMAGES \\
                
                trace("infoStack: " + infoStack)
                
                //Reset our current image if at the end of the list
                if(currentImage == (infoStack.length - 1))
                {
                     currentImage = 0;
                }
      
                FPIMGHolder.img._lockroot = true;
                FPIMGHolder.img.loadMovie(infoStack[currentImage].ImageSmall);
                
                trace("using this image: " + infoStack[currentImage].ImageSmall);
      
                loadImgErr = false;
                
                currentImage++;
                
                trace("CURRENT LOAD IMAGE STATUS: " + loadImgErr);
      
           }
           
           private function setPrefs()
           {
                // ADD REFLECTION \\
                
                //draw the reflection
                if(reflection == true)
                {
                     FPIMGHolder.ref._visible = true;
      
                     if(loadImgErr)
                     {
                          FPIMGHolder.ref.refImg.loadMovie(infoStack[currentImage].SwapImage);
                     }
                     else
                     {
                          FPIMGHolder.ref.refImg.loadMovie(infoStack[currentImage].ImageSmall);
                     }
                     
                     FPIMGHolder.ref.cacheAsBitmap = true;
                     FPIMGHolder.ref.ImgMask.cacheAsBitmap = true;
                     FPIMGHolder.ref.refImg.cacheAsBitmap = true;
                     
                     FPIMGHolder.ref.refImg.setMask(FPIMGHolder.ref.ImgMask);
      
                     //set the alpha
                     FPIMGHolder.ref._alpha = reflectionAlpha;
                }
                
                // ADD DESCRIPTION \\
                
                if(useDescription == true)
                {
                     FPIMGHolder.descMC._visible = true;
                     FPIMGHolder.descMC.desc.text = infoStack[currentImage].ShortDescription;
                }
                
                // ADD TITLE \\
                
                if(useTitle == true)
                {
                     FPIMGHolder.titleMC._visible = true;
                     FPIMGHolder.titleMC.title.text = infoStack[currentImage].ScreenName;
                }
                
                //invalidate();
           }
           
          // Create children objects needed at start up:
          // The createChildren() method is required for components
          // extending UIComponent.
          public function createChildren():Void {
              FPIMGHolder = createObject("FP_IMGHolderFinal", "FPIMGHolder", 10);
              size();
                invalidate();
                
          }
      
          // The draw() method is required for v2 components.
          // It is invoked after the component has been
          // invalidated by someone calling invalidate().
          // This is better than redrawing from within the set() function
          // for value, because if there are other properties, it's
          // better to batch up the changes into one redraw, rather
          // than doing them all individually. This approach leads
          // to more efficiency and better centralization of code.
          function draw():Void {
              super.draw();
                
                //default status of our assets
                FPIMGHolder.ref._visible = false;
                FPIMGHolder.titleMC._visible = false;
                FPIMGHolder.descMC._visible = false;
      
                FPIMGHolder.img._lockroot = true;
                FPIMGHolder.img.loadMovie(infoStack[currentImage].ImageSmall);
                
                setPrefs();
          }
      
          // The size() method is invoked when the component's size
          // changes. This is an opportunity to resize the children,
          // and the dial and needle graphics.
          // The size() method is required for components extending UIComponent.
          function size():Void {
              super.size();
              FPIMGHolder._width = width;
              FPIMGHolder._height = height;
             
              invalidate();
          }
           
           
           //======================================================================================================\\
      
          // This is the getter/setter for our properties.
          // The [Inspectable] metadata makes the property appear
          // in the Property inspector. This is a getter/setter
          // so that you can call invalidate and force the component
          // to redraw, when the value is changed.
           
            function set loadImgErr (val:Boolean)
          {
              __loadImgErr = val;
      
          }
           
           function get loadImgErr ():Boolean
          {
              return __loadImgErr;
          }
      
      
           //get set MouseOver Animation MC
           [Inspectable(name="MouseOver Animation MC")]
          function set useMouseOverAni (val:Boolean)
          {
              __useMouseOverAni = val;
                invalidate(); //redraw
          }
           
           function get useMouseOverAni ():Boolean
          {
              return __useMouseOverAni;
          }
      
           //get set MouseOver Animation MC
           [Inspectable(name="MouseOver Animation MC")]
          function set mouseOverAniMC (val:String)
          {
              __mouseOverAniMC = val;
                invalidate(); //redraw
          }
           
           function get mouseOverAniMC ():String
          {
              return __mouseOverAniMC;
          }
      
           //get set Show Title
           [Inspectable(name="Show Title", defaultValue=true)]
          function set useTitle (val:Boolean)
          {
              __useTitle = val;
                invalidate(); //redraw
          }
           
           function get useTitle ():Boolean
          {
              return __useTitle;
          }
           
           //get set title mc path
           [Inspectable(name="Title MC")]
          function set titleMCIns (val:String)
          {
              __titleMCIns = val;
                invalidate(); //redraw
          }
           
           function get titleMCIns ():String
          {
              return __titleMCIns;
          }
           
           //get set Show Description
           [Inspectable(name="Show Description", defaultValue=false)]
          function set useDescription (val:Boolean)
          {
              __useDescription = val;
                invalidate(); //redraw
          }
           
           function get useDescription ():Boolean
          {
              return __useDescription;
          }
           
           //get set Description MC path
           [Inspectable(name="Description MC")]
          function set descriptionMC (val:String)
          {
              __descriptionMC = val;
                invalidate(); //redraw
          }
           
           function get descriptionMC ():String
          {
              return __descriptionMC;
          }
      
           //get set reflection
           [Inspectable(name="Show Reflection", defaultValue=false)]
          function set reflection (val:Boolean)
          {
              __reflection = val;
                invalidate(); //redraw
          }
      
          function get reflection ():Boolean
          {
              return __reflection;
          }
      
           //get set reflection alpha
          [Inspectable(name="Reflection Alpha", defaultValue=55)]
          function set reflectionAlpha (val:Number)
          {
              __reflectionAlpha = val;
              invalidate(); //redraw
          }
      
          function get reflectionAlpha ():Number
          {
              return __reflectionAlpha;
          }
           
           [Bindable]
          [ChangeEvent("change")]
           [Inspectable(name="Current Image", defaultValue=0)]
          function set currentImage (val:Number)
          {
              __currentImage = val;
              invalidate(); //redraw
          }
      
          function get currentImage ():Number
          {
              return __currentImage;
          }
           
           [Inspectable(name="Data",defaultValue="")]
           function set infoStack (val:Array)
          {
              __infoStack = val;
              invalidate(); //redraw
          }
      
          function get infoStack ():Array
          {
              return __infoStack;
          }
      
           function set paused (val:Boolean)
          {
              __paused = val;
              //invalidate(); //redraw
          }
      
          function get paused ():Boolean
          {
              return __paused;
          }
      
           //======================================================================================================\\
      
          // Tells the component to expect mouse presses
          function onRelease()
          {
              handleClick();
          }
           
           function onRollOver()
           {
                handleOver();
           }
           
           function onRollOut()
           {
                handleOut();
           }
           
           private function handleClick():Void
           {
                trace(this + " Clicked.");
           }
           
           private function handleOver():Void
           {
                trace(this + " Mouse Over.");
      
                paused = true;
                //stop();
                
           }
           
           private function handleOut():Void
           {
                trace(this + " Mouse Out.");
      
                //play();
                paused = false;
           }
          
      }
      
      
      

      thanks - FP