JSwiff Forum

Anonymous

Hi ...
How do i create a vertical gradient fill like say top to bottom ?
What I have figured out is I need to set the rotateSkew...
Am able to scale it to the exact size, but when I rotate i guess the gradient box rotates and hence I lose the exact area....

Ralf

Not sure if I understand the problem. I rotated a gradient in Flash and compared the gradient matrices using Investigator.

Horizontal gradient:
gradientMatrix: Matrix (scaleX=0.193450927734375 scaleY=0.137298583984375 rotateSkew0=0.0 rotateSkew1=0.0 translateX=5370 translateY=4130)

Vertical gradient (rotated):
gradientMatrix: Matrix (scaleX=0.0 scaleY=0.0 rotateSkew0=0.193450927734375 rotateSkew1=-0.137298583984375 translateX=5370 translateY=4130)

Seems that all you have to do is set rotateSkew0 to scaleX and rotateSkew1 to -scaleY.

You'll surely wonder how to compute scaleX and scaleY. It seems like
scaleX = (width - 20) / 32768
and
scaleY = (height - 20) / 32768

Anonymous

Ralf wrote:

scaleX = (width - 20) / 32768
and
scaleY = (height - 20) / 32768

Hi Ralf ...Thanks a lot...Althoug I figured that out.
but am not sure abt the -20 u doing.. I guess it should be Multiplied by 20, to convert to twips

Ralf

No, width and length are already in twips! If you want to get the same matrices Flash generates, you have to subtract 20, but don't ask why...

Anonymous

Hey Ralf...
I was trying to rotate a gradient by 45 degree.
Its not working bro..can u help

Code:

 double theta = (angle / 180) * Math.PI;
 Matrix gradMatrix = new Matrix((int) (x + (width / 2)),
 				(int) (y + (height / 2)));
 		gradMatrix.setScale(xFactor, yFactor);
 		gradMatrix.setRotateSkew(0, 0);
 		FillStyle fillStyle = new FillStyle(gradient, gradMatrix,
 				FillStyle.TYPE_LINEAR_GRADIENT);
 		FillStyleArray fsArray = new FillStyleArray();
 		fsArray.addStyle(fillStyle);
 
 		gradMatrix = new Matrix((int) (x + (width / 2)),
 				(int) (y + (height / 2)));
 		gradMatrix.setScale(xFactor * (Math.cos(theta)), yFactor
 				* (Math.cos(theta)));
 		gradMatrix.setRotateSkew(xFactor * (Math.sin(theta)), -yFactor
 				* (Math.sin(theta)));
 		fillStyle = new FillStyle(gradient, gradMatrix,
 				FillStyle.TYPE_LINEAR_GRADIENT);
 		fsArray.addStyle(fillStyle);

Ralf

How am I supposed to tell you why it doesn't work if you don't tell me *what* doesn't work

How do you compute xFactor and yFactor?

Take a look at this (a rotated gradient constructed in Flash and loaded into Investigator):

Code:

 DefineShape4
  characterID: 1
  shapeBounds: Rect (2950, 7909, 2310, 5990)
  edgeBounds: Rect (2960, 7899, 2320, 5980)
  shapes: ShapeWithStyle
   fillStyles: FillStyleArray (3 styles)
    FillStyle 1
     type: linear gradient
     gradientMatrix: Matrix (scaleX=0.150726318359375 scaleY=0.1116943359375 rotateSkew0=0.0 rotateSkew1=0.0 translateX=5429 translateY=4150)
     Gradient
      spreadMethod: pad
      interpolationMethod: RGB
      GradientRecord
       ratio: 0
       color: RGBA (0; 0; 0; 255)
      GradientRecord
       ratio: 255
       color: RGBA (255; 255; 255; 255)
    FillStyle 2
     type: linear gradient
     gradientMatrix: Matrix (scaleX=0.1065826416015625 scaleY=0.0789794921875 rotateSkew0=0.1065826416015625 rotateSkew1=-0.0789794921875 translateX=5429 translateY=4150)
     Gradient
      spreadMethod: pad
      interpolationMethod: RGB
      GradientRecord
       ratio: 0
       color: RGBA (0; 0; 0; 255)
      GradientRecord
       ratio: 255
       color: RGBA (255; 255; 255; 255)
    FillStyle 3
     type: linear gradient
     gradientMatrix: Matrix (scaleX=0.1065826416015625 scaleY=0.0789794921875 rotateSkew0=-0.1065826416015625 rotateSkew1=0.0789794921875 translateX=5429 translateY=4150)
     Gradient
      spreadMethod: pad
      interpolationMethod: RGB
      GradientRecord
       ratio: 0
       color: RGBA (0; 0; 0; 255)
      GradientRecord
       ratio: 255
       color: RGBA (255; 255; 255; 255)
   lineStyles: LineStyleArray (1 styles)
    LineStyle2 1
     width: 20
     startCapStyle: round
     endCapStyle: round
     jointStyle: round
     pixelHinting: false
     close: true
     scaleStroke: both
     color: RGBA (0; 0; 0; 255)
   shapeRecords: ShapeRecord[5]
    StyleChangeRecord
     moveToX: 7899
     moveToY: 5980
     fillStyle1: 3
     lineStyle: 1
    StraightEdgeRecord
     deltaX: -4939
     deltaY: 0
    StraightEdgeRecord
     deltaX: 0
     deltaY: -3660
    StraightEdgeRecord
     deltaX: 4939
     deltaY: 0
    StraightEdgeRecord
     deltaX: 0
     deltaY: 3660
 PlaceObject2
  depth: 1
  move: false
  characterId: 1
  matrix: Matrix (scaleX=1.0 scaleY=1.0 rotateSkew0=0.0 rotateSkew1=0.0 translateX=0 translateY=0)
 ShowFrame

Take a look at edgeBounds in DefineShape4. The width of the edge bounds is xmax-xmin = 7899-2960 = 4939. If you divide this by 32768, you get 0.150726318359375. Multiply this with cos (PI/4) and you get 0.106579601815196, which is pretty much the same as scaleX in FillStyle3.