Synchronous Space: 2007/07

2007-07-29

最近，在Adobe Labs公开了一个 Flash-Ajax Video Component。

什么是Flash-Ajax Video Component?

Flash-Ajax Video Component（FAVideo）是一个轻量级的，开源的用 Ajax+Flash 来播放flv的组件。它可以运用在 Ajax 的程序里。它可以使在 Javascript 里控制 Video 像在 Flash 那样容易。

Hello World 程序

<html>
 <head>
  <title>Various ways to work with FAVideo</title>
  <script src="AC_RunActiveContent.js" type="text/javascript"></script>
  <script src="FAVideo.js" type="text/javascript"></script>
 </head>
 <body onLoad="">
  <div id="divOne"></div>
  <script type="text/javascript">
   playerOne = new FAVideo(
    "divOne", "demo_video.flv",0,0,{ autoLoad:true, autoPlay:true });
  </script>
  <script>
   playerOne.addEventListener("playheadUpdate",this,myHandler);
   playerOne.removeEventListener("playheadUpdate",this,myHandler);
   function myHandler() {
    //alert("eh");
   }
  </script>
 </body>
</html>

运行截图：

2007-07-27

SWF与FLV ver 9 的文件格式公开了！

SWF与FLV ver 9 的文件格式终于公开了。在这里（Adobe Player Licensing）可以签约得到。

现在，可以研究SWF的格式了。

注意，根据Licence，这个文件格式只能用于SWF的生成，而不能用于开发Player。

2007-07-26

Flex 2.0.1 Hotfix 3

Flex 2.0.1 SDK Hotfix 3 在 US 的支持中心里发布了。

利用在US发布的LCDS 2.5.1时，需要添加Hotfix 3。注意Hotfix 3是专门针对LCDS 2.5.1的，使用FDS 2.0.1时最好不要添加。

其他的注意事项：

不支持Flex Builder 2.0
添加Hotfix 3前，需要添加Hotfix 2。
如果没有出现Hotfix修正的问题，最好不要添加。

详细看下面：

2007-07-22

递归算法(2) - 勾股树

先来看一下效果：

GouguTree

实现代码：

/**
 * 勾股树
 * @param g Graphics
 * @param p1 起始点1
 * @param p2 起始点2
 * @param angle 每次迭代时的偏移角（弧度）
 * @param n 迭代次数
 */
function gouguTree(g:Graphics, p1:Point, p2:Point, angle:Number, n:int):void {
 /*
  *    p5
  *    /\
  * p3/A \p4
  *  +---+
  *  |   |
  *  +---+
  * p1   p2
  */
 var p3:Point, p4:Point, p5:Point;
 var length:Number;
 var p1_p2:Point = p2.subtract(p1);
 var baseAngle:Number = Math.atan2(p1_p2.y, p1_p2.x); 
 length = p1_p2.length;
 p3 = p1.add( Point.polar(length, baseAngle + Math.PI/2) );
 p4 = p3.add(p1_p2);
 g.moveTo(p1.x, p1.y);
 g.lineTo(p2.x, p2.y);
 g.lineTo(p4.x, p4.y);
 g.lineTo(p3.x, p3.y);
 g.lineTo(p1.x, p1.y);
 if(n > 0) {
 //if(length > 10) { //改为此句将会当长度小于10时结束。
  /*
   * cosA = |p3_p5| / |p3_p4|
   * |p3_p5| = cosA * |p1_p2| (p3_p4 = p1_p2)
   */
  var p3_p4:Point = p4.subtract(p3);
  var l_p3_p5:Number = Math.cos(angle) * length;
  p5 = p3.add( Point.polar(l_p3_p5, baseAngle + angle) );
  trace("@l_p3_p5",l_p3_p5);
  n--;
  gouguTree(g, p3, p5, angle, n);
  gouguTree(g, p5, p4, angle, n);
 }
}

FireBug的功过

FireBug太强大了。

我的Blog改版时全靠它来debug。没有它，还不知现在CSS怎么样了。

FireBug太脆弱了。

我每次浏览了含有不正确的网页时，它就有可能造成死机。而且每次关闭Firefox时都会出现Error。

我想，大家应该可能遇到过这样的问题。请告诉我该怎么办？

2007-07-21

递归算法(1) - 科赫曲线

先来看一下效果：

KochCurve

实现代码：

/**
 *科赫曲线
 *@param g Graphics
 *@param p1 起始点
 *@param p2 结束点
 *@param p1 迭代次数
 */
