我最喜欢下面这段《Rewind》，展示了这一令人羡慕的团队的幕后工作的整个过程。项目中break和项目后庆祝的一幕很平实，却让我很感动，很久没有好好体会这样的激情了。

update：由于Psyop的要求，我删除了优库上的转载，喜欢的朋友请自行上Vimeo。http://vimeo.com/6717553

update2：Psyop开设了优库频道，近期就会上传，请被墙住的爱好者们保持关注。http://u.youku.com/user_show/uid_psyop

Related Posts :

• 2008/11/20 -- Sea Orchestra: The Making Of on Vimeo
• 2005/10/10 -- Motion – 公司&工作室网址集合
• 2009/07/08 -- Sehsucht “Idea”
• 2009/01/13 -- Anything You Synthesize
• 2008/11/11 -- Next Season

同时发布的消息还有：Ben Hopkins加入开发组，相信他在计算机图形方面的先锋技术能够帮助这一开源技术得到更好的提升。

新的版本通过Github分发和管理，大家可以到这里取得源代码。Git是一种先进的版本控制系统，可惜我刚玩溜SVN，又要学习新的东西了。Git在Windows上的图形界面工具可以去这里下载，这里有视频教程。有过版本控制经验的开发者应该能很快上手，Andy Zupko直夸好用哦。

Related Posts :

• 2008/10/08 -- Flash on the Beach 2008
• 2008/06/08 -- Amazing Eco Zoo Website
• 2008/05/14 -- Rhythm of Lines 源代码放出
• 2007/07/18 -- Rhythm of Lines
• 2009/09/04 -- RubiksCube’s Interactive Material Issue

Uniqlo的Collection 2009网站又再次为Uniqlo  Style创造了一个新高度。这次是运用大量男女模特的T台走秀视频，更可以直接点击视频中的模特链接去商品页面。乍一看可能觉得没什么，但是请看：多人走秀的视频一共有140段左右，每个模特单独又有20多段（共68人），总共的视频是千位这个数量级。先是拍摄的工作量就已经让人头大了，还要把每段视频的模特位置信息track下来为flash所用，后期工作庞大的信息量也是很考验执行功力的。

好的互动网站就应当如此，用让人印象深刻的震撼画面去吸引眼球，用流畅的互动体验去营造出自然的沉浸感。光是大量视频堆砌的网站只是徒有一身华丽的外衣，而深入到到骨子里的互动血液才更值得去修炼。

Related Posts :

• 2009/08/10 -- EnergyLab
• 2009/07/21 -- Project – Mercedes E-Class Web Special 2009
• 2009/05/05 -- Diesel – Only The Brave
• 2009/03/16 -- Project – Mercedes-Benz B-Class Web Special
• 2009/06/10 -- I am Unique

跳转后查看详细代码。

