2009/04/13

一个简单的鼠标手势模拟

Demo

/**
* @author chenqian
* @contact yesterday[at]gmail.com
* @URI www.stopdesign.cn
*/


package
{
import flash.display.*;
import flash.events.*;
import flash.geom.Point;
import flash.text.TextField;

public class MouseGesture extends Sprite
{

public static const GESTURE_UP:String="GESTURE_UP";
public static const GESTURE_RIGHT:String="GESTURE_RIGHT";
public static const GESTURE_DOWN:String="GESTURE_DOWN";
public static const GESTURE_LEFT:String="GESTURE_LEFT";
// the color of the drawing line
public var lineColor:Number;
// the size of the drawing line
public var lineSize:Number;
// where the mouse start drawing
private var _startPoint : Point;
// where the mouse stop drawing
private var _newPoint : Point;
// the drawing direction
private var _direction : String;
// the drawing line
private var _drawLine : Sprite;

public function MouseGesture(...rest){
trace("mouse gesture init")
// default mouse gestrue line color and size
lineColor=0xFF0000;
lineSize= 2;

// parse parameters
if(rest[0] != null){
lineColor = rest[0];

}
if(rest[1] != null){
lineSize=rest[1];
}

//add the shape, used for drawing the gesture
var child:Shape = new Shape();
child.graphics.beginFill(0x000000);
child.graphics.lineStyle(0, 0xFFFFFF);
child.graphics.drawRect(0, 0, 1600, 1600);
child.graphics.endFill();
addChild(child);
child.alpha=0;
_drawLine = new Sprite();
addChild( _drawLine );
addEventListener( MouseEvent.MOUSE_DOWN , mouseDownHandler );
}

// set the gesture color
public function setLineColor(c:Number):void{
lineColor=c;
}

// set the gesture size
public function setLineSize(s:Number):void{
lineSize=s;
}


// fire when user press mouse down
private function mouseDownHandler( e:MouseEvent ):void
{

var _color : Number = lineColor;
var _size : Number = lineSize;
_startPoint = new Point( mouseX , mouseY );
_drawLine.graphics.lineStyle( _size , _color , 1.0 );
_drawLine.graphics.moveTo( _startPoint.x , _startPoint.y );
addEventListener( MouseEvent.MOUSE_MOVE , mouseMoveHandler );
addEventListener( MouseEvent.MOUSE_UP , mouseUpHander );
}


// fire when user move the mouse
private function mouseMoveHandler( e:MouseEvent ):void
{
_newPoint = new Point( mouseX , mouseY );
var _distance : Number = Point.distance( _startPoint , _newPoint );
_drawLine.graphics.lineTo( _newPoint.x , _newPoint.y );
}


// fire when user's mouse is up
private function mouseUpHander( e:MouseEvent ):void
{
detectDir();
_drawLine.graphics.clear();
removeEventListener( MouseEvent.MOUSE_MOVE , mouseMoveHandler );
removeEventListener( MouseEvent.MOUSE_UP , mouseUpHander );
}


/* detecting the mouse move direction */
private function detectDir():void
{
var _vector:Point = _newPoint.subtract( _startPoint );
var _angle : Number = Math.atan2( _vector.y , _vector.x ) * 180 / Math.PI;
// move down
if ( _angle >= 45 && _angle < 125 ){
dispatchEvent(new Event(MouseGesture.GESTURE_DOWN,true));
removeEventListener( MouseEvent.MOUSE_MOVE , mouseMoveHandler );
removeEventListener( MouseEvent.MOUSE_UP , mouseUpHander );
}
// move left
else if ( _angle >= 125 || _angle < -125 ){
dispatchEvent(new Event(MouseGesture.GESTURE_LEFT,true))
removeEventListener( MouseEvent.MOUSE_MOVE , mouseMoveHandler );
removeEventListener( MouseEvent.MOUSE_UP , mouseUpHander );

}
// move right
else if ( _angle >= -45 && _angle < 45 ){
dispatchEvent(new Event(MouseGesture.GESTURE_RIGHT,true))
removeEventListener( MouseEvent.MOUSE_MOVE , mouseMoveHandler );
removeEventListener( MouseEvent.MOUSE_UP , mouseUpHander );

}
// move up
else if ( _angle >= -125 && _angle < -45 ){
dispatchEvent(new Event(MouseGesture.GESTURE_UP,true))
removeEventListener( MouseEvent.MOUSE_MOVE , mouseMoveHandler );
removeEventListener( MouseEvent.MOUSE_UP , mouseUpHander );

}
}

}

}

