Hi Mike,
I used your code example and was able to create a skin class that can be applied to the background of a container. I added/changed the highlighted code to make the skin class use more of the container's CSS properties. This is a useful technique! While playing around with this, I stumbled on something. If you change the first ration to an invalid setting (like ox140), the rectangle isn't drawn. However, the original background is also gone. This creates a transparent background without using alphas. The child controls/components are displayed as if they are floating. Too cool! I'm starting to believe that you can do just about anything with Flex, as long you know how.
Thanks again,
Tim Hoff
// CSS ------------------------------------------------------------------------------
.myPanel {
cornerRadius: 6;
fillAlphas: 1, 1;
fillColors: #FFFFFF, #326CB4;
borderSkin: ClassReference("extendedComponents.ContainerBackgroundFillColors");
roundedBottomCorners: true;
}
// Skin Class -----------------------------------------------------------------------
package extendedComponents
{
import flash.geom.Matrix;
import flash.display.GradientType;
import mx.skins.RectangularBorder;
public class ContainerBackgroundFillColors extends RectangularBorder
{
public function ContainerBackgroundFillColors()
{
super();
}
public override function setActualSize(w:Number, h:Number):void
{
super.updateDisplayList(w, h);
graphics.clear();
var roundedBottomCorners:Boolean = getStyle("roundedBottomCorners");
var cornerRadius:Number = getStyle("cornerRadius");
var fillAlphas:Array = getStyle("fillAlphas");
var fillColors:Array = getStyle("fillColors");
var fillType:String = GradientType.LINEAR;
//var alphas:Array = [100, 100]; replaced with fillAlphas
var ratios:Array = [0x70, 0xFF];
var matr:Matrix = new Matrix();
var rotation:Number = 2 * Math.PI * (90 / 360);
matr.createGradientBox(h, w, 0, 0, 0); //w,h switched for rotation
matr.rotate(rotation);
var spreadMethod:String = SpreadMethod.PAD;
graphics.beginGradientFill(fillType, fillColors, fillAlphas, ratios, matr, spreadMethod);
if (roundedBottomCorners){
graphics.drawRoundRectComplex(0, 0, w, h, cornerRadius, cornerRadius, cornerRadius, cornerRadius);
} else {
graphics.drawRoundRectComplex(0, 0, w, h, cornerRadius, cornerRadius, 0, 0);
}
graphics.endFill();
}
}
}
//---------------------------------------------------------------------------------------
--- In [email protected], "Tim Hoff" <[EMAIL PROTECTED]> wrote:
>
> Thanks Mike,
>
> I started trying to do something similar to this before I asked for
> help. I kept stepping on my own foot figuring out a way to apply
> it. I have a lot to do today. But, I'll try to work this in.
> Again, this may be something that has been added to Flex final, but
> good gymnastics. Thanks again, I'll let you know how it works out.
>
> -TH
>
> --- In [email protected], "Michael Schmalle"
> teoti.graphix@ wrote:
> >
> > Hey man,
> >
> > this is a primitive example:
> >
> > myContainer.setStyle("borderSkin", TaskListTitleBarBorderSkin );
> >
> > or you know in CSS ;-)
> >
> > code
> > -------------------------------------------------------
> >
> > package com.teotiGraphix.skins.teo
> > {
> >
> > import flash.geom.Matrix;
> > import flash.display.GradientType;
> >
> > import mx.skins.RectangularBorder;
> >
> > /**
> > *
> > */
> > public class TaskListTitleBarBorderSkin extends RectangularBorder
> > {
> >
> > var backgroundColor:Number;
> >
> > /**
> > * Constructor
> > */
> > public function TaskListTitleBarBorderSkin()
> > {
> > super();
> > }
> >
> > /**
> > *
> > */
> > public override function setActualSize(w:Number, h:Number):void
> > {
> > super.setActualSize(w, h);
> >
> > graphics.clear();
> > var radius = getStyle("cornerRadius");
> > var fillColors:Array = getStyle("fillColors");
> >
> > var fillType:String = GradientType.LINEAR;
> > //var colors:Array = [0xFFFFFF, 0xC7D3F7];
> > var alphas:Array = [100, 100];
> > var ratios:Array = [0x33, 0xFF];
> > var matr:Matrix = new Matrix();
> > matr.createGradientBox(w, h - 5, 0/*(Math.PI/2)*/, 0, 0);
> > var spreadMethod:String = SpreadMethod.PAD;
> >
> > graphics.beginGradientFill(fillType, fillColors, alphas,
> ratios,
> > matr, spreadMethod);
> >
> > graphics.drawRoundRectComplex(0, 0, w, h, radius, radius,
> 0, 0);
> > graphics.endFill();
> > }
> > }
> > }
> >
> > Peace, Mike
> >
> > On 6/20/06, Tim Hoff TimHoff@ wrote:
> > >
> > > In the process of styling, I wasn't able to apply gradient
> fillColors
> > > to containers (Panel, VBox...). Maybe, didn't make the final
> cut. In
> > > some situations this would come in handy. Vector graphics consume
> > > less resources. Has anyone subclassed this, to draw graphics as a
> > > container's background?
> > >
> > > Kindly,
> > > Tim Hoff
> > >
> > >
> > >
> >
> >
> >
> > --
> > What goes up, does come down.
> >
>
--
Flexcoders Mailing List
FAQ: http://groups.yahoo.com/group/flexcoders/files/flexcodersFAQ.txt
Search Archives: http://www.mail-archive.com/flexcoders%40yahoogroups.com
| Web site design development | Computer software development | Software design and development |
| Macromedia flex | Software development best practice |
YAHOO! GROUPS LINKS
- Visit your group "flexcoders" on the web.
- To unsubscribe from this group, send an email to:
[EMAIL PROTECTED]
- Your use of Yahoo! Groups is subject to the Yahoo! Terms of Service.