package demo.papervision3d
{
	import gs.TweenLite;
	import gs.easing.Elastic;
 
	import com.kvc.extend.papervision3d.RubiksCube;
 
	import org.papervision3d.core.math.Quaternion;
	import org.papervision3d.events.InteractiveScene3DEvent;
	import org.papervision3d.materials.BitmapMaterial;
	import org.papervision3d.objects.DisplayObject3D;
	import org.papervision3d.view.BasicView;
 
	import flash.display.Bitmap;
	import flash.display.StageQuality;
	import flash.events.*;
 
	/**
	 * @author Kevin Cao
	 */
	[SWF(width="1000", height="600", backgroundColor="#cccccc", frameRate="30")]
	public class RubiksCubeDemo2 extends BasicView
	{
 
		private var rubiksCube : RubiksCube;
 
		[Embed(source="../../../assets/front.jpg")]
		private var FrontAsset : Class;
 
		[Embed(source="../../../assets/back.jpg")]
		private var BackAsset : Class;
 
		[Embed(source="../../../assets/left.jpg")]
		private var LeftAsset : Class;
 
		[Embed(source="../../../assets/right.jpg")]
		private var RightAsset : Class;
 
		[Embed(source="../../../assets/top.jpg")]
		private var TopAsset : Class;
 
		[Embed(source="../../../assets/bottom.jpg")]
		private var BottomAsset : Class;
 
		private var isDown : Boolean = false;
 
		private var _x : Number;
		private var _y : Number;
 
		private var _vx : Number = 0;
		private var _vy : Number = 0;
 
		public function RubiksCubeDemo2()
		{
			init();
		}
 
		protected function init() : void
		{
			// viewport's interactive set to true.
			viewport.interactive = true;
 
			camera.z = -1500;
			camera.focus = 200;
			camera.zoom = 2;
 
			var frontMat : BitmapMaterial = new BitmapMaterial((new FrontAsset() as Bitmap).bitmapData);
			var backtMat : BitmapMaterial = new BitmapMaterial((new BackAsset() as Bitmap).bitmapData);
			var leftMat : BitmapMaterial = new BitmapMaterial((new LeftAsset() as Bitmap).bitmapData);
			var rightMat : BitmapMaterial = new BitmapMaterial((new RightAsset() as Bitmap).bitmapData);
			var topMat : BitmapMaterial = new BitmapMaterial((new TopAsset() as Bitmap).bitmapData);
			var bottomMat : BitmapMaterial = new BitmapMaterial((new BottomAsset() as Bitmap).bitmapData);
 
			// material's interactive set to true.
			frontMat.interactive = backtMat.interactive = leftMat.interactive = rightMat.interactive = topMat.interactive = bottomMat.interactive = true;
 
			rubiksCube = new RubiksCube(RubiksCube.createMaterialListArray(frontMat, backtMat, leftMat, rightMat, topMat, bottomMat));
 
			// IMPORTANT: add event listener to each child cube rather than rubikscube object itself.
			for(var i : uint = 0;i < 26; i++)
			{
				rubiksCube.getChildByName("cube" + (i + 1)).addEventListener(InteractiveScene3DEvent.OBJECT_CLICK, clickHandler);
			}
 
			scene.addChild(rubiksCube);
 
			startRendering();
 
			stage.addEventListener(KeyboardEvent.KEY_UP, keyUpHandler);
			stage.addEventListener(MouseEvent.MOUSE_DOWN, downHandler);
			stage.addEventListener(MouseEvent.MOUSE_UP, upHandler);
 
			stage.quality = StageQuality.LOW;
		}
 
		override protected function onRenderTick(evt : Event = null) : void
		{
			if(!isDown)
			{
				if(_vx != 0 || _vy != 0)
				{
					_vx *= .9;
					_vy *= .9;
					if(Math.abs(_vx) < .5)
					{
						_vx = 0;
					}
					if(Math.abs(_vy) < .5)
					{
						_vy = 0;
					}
					var q : Quaternion = Quaternion.createFromEuler(-_vx, 0, -_vy, true);
					rubiksCube.transform.calculateMultiply3x3(q.matrix, rubiksCube.transform);
				}
			}
 
			super.onRenderTick();
		}
 
		private function keyUpHandler(evt : KeyboardEvent) : void
		{
			var command : String = String.fromCharCode(evt.charCode);
			switch(command)
			{
				//default command
				case "l":
				case "r":
				case "u":
				case "d":
				case "f":
				case "b":
					if(evt.ctrlKey && evt.altKey)
					{
						// reverse
						rubiksCube.singleRotate(command + "'");
					} else {
						rubiksCube.singleRotate(command);
					}
					break;
 
				//combo command
				case "1":
					rubiksCube.comboRotate("l-u-b'-d-r'", 2);
					break;
				case "2":
					rubiksCube.comboRotate("r-d'-b-u'-l'", 2);
					break;
			}
		}
 
		private function downHandler(event : MouseEvent) : void
		{
			_x = mouseX;
			_y = mouseY;
			isDown = true;
			stage.addEventListener(MouseEvent.MOUSE_MOVE, moveHandler);
		}
 
		private function upHandler(event : MouseEvent) : void
		{
			isDown = false;
			stage.removeEventListener(MouseEvent.MOUSE_MOVE, moveHandler);
		}
 
		private function moveHandler(event : MouseEvent) : void
		{
			_vx = (mouseX - _x) * .4;
			_vy = (mouseY - _y) * .4;
			_x = mouseX;
			_y = mouseY;
 
			var q : Quaternion = Quaternion.createFromEuler(-_vx, 0, -_vy, true);
			rubiksCube.transform.calculateMultiply3x3(q.matrix, rubiksCube.transform);
		}
 
		private function clickHandler(event : InteractiveScene3DEvent) : void
		{
			var cube : DisplayObject3D = event.target as DisplayObject3D;
 
			// tricky: make scale and rotation value get updated from transform matrix.
			cube.yaw(0);
 
			var s : Number = cube.scale == 1 ? 0.8 : 1;
			TweenLite.to(cube, 0.3, {scale:s, ease:Elastic.easeOut});
		}
	}
}