Labels: , ,

2009/04/09

简单地玩augmented reality

print

上面这张图片发送到你手机中,比如用gmail发给自己,然后在手机中下载打开,接着前往这个网址,打开摄影头,就有类似的东西出现在你面前了:

更多...

Labels: ,

2008/01/01

flickr版的豆瓣秀



有锯齿确实不好看…

Labels: , ,

2007/10/21

flex3中的deep linking

deep linking 是一种以 URL 为基础的导航,比如,当我们打开 www.adobe.com 就到了 adobe 的首页,点击 support 按钮就会到达 www.adobe.com/support/ 他们的支持页面,这时候再点 contact 按钮就会到他们的联系页面: www.adobe.com/contact ,每次点击之后,我们都可以通过浏览器的后退按扭回到先前的页面,或者把当前页面加入书签。
可是一般 flex/flash (包括 AJAX)都不支持这一特性,当年 Nielsen 说 flash 99% bad,这就是其中一点。现在在 flex3 中,可以通过一些技巧解决这一问题,就是在 URL 中添加某个特征的锚点,让后退按钮变得可用。其实更早的时候,大牛 robert penner 就在 flash 中借助 javasript 实现过。偶尔见一些全 flash 的站点在使用,只是国内较少看到,或许真的是中国的网民较少使用后退按钮。
Flex 3:Feature Introductions: Deep Linking

Labels: , , ,

2007/10/14

papervision3d+fanfou


读取 fanfou 中最新发布的消息。gallery.air

Labels: , , ,

2007/10/09

flash10很令人期待

设计、制作方面,可以直接在舞台上预览视频等,不用一直 Ctrl+Enter:
http://www.youtube.com/v/vqMI480D668
这个 Flash on C/C++:
http://www.youtube.com/v/0hX-Uh3oTcE
一些介绍,难怪现场尖叫不断。

Labels:

2007/09/28

正在做一个好玩的fanfou应用


点击上图到安装页面,如果你无法正常在线安装,可以直接下载 fanfou.air。(先要有 AIR )

支持的功能有:
1.发布消息;
2.查看好友的消息;
3.……

更新(07/10/05/2:41):加入了“随便看看”,去掉了透明背景,修正了几处显示的 bug。
更新(08/3/15/1:05): 已经兼容最新的 AIR1.0,在线安装暂时无法使用,请直接下载 .air 文件,已经可以使用。

Labels: , ,

2007/09/25

月亮?

我也不清楚这是什么东西。
--------------------------------
提醒自己的:
上周上课只有我一个人,问题像山在那里一样等着我去提问“怎样显著地提高口语?”,然后答案就是“练习,练习,不断的练习”,答案就像问摩根弗里曼怎样演好戏一样。还有许许多多的“怎样写好程序?”,“怎样……”,对于某些活动,不断地编辑与剪辑真的是一种需要。
基础的东西很重要,设计模式、数据结构和 HTTP 协议类似的东西都很重要,需要发时间去了解熟悉。看到 Xu You 同学的的文章,写这篇 blog 提醒自己,不然很容易陷到一些奇技淫巧里面去。对基础知识的掌握有利于理解问题,而对问题的理解有利于问题的解决。这算是问题解决心理学的说法吧。

Labels: , ,

2007/09/18

尝试用as3处理XML


利用饭否的 API 生成的好友头像,因为平时没怎么用,也就没有多少好友,暂时用 Realazy 同学的好友(比较多)做测试。体验到 as3 处理 XML 的方便,基本上就是内建对 xpath 的支持,不过深度管理方面让人比较抓狂,还在琢磨中。发布成 AIR 的格式。

Labels: , , ,

2007/09/05

对摄像头颜色的捕捉


(点击图片打开,需要摄像头)
下面是文档中对 threshold() 的解释,经常用 PS 的人对 thresold 应该不会陌生。
根据指定的阈值测试图像中的像素值,并将通过测试的像素设置为新的颜色值。通过使用 threshold() 方法,您可以隔离和替换图像中的颜色范围,并对图像像素执行其它逻辑操作。
阈值测试的逻辑如下所示:
if ((pixelValue & mask) operation (threshold & mask)) then
set pixel to color
else
if (copySource) then
set pixel to corresponding pixel value from sourceBitmap

