3 Replies Latest reply on Sep 1, 2006 7:34 AM by peterent

    Creating my first visual component in flex2

    SashMan79
      Hello there,

      i am planning some layout which allows the appearance to be dynamically changed. So i guessed
      a visual component would fit nicely. Also, i want the component expose 2 properties (color information),
      which will change the components visual.

      So i created a new .as file background_top_gradient.as, which looks like this:

      package components
      {
      public class background_top_gradient
      {
      import flash.geom.*;
      import flash.display.*;

      public function background_top_gradient()
      {
      super();

      var fillType:String = "linear"
      var colors:Array = [0xFFFFFF, 0x17AAEE];
      var alphas:Array = [100, 100];
      var ratios:Array = [0x00, 0xFF];
      var matrix:Matrix = new Matrix();
      matrix.createGradientBox(800, 28, 90/180*Math.PI, 0, -10);
      var spreadMethod:String = "pad";

      var gradient:MovieClip = new MovieClip();

      gradient.beginGradientFill(fillType, colors, alphas, ratios, matrix, spreadMethod);
      gradient.moveTo(0, 0);
      gradient.lineTo(800, 0);
      gradient.lineTo(800, 28);
      gradient.lineTo(0, 28);
      gradient.lineTo(0, 0);
      gradient.endFill();

      }
      }
      }

      inside my .mxml file i reference the component as:

      <components:background_top_gradient /> (making sure the namespace reference is present ..)

      I got two problems here, first the debugger says that beginGradientFill is not a valid function,
      and secondly, i am not sure anymore if this way, creating a visual component is the best approach.

      Can someone give me some thoughts on this and point me in the right direction?

      Very kind regards,
      Sascha
        • 1. Re: Creating my first visual component in flex2
          peterent Level 2
          One of the major differences between Flash 8 and Flash 9 is how drawing is done. In Flash 8 and earlier you could draw into a MovieClip, as you are trying to do. That doesn't work in Flash 9. You need to use the MovieClip's graphics property:

          var mc:MovieClip = new MovieClip();
          mc.graphics.clear();
          mc.graphics.beginFill( 0xFF0000, 0.5 );
          mc.graphics.drawRect(0,0,100,100);
          mc.graphics.endFill();

          Check out the API reference for MovieClip. For what you want to do, a Sprite is actually better since it doesn't have the overhead of a timeline, which MovieClip does.

          Secondly, you don't need to create a new class to give a layout container a gradient background. Let's say you like how VBox works, or Canvas. You can make your own class that extends either one of those, then override its updateDisplayList method and draw the gradient using the container's graphics property.

          override protected function updateDisplayList( unscaledWidth:Number, unscaledHeight:Number ) : void
          {
          super.updateDisplayList( unscaledWidth, unscaledHeight );
          graphics.clear();
          // then put what you were doing here, except use the graphics property and not the MovieClip
          }

          when you use your new layout container, it will have your gradient background.

          Also check out the docs for custom styles as that's how you ought to programmatically change your container's gradient.
          • 2. Re: Creating my first visual component in flex2
            SashMan79 Level 1
            Hello Peter,

            thank you for helping so quick and pointing out the main differences between flash and flex.

            I got the idea working meanwhile. Though id like to know a little more about how to practically
            seperate design and programming. Like, I have a lot of "custom styled" components, backgrounds,
            frames and so on, which i like to design and style in flash8. It would be great if I could generate
            some sort of library with symbols (mc's), which implement basic functionality like color settings,
            hover/down/up button graphics ect., export those as .swf files, and get them to work
            inside flex.

            Is that a good approach? Would it be better to only generate plain graphics in flash8, and use
            them as basis for custom components (.swc) in flex (and therefore do all "graphics logic", custom
            components methods/events) inside flex?

            I would really like to know more about this topic but cant seem to find in-depth information
            in the online help.

            I would love to hear from you again!

            Very kind regards,
            Sascha
            • 3. Re: Creating my first visual component in flex2
              peterent Level 2
              You can use Flash 8 to make things for Flex 2. The difficulty comes when you want Flex to communicate with the loaded SWF. Then you have to use LocalConnection.

              On the other hand, if you use Flash to make static graphics (which is what I do) because you can have a single file with all of your icons in one place, it works fine. For example, if you create a symbol called HelpButtonIcon (that would be its exported name), you can include it: icon="@Embed(source='MyIcons.swf',symbol='HelpButtonIcon')". The drawback to this method is that only the first frame of a MovieClip is imported so no animation can run. For that you need to include an entire SWF.

              Check out scale9grid, too. It is available in Flash 8 and Flex 2. It allows you to segment your graphic into a 3x3 grid so it scales properly. Very good for skinning buttons.

              Your gradient is a good example of something that should be done in ActionScript within Flex 2. If you create a rectangle symbol with a gradient and it needs to scale to fill a Canvas, it can start looking bandy; the ActionScript code won't have that problem.