Related Posts :

• 2009/04/20 -- Quaternion Rotation Demo
• 2009/04/18 -- Experiment #05: Rubik’s Cube
• 2008/11/26 -- Experiment #03: Four Cameras Viewer
• 2009/08/13 -- Experiment #06: Page Flip 3D
• 2009/05/12 -- Amazing VizualPV3D

GreenShock Tween是我最常用的一个功能强大的Tween类库，详细可以见我之前的介绍。但是要注意这个类库对商业项目并不是免费使用的，可以替代的选择有很多：GTween，Tweener等等。

Bulk Loader

Bulk Loader解决的是AS3中各种不同类型文件的加载问题，实现了对各种数据类型统一的加载接口，调用非常简便。此外还具有有批量加载、优先级设置等高级功能。

Gaia Framework

Gaia是一套完整的互动网站制作框架。它定义了网站的基本数据流，采用xml进行结构配置和资源管理。各个页面之间以transitionIn，transitionInComplete，transitionOut，transitionOutComplete等步骤串联在一起。Gaia强大的自定义和事件侦听功能使用户可以很方便的更改网站逻辑。此外Gaia还整合了SWFAddress，GreenShock Tween，采用MVC，Singleton等设计模式和业界流行的最佳解决方案（Best Practice）。Gaia还提供了配套的Flash插件面板，能够很直观的帮助用户快速配置网站。

抽象是一件很有技术含量的工作。做了这么多Flash网站，很清楚每次搭架构时的无奈。由于需求的多变，哪些是架构层面的核心需求，哪些是业务逻辑需求，甚至哪些是效果表现需求，常常混杂在一起，结果就是可重用性极差，每次都等于重新开始。Gaia最伟大的地方就是厘清了这几层关系，把属于网站内部流程的部分抽象出来，并建立了强大的可扩展的接口。我们只需要在这层接口上再去考虑业务逻辑和表现层的开发就可以了，大大减轻了工作量。当然，Gaia只是一种解决方案，虽然科学但并不完美。我在使用中就曾发现：为了配合它的内部流程，会造成无意义的swf子文件增多的现象。

Gaia提供的机制最适用于多页面切换的Minisite，稍加扩展就可以应付大多数的情况，大家可去官网左边的Gallery栏目看看各式案例。类似的Framework还有日本人开发的Progression。

MinimalComps

MinimalComps是我的轻量化组件首选。开发者是著名的bit-101，最近刚刚更新了几个新的功能，还提供了排版工具MinimalDesigner。这套组件完全独立，不依赖于Flash内部的UIComponent，最大的特点是简单够用。可以在Flash IDE和Flex下使用。但是不支持中文，我只是用它来辅助调试参数。

AS3 Data Structure

这套api之前也有介绍过，灵活运用数据结构能够大大提升开发效率。

Casa Lib

Casa Lib是一套非常完整的framework，几乎涵盖了所有在开发中常见的扩展需求。我最常用的是其util包下的工具类，之前也有介绍过很方便的LibrayManager。类似的大而全的开发框架还有Guttershark和Sekati API等。这类属于开发框架性质的类库内部本身的继承或者复合关系就比较复杂，开发者在使用时需要注意评估使用它们带来的隐性成本。当然你也可以像我一样，只使用类库中的一些辅助工具类。此外，学习框架的编写对提升编程能力也是大有裨益的。