Labels: ,

2007/09/03

还是Seam Carving

图书馆
经过优化的代码,数学,数学……

Labels: ,

如何避免flash遮住其它内容

如果页面中有 flash 的话,一般的 z-index 对它是不起作用的,flash 始终会在最上面,解决办法是把它的背景设为透明,不过会带来一些其它问题,更多可参考顶尖设计师 Veerle 的文章。如果你和我一样,使用 swfobject 来嵌入 flash 的话,加入
 so.addParam("wmode", "transparent");
就可以了。

Labels: ,

Seam Carving


许多网页的内容可以根据设备或窗口大小改变布局,比如文字环绕图片随窗口缩小而流动;不过单纯的图片,一般只有死板的几种变换方式,挤压、等比例缩放或是裁剪,无法针对不同的设备自适应。而 Seam Carving 便是应此而生的,在最大限度保持图片信息的情况下删除或是补充图片的像素。

这是老赵同学在经过 Seam Carving 后的效果

Labels: ,

2007/09/01

两个东西

Flashdevelop3.0 beta 3 出来了,基本是现在最好的 actionscript 编辑器,新加了类似 firefox 的搜索,好用的软件都是相似的;
flickr 在 static.flickr.com 的根目录下加了 crossdomian.xml,意味着可以对 flickr 所有的图片进行 bitmap 水平的操作,最常用的估计就是平滑处理( 来自 yahoo flash blog 的例子)了。

Labels: , ,

2007/08/30

papervision3d+spectrum

