Flash / Flex / ActionScript/Graphics/Gradient
Версия от 12:19, 26 мая 2010; (обсуждение)
Содержание
- 1 Applying Gradient Fills
- 2 Applying Gradients to Lines
- 3 A shape with evenly rounded corners
- 4 Create a Ball by using the Gradient
- 5 Create Gradient box
- 6 lineGradientStyle("linear", [0xFFFF00, 0x00FFFF],, [FF], mxBox, "reflect", "linearRGB")
- 7 lineGradientStyle("radial", [0xFFFF00, 0x00FFFF],, [FF], mxBox, "pad", "linearRGB")
- 8 lineGradientStyle("radial", [0xFFFF00, 0x00FFFF],, [FF], mxBox, "pad", "linearRGB", 1)
- 9 Line Gradient Test
- 10 Rotating Objects with Filters
- 11 Set line gradient style with Matrix
Applying Gradient Fills
<source lang="java">
package{
import flash.display.*;
import flash.geom.*;
public class Main extends Sprite{
public function Main(){
var shape: Shape = new Shape ();
shape.x = 100;
shape.y = 100;
var mxBox:Matrix = new Matrix();
mxBox.createGradientBox(200, 200);
shape.graphics.lineStyle(10);
shape.graphics.beginGradientFill("radial", [0xFFFF00, 0x00FFFF],
[100, 100], [0x00, 0xFF], mxBox, "reflect", "RGB", 1);
shape.graphics.curveTo(200, -100, 400, 0);
shape.graphics.lineTo(400, 200);
shape.graphics.lineTo(0, 200);
shape.graphics.lineTo(0, 0);
shape.graphics.endFill();
}
}
}
</source>
Applying Gradients to Lines
<source lang="java">
package {
import flash.display.*;
import flash.geom.Matrix;
public class Main extends Sprite
{
public function Main ()
{
var shape:Sprite = new Sprite();
shape.x = 100;
shape.y = 100;
var mxBox:Matrix = new Matrix();
mxBox.createGradientBox(200, 200);
shape.graphics.lineStyle(25);
shape.graphics.lineGradientStyle(GradientType.LINEAR,[0xFFFF00, 0x00FFFF], [100, 100], [0x00, 0xFF], mxBox);
shape.graphics.curveTo(200, -100, 400, 0);
shape.graphics.lineTo(400, 200);
shape.graphics.lineTo(0, 200);
shape.graphics.lineTo(0, 0);
shape.graphics.endFill();
addChild(shape);
}
}
}
</source>
A shape with evenly rounded corners
<source lang="java">
package{
import flash.display.*;
public class Main extends Sprite{
public function Main(){
var shape:Shape = new Shape();
addChild(shape);
shape.graphics.beginFill(0x000000, 1);
shape.graphics.drawRoundRect(0, 0, 100, 100, 10, 20);
shape.graphics.endFill();
}
}
}
</source>
Create a Ball by using the Gradient
<source lang="java">
package { import flash.display.GradientType; import flash.display.Sprite; import flash.geom.Matrix;
import flash.display.Sprite;
[SWF(width=550, height=400)]
public class Main extends Sprite {
public function Main() {
var ball:Ball = new Ball();
addChild(ball);
}
}
} class Ball extends flash.display.Sprite {
public function Ball() {
var colors:Array = [];
var pMatrix:flash.geom.Matrix = new flash.geom.Matrix();
pMatrix.createGradientBox(70, 70, 0, -20, -10);
graphics.beginGradientFill(flash.display.GradientType.RADIAL, [0xFF0000,0x330000], [1,1], [0,0xFF], pMatrix);
graphics.drawCircle(25, 25, 25);
graphics.endFill();
}
}
</source>
Create Gradient box
<source lang="java">
import flash.display.GradientType; import flash.display.Sprite; import flash.geom.Matrix;
class Ball extends Sprite {
public function Ball() {
var colors:Array = [];
var pMatrix:Matrix = new Matrix();
pMatrix.createGradientBox(70, 70, 0, -45, -32);
graphics.beginGradientFill(GradientType.RADIAL, [0xFF0000,0x330000], [1,1], [0,0xFF], pMatrix);
graphics.drawCircle(0, 0, 25);
graphics.endFill();
}
}
</source>
lineGradientStyle("linear", [0xFFFF00, 0x00FFFF],, [FF], mxBox, "reflect", "linearRGB")
<source lang="java">
package {
import flash.display.*;
import flash.geom.Matrix;
public class Main extends Sprite
{
public function Main()
{
var shape:Sprite = new Sprite();
shape.x = 100;
shape.y = 100;
var mxBox:Matrix = new Matrix();
mxBox.createGradientBox(200, 200);
shape.graphics.lineStyle(25);
shape.graphics.lineGradientStyle("linear", [0xFFFF00, 0x00FFFF], [100, 100], [0x00, 0xFF], mxBox, "reflect", "linearRGB");
shape.graphics.curveTo(200, -100, 400, 0);
shape.graphics.lineTo(400, 200);
shape.graphics.lineTo(0, 200);
shape.graphics.lineTo(0, 0);
shape.graphics.endFill();
addChild(shape);
}
}
}
</source>
lineGradientStyle("radial", [0xFFFF00, 0x00FFFF],, [FF], mxBox, "pad", "linearRGB")
<source lang="java">
package {
import flash.display.*;
import flash.geom.Matrix;
public class Main extends Sprite
{
public function Main()
{
var shape:Sprite = new Sprite();
shape.x = 100;
shape.y = 100;
var mxBox:Matrix = new Matrix();
mxBox.createGradientBox(200, 200);
shape.graphics.lineStyle(25);
shape.graphics.lineGradientStyle("radial", [0xFFFF00, 0x00FFFF], [100, 100], [0x00, 0xFF], mxBox, "pad", "linearRGB");
shape.graphics.curveTo(200, -100, 400, 0);
shape.graphics.lineTo(400, 200);
shape.graphics.lineTo(0, 200);
shape.graphics.lineTo(0, 0);
shape.graphics.endFill();
addChild(shape);
}
}
}
</source>
lineGradientStyle("radial", [0xFFFF00, 0x00FFFF],, [FF], mxBox, "pad", "linearRGB", 1)
<source lang="java">
package {
import flash.display.*;
import flash.geom.Matrix;
public class Main extends Sprite
{
public function Main ()
{
var shape:Sprite = new Sprite();
shape.x = 100;
shape.y = 100;
var mxBox:Matrix = new Matrix();
mxBox.createGradientBox(200, 200);
shape.graphics.lineStyle(25);
shape.graphics.lineGradientStyle("radial", [0xFFFF00, 0x00FFFF], [100, 100], [0x00, 0xFF], mxBox, "pad", "linearRGB", 1);
shape.graphics.curveTo(200, -100, 400, 0);
shape.graphics.lineTo(400, 200);
shape.graphics.lineTo(0, 200);
shape.graphics.lineTo(0, 0);
shape.graphics.endFill();
addChild(shape);
}
}
}
</source>
Line Gradient Test
<source lang="java">
package {
import flash.display.GradientType;
import flash.display.Shape;
import flash.display.Sprite;
[SWF(width=550, height=400)]
public class Main extends Sprite {
public function Main() {
// Create and center ellipse shape on stage
var ellipse:Shape = new Shape();
addChild(ellipse);
ellipse.x = stage.stageWidth / 2;
ellipse.y = stage.stageHeight / 2;
// Set basic line style
ellipse.graphics.lineStyle(30);
// Set up gradient properties
var colors:Array =
[
0xFF0000,
0xFF6600,
0xFFFF00,
0x00FF00,
0x0000FF,
0x2E0854,
0x8F5E99
];
var alphas:Array = [1,1,1,1,1,1,1];
var ratios:Array = [0,42,84,126,168,210,255];
// Set gradient line style
ellipse.graphics.lineGradientStyle(GradientType.LINEAR, colors, alphas, ratios);
// Draw ellipse
ellipse.graphics.drawEllipse(-100, -50, 200, 100);
}
}
}
</source>
Rotating Objects with Filters
<source lang="java">
package {
import flash.display.Bitmap;
import flash.display.BitmapData;
import flash.display.Sprite;
import flash.events.MouseEvent;
import flash.filters.BlurFilter;
import flash.geom.Matrix;
public class Main extends Sprite
{
private var circle:Sprite = new Sprite();
private var circleCopy:Sprite = new Sprite();
public function Main()
{
addEventListener(MouseEvent.MOUSE_MOVE, onMouseMove);
circle.graphics.beginFill(0x00FF00, 1);
circle.graphics.drawCircle(0, 0, 15);
circle.graphics.endFill();
addChild(circle);
var bfInstance:BlurFilter = new BlurFilter(10, 40);
circle.filters = [bfInstance];
var bmpDataCircle:BitmapData = new BitmapData(circle.width + 20, circle.height + 80);
bmpDataCircle.draw(circle, new Matrix(1, 0, 0, 1, 10, 40));
var bmpCircle:Bitmap = new Bitmap(bmpDataCircle);
circle.visible = false;
circleCopy.addChild(bmpCircle);
addChild(circleCopy);
}
private function onMouseMove(mouseEvent:MouseEvent):void
{
circleCopy.rotation = (mouseX / 550) * 360;
}
}
}
</source>
Set line gradient style with Matrix
<source lang="java">
package {
import flash.display.*;
import flash.geom.Matrix;
public class Main extends Sprite
{
public function Main()
{
var shape:Sprite = new Sprite();
shape.x = 100;
shape.y = 100;
var mxBox:Matrix = new Matrix();
mxBox.createGradientBox(200, 200);
shape.graphics.lineStyle(25);
shape.graphics.lineGradientStyle("linear", [0xFFFF00, 0x00FFFF],
[100, 100], [0x00, 0xFF], mxBox, "reflect");
shape.graphics.curveTo(200, -100, 400, 0);
shape.graphics.lineTo(400, 200);
shape.graphics.lineTo(0, 200);
shape.graphics.lineTo(0, 0);
shape.graphics.endFill();
addChild(shape);
}
}
}
</source>
