HTML5 Icon Generator

Twitter アイコンをHTML5っぽくするジェネレーター

forked:2
favorite:7
lines:355
license : MIT License
modified : 2011-01-20 20:41:47

Embed: Tweet

package 
{
    import com.adobe.images.PNGEncoder;
    import com.bit101.components.InputText;
    import com.bit101.components.Label;
    import com.bit101.components.PushButton;
    import com.bit101.components.Style;
    import flash.display.Bitmap;
    import flash.display.BitmapData;
    import flash.display.Graphics;
    import flash.display.GraphicsPathCommand;
    import flash.display.GraphicsPathWinding;
    import flash.display.Shape;
    import flash.display.SpreadMethod;
    import flash.display.Sprite;
    import flash.display.StageAlign;
    import flash.display.StageQuality;
    import flash.display.StageScaleMode;
    import flash.events.Event;
    import flash.events.FocusEvent;
    import flash.events.KeyboardEvent;
    import flash.geom.Matrix;
    import flash.net.FileReference;
    import flash.ui.Keyboard;
    
    /**
     * Twitter アイコンをHTML5っぽくするジェネレーター
     * @author paq
     */
    [SWF(width="465", height="465", backgroundColor="0xFFFFFF", frameRate="60")]
    public class HTML5IconGen extends Sprite 
    {
        private var _inputText:InputText;
        private var _iconLoader:TwitterIconLoader;
        private var _bitmapData:BitmapData;
        private var _icon:Sprite;
        private var _fileReference:FileReference;
        private var _result:Sprite;
        
        /**
         * コンストラクタ.
         */
        public function HTML5IconGen() 
        {
            if (stage) init();
            else addEventListener(Event.ADDED_TO_STAGE, init);
        }
        
        /**
         * 
         * @param    event
         */
        private function init(event:Event = null):void 
        {
            removeEventListener(Event.ADDED_TO_STAGE, init);
            
            Wonderfl.disable_capture();
            
            _result = new Sprite();
            addChild(_result);
            
            // ステージの設定
            stage.align = StageAlign.TOP_LEFT;
            stage.quality = StageQuality.HIGH;
            //stage.scaleMode = StageScaleMode.NO_SCALE;
            
            var g:Graphics;
            
            // 背景を作成
            var bgShape:Shape = new Shape();
            g = bgShape.graphics;
            g.beginFill(ColorConst.BACKGROUND);
            g.drawRect(0, 0, stage.stageWidth, stage.stageHeight);
            _result.addChild(bgShape);
            
            // 集中線を描く
            drawLineWork(g);
            
            // マークを作成
            var markShape:Shape = new Shape();
            _result.addChild(markShape);
            // マークを描く
            drawMark(markShape.graphics);
            
            // 文字を作成
            var letterShape:Shape = new Shape();
            _result.addChild(letterShape);
            // 文字を描く
            drawLetters(letterShape.graphics, "HTML");
            
            Style.BACKGROUND = ColorConst.MARK_LIGHT;
            Style.BUTTON_FACE = ColorConst.MARK_DARK;
            Style.INPUT_TEXT = 0xFFFFFF;
            Style.LABEL_TEXT = 0xFFFFFF;
            
            // UI を作成
            
            // ID 入力用テキスト
            _inputText = new InputText(this, stage.stageWidth / 2 - 50, stage.stageHeight - 50);
            _inputText.width = 100;
            _inputText.addEventListener(FocusEvent.FOCUS_IN, function():void {
                _inputText.removeEventListener(FocusEvent.FOCUS_IN, arguments.callee);
                label.visible = false;
            });
            _inputText.addEventListener(KeyboardEvent.KEY_DOWN, function(event:KeyboardEvent):void {
                if (event.keyCode == Keyboard.ENTER)
                {
                    _iconLoader.load(_inputText.text);
                    _inputText.text = "";
                }
            });
            
            // ラベル
            var label:Label = new Label(this, 0, _inputText.y, "Twitter ID");
            label.x = _inputText.x + label.width / 2;
            
            // ボタン
            var genButton:PushButton = new PushButton(this, _inputText.x, _inputText.y + _inputText.height, "GENERATE!", function():void {
                _iconLoader.load(_inputText.text);
                _inputText.text = "";
            });
            genButton.width = _inputText.width;
            
            // 保存ボタン
            var saveButton:PushButton = new PushButton(this, stage.stageWidth - 100, stage.stageHeight - 20, "SAVE", save);
            // 保存ダイアログ
            _fileReference = new FileReference();
            
            // Twitter アイコン読み込み用ローダー
            _iconLoader = new TwitterIconLoader("html5", onTwitterIconLoaded);
            
            // アイコン
            _icon = new Sprite();
            _icon.x = stage.stageWidth / 2 - 73*2.5 / 2;
            _icon.y = stage.stageHeight / 2 - 73*2.5 / 2;
            _icon.scaleX = _icon.scaleY = 2.5;
            _result.addChild(_icon);
        }
        
        /**
         * 作成した画像を保存します.
         */
        private function save(event:Event):void
        {
            var bmd:BitmapData = new BitmapData(stage.stageWidth / 2, stage.stageHeight / 2);
            bmd.draw(_result, new Matrix(0.5, 0, 0, 0.5), null, null, null, true);
            _fileReference.save(PNGEncoder.encode(bmd), "icon.png");
        }
        
        /**
         * 指定した graphics に集中線を描きます.
         * 
         * @param    g
         */
        private function drawLineWork(g:Graphics):void 
        {
            var w:int = stage.stageWidth;
            var h:int = stage.stageHeight;
            
            var cx:int = w / 2;
            var cy:int = h / 2;
            
            var size:Number = h;
            
            var commands:Vector.<int> = new Vector.<int>();
            var data:Vector.<Number> = new Vector.<Number>();
            
            commands.push(GraphicsPathCommand.MOVE_TO);
            data.push(cx + size, cy);
            
            for (var i:int = 0; i < 72; i++ )
            {
                var radian:Number = i * 5 * Math.PI / 180;
                if (i % 2 == 0)
                {
                    commands.push(GraphicsPathCommand.LINE_TO);
                    data.push(cx + Math.cos(radian) * size, cy + Math.sin(radian) * size);
                }
                else
                {
                    commands.push(GraphicsPathCommand.LINE_TO);
                    data.push(cx + Math.cos(radian) * size * 0.15, cy + Math.sin(radian) * size * 0.15);
                }
            }
            
            g.beginFill(ColorConst.LINE);
            g.drawPath(commands, data);
            g.endFill();
        }
        
        /**
         * 指定した graphics にマークを描きます.
         * 
         * @param    g
         */
        private function drawMark(g:Graphics):void 
        {
            var w:int = stage.stageWidth;
            var h:int = stage.stageHeight;
            
            var cx:int = w / 2;
            var cy:int = h / 2;
            
            var size:Number = h - 110;
            
            var padY:Number = size / 8;
            
            var commands:Vector.<int> = new Vector.<int>();
            var data:Vector.<Number> = new Vector.<Number>();
            
            // 左半分
            commands.push(GraphicsPathCommand.MOVE_TO);
            data.push(cx, cy - size / 2 + padY);
            commands.push(GraphicsPathCommand.LINE_TO);
            data.push(cx - size / 2.5, cy - size / 2 + padY);
            commands.push(GraphicsPathCommand.LINE_TO);
            data.push(cx - size / 3, cy + size / 2 - size / 8);
            commands.push(GraphicsPathCommand.LINE_TO);
            data.push(cx, cy + size / 2);
            
            // 右半分
            commands.push(GraphicsPathCommand.MOVE_TO);
            data.push(cx, cy - size / 2 + padY);
            commands.push(GraphicsPathCommand.LINE_TO);
            data.push(cx + size / 2.5, cy - size / 2 + padY);
            commands.push(GraphicsPathCommand.LINE_TO);
            data.push(cx + size / 3, cy + size / 2 - size / 8);
            commands.push(GraphicsPathCommand.LINE_TO);
            data.push(cx, cy + size / 2);
            
            g.beginFill(ColorConst.MARK_DARK);
            g.drawPath(commands, data);
            
            commands = new Vector.<int>();
            data = new Vector.<Number>();
            
            // 明るい部分
            commands.push(GraphicsPathCommand.MOVE_TO);
            data.push(cx, cy - size / 2 + padY + size / 16);
            commands.push(GraphicsPathCommand.LINE_TO);
            data.push(cx + size / 3, cy - size / 2 + padY + size / 16);
            commands.push(GraphicsPathCommand.LINE_TO);
            data.push(cx + size / 3.5, cy + size / 2 - size / 6);
            commands.push(GraphicsPathCommand.LINE_TO);
            data.push(cx, data[data.length-1] + size / 10);
            
            g.beginFill(ColorConst.MARK_LIGHT);
            g.drawPath(commands, data);
            g.endFill();
        }
        
        /**
         * 指定した graphics に文字を描きます.
         * 
         * @param    g
         * @param    letters
         */
        private function drawLetters(g:Graphics, letters:String):void
        {            
            var char:Array = letters.split("");
            
            var sw:int = stage.stageWidth;
            var w:Number = char.length * 70;
            
            var x:Number = sw / 2 - w / 2 + 15;
            for (var i:int = 0, len:int = char.length; i < len; i++ )
            {
                var span:Number = drawChar(g, char[i], x, 25);
                x += span + 10;
            }
        }
        
        /**
         * 指定した graphics に文字を描きます.
         * 
         * @param    g
         * @param    char
         * @param    xpos
         * @param    ypos
         * @param    size
         */
        private function drawChar(g:Graphics, char:String, xpos:int = 0, ypos:int = 0, size:Number = 55):Number
        {
            var commands:Vector.<int> = new Vector.<int>();
            var data:Vector.<Number> = new Vector.<Number>();
            var cx:Number = xpos + size / 2;
            var cy:Number = ypos + size / 2;
            var startX:Number, startY:Number;
            var vw:Number, vh:Number;
            var hw:Number, hh:Number;
            var len:Number = size;
            
            switch (char)
            {
                case "H":
                    vw =  size / 2.9;
                    vh =  size;
                    
                    // *|*-|
                    
                    startX = xpos;
                    startY = ypos;
                    
                    commands.push(GraphicsPathCommand.MOVE_TO);
                    data.push(startX, startY);
                    commands.push(GraphicsPathCommand.LINE_TO);
                    data.push(startX, startY + vh);
                    commands.push(GraphicsPathCommand.LINE_TO);
                    data.push(startX + vw, startY + vh);
                    commands.push(GraphicsPathCommand.LINE_TO);
                    data.push(startX + vw, startY);
                    commands.push(GraphicsPathCommand.LINE_TO);
                    data.push(startX, startY);
                    
                    
                    // |-*|*
                    
                    startX = xpos + size;
                    startY = ypos;
                    
                    commands.push(GraphicsPathCommand.MOVE_TO);
                    data.push(startX, startY);
                    commands.push(GraphicsPathCommand.LINE_TO);
                    data.push(startX, startY + vh);
                    commands.push(GraphicsPathCommand.LINE_TO);
                    data.push(startX - vw, startY + vh);
                    commands.push(GraphicsPathCommand.LINE_TO);
                    data.push(startX - vw, startY);
                    commands.push(GraphicsPathCommand.LINE_TO);
                    data.push(startX, startY);
                    
                    // |*-*|
                    
                    startX = xpos + vw;
                    startY = cy - hh / 2;
                    
                    hh = size / 3;
                    commands.push(GraphicsPathCommand.MOVE_TO);
                    data.push(startX, startY);
                    commands.push(GraphicsPathCommand.LINE_TO);
                    data.push(xpos + size - vw, cy - hh / 2);
                    commands.push(GraphicsPathCommand.LINE_TO);
                    data.push(xpos + size - vw, cy + size / 3- hh / 2);
                    commands.push(GraphicsPathCommand.LINE_TO);
                    data.push(xpos + vw, cy + size / 3 - hh / 2);
                    commands.push(GraphicsPathCommand.LINE_TO);
                    data.push(startX, cy - hh / 2);
                    
                    break;
                
                case "T":
                    var w:Number = size;
                    
                    // ￣
                    var topH:Number = size / 2.9;
                    
                    startX = xpos;
                    startY = ypos;
                    
                    commands.push(GraphicsPathCommand.MOVE_TO);
                    data.push(startX, startY);
                    commands.push(GraphicsPathCommand.LINE_TO);
                    data.push(startX + w, startY);
                    commands.push(GraphicsPathCommand.LINE_TO);
                    data.push(startX + w, startY + topH);
                    commands.push(GraphicsPathCommand.LINE_TO);
                    data.push(startX, startY + topH);
                    commands.push(GraphicsPathCommand.LINE_TO);
                    data.push(startX, startY);
                    
                    // |
                    var bottomW:Number = size / 2.9;
                    var bottomH:Number = size - topH;
                    
                    startX = xpos + w / 2 - bottomW / 2;
                    startY = ypos + topH;
                    
                    commands.push(GraphicsPathCommand.MOVE_TO);
                    data.push(startX, startY);
                    commands.push(GraphicsPathCommand.LINE_TO);
                    data.push(startX + bottomW, startY);
                    commands.push(GraphicsPathCommand.LINE_TO);
                    data.push(startX + bottomW, startY + bottomH);
                    commands.push(GraphicsPathCommand.LINE_TO);
                    data.push(startX, startY + bottomH);
                    commands.push(GraphicsPathCommand.LINE_TO);
                    data.push(startX, startY);
                    
                    break;
                    
                case "M":
                    vw = size / 3;
                    vh = size;
                    
                    len = size + vw / 2;
                    
                    // *|*\/|
                    
                    startX = xpos;
                    startY = ypos;
                    
                    commands.push(GraphicsPathCommand.MOVE_TO);
                    data.push(startX, startY);
                    commands.push(GraphicsPathCommand.LINE_TO);
                    data.push(startX, startY + vh);
                    commands.push(GraphicsPathCommand.LINE_TO);
                    data.push(startX + vw, startY + vh);
                    commands.push(GraphicsPathCommand.LINE_TO);
                    data.push(startX + vw, startY);
                    commands.push(GraphicsPathCommand.LINE_TO);
                    data.push(startX, startY);
                    
                    // |*\*/|
                    
                    startX = startX + vw;
                    startY = ypos;
                    
                    commands.push(GraphicsPathCommand.MOVE_TO);
                    data.push(startX, startY);
                    commands.push(GraphicsPathCommand.LINE_TO);
                    data.push(cx + vw / 4, cy - vw / 2);
                    commands.push(GraphicsPathCommand.LINE_TO);
                    data.push(cx + vw / 4, cy + vw);
                    commands.push(GraphicsPathCommand.LINE_TO);
                    data.push(startX, startY + vw * 1.5);
                    
                    // |\*/*|
                    
                    startX = xpos + size + vw / 2 - vw;
                    startY = ypos;
                    
                    commands.push(GraphicsPathCommand.MOVE_TO);
                    data.push(startX, startY);
                    commands.push(GraphicsPathCommand.LINE_TO);
                    data.push(cx + vw / 4, cy - vw / 2);
                    commands.push(GraphicsPathCommand.LINE_TO);
                    data.push(cx + vw / 4, cy + vw);
                    commands.push(GraphicsPathCommand.LINE_TO);
                    data.push(startX, startY + vw * 1.5);
                    
                    
                    // |\/*|*
                    
                    startX = xpos + size + vw / 2;
                    startY = ypos;
                    
                    commands.push(GraphicsPathCommand.MOVE_TO);
                    data.push(startX, startY);
                    commands.push(GraphicsPathCommand.LINE_TO);
                    data.push(startX, startY + vh);
                    commands.push(GraphicsPathCommand.LINE_TO);
                    data.push(startX - vw, startY + vh);
                    commands.push(GraphicsPathCommand.LINE_TO);
                    data.push(startX - vw, startY);
                    commands.push(GraphicsPathCommand.LINE_TO);
                    data.push(startX, startY);
                    
                    break;
                    
                case "L":
                    len = size / 2.5;
                    
                    vw = size / 3;
                    vh = size;
                    
                    hw = size / 3;
                    hh = size / 3;
                    
                    // *|*_
                    
                    startX = xpos;
                    startY = ypos;
                    
                    commands.push(GraphicsPathCommand.MOVE_TO);
                    data.push(startX, startY);
                    commands.push(GraphicsPathCommand.LINE_TO);
                    data.push(startX, startY + vh);
                    commands.push(GraphicsPathCommand.LINE_TO);
                    data.push(startX + vw, startY + vh);
                    commands.push(GraphicsPathCommand.LINE_TO);
                    data.push(startX + vw, startY);
                    commands.push(GraphicsPathCommand.LINE_TO);
                    data.push(startX, startY);
                    
                    // |*_*
                    
                    startX = xpos + vw;
                    startY = ypos + size - hh;
                    
                    commands.push(GraphicsPathCommand.MOVE_TO);
                    data.push(startX, startY);
                    commands.push(GraphicsPathCommand.LINE_TO);
                    data.push(startX, startY + hh);
                    commands.push(GraphicsPathCommand.LINE_TO);
                    data.push(startX + size / 2.2, startY + hh);
                    commands.push(GraphicsPathCommand.LINE_TO);
                    data.push(startX + size / 2.2, startY);
                    commands.push(GraphicsPathCommand.LINE_TO);
                    data.push(startX, startY);
                    
                    break;
                
                default:
                    
                break;
            }
            
            g.beginFill(ColorConst.LETTER);
            g.drawPath(commands, data, GraphicsPathWinding.NON_ZERO);
            g.endFill();
            
            return len;
        }
        
        /**
         * Twitter アイコンの読み込み完了時に呼び出されます.
         * 
         * @param    event
         */
        private function onTwitterIconLoaded(event:Event):void
        {
            if (_bitmapData) _bitmapData.dispose();
            
            // アイコン転写用ビットマップ
            _bitmapData = new BitmapData(73, 73, true, 0x00000000);
            _bitmapData.draw(_iconLoader);
            
            var vertices:Vector.<Number> = new Vector.<Number>();
            var indices:Vector.<int> = Vector.<int>([0, 1, 2, 1, 2, 3]);
            var uv:Vector.<Number> = new Vector.<Number>();
            
            vertices.push(0, 0);
            vertices.push(73+5, 0);
            vertices.push(5, 73);
            vertices.push(73, 73)
            
            uv.push(0, 0);
            uv.push(1, 0);
            uv.push(0, 1);
            uv.push(1, 1)
            
            var g:Graphics = _icon.graphics;
            g.beginBitmapFill(_bitmapData);
            g.drawTriangles(vertices, indices, uv);
            g.endFill();
        }
        
    }
    
}

