《making things move 》第四章

《making things move 》第四章

这章够杂的~~看得累死了~

笔记是重要内容的简单汇总，看完书再翻笔记，光看笔记无效~

颜色知识：

flash 使用rgb颜色，每种颜色都从0 到255， 256 × 256 × 256 ，有16,777,21种颜色可能，通常16进制描述

10进制 每个数字可以是0 ~ 9 ，16进制 每个数字可以为0 ~ 15 (0 ~ F) as中不区分大小写，0 ~ f 也可以，在html里通常用#做为前缀，但

在一般编程语言里都以0x做为前缀。例如：0xA就是10，0xF就是15 ，0x10就等于16

10进制 每10位进1，例如 数字243意识是说 2个100，4个10，1个1
16进制 每16位进1，例如 数字0x2B3 意识是说 2个256，B（11）个16 ，3个1

24位color 每两位分1组 共3组，红绿蓝 0xRRGGBB
32位color 每两位分1组 共4组 透明度红绿蓝 0xAARRGGBB

对flash来说10进制 16进制都一样，但16进制更易读。例如0xAC05A2 红AC 绿05 兰A2 ，红和蓝值比较大绿比较小，你可以想像出大概是偏

紫的颜色

转换这两种进制很简单。只用trace就行了

16 --> 10
trace(0xAC05A2)

10 --> 16

trace((11273634).toString(16))
//会得到 ac05a2 ,如果你要用的话，别忘了加上前缀0x

两个底层公式

Combine component colors:

color24 = red << 16 | green << 8 | blue;

Extract component colors:

red = color24 >> 16;
green = color24 >> 8 & 0xFF;
blue = color24 & 0xFF;

后边都是两个公式推倒过程，太底层了，没看。。。会用就行了

The Drawing API

基础在这里
http://www.nshen.net/blog/article.asp?id=251

从 curve 开始

用法：

var x0:Number = 100;
var y0:Number = 200;
var x2:Number = 300;
var y2:Number = 200;

function onEnterFrame(Void):Void {
 var x1:Number = _xmouse;
 var y1:Number = _ymouse;
 clear();
 lineStyle(1, 0, 100);
 moveTo(x0, y0);
 curveTo(x1, y1, x2, y2);
 lineStyle(1, 0, 40);
 lineTo(_xmouse, _ymouse);
 lineTo(x0, y0);
}

点这里 显示/隐藏 媒体

attachments/200610/31_122620_ch04_02.swf

Notice that the curve never actually reaches the control point, but gets about halfway there.

* Curving through the control point

这是重点中的重点，怎么才算Curving through the control point 呢？ ，看swf

点这里 显示/隐藏 媒体

attachments/200610/31_125506_ch04_03.swf

设
起点 x0, y0
终点 x2, y2
x1, y1 为 control 点.
xt, yt (t for target)为curve要穿过的那点 ， 则有下边这个公式

x1 = xt * 2 − (x0 + x2) / 2;
y1 = yt * 2 − (y0 + y2) / 2;

Basically, you just multiply the target by two, and subtract the average of the starting and ending point. If you want, you can graph it all out and see exactly how it works. Or, you can just test it, see that it works, and have faith that it always will.

就是说让你背下来 ！ 是公式

完整代码：

var x0:Number = 100;
var y0:Number = 200;
var x2:Number = 300;
var y2:Number = 200;
function onEnterFrame(Void):Void
{
 var x1 = _xmouse * 2 - (x0 + x2) / 2;
 var y1 = _ymouse * 2 - (y0 + y2) / 2;
 clear();
 lineStyle(1, 0, 100);
 moveTo(x0, y0);
 curveTo(x1, y1, x2, y2);
}

若干条curves连成的封闭线条

点这里 显示/隐藏 媒体

attachments/200610/31_152144_ch04_06.swf

init();

function init()
{
 var points:Array = new Array();
 for (var i = 0; i < 9; i++)
 {
 points[i] = new Object();
 points[i].x = Math.random() * Stage.width;
 points[i].y = Math.random() * Stage.height;
 }
 var xc1:Number = (points[0].x + points[points.length - 1].x) / 2;
 var yc1:Number = (points[0].y + points[points.length - 1].y) / 2;
 lineStyle(1, 0, 100);
 moveTo(xc1, yc1);
 for (i = 0; i < points.length - 1; i++)
 {
 var xc:Number = (points[i].x + points[i + 1].x) / 2;
 var yc:Number = (points[i].y + points[i + 1].y) / 2;
 curveTo(points[i].x, points[i].y, xc, yc);
 }
 curveTo(points[i].x, points[i].y, xc1, yc1);
}

beginGradientFill

需要注意：

1. colors alphas ratios 3个数组元素个数要对应

2.matrix 中的x,y要跟你画的mc的位置相同