Papervision3D (+ Flint Particle System, AS3DMod, ThreeDee)

Papervision3D的强大已经不用我多介绍，现在的FWA已经基本是3D引擎的天下了。除了自身所带的功能以外，大量第三方的辅助类库或插件也起到了锦上添花的作用，所以我把它们并作一条。做粒子效果可以考虑Flint，变形修改器可以用AS3DMod，ThreeDee提供的扩展功能也很不错。至于物理引擎那也很多，只是我目前还没有涉及，这里也不多说了。

FLARToolKit (+ FLARManager)

FLARToolKit是近期大热的Augmented Reality (AR)的幕后英雄，详细可以看我之前的一篇介绍。而为了能够更方便的开发AR程序，transmote开发了FLARManager作为辅助，也提供了事件接口，多标记检测等增强功能。

写在最后，真的非常感谢那些默默奉献的无私的开发者，有了你们，互联网世界才越发生动精彩。作为一个创意开发人员，应该时刻让自己手中的这些武器与世界水平接轨。能够自己动手开发固然是好事，但是站在巨人肩膀上又有何妨呢。大家又有何常用的类库呢，欢迎留言讨论。

Related Posts :

• 2009/08/13 -- Experiment #06: Page Flip 3D
• 2009/05/06 -- Making of AR Proposal
• 2009/05/05 -- AR Proposal
• 2009/02/23 -- TweenMax is Updated
• 2009/02/04 -- Ge – Smart Grid

Papervision3D + AS3DMod + as3ds

demo | source download

Related Posts :

• 2009/09/03 -- 八个我最常用的AS3开源类库
• 2009/09/04 -- RubiksCube’s Interactive Material Issue
• 2009/04/18 -- Experiment #05: Rubik’s Cube
• 2008/11/26 -- Experiment #03: Four Cameras Viewer
• 2008/11/05 -- Experiment #02: Earth Fire

EnergyLab是HelloEnjoy和Grupo W合作的一个活动网站项目。3D拼图游戏是其中一个最大的亮点，同时整体的视讯效果配合也非常棒。看到鼠标被瓶子捕捉和分解的互动效果了吗？我单这个就玩了很久。

这里是作者博客上的详细帖子，内容包括了：瓶身用两种不同的shader、实时挤压厚度（延顶点的法线方向）、体积光、Quaternions动画和碰撞。对技术有兴趣的的朋友可以点开看看，虽然不是Step by Step的教程，但是这一点点制作和创意思路的分享对有经验的开发者就很有帮助了。

HelloEnjoy的创办者Carlos Ulloa是Papervision3D的核心开发者之一，技术实力自然不在话下。英语好的朋友推荐看一下他在伦敦Flash Group活动上的演讲，对增进Papervision3D的技能很有帮助。

btw.我感觉这个游戏对我这种没什么游戏细胞的人来说太难了，完成了这个游戏的朋友麻烦回帖告诉我一下后面出现什么，或者截个图共享一下。:P

Related Posts :

• 2009/09/14 -- Uniqlo Collection 2009
• 2009/07/21 -- Project – Mercedes E-Class Web Special 2009
• 2009/05/12 -- Amazing VizualPV3D
• 2009/05/06 -- Making of AR Proposal
• 2009/05/05 -- Diesel – Only The Brave

Title : Mercedes-Benz E-Class Web Special 2009
Client : Mercedes-Benz China
Agency : Energy Source
Date : 2009.7.20

Art & Design : ES Neo Team
Motion & Flash : ES Guru Team
3D : Motion Magic

Related Posts :

• 2009/05/05 -- Project – Mercedes-Benz SUV Family Web Special
• 2009/05/05 -- Project – Mercedes-Benz Autoshow 2009 Web Special
• 2008/03/29 -- Project – 荣威750 1.8T挑战天门
• 2009/05/05 -- Project – Mercedes-Benz E-Class Web Special
• 2009/03/16 -- Project – Mercedes-Benz B-Class Web Special

