VTuberになったプログラマーの魂の残滓

こいつ……もう意識が……！！

FlexSDKで何かを作ってみた

actionscript

久しぶりのお勉強タイムです。

今回はお絵かきツールを作ってみました。

ソースコード

  • DrawTool.mxml
<?xml version="1.0" encoding="UTF-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:comp="*">
    <mx:Panel width="95%" height="95%" title="お絵かきツール" layout="horizontal"
        paddingLeft="10" paddingTop="10" paddingRight="10" paddingBottom="10">
        <mx:VBox>
            <mx:Form>
                <mx:FormItem label="カラー：">
                    <mx:RadioButton groupName="color" id="black" label="黒" click="oekaki.color = 0x000000" selected="true"/>
                    <mx:RadioButton groupName="color" id="red"   label="赤" click="oekaki.color = 0xff0000"/>
                    <mx:RadioButton groupName="color" id="green" label="緑" click="oekaki.color = 0x00ff00"/>
                    <mx:RadioButton groupName="color" id="blue"  label="青" click="oekaki.color = 0x0000ff"/>
                </mx:FormItem>
                <mx:FormItem label="太さ：">
                    <mx:RadioButton groupName="weight" id="s" label="細い" click="oekaki.weight = 1"/>
                    <mx:RadioButton groupName="weight" id="m" label="普通" click="oekaki.weight = 3" selected="true"/>
                    <mx:RadioButton groupName="weight" id="l" label="太い" click="oekaki.weight = 5"/>
                </mx:FormItem>
                <mx:FormItem label="機能：">
                    <mx:Button id="remove" label="消去" click="oekaki.clear();"/>
                </mx:FormItem>
            </mx:Form>
        </mx:VBox>

        <mx:VBox>
        <mx:Canvas width="642" height="482" borderColor="0xcccccc" borderStyle="solid">
            <comp:Oekaki id="oekaki"/>
        </mx:Canvas>
        </mx:VBox>
    </mx:Panel>
</mx:Application>
  • Oekaki.as
package {
    import flash.display.Sprite;
    import flash.events.MouseEvent;
    import mx.core.UIComponent;

    public class Oekaki extends UIComponent {
        private var drawColor:uint    = 0x000000;
        private var drawWeight:uint   = 3;
        private var mouseDown:Boolean = false;
        private var s:Sprite = new Sprite();

        public function set color(color:uint):void {
            drawColor = color;
            update();
        }

        public function get color():uint {
            return drawColor;
        }

        public function set weight(color:uint):void {
            drawWeight = color;
            update();
        }

        public function get weight():uint {
            return drawWeight;
        }

        public function clear():void {
            s.graphics.clear();
            s.graphics.beginFill(0xffffff);
            s.graphics.drawRect(0, 0, 640, 480);
            s.graphics.endFill();
            s.graphics.lineStyle(drawWeight, drawColor);
            addChild(s);
        }

        public function Oekaki():void {
            s.graphics.beginFill(0xffffff);
            s.graphics.drawRect(0, 0, 640, 480);
            s.graphics.endFill();
            s.graphics.lineStyle(drawWeight, drawColor);
            addChild(s);
            // クリックイベント監視する
            s.addEventListener(MouseEvent.MOUSE_DOWN, drawStart);
            s.addEventListener(MouseEvent.MOUSE_UP  , drawEnd);
            s.addEventListener(MouseEvent.MOUSE_MOVE, mouseMove);
        }

        private function update():void {
            s.graphics.lineStyle(drawWeight, drawColor);
        }

        private function drawStart(e:MouseEvent):void {
            mouseDown = true;
            s.graphics.moveTo(s.mouseX, s.mouseY);
        }
        private function drawEnd(e:MouseEvent):void {
            mouseDown = false;
        }
        private function mouseMove(e:MouseEvent):void {
            if(mouseDown){
                s.graphics.lineTo(s.mouseX, s.mouseY);
            }
        }
    }
}

なんだか酷いソースのような気がする・・・

というのも、今日の夜3時ぐらいから書き始めたのでActionScriptのAの字もよく分かってない状態です・・・。
まずは動くのを前提に作ったのでなんだか無駄が多いような気がするなー。

こんな機能をつけてみたい！

  • 書いた絵を画像として保存（サーバにアップロードさせる）
  • 消しゴム機能（単純に白を追加とかじゃなくて消しゴムとしての機能を提供）
  • 曲線のなめらか化（はてなハイクのやつ）
  • カラーパレットの実装（ラジオボタンで色選択はダサい＞＜；）
  • JavaScriptと絡ませる！

ActionScript楽しい！

もうちょっと触ってみたらに何か記事でも書いてみようかな。
調べることが多くて大変そうだけど、やっぱりできることはJavaScriptよりも多いね！
まだまだいろいろと勉強してみます！

参考サイト