3.matrix 中的 r 为弧度值，默认填充从左到右，r=Math.PI/4 即从左上到右下， r=Math.PI/2 就是从上到下填充

4.这里的matrix是一个object，flash8以后自带一个matrix类，这里还没讲到，应该去看help（我还没看 = =b）

init();
function init()
{
  lineStyle(1, 0, 100);
var colors:Array = [0xffffff, 0x0000ff, 0xff0000];
var alphas:Array = [100, 100, 100];
var ratios:Array = [0, 128, 255];
  var matrix:Object = {matrixType:"box", w:100, h:100, x:100, y:100, r:0};
  beginGradientFill("linear", colors, alphas, ratios, matrix);
  moveTo(100, 100);
  lineTo(200, 100);
  lineTo(200, 200);
  lineTo(100, 200);
  lineTo(100, 100);
  endFill();
}

Color Transforms

记得以前有研究过（ http://www.nshen.net/blog/article.asp?id=373 ）

所以这里没有仔细看，需要的时候再回来补 ~

Filters

flash8中有filters：

Drop shadow

Blur

Glow

Bevel

Gradient bevel

Gradient glow

Color matrix

Convolution

Displacement map

都在flash.filters包里

mc里有一个filters属性，默认为undefined

要把他声明成数组才能放里filter

import flash.filters.BlurFilter;
var blur:BlurFilter = new BlurFilter(5, 5, 3);
var myFilters:Array = new Array();
myFilters.push(blur);
star.filters = myFilters;

//Voila! You have a blurry star. You can shortcut this a little:

import flash.filters.BlurFilter;
var blur:BlurFilter = new BlurFilter(5, 5, 3);
var myFilters:Array = [blur]; // makes new array with blur as element 0
star.filters = myFilters;

//Or shortcut it a lot:

star.filters = [new flash.filters.BlurFilter(5, 5, 3)];

如果mc上已经有filter了，想保留，或者根本不知道mc上有没有filter怎么办？

import flash.filters.BlurFilter;
var blur:BlurFilter = new BlurFilter(5, 5, 3);
if(star.filters == undefined)
{
 star.filters = new Array();
}
var oldFilters:Array = star.filters;
oldFilters.push(blur);
star.filters = oldFilters;

Try applying a filter to the star in the IDE. You’ll see that both filters are applied.

结合以前所学做一个效果：

点这里 显示/隐藏 媒体

attachments/200610/31_234020_1.swf

代码如下：

import flash.filters.DropShadowFilter;
var star:MovieClip;
var starFilter:DropShadowFilter;
init();
function init() {
 starFilter = new DropShadowFilter();
 starFilter.blurX = 20;
 starFilter.blurY = 20;
}
function onEnterFrame(Void):Void {

// 鼠标在star左上方时候，才会算出正角，这个正角正好跟鼠标相对

 var dx:Number = star._x - _xmouse;
 var dy:Number = star._y - _ymouse;
 starFilter.angle = Math.atan2(dy, dx) * 180 / Math.PI;
 starFilter.distance = Math.sqrt(dx*dx + dy*dy) * .1;
 star.filters = [starFilter];
}

Bitmap Control

一个喷漆特效，好好理解吧

鼠标拖动

点这里 显示/隐藏 媒体

attachments/200611/01_004307_2.swf

import flash.display.BitmapData;
var density:Number = 100;
var radius:Number = 50;

var bitmap:BitmapData = new BitmapData(Stage.width,
 Stage.height,
 false,
 0xffffffff);
_root.attachBitmap(bitmap,0);

function onMouseDown():Void {
 sprayColor = Math.random() * 0xffffff;
 onEnterFrame = spray;
}

function onMouseUp():Void {
 delete onEnterFrame;
}

function spray():Void {
 for (var i:Number = 0; i<density; i++) {
/*

一个角，一个半径，用我们的公式就能求出一个点的坐标（就是求x,y）

一个随机角，一个随机半径，当然得到的是围绕中心的一个随机点

*/
 var angle:Number = Math.random() * Math.PI * 2;
 var randRadius:Number = Math.random() * radius;
 var randX:Number = Math.cos(angle) * randRadius;
 var randY:Number = Math.sin(angle) * randRadius;
 bitmap.setPixel32(_xmouse + randX,
 _ymouse + randY,
 sprayColor);
//setPixel32,包含alpha通道，还有setPixel是24位的
 }
}

当然，上边的效果用drawing api也能做出来，但你会发现喷的时间越长，系统越慢，直到死掉~~~

而bitmap做的，你喷上一天也不会感到效率下降

或许你可以在上边加上一个filter，让它看起来不像是draw上了

_root.filters = [new flash.filters.BlurFilter(2, 2, 3)];

点这里 显示/隐藏 媒体

attachments/200611/01_005059_3.swf