(点击图片打开,出于流量考虑,还是用上次的歌,:( )
思路就是用声音控制一个 Cube 的 scaleY,在网速不是很快的情况下更新 papervision3d 的 SVN 竟然用了近一个小时,这个东西越来越丰富了。

Labels: , ,

2007/08/26

spectrum


(点击图片打开,有声音)
actionscript 3 对声音的波谱分析加上一些滤镜效果往往会给人一些意想不到的东西。

update:音乐来自 Linkin Park。

Labels: , ,

2007/08/24

flash player 开始支持H.264和AAC

最新的 flash player 已经支持 H.264 编码的视频,我们可以像处理 flv 一样处理 .mp4,.m4v,.m4a,.mov 和 .3gp 文件。这是播放一段 H.264 的 mov 文件的截图,可是在 flash player 里面不是在 quicktime 播的。数字电视,比如欧洲的,开始采用 H.264 的节目,这给许多媒体公司在电视与网络交互领域开了一扇大门。AAC 部分,以后 flash player 可能可以播放 5.1 声道的音乐。
flash player 的工程师有更详细的介绍,有许多令人兴奋东西。

Labels: ,

2007/08/21

文字转换为声音


看到一个有趣的日文 API ,可以把文字转换为声音,刚好有人在试验,我把它改成了可以输入文字的形式。以前在学校的时候,某某同学总是用刚学来的叨不叨不的日语跟我说“男人很辛苦”,我试着输入“男人很辛苦”,“男人”好像是这么说的,辛苦好像用中文说的。这个东西没事可以用来查查某些日语。
代码如下(未经整理的):
package {
import
fl.controls.Button;
import
flash.display.*;
import
flash.events.*;
import
flash.net.*;
import
flash.media.Sound;
import
flash.media.SoundChannel;
import
flash.text.TextField;
import
flash.text.TextFieldType;
import
flash.events.TextEvent;
public class
Text2speech01 extends Sprite {
private
const API_URL:String = "http://api.satoru.net/text2voice/";
private var
urlReq:URLRequest = new URLRequest(API_URL);
private var
urll:URLLoader = new URLLoader();
private var
v:URLVariables = new URLVariables();
public var
textInputTxt:TextField;
function
Text2speech01() {
init();
}

private function
init():void {
var
myButton:Button = new Button();
textInputTxt = new TextField();
textInputTxt.addEventListener(TextEvent.TEXT_INPUT, textInputHandler);
textInputTxt.type = TextFieldType.INPUT;
textInputTxt.background = true;
textInputTxt.border = true;
textInputTxt.height=20;
textInputTxt.width=300;
textInputTxt.x=10;
textInputTxt.y=18;
textInputTxt.text="Long long ago, there is a girl."
v.text = "Long long ago, there is a girl.";
addChild(textInputTxt);
myButton.label = "saying";
//myButton.emphasized = true;
myButton.width = 80;
myButton.move(10, 50);
addChild(myButton);
myButton.addEventListener(MouseEvent.CLICK, buttonClick);
textInputTxt.addEventListener(MouseEvent.MOUSE_OVER,changeStyle1);
textInputTxt.addEventListener(MouseEvent.MOUSE_OUT,changeStyle2);
}

private function
changeStyle1(e:MouseEvent):void{
textInputTxt.borderColor= 0x00FF00;
}

private function
changeStyle2(e:MouseEvent):void{
textInputTxt.borderColor= 0x000000;
}

private function
textInputHandler(e:TextEvent):void {
v.text= textInputTxt.text+e.text;
//trace(">> e.text: " + e.text);
//trace(">> textInputTxt.text: " + v.text);
}
private function
buttonClick(e:MouseEvent) {
urlReq.data = v;
urlReq.method = URLRequestMethod.GET;
trace
("urlReq is :"+urlReq.data);
urll.load(urlReq);
urll.addEventListener(Event.COMPLETE, function(e:Event):void {
trace
("API COMPLETE : " + urll.data);
var
sreq:URLRequest = new URLRequest(urll.data);
var
sf:Sound = new Sound();
sf.addEventListener(Event.COMPLETE, function(e:Event):void {
trace
("Sound load COMPLETE");
});

sf.load(sreq);
var
sc:SoundChannel = sf.play();

sc.addEventListener(Event.SOUND_COMPLETE, function(e:Event):void {
trace
("Sound play COMPLETE");
});

});
}
}
}

Labels: ,

2007/07/29

我终于可以看到逆时针旋转了

原图我只能看出顺时针旋转,当把所有帧反转后(帧频不变的情况下)可以看到两种旋转或交替出现。点击图片反转所有帧,把帧频调低有利于观察。

this.stage.frameRate = 17;
rate
.text = "17 fps";
thumb.addEventListener(MouseEvent.MOUSE_DOWN, starter);
thumb.addEventListener(MouseEvent.MOUSE_UP, stopper);
thumb.addEventListener(MouseEvent.MOUSE_OUT, stopper);
thumb.addEventListener(MouseEvent.MOUSE_MOVE, mover);
function
starter(args:Event) {
thumb.startDrag(false, new Rectangle(track.x, thumb.y, track.width, 0));
}

function
stopper(args:Event) {
thumb.stopDrag();
}

function
mover(args:Event) {
if
(thumb.x>=track.x) {
var
dist:Number = (thumb.x - track.x) / (track.width + track.x);
//trace(dist);

this
.stage.frameRate = Math.round(dist*200);
rate
.text = Math.round(dist*200).toString() + " fps";
}
}

var
isre:Boolean=false;
function
rplayer(event:MouseEvent):void {
if
(isre==false) mc.gotoAndPlay("reverse");
else
mc.gotoAndPlay("normal")
isre=!isre;
}

mc.addEventListener(MouseEvent.CLICK, rplayer);

Labels: ,

2007/06/23

把video当material


(点击图片打开,自动播放,注意先关小声音)
papervision3d 出来有一段时间了,看 osflash 中的视频介绍,原来作者是在女朋友的鼓励下开源的。

另外测试一下语法高亮。
  public function Video3D():void
{

stage.frameRate = 60;
stage.quality = "MEDIUM";
stage.scaleMode = "noScale";
stage.align = StageAlign.TOP_LEFT;
this
.addEventListener(Event.ENTER_FRAME, loop3D);
this
.stage.addEventListener(Event.RESIZE, onStageResize);
label=new TextField();
label.autoSize=TextFieldAutoSize.LEFT;
addChild(label);
label.x=this.stage.stageWidth/2-100;
label.y=this.stage.stageHeight-30;
init3D();
connection=new NetConnection();
connection.addEventListener(
NetStatusEvent.NET_STATUS,netStatusHandler);
connection.addEventListener(
SecurityErrorEvent.SECURITY_ERROR,securityErrorHandler);
connection.connect(null);
}

Labels: ,