PDA

View Full Version : Programming gradient graphics - not working with Scaleform



Ompakim
02-09-2012, 09:36 AM
Hi!

I've been trying getting my HUD to work using AS 3.0 and Scaleform, but I've run into a problem concerning the gradient colour. It seems when I export the file using the FxMediaPlayer, the gradient effect is discarded:

http://i44.tinypic.com/upy4j.jpg

Setting up the gradient:

public class HealthCircle extends Sprite
{
private var mc:Shape;
private var centerX, centerY, radius, steps, startAngle:int;
private var mxBox:Matrix

public function HealthCircle():void
{
mc = new Shape();
addChild(mc);

mxBox = new Matrix();
mxBox.createGradientBox(60, 60); //The thickness of the gradients.

centerX = 30; centerY = 30; //X- og Y-posisjon
radius = 177; //Radius...
steps = 100; //How many steps to draw around the circle. The higher the number, the more complicated the circle.
startAngle = 70; //Where in a 360-degrees circle should we start the drawing.

mc.graphics.lineStyle(71); //Line thickness
}

Drawing the circle:

public function drawGreenArc(arcAngle:Number)
{
arcAngle /= 360;

mc.graphics.lineGradientStyle(GradientType.RADIAL, [0x14BE76, 0x09844F], [100, 100], [0x00, 0xFF], mxBox, "reflect");

//Rotate the point of 0 rotation 1/4 turn counter-clockwise.
startAngle -= .25;

//Some math..
var twoPI = 2 * Math.PI;
var angleStep = arcAngle/steps;
var xx = centerX + Math.cos(startAngle * twoPI) * radius;
var yy = centerY + Math.sin(startAngle * twoPI) * radius;

mc.graphics.moveTo(xx, yy);

for(var i = 1; i <= steps; i++)
{
var angle = startAngle + i * angleStep;
xx = centerX + Math.cos(angle * twoPI) * radius;
yy = centerY + Math.sin(angle * twoPI) * radius;
mc.graphics.lineTo(xx, yy);
}
}


Is there any way to make a gradient line stay gradient when exporting with the FxMediaPlayer? :)

Ompakim
02-10-2012, 03:30 PM
I'm just gonna try one small le bump.. :>

Edit:
Solved it by adding a transparent bitmap on top of the programmed graphics.

Result:
http://oi39.tinypic.com/zl3w36.jpg