This chapter is about basic graphics.
The Flash graphics API has several graphic capabilities for drawing lines, simple shapes like rectangles, bitmaps, and playing videos. Let us begin with some simple tasks, like drawing a rectangle, a circle and a rounded rectangle.
package sg.hxf.tut.chap01;
import flash.display.MovieClip;
import flash.display.Graphics;
import flash.display.Shape;
import sg.hxf.Graph;
class Demo01 {
static var mc : MovieClip;
static function main() {
mc = flash.Lib.current;
var figures:Shape = new Shape();
// draw a rectangle
var g : Graphics = figures.graphics;
g.lineStyle(2,0xFF0000);
g.drawRect(5,5,45,35);
// draw a circle
g.lineStyle(2,0x0000FF);
g.drawCircle(70,20,15);
// draw a rounded rect
g.lineStyle(2,0x00FF00);
g.drawRoundRect(90,5,30,30,10,10);
mc.addChild(figures);
}
}
In the first examples we use only basic functionality, so everything starts in the static main function
of the class Demo01.
First of all we need a handle for the place we are acting on, which is the mc the MovieClip we
are in.
For our graphical demonstration we decide to use a Shape object named figures. All graphic operations are
applied to the Graphics object. For the ease of use we store it in a variable g.
That was enough for precondition, now we are ready to work.
Most operations depend on the actual state
of the Graphics object, that is why we start with setting the line style to 2 pixel and set an RGB color of red:
g.lineStyle(2,0xFF0000);
Then we utilize the API functions for drawing a rectangle, the parameters are x,y coordinates and width,height.
For the other two shapes we use similar functions.
g.drawRect(5,5,45,35);
g.drawCircle(70,20,15);
g.drawRoundRect(90,5,30,30,10,10);
After having done all operations we have to integrate the figures object into our movieclip, which is done by the addChild function of the movieclip.
Pretty simple, so it might be time four you to modify the example and try out someting on your own.
After having visited the simple types, you can find more of them in the API documentation, we will continue
on drawing something reusable, a star.
For this we integrate the first function of our library: the drawStar function.
Graph.drawStar(g,102,5,
90, // radius
0, // empty star
0xff0000, // empty-border color
0xff8080, // empty-fill color
0x00ff00, // full-border color
0x80ff80, // full-fill color
1
);
Graph.drawStar(g,302,5,
90, // radius
1, // half star
0xff0000, // empty-border color
0xff8080, // empty-fill color
0x00ff00, // full-border color
0x80ff80, // full-fill color
1
);
Graph.drawStar(g,205,85,
90, // radius
2, // full star
0xff0000, // empty-border color
0xff8080, // empty-fill color
0x00ff00, // full-border color
0x80ff80, // full-fill color
0.8 // a little bit transparent
);
We simply add the invocation after the last shape, parameters are defined in the library documentation.
Now let us switch to another example, which might be useful for you: Its is the ability to draw curves, that is a spline from one point to another having a control point which tear the line to its direction, like a rubber band.
We use this to draw wave like lines for a volume control.
class Demo03 {
static var mc : MovieClip;
static var stage : Dynamic;
/* an array with "on" bars */
static var soundOn : Array<Shape>;
static var onColor : Int = 0xffa826;
static function main() {
mc = flash.Lib.current;
stage = mc.stage;
var g : Graphics;
var soundArea : Sprite;
var soundClick : Sprite;
soundArea = new Sprite();
g = soundArea.graphics;
// draw the "off" bars
g.lineStyle(2,0x808080);
g.moveTo(0,-2);
g.curveTo(3,0,0,2);
g.moveTo(4,-3);
g.curveTo(8,0,4,3);
g.moveTo(8,-4);
g.curveTo(12,0,8,4);
g.moveTo(12,-5);
g.curveTo(16,0,12,5);
g.moveTo(16,-6);
g.curveTo(21,0,16,6);
g.moveTo(20,-7);
g.curveTo(26,0,20,7);
g.moveTo(24,-8);
g.curveTo(31,0,24,8);
/* draw the on bars and put every bar in an array for later switching */
soundOn = new Array<Shape>();
var s1 : Shape = new Shape();
s1.graphics.lineStyle(2,onColor);
s1.graphics.moveTo(0,-2);
s1.graphics.curveTo(3,0,0,2);
s1.visible = false;
soundArea.addChild(s1);
soundOn.push(s1);
s1 = new Shape();
s1.graphics.lineStyle(2,onColor);
s1.graphics.moveTo(4,-3);
s1.graphics.curveTo(8,0,4,3);
s1.visible = false;
soundArea.addChild(s1);
soundOn.push(s1);
s1 = new Shape();
s1.graphics.lineStyle(2,onColor);
s1.graphics.moveTo(8,-4);
s1.graphics.curveTo(12,0,8,4);
s1.visible = false;
soundArea.addChild(s1);
soundOn.push(s1);
s1 = new Shape();
s1.graphics.lineStyle(2,onColor);
s1.graphics.moveTo(12,-5);
s1.graphics.curveTo(16,0,12,5);
s1.visible = false;
soundArea.addChild(s1);
soundOn.push(s1);
s1 = new Shape();
s1.graphics.lineStyle(2,onColor);
s1.graphics.moveTo(16,-6);
s1.graphics.curveTo(21,0,16,6);
s1.visible = false;
soundArea.addChild(s1);
soundOn.push(s1);
s1 = new Shape();
s1.graphics.lineStyle(2,onColor);
s1.graphics.moveTo(20,-7);
s1.graphics.curveTo(26,0,20,7);
s1.visible = false;
soundArea.addChild(s1);
soundOn.push(s1);
s1 = new Shape();
s1.graphics.lineStyle(2,onColor);
s1.graphics.moveTo(24,-8);
s1.graphics.curveTo(31,0,24,8);
s1.visible = false;
soundArea.addChild(s1);
soundOn.push(s1);
soundArea.x = 20;
soundArea.y = 13;
mc.addChild(soundArea);
soundClick = new Sprite();
soundClick.graphics.beginFill(0xFF00FF);
soundClick.graphics.drawRect(0,0,32,24);
soundClick.graphics.endFill();
soundClick.x = 18;
soundClick.y = 1;
soundClick.alpha=0;
soundClick.addEventListener(MouseEvent.MOUSE_DOWN, setSound);
soundClick.addEventListener(MouseEvent.MOUSE_OVER, setSound);
mc.addChild(soundClick);
}
static function setSound(event:MouseEvent){
if(event.buttonDown){
var np : Float = (event.localX/32);
setSoundVolume(np);
}
}
static function setSoundVolume(vol:Float){
if(vol>=0.95){
vol=1;
}
var n:Int = Math.round(vol*7);
var i:Int;
for(i in 0...7){
soundOn[i].visible = i<n;
}
}
}
Here we need to know that it is best to prepare everything in advance and only change states when your application
is running, thus we prepare the "off" bars, and the "on" bars. While the "off" bars are drawn in the background, the
"on" bars are dynamically switched on and off.
They are kept in the array soundOn.
Finally we have to add a clickable layer with is soundClick, it is not visible, but you could change its transparency to 0.5 to see where it is. This Sprite is only used to receive the mouse events without interruption over the empty parts in between.
Feel free to experiment with the mouse handling functions, in this examples they are far away for optimum!
This sample demonstrates a simple play button, the alpha transparency is changed when the mouse is over the button.
A little bit of transparency is kept (90 %) to allow the background shinning through.
Don not be afraid about the mass of parameters required for the gradient of the button and the drop-shadow effect.
You could read them in the API specification.
class Demo04 {
static var mc : MovieClip;
static var stage : Dynamic;
static var playBtn : Sprite;
static function main() {
mc = flash.Lib.current;
stage = mc.stage;
var g : Graphics;
playBtn = new Sprite();
g = playBtn.graphics;
g.lineStyle(1,0xe5e5e5);
var w:Int = 60;
var h:Int = 40;
var colors:Array = [0xF5F5F5, 0xA0A0A0];
var alphas:Array = [1, 1];
var ratios:Array = [0, 255];
var matrix:Matrix = new Matrix();
matrix.createGradientBox(w-2, h-2, Math.PI/2, 0, 0);
g.beginGradientFill(GradientType.LINEAR,
colors,
alphas,
ratios,
matrix,
SpreadMethod.PAD,
InterpolationMethod.LINEAR_RGB,
0);
g.drawRoundRect(0,0,w,h,16,16);
g.endFill();
// draw a triangle
g.lineStyle(1,0x808080);
g.beginFill(0x0);
g.moveTo((w-20)/2,5);
g.lineTo((w-20)/2+20,h/2);
g.lineTo((w-20)/2,h-5);
g.lineTo((w-20)/2,5);
g.endFill();
// add the drop-shadow filter
var shadow : DropShadowFilter = new DropShadowFilter(
4,45,0x000000,0.8,
4,4,
0.65,BitmapFilterQuality.HIGH, false, false
);
var af : Array = new Array();
af.push(shadow);
playBtn.filters = af;
playBtn.alpha = 0.5;
playBtn.x = 10;
playBtn.y = 10;
// add the event listener
playBtn.addEventListener(MouseEvent.MOUSE_OUT, outEntry);
playBtn.addEventListener(MouseEvent.MOUSE_OVER, overEntry);
mc.addChild(playBtn);
}
static function overEntry(event:flash.events.MouseEvent){
playBtn.alpha=0.9;
}
static function outEntry(event:flash.events.MouseEvent){
playBtn.alpha=0.5;
}
}
The basic structure of this example is simple, first a rounded rect, followed by a triangle and finished with some eye candies effects.
Unfortunately it is the eye candy which might look somehow complicated, but do not be afraid take it as a starting point and
go on experimenting with the parameter values!
This program is free software; you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation; either version 3 of the License, or
(at your option) any later version.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with this program. If not, see http://www.gnu.org/licenses.
Copyright (C) 2008 by Siegmund Gorr