stopdesign.cn

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: actionscript, flash, mouse gesture

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

更多...

Labels: ar, flash

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

Labels: air, simbl

来自: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: dom, event, javascript

一个是 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: bookmarklets, frontend, jash, javascript

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: graph, social

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

Labels: air, flex, growl, photo booth