Thank you for you fast response. I figured it out.
Updated code:
package utils.skins
{
import mx.skins.RectangularBorder;
import flash.geom.Rectangle;
import flash.geom.Matrix;
import flash.display.DisplayObjectContainer;
import mx.core.IUIComponent;
import flash.events.Event;
import mx.managers.ISystemManager;
import flash.display.Sprite;
import flash.display.DisplayObject;
import flash.display.GradientType;
import flash.display.SpreadMethod;
import flash.display.Graphics;
public class BackgroundGradientFill extends RectangularBorder
{
private var _fillColors:Array;
private var _fillAlphas:Array;
private var _fillRatios:Array;
private var _fillMatrix:Matrix;
private var _fillType:String;
private var _fillCornerRadius:Number;
private var _fillRotation:Number;
private var _spreadMethod:String;
public function BackgroundGradientFill()
{
super();
}
override protected function updateDisplayList(w:Number,
h:Number):void{
//public override function setActualSize(w:Number,
h:Number):void{
super.updateDisplayList(w,h);
graphics.clear();
_fillCornerRadius = getStyle("cornerRadius");// ?
null : 0;
var rota = getStyle("backgroundGradientRotation") ?
undefined : 2;
_fillRatios = [0x70,
0xFF];//getStyle("backgroundGradientRatios") ? undefined : [0xCC,0xFF];
_fillColors = getStyle("backgroundGradientColors") ?
undefined : [0x000000,0xFFFFFF];
_fillAlphas = getStyle("backgroundGradientAlphas") ?
undefined : [1.0,.50];
_fillType = getStyle("backgroundGradientType") ?
undefined : GradientType.LINEAR;
_fillMatrix = new Matrix();
_fillMatrix.createGradientBox(h, w, 0, 1,1000);
_spreadMethod = SpreadMethod.PAD;
_fillRotation = rota * Math.PI * (90 / 360);
_fillMatrix.rotate(_fillRotation);
graphics.beginGradientFill(_fillType,_fillColors,_fillAlphas,_fillRatios,_fi
llMatrix,_spreadMethod);
if(_fillCornerRadius){
var cr:Number = _fillCornerRadius;
graphics.drawRoundRectComplex(0,0,w,h,cr,cr,cr,cr);
}else{
graphics.drawRect(0,0,w,h);
}
graphics.endFill();
}
}
}
-----Original Message-----
From: [email protected] [mailto:[EMAIL PROTECTED] On
Behalf Of Tim Hoff
Sent: Wednesday, July 19, 2006 3:21 PM
To: [email protected]
Subject: [flexcoders] Re: Flex2B3: Container fillColors
Hi Geoffrey,
This may have been changed from B3 to final. The borderSkin is only
used by containers with (border is ISimpleStyleClient) not (border
is IUIComponent). Instead of a VBox, use a Panel and the borderSkin
class will be applied.
-TH
--- In [email protected], "Geoffrey.Rogers"
<[EMAIL PROTECTED]> wrote:
>
> Tim, I saw you had the same problem with Gradient background too
with
> container components. I'm also trying to skin the background of a
container
> ("VBOX"). But I'm not having any luck with it.
>
> Here is an example of my code. I am using Flex Builder 2.0 final.
>
> //MXML code
>
> <?xml version="1.0" encoding="utf-8"?>
>
> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml";
layout="absolute">
>
> <mx:VBox x="65" y="60"
> borderSkin="utils.skins.BackgroundGradientFill" width="100%"
height="100%"
> backgroundColor="#00ff00">
>
> </mx:VBox>
>
> </mx:Application>
>
>
>
>
>
>
>
>
>
> //Skin Class
>
> package utils.skins
>
> {
>
> import mx.skins.RectangularBorder;
>
> import flash.geom.Rectangle;
>
> import flash.geom.Matrix;
>
> import flash.display.DisplayObjectContainer;
>
> import mx.core.IUIComponent;
>
> import flash.events.Event;
>
> import mx.managers.ISystemManager;
>
> import flash.display.Sprite;
>
> import flash.display.DisplayObject;
>
> import flash.display.GradientType;
>
> import flash.display.SpreadMethod;
>
>
>
> public class BackgroundGradientFill extends
RectangularBorder
>
> {
>
> private var _fillColors:Array;
>
> private var _fillAlphas:Array;
>
> private var _fillRatios:Array;
>
> private var _fillMatrix:Matrix;
>
> private var _fillType:String;
>
> private var _fillCornerRadius:Number;
>
> private var _fillRotation:Number;
>
> private var _spreadMethod:String;
>
>
>
>
>
> public function BackgroundGradientFill()
>
> {
>
> super();
>
>
>
> }
>
>
>
> override protected function
> updateDisplayList(w:Number, h:Number):void{
>
> super.updateDisplayList(w,h);
>
>
>
> graphics.clear();
>
> _fillCornerRadius =
> getStyle("cornerRadius") ? undefined : 0;
>
> //var rota =
> getStyle("backgroundGradientRotation") ? undefined : 2;
>
> _fillRatios =
> getStyle("backgroundGradientRatios") ? undefined : [0xCC,0xFF];
>
> _fillColors =
> getStyle("backgroundGradientColors") ? undefined :
[0x000000,0xFFFFFF];
>
> _fillAlphas =
> getStyle("backgroundGradientAlphas") ? undefined : [1.0,.50];
>
> _fillType =
> getStyle("backgroundGradientType") ? undefined :
GradientType.LINEAR;
>
> _fillMatrix = new Matrix();
>
>
> _fillMatrix.createGradientBox(w,h,0,0,0);
>
> _spreadMethod =
SpreadMethod.PAD;
>
> _fillRotation = 2*Math.PI*
(90/360);
>
> _fillMatrix.rotate
(_fillRotation);
>
>
> graphics.beginGradientFill
(_fillType,_fillColors,_fillAlphas,_fillRatios,_fi
> llMatrix,_spreadMethod);
>
> //or this but I don't get
anywhere.
> graphics.beginFill(0xFFFFFF,1.0);
>
> if(_fillCornerRadius){
>
> var cr =
_fillCornerRadius;
>
>
> graphics.drawRoundRectComplex(0,0,w,h,cr,cr,cr,cr);
>
> }
>
> graphics.endFill();
>
> }
>
>
>
> }
>
>
>
> }
>
>
>
>
>
> _____
>
> From: [email protected]
[mailto:[EMAIL PROTECTED] On
> Behalf Of Tim Hoff
> Sent: Thursday, June 22, 2006 7:48 PM
> To: [email protected]
> Subject: [flexcoders] Re: Flex2B3: Container fillColors
>
>
>
> 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" <TimHoff@> 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
Yahoo! Groups Links
------------------------ Yahoo! Groups Sponsor --------------------~-->
Great things are happening at Yahoo! Groups. See the new email design.
http://us.click.yahoo.com/TISQkA/hOaOAA/yQLSAA/nhFolB/TM
--------------------------------------------------------------------~->
--
Flexcoders Mailing List
FAQ: http://groups.yahoo.com/group/flexcoders/files/flexcodersFAQ.txt
Search Archives: http://www.mail-archive.com/flexcoders%40yahoogroups.com
Yahoo! Groups Links
<*> To visit your group on the web, go to:
http://groups.yahoo.com/group/flexcoders/
<*> To unsubscribe from this group, send an email to:
[EMAIL PROTECTED]
<*> Your use of Yahoo! Groups is subject to:
http://docs.yahoo.com/info/terms/
