您正在访问一个备份站点,内容暂停更新

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/12/27

SIMBL与AIR应用的冲突

如果你在使用 HTML+JS 的方式构建 AIR 应用,那么在 mac 中可能由 SIMBL (Smart InputManager Bundle Loader) 引起 crash,不管应用多简单。解决方法是暂时重命名SIMBL文件夹(或等AIR更新),比如改为: /Library/Application Support/SIMBL01/

Labels: ,

2008/12/09

常用的DOM操作、事件

来自:Dustin Diaz,我加上了删除事件。
var Dom = {
get: function(el) {
if (typeof el === 'string') {
return document.getElementById(el);
} else {
return el;
}
},
add: function(el, dest) {
var el = this.get(el);
var dest = this.get(dest);
dest.appendChild(el);
},
remove: function(el) {
var el = this.get(el);
el.parentNode.removeChild(el);
}
};
var Event = {
add: function() {
if (window.addEventListener) {
return function(el, type, fn) {
Dom.get(el).addEventListener(type, fn, false);
};
} else if (window.attachEvent) {
return function(el, type, fn) {
var f = function() {
fn.call(Dom.get(el), window.event);
};
Dom.get(el).attachEvent('on' + type, f);
};
}
}(),
remove:function(){
if (window.removeEventListener) {
return function(el, type,fn) {
Dom.get(el).removeEventListener(type, fn,false);
};
} else if (window.detachEvent) {
return function(el, type, fn) {
Dom.get(el).detachEvent('on' + type);
};
}
}()
};

使用时类似:Event.add('domId', 'click',install);
AS 中的 tweener 语法挺像的:
Tweener.addTween(event.displayObject3D, {
rotationY:180,
time:0.5,
transition:"easeOutQuart"
} );

Labels: , ,

2008/11/27

分享2个bookmarklet


一个是 Aardvark, 一点不逊于 firebug 的东西,在许多介绍 web 开发用的 firefox 插件的文章都没有提到过。Aardvark 在不太熟悉现有 HTML 结构与已有 CSS 规则时显得特别方便,因为通过它可以方便的查阅整个 HTML DOM 的相关信息,包括实时地删除它们、改变颜色、查看格式化的部分源代码等等。 Aardvark 同时提供了 firefox 插件和 bookmarklet。
另一个是 Jash, 跟 ipython 一样,作为一个好的 console,自动补全自然必不可少,console 本身可以做为很好的学习工具。Jash 同样是基于 bookmarklet, 不用考虑跨浏览器的问题。比如我现在大部分时间都用 safari, 配合 quicksilver 的 safari module,就可以方便地调用。Jash 可以实时地写入 CSS, 这在 IE 中就特别有用,比如要测试远程的 CSS 规则,在 Jash 中 ctrl+s 再把样式定义写进去就可以了。Jash 本身也是用 javascript 写成的,所以如果你觉得哪个地方用得不顺手,完全可以自己改写它。
这2个东西都有良好的快捷键支持,好软件都有这个特征。
写完这个就发现:
15 Must-Have Bookmarklets For Web Designers And Developers
另外,这个周末会去 D2 论坛看看,可以看到一些熟悉的 ID。

Labels: , , ,

2008/11/26

Social software graph


via
from random import uniform
graph = ximport('graph')

size(500, 300)

def curly_edge(style, path, edge, alpha=1.0):
path.moveto(edge.node1.x, edge.node1.y)
path.curveto(
edge.node1.x + 40,
edge.node1.y,
edge.node2.x + 40,
edge.node2.y,
edge.node2.x,
edge.node2.y,
)

g = graph.create(distance=0.4)

for service in ('VeryCD', 'Twitter', 'Last.fm', 'Douban', 'theFlashBlog','Latest Macromedia News',
'Delicious', 'Google Reader', 'Flickr', ):
g.add_node(service, radius=5)

# connect services with FriendFeed
for service in ('Twitter', 'Last.fm', 'Delicious', 'Google Reader', 'Flickr','LinkedIn'):
g.add_edge(service, 'FriendFeed', length=uniform(50,100))

g.styles.default.edge = curly_edge
g.solve()
g.draw()

Labels: ,

2008/11/19

Photo Booth AIR 更新


导出成功时加入了 Growl 的提示。由于命名空间会跟 mx.core 包里 Application 起冲突,Growl 的应用程序窗口只能显式地定义为:a = new com.adobe.growl.Application();

Labels: , , ,