function kochCurve(g:Graphics, p1:Point, p2:Point, n:int):void {
 if(n == 0) {
  g.moveTo(p1.x, p1.y)
  g.lineTo(p2.x, p2.y);
  return;
 }
 var p3:Point, p4:Point, p5:Point;
 //     p4
 //p1   /\   p2
 // ---/  \---
 //   p3  p5
 p3 = Point.interpolate(p2, p1, 1/3);
 p5 = Point.interpolate(p2, p1, 2/3);
 var p1_p3:Point = p3.subtract(p1);
 var angle:Number = Math.atan2(p1_p3.y, p1_p3.x)
 p4 = p3.add(Point.polar(p1_p3.length, angle + 1/3*Math.PI));
 kochCurve(g, p1, p3, n-1);
 kochCurve(g, p3, p4, n-1);
 kochCurve(g, p4, p5, n-1);
 kochCurve(g, p5, p2, n-1);
}

2007-07-17

3D的宇宙树

一个用Papervision 3D写的3D的宇宙树

World Tree in Papervision 3D and AS3

2007-07-15

After Effect CS3 的新功能

Shape Layers（图形层，可以轻易地创建和做动画的矢量图）
Puppet tool（如下图）

Powerful motion controls screenshot

Adobe Photoshop CS3 Extended integration（与 Photoshop CS3 Extended 的集成）
Tight integration with Adobe Flash CS3 Professional（与 Flash CS3 Professional 的无缝集成）
Per-character 3D text animation（可以给每一个字添加3D动画，如下图）

Per-character 3D text animation screenshot

Brainstorm（高级的特效预览与变更，如下图）

Brainstorm screenshot

Complete color management workflow（完整的颜色管理）
Adobe Clip Notes
Enhanced performance（提高了运行效率）
Video for mobile（为移动设备设计影片）

Production Premium CS3 发布了！

Production Premium CS3 包含了

售价$1699(好贵！)

新版的AE又来了！

详细请看http://www.adobe.com/products/creativesuite/production/?tab=whats-inside

AS3.0的动态语言特性(4) - 等号（==）

续

AS3.0的等号，知道的人很多。但真正知道的人却很少。

ECMA-262的等号的运算规则

x == y（x，y为一个值）返回true或false根据以下的规则：

如果 Type(x) 不等于 Type(y)，跳到规则14。（*Type（v）返回v的类型）
如果 Type(x) 未定义，返回 true。
如果 Type(x) 为null ，返回 true。
如果 Type(x) 不为 Number ，跳到规则11。
如果 x 为 NaN ，返回 false。
如果 y 为 NaN ，返回 false。
如果 x = y（数学上，数字的比较），返回 true。
如果 x 为 +0 并且 y 为 -0，返回 true。 (*在计算机内部，+0与-0是不一样的)
如果 x 为 -0 并且 y 为 +0 ，返回 true。
返回 false。
如果 Type(x) 为 String 并且 x 等于 String(y) , 返回 true。否则返回 false。
如果 Type(x) 为 Boolean 并且 x 等于 Boolean(y) , 返回 true。否则返回 false。
如果 x,y指向相同的对象返回 true。否则返回 false。
如果 x 未定并且 y 为 null，返回 true。
如果 x 为 null 并且 y 未定义，返回 true。
如果 Type(x) 为 Number 并且 Type(y) 为 String ，返回 x == Number（y）。
如果 Type(x) 为 String 并且 Type(y) 为 Number ，返回 Number（x） == y。
如果 Type(x) 为 Boolean ，返回 Number（x） == y。
如果 Type(y) 为 Boolean ，返回 x == Number(y)。
如果 Type(x) 为 String 或 Number 并且 Type(y) 为 Object, 把 y 变成基本类型在比较。
如果 Type() 为 Object 并且 Type(y) 为 String 或 Number, 把 x 变成基本类型在比较。
返回 false。

等号的一般规则(数学定义的规则)

a==b <=> b==a
a==b, a==c => b==c
a===b => a==b
a != b => !(a==b)

等号的特殊规则

先来看下面的代码：

var foo:Object = 0;
if ("" == foo) {
    trace("foo is Empty String.");
}

上面的代码感觉是判断foo是不是空字符串。因为foo == 0，所以foo.toString() == "0"。因为""不等于"0" 所以什么也不输出。

但实际上，因为Number("") == 0所以输出的是"foo is Empty String."！