在功能上，只是增加了AIR特有的拖放文件功能，把文本类型的文件拖动到文本框中就可以完成输入的过程。另外就是尝试了下用AIR做无边窗口，其实也很简单，之前一直把它想的太复杂了。

 
下载FontConverter.air

Related Posts :

• 2009/05/06 -- Making of AR Proposal
• 2009/05/05 -- Project – Mercedes-Benz E-Class Web Special
• 2009/05/05 -- AR Proposal
• 2009/04/18 -- Experiment #05: Rubik’s Cube
• 2009/04/15 -- Project – KC Command Package v3.0

非常流畅的剪辑和转场，同时游戏世界和真实世界的相关元素也有很巧妙的对应，把气氛烘托的相当到位。

Related Posts :

• 2008/10/06 -- Project – 奔驰S级轿车体验网站
• 2009/10/17 -- Psyop Resources
• 2009/07/08 -- Sehsucht “Idea”
• 2009/05/17 -- Adobe Creative Suite 4 Artist Website
• 2009/05/05 -- Diesel – Only The Brave

I really love this animation made by Sehsucht for F5 Festival, they are very good at CG/VFX.

Related Posts :

• 2009/10/17 -- Psyop Resources
• 2009/02/03 -- Coca-Cola Heist
• 2009/02/01 -- Transistor Studios featured Midea Dream
• 2009/01/13 -- Anything You Synthesize
• 2008/11/20 -- Sea Orchestra: The Making Of on Vimeo

Playing GI render in Cinema 4D .

Related Posts :

• 2009/05/06 -- Making of AR Proposal
• 2009/04/18 -- Experiment #05: Rubik’s Cube
• 2008/11/26 -- Experiment #03: Four Cameras Viewer
• 2008/11/05 -- Experiment #02: Earth Fire
• 2009/09/04 -- RubiksCube’s Interactive Material Issue

squidder.com开发了一个嵌入字体的工具FontSWFCreator（只有Mac版），相比我的FontConverter多了一个自动调用Flex编译器生成swf的实用功能。大家可以看看这个工具生成的as代码。

这个工具还在最初测试阶段，将来计划增加的功能有：

• 预置字符集
• 读取文件和文件夹获取需要嵌入的字符

Related Posts :

• 2009/06/11 -- Flash中文嵌入助手更新
• 2009/06/04 -- Flash字体嵌入方法总结—(2)ActionScript基础篇
• 2009/09/04 -- RubiksCube’s Interactive Material Issue
• 2009/07/17 -- Flash中文嵌入助手AIR版
• 2009/06/06 -- Stylish Coding

• 新增过滤空白字符和非中文字符功能
• 新增复制到剪贴板功能（System.setClipboard()）
• 支持打开和保存本地文本文件（需要Flash Player 10）

点这里打开，也可以下载（右键另存为）到本地。如果在使用中遇到什么问题或者你有更好的建议，欢迎在这里与我沟通。

Related Posts :

• 2009/06/26 -- FontSWFCreator from squidder.com
• 2009/06/04 -- Flash字体嵌入方法总结—(4)进阶篇
• 2009/06/04 -- Flash字体嵌入方法总结—(2)ActionScript基础篇
• 2009/04/15 -- Project – KC Command Package v3.0
• 2009/03/15 -- Face Detection in Flash, Next Big Wave?

I am Unique是目前为止在我所见过的网站中最“社会化”的Campaign Website。

透过Facebook API，这个网站可以用你的Facebook账户直接登录。然后在上面分享你的图片、文字，甚至是Blog Feed、Twitter、Youtube、Last FM这些流行的社会化服务信息。这一切所传达的概念只是：让你独一无二。并借此来和产品精神相吻合。

除此之外Flash 3D技术的应用也是一大亮点。随着用户信息的增加，3D块面的排列组合愈加丰富。这也让网站的核心概念得到了完美的呈现。

Related Posts :

• 2009/09/14 -- Uniqlo Collection 2009
• 2009/08/10 -- EnergyLab
• 2009/07/21 -- Project – Mercedes E-Class Web Special 2009
• 2009/05/14 -- FWA Special Day
• 2009/05/12 -- Amazing VizualPV3D