flash与位图：woderfl 案例（一）
woderfl 社区里面有着很多as3的制作技巧，其中有一本书里面介绍着很多相关的解说。里面大部分好的代码都是来自wonderfl里面的人通过自己业余时间编写出来的。这本书目前发现只有亚马逊才有得购买，而且国内只有外购才能买到日文版本。所以没办法看到里面的介绍和解说。不过好运的事，里面解说的代码在beautifl网站都有收录进去，所以很方便进行对里面代码阅读。因为这本书据说只是解说偏多，理论的东西不是很多。相比kp的书，这个偏案例。不过之所以有意思的是，这本书里面的代码技巧性比较强，收录的代码都是在as3方面有很深功底和创意的人。这本书编写作者是一个对as3有丰富经验的人名字叫池田泰延（ClockMaker），当中还有一些关于他的精彩实验。我们都可以在他的博客里面看到。
这本书的目录可以上亚马逊进行阅读，第一章节里面解说是采用HelloWorld开头进行解说。
案例一可以参考这里：http://wonderfl.net/c/nCFQ
案例中采用的技巧如下：（采用两层循环遍历位图数据，获取颜色值，并根据坐标信息产生运动效应）
过程：
创建一个文本，通过一个位图进行复制。
获取到位图对其进行遍历，获取不同的颜色。然后采用Tweener的类库对其产生不规则的运动。
本次使用的位图API 不多，获取颜色是采用getPixel 这个函数，整体看起来这个案例并不复杂，但是里面采用的技巧也是很普遍的一种手法。
如 随机位置，扫描像素值，延迟时间产生运动过程，这些手法也是在as3里面常用到。在这本书里面收录很多案例。
package{
import flash.display.*;
import flash.text.*;
import flash.filters.*;
import flash.geom.*;
import caurina.transitions.Tweener;
public class Foo extends Sprite{
private var bd:BitmapData;
public function Foo():void{
var tf:TextField = new TextField();
tf.textColor = 0x000000;
tf.text = "Hello\nWorld!!!";
tf.autoSize = "left";
bd = new BitmapData(tf.width, tf.height, false, 0x3399ff);
bd.draw(tf);
bd.applyFilter(bd, bd.rect, new Point(), new BlurFilter());
bd.draw(tf);
for(var i:int = 0; i < bd.width; i++){
for(var j:int = 0; j < bd.height; j++){
Tweener.addTween(
randomize(addChild(new Circle(bd.getPixel(i, j)))),
{
x: i * 10,
y: j * 10,
alpha: 1,
delay: (i + j) * .2 * Math.random(),
time: 1
}
);
}
}
}
private function randomize(d:DisplayObject):DisplayObject{
d.x = 400 * Math.random();
d.y = 300 * Math.random();
d.alpha = 0;
return d;
}
}
}
import flash.display.Sprite;
class Circle extends Sprite{
public function Circle(color:uint):void{
graphics.beginFill(color);
graphics.drawCircle(0, 0, 6);
graphics.endFill();
}
}
你可以改成其他文本，进行复制，产生的效果也会不一样。
第二案例，收录一个牛人（Saqoosha）制作飘雪字的技巧。效果看起来很漂亮
收录的地址在这里： http://wonderfl.net/c/g9s1
代码收录如下
当中采用了一个闪星的制作技巧，用法很特别。当中也比较核心的一点是采用粒子运动的方式来进行。让整个程序看起来就像一个艺术品那样子。整本书的目录里面可以看到，这些程序都是比较有技巧性而且想法比较独特。看这些代码也是一种享受。
package {
import flash.display.Bitmap;
import flash.display.BitmapData;
import flash.display.BlendMode;
import flash.display.PixelSnapping;
import flash.display.Sprite;
import flash.events.Event;
import flash.filters.BlurFilter;
import flash.geom.Matrix;
import flash.geom.Point;
import flash.text.TextField;
import flash.text.TextFieldAutoSize;
import flash.text.TextFormat;
import net.hires.debug.Stats;
[SWF(width=465, height=465, backgroundColor=0x0, frameRate=120)]
public class Saq001 extends Sprite {
private static const GRAVITY:Number = 20;
private static const DRAG:Number = 0.3;
private var _canvas:BitmapData;
private var _glow:BitmapData;
private var _glowMtx:Matrix;
private var _forceMap:BitmapData;
private var _snow:Array;
public function Saq001() {
this._canvas = new BitmapData(465, 465, false, 0x0); // カンバスをつくる。ここに 1 pixel ずつ描いていくよ
this.addChild(new Bitmap(this._canvas)) as Bitmap; // stage に配置
this._glow = new BitmapData(465 / 4, 465 / 4, false, 0x0); // キラキラを描く用のん。カンバスの 4 分の 1 のサイズ
var bm:Bitmap = this.addChild(new Bitmap(this._glow, PixelSnapping.NEVER, true)) as Bitmap; // smoothing を true にして配置
bm.scaleX = bm.scaleY = 4; // 4 倍にする。
bm.blendMode = BlendMode.ADD; // 加算モードで合成
this._glowMtx = new Matrix(0.25, 0, 0, 0.25);
// 雪を積もらせるかたちを BitmapData に描く。
var tf:TextField = new TextField();
tf.defaultTextFormat = new TextFormat('Verdana', 64, 0xffffff, true);
tf.autoSize = TextFieldAutoSize.LEFT;
tf.text = 'Wonderfl!!';
tf.x = (465 - tf.width) / 2;
tf.y = (465 - tf.height) / 2;
this._forceMap = new BitmapData(465, 465, false, 0x0);
this._forceMap.draw(tf, tf.transform.matrix);
this._forceMap.applyFilter(this._forceMap, this._forceMap.rect, new Point(0, 0), new BlurFilter(8, 8));
this._snow = []; // 雪パーティクルはここにいれておくよ。
this.addChild(new Stats());
this.addEventListener(Event.ENTER_FRAME, this.update); // 毎フレーム update を呼ぶよ
}
// 雪を 1 粒発生させる関数
public function emitParticle(ex:Number, ey:Number, s:Number = 1, c:int = 0xffffff, vx:Number = 0, vy:Number = 0):void {
var p:SnowParticle = new SnowParticle(); // 作って
// パラメータ設定して
p.x = ex;
p.y = ey;
p.vx = vx;
p.vy = vy;
p.s = s;
p.c = c;
this._snow.push(p); // 保存
}
// 雪を動かすよーー
public function update(e:Event):void {
this._canvas.lock(); // いっぱい setPixel するときは必ず lock しよう
this._canvas.fillRect(this._canvas.rect, 0x0); // カンバスをクリア
var n:int = this._snow.length;
var d:Number;
var gravity:Number = GRAVITY / 1000; // あらかじめ計算しとく
while (n--) {
var p:SnowParticle = this._snow[n];
p.vy += gravity * p.s; // まず重力を加える
p.vx *= 0.99; // 空気抵抗
p.vy *= 0.99; // y 方向にも
d = 1 - (this._forceMap.getPixel(p.x, p.y) / 0xffffff) * DRAG; // forceMap にもとづいて抵抗値を計算。黒→速い、白→遅い。
p.vx *= d; // forceMap から得た抵抗値を適用
p.vy *= d; // y 方向にも
p.x += p.vx; // 動かす
p.y += p.vy;
this._canvas.setPixel(p.x, p.y, p.c); // 雪 1 粒描く
if (p.y > this.stage.stageHeight) { // もし画面外にでちゃったら
this._snow.splice(n, 1); // とりのぞく
}
}
this._canvas.unlock(); // lock したやつは必ず unlock
this._glow.draw(this._canvas, this._glowMtx); // キラキラを描く
// 雪を発生させますよ
n = 10;
while (n--) {
this.emitParticle(Math.random() * this.stage.stageWidth, 0, Math.random() + 0.5);
}
}
}
}
class SnowParticle {
public var x:Number;
public var y:Number;
public var vx:Number;
public var vy:Number;
public var s:Number;
public var c:int;
public function SnowParticle() {
this.x = 0;
this.y = 0;
this.vx = 0;
this.vy = 0;
this.s = 1;
this.c = 0xffffff;
}
}
案例三：forked from: RainyDay
链接代码：http://wonderfl.net/c/mkJ9
一个非常酷as3的下雨效果，收录了Saqoosha forked的一个的代码片段。
package {
import flash.display.Bitmap;
import flash.display.BitmapData;
import flash.display.BlendMode;
import flash.display.PixelSnapping;
import flash.display.Sprite;
import flash.events.Event;
import flash.filters.BlurFilter;
import flash.filters.ColorMatrixFilter;
import flash.geom.Matrix;
import flash.geom.Point;
import flash.text.TextField;
import flash.text.TextFieldAutoSize;
import flash.text.TextFormat;
import flash.utils.Dictionary;
import net.hires.debug.Stats;
import frocessing.color.ColorHSV;
[SWF(width=465, height=465, backgroundColor=0x0, frameRate=120)]
public class RainyDay extends Sprite {
private static const GRAVITY:Number = 20;
private static const DRAG:Number = 0.7;
private static const ZERO_POINT:Point = new Point(0, 0);
private var _canvas:BitmapData;
private var _glow:BitmapData;
private var _glowMtx:Matrix;
private var _forceMap:BitmapData;
// private var _snow:Array;
private var _snow:Dictionary;
private var _color:ColorMatrixFilter = new ColorMatrixFilter([
1, 0, 0, 0, -5,
0, 1, 0, 0, -5,
0, 0, 1, 0, -5,
0, 0, 0, 1, 0
]);
private var _hsv:ColorHSV = new ColorHSV();
private var _blur:BlurFilter = new BlurFilter(1.5, 1.5, 1);
public function RainyDay() {
this._canvas = new BitmapData(465, 465, false, 0x0); // カンバスをつくる。ここに 1 pixel ずつ描いていくよ
this.addChild(new Bitmap(this._canvas)) as Bitmap; // stage に配置
/*this._glow = new BitmapData(465 / 4, 465 / 4, false, 0x0); // キラキラを描く用のん。カンバスの 4 分の 1 のサイズ
var bm:Bitmap = this.addChild(new Bitmap(this._glow, PixelSnapping.NEVER, true)) as Bitmap; // smoothing を true にして配置
//bm.scaleX = bm.scaleY = 4; // 4 倍にする。
bm.blendMode = BlendMode.ADD; // 加算モードで合成
this._glowMtx = new Matrix(0.25, 0, 0, 0.25);*/
// 雪を積もらせるかたちを BitmapData に描く。
var tf:TextField = new TextField();
tf.defaultTextFormat = new TextFormat('Verdana', 64, 0xffffff, true);
tf.autoSize = TextFieldAutoSize.LEFT;
tf.text = 'Rainyday';
tf.x = (465 - tf.width) / 2;
tf.y = (465 - tf.height) / 2;
this._forceMap = new BitmapData(465, 465, false, 0x0);
this._forceMap.draw(tf, tf.transform.matrix);
this._forceMap.applyFilter(this._forceMap, this._forceMap.rect, new Point(0, 0), new BlurFilter(8, 8));
// this._snow = []; // 雪パーティクルはここにいれておくよ。
this._snow = new Dictionary();
this.addChild(new Stats());
this.addEventListener(Event.ENTER_FRAME, this.update); // 毎フレーム update を呼ぶよ
}
// 雪を 1 粒発生させる関数
public function emitParticle(ex:Number, ey:Number, s:Number = 1, c:int = 0x00bfff, vx:Number = 0, vy:Number = 0):SnowParticle {
var p:SnowParticle = new SnowParticle(); // 作って
// パラメータ設定して
p.x = ex;
p.y = ey;
p.vx = vx;
p.vy = vy;
p.s = s;
p.c = c;
// this._snow.push(p); // 保存
this._snow[p] = true;
return p;
}
// 雪を動かすよーー
public function update(e:Event):void {
this._canvas.lock(); // いっぱい setPixel するときは必ず lock しよう
this._canvas.applyFilter(this._canvas, this._canvas.rect, ZERO_POINT, this._color);
this._canvas.applyFilter(this._canvas, this._canvas.rect, ZERO_POINT, this._blur);
// this._canvas.fillRect(this._canvas.rect, 0x0); // カンバスをクリア
// var n:int = this._snow.length;
var d:Number;
var gravity:Number = GRAVITY / 100; // あらかじめ計算しとく
// while (n--) {
for (var key:* in this._snow) {
var p:SnowParticle = SnowParticle(key);
// var p:SnowParticle = this._snow[n];
// p.vx += 0.02;
p.vy += gravity * p.s; // まず重力を加える
p.vx *= 0.99; // 空気抵抗
p.vy *= 0.99; // y 方向にも
d = 1 - (this._forceMap.getPixel(p.x, p.y) / 0xffffff) * DRAG; // forceMap にもとづいて抵抗値を計算。黒→速い、白→遅い。
p.vx *= d; // forceMap から得た抵抗値を適用
var vy:Number = p.vy;
p.vy *= d; // y 方向にも
if ((vy - p.vy) > 1 && Math.random() < 0.3) {
//p.vy = -2;
//p.vx = (Math.random() - 0.5) * 3;
this.emitParticle(p.x, p.y - 2, 1, p.c, (Math.random() - 0.5) * 6, -(Math.random() * 2 + 1));
this.emitParticle(p.x, p.y - 2, 1, p.c, (Math.random() - 0.5) * 6, -(Math.random() * 2 + 1));
this.emitParticle(p.x, p.y - 2, 1, p.c, (Math.random() - 0.5) * 6, -(Math.random() * 2 + 1));
}
var px:int = p.x;
var py:int = p.y;
p.x += p.vx; // 動かす
p.y += p.vy;
// this._canvas.setPixel(p.x, p.y, p.c); // 雪 1 粒描く
_drawLine(p.x, p.y, px, py, p.c, 1);
if (p.y > this.stage.stageHeight) { // もし画面外にでちゃったら
// this._snow.splice(n, 1); // とりのぞく
delete this._snow[p];
}
}
this._canvas.unlock(); // lock したやつは必ず unlock
//this._glow.draw(this._canvas, this._glowMtx); // キラキラを描く
// 雪を発生させますよ
// var n = 10;
// while (n--) {
for (var i:int = 0; i < 4; i++) {
_hsv.h = Math.random() * 20 + 180;
this.emitParticle(Math.random() * this.stage.stageWidth, -20, Math.random() + 0.5, _hsv.value);
}
}
private function _drawLine(x0:int, y0:int, x1:int, y1:int, color:int, alpha:Number):void {
var steep:Boolean = Math.abs(y1 - y0) > Math.abs(x1 - x0);
var tmp:int;
if (steep) {
tmp = x0;
x0 = y0;
y0 = tmp;
tmp = x1;
x1 = y1;
y1 = tmp;
}
if (x0 > x1) {
tmp = x0;
x0 = x1;
x1 = tmp;
tmp = y0;
y0 = y1;
y1 = tmp;
}
var deltax:int = x1 - x0;
var deltay:int = Math.abs(y1 - y0);
var error:int = deltax / 2;
var ystep:int;
var y:int = y0;
if (y0 < y1) {
ystep = 1;
} else {
ystep = -1;
}
for (var x:int = x0; x <= x1; x++) {
if (steep) {
this._canvas.setPixel32(y, x, color | ((alpha * 0xff) << 24));
} else {
this._canvas.setPixel32(x, y, color | ((alpha * 0xff) << 24));
}
error = error - deltay;
if (error < 0) {
y = y + ystep;
error = error + deltax;
}
}
}
}
}
class SnowParticle {
public var x:Number;
public var y:Number;
public var vx:Number;
public var vy:Number;
public var s:Number;
public var c:int;
public function SnowParticle() {
this.x = 0;
this.y = 0;
this.vx = 0;
this.vy = 0;
this.s = 1;
this.c = 0xffffff;
}
}