这是因为根据ECMAScript的定义，（字符串） == （数字） 的规则是Number（字符串） == （数字）。

其他重要的规则：

NaN != NaN
null == undefined

2007-07-08

AS3.0的动态语言特性(3) - AS3.0的变量声明与效率

续

变量声明有无和效率

首先创造一个 Date 对象，在调用 getTime() 10万次。

变量没有明确声明：

date = new Date()；
for (i=0; i<100000; i++)
   date.getTime()

执行大约用了470ms。

变量明确声明：

date = new Date()
var dateVar = date  // 添加
for (i=0; i<100000; i++)
  dateVar.getTime()

执行大约用了340ms。快了38%。

因为用var声明的为本地变量，所以能快速访问。

但不用var声明的为全局变量，访问速度较慢。

类型声明有无和效率

指定类型：

date = new Date()
var dateTyped:Date = date  // 指定类型
for (i=0; i<100000; i++)
  dateTyped.getTime()

执行大约用了300ms。比前面的340ms快了13%，比470ms快了56%。

这是因为AS3.0支持类型(对dynamic的类用prototype添加的函数无效)。

变量声明的总结

如果把i也用var声明的话：

date = new Date()
var dateTyped:Date = date
for (var i=0; i<100000; i++)  // i也用var声明
 dateTyped.getTime()

执行大约用了20ms！比300ms快了1400%，比470ms快了2250%！

再给i添加上类型：

date = new Date()
var dateTyped:Date = date
for (var i:int=0; i<100000; i++)  // 把i声明成int型
 dateTyped.getTime()

执行大约用了13ms。比20ms快了35%，300ms快了2208%，比470ms快了3515%！

这是因为i调用了两次。

所以写代码最好：

加上var
加上类型

AS3.0的动态语言特性(2) - 变量声明的省略

续 AS3.0的动态语言特性(1) - 类型检查

去掉strict模式，AS3.0的自由度大大提高了。但 ”With great power comes great responsibility”，选择越大，风险也越大。

不用var来初始化变量

不管是 Flash CS3 还是 Flex2 ，去掉strict模式后就可以不用var来初始化变量。比如以下代码就可以通过编译。


public class Foo {
 public function setMyGlobal(val:int):void {
  i = val;
 }
 public function printMyGlobal():void {
  trace(i);
 }
}

以下代码会正常工作。

var foo:Foo = new Foo();
foo.setMyGlobal(10);
foo.printMyGlobal(); // ->10

但不调用setMyGlobal()，直接调用printMyGlobal()的话,执行时，会弹出i未定义的错误。

var foo:Foo = new Foo();
foo.printMyGlobal(); // 执行时错误

这是因为没有在setMyGlobal()里初始化i。


public function setMyGlobal(val:int):void {
 i = val;  // 最先执行这一行时初始化i。
}

不用var声明的变量的作用域

var foo1:Foo = new Foo();
var foo2:Foo = new Foo();
 
foo1.setMyGlobal(10);
foo2.printMyGlobal(); // ->10

在foo1里设定的值，在foo2里也能参照。也就是说不用var声明的变量是在实例间共用的。

AS3.0的动态语言特性(1) - 类型检查

AS3.0本来是动态语言！

AS2.0和AS3.0的编译时检查

首先定义一个空的类。

class Foo { }

再调用一个未定义的函数。

var foo:Foo = new Foo();
foo.nonExistingMethod();  // 未定义的函数的调用

编译时，AS2.0会弹出错误，但AS3.0不会（在非strict模式下）。这个结果就说明了AS3.0的编译时检查要松一些。

AS2.0和AS3.0的运行时检查

AS2.0在运行时不会弹出错误，弹出了也捕获不到（比如递归时堆栈溢出，代码超时等）。虽然有 Error 类，但没有任何系统类使用。并且有一些Bug。

AS3.0在运行时会进行类型等检查，终于像其他的动态语言一样了。

2007-07-01

Blog改版基本完毕！

今天修改了一天，基本上改版完毕。

今后将会进入测试中。希望大家来提出宝贵的意见。

本次达到的目标：

基于XHTML1.1strict
div+CSS布局
通过CSS验证
SEO
通过WAI-A验证
浏览器底线：IE6，Firefox1.5，Safari（为以后AIR做考虑）
漂亮

spry我没能用上（不知何时用）。因为强制使用自定义命名空间，所以HTML验证没通过。

订阅：博文 (Atom)