import flash.display.DisplayObjectContainer;
import flash.display.Loader;
import flash.display.Sprite;
import flash.events.Event;
import flash.net.URLRequest;
import flash.system.LoaderContext;

/**
 * Twitter のアイコンを読み込むためのクラス.
 * 
 * <p>アイコン取得のために usericons.relucks.org を使用しています。</p>
 * 
 * @author paq
 */
class TwitterIconLoader extends Sprite
{
    private static const API_URL:String = "http://wonder-tools.appspot.com/api/proxy?url=http://usericons.relucks.org/twitter/";
    
    private var _loader:Loader;
    public var handler:Function;
    
    /**
     * 新しい TwitterIconLoader インスタンスを作成します.
     * 
     * @param    parent
     * @param    screenName    ユーザーのスクリーンネーム
     */
    public function TwitterIconLoader(screenName:String = null, handler:Function = null)
    {
        this.handler = handler;
        
        _loader = new Loader();
        _loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onComplete);
        addChild(_loader);
        
        if (screenName != null)
        {
            load(screenName);
        }
    }
    
    /**
     * 指定したスクリーンネームのアイコンを読み込みます.
     * 
     * @param    screenName    ユーザーのスクリーンネーム
     */
    public function load(screenName:String):void 
    {
        _loader.load(new URLRequest(API_URL + screenName), new LoaderContext(true));
    }
    
    /**
     * Loader の読み込み完了時に呼び出されます.
     * 
     * @param    event
     */
    private function onComplete(event:Event):void 
    {
        if (handler != null)
        {
            handler(event);
        }
    }
}

/**
 * 色の定数をまとめたクラスです.
 * 
 * @author paq
 */
class ColorConst
{
    /** 文字の色 */
    public static var LETTER:uint = 0x000000;
    
    /** 背景色の色 */
    public static var BACKGROUND:uint = 0xF2F2F2;
    
    /** 集中線の色 */
    public static var LINE:uint = 0xFFFFFF;
    
    /** バッジの色 */
    public static var MARK_LIGHT:uint = 0xF06529;
    
    /** バッジの影 */
    public static var MARK_DARK:uint = 0xE34C26;
}

Code Fullscreen

Preview Fullscreen