前回、前々回でいろいろな線や、図形を lineTo を使って描画する方法を勉強したが、今回は curveTo を加えて、シンプルな花の絵を描いてみようと思う。　もちろん、精緻なデザイン画をトウィーンを使って同様なことをやる方が、見栄えのするムービーができるのは承知であるが、script の勉強になることと、たくさんの花を動きを伴って登場させたり、いろいろな色の花を同時に咲かせたりなどをするのには script を使う方が勝手がいいと思うので、今回のお勉強とした。

スクリプトの構成

　sample1.fla　 ―――　drawFlower.as ―――　drawLeaf.as　（葉の描画）
　sample2.fla　　　　　　　　　　　　　　　　　　　　　drawLine.as　（茎の描画）
　sample3.fla　　　　　　　　　　　　　　　　　　　　　drawCircle.as　（花芯の描画）
　　 　　　　　　　　　　　　　　　　　　　　　　　　　　 drawPetal.as　（花びらの描画）

sample1.fla

flowerDraw();

function flowerDraw() {
    this.createEmptyMovieClip("flower",0);
    var fl:drawFlower = new drawFlower(flower);
}

sample2.fla

drawFlowers1();

function drawFlowers1() {
    for (i = 0; i < 7; i++) {
        mc = this.createEmptyMovieClip("fl" + i, i + 1);
        var flw:drawFlower = new drawFlower(mc);
        mc._xscale = _yscale = 40;
        mc._x = 10 + 50 * i;
        mc._y = 0;
    }
}

sample3.fla

import mx.transitions.Tween;
import mx.transitions.easing.*;

drawFlowers2();

function drawFlowers2() {
    for (i = 0; i < 7; i++) {
        mc = this.createEmptyMovieClip("fl" + i, i + 1);
        mc.num = i;
        mc.lag = Math.random() * 200; //２秒以内のランダムな時間を発生
        tween(mc);
    }
}

function tween(mc) {
    tw = new Tween(mc, "_alpha", Regular.easeOut, 100, 100, mc.lag / 100, true); //lag秒の時間を置く
    tw.onMotionFinished = function() {
        var flw:drawFlower = new drawFlower(mc);
        mc._xscale = _yscale = 40;
        mc._x = 10 + 50 * mc.num;
        mc._y = 0;
    };
}

drawFlower.as

import mx.transitions.Tween;
import mx.transitions.easing.*;

class drawFlower extends MovieClip {
    function drawFlower(container) {
        var leave1 = container.createEmptyMovieClip("leave1",1); //葉１
        var leave2 = container.createEmptyMovieClip("leave2",2); //葉２
        var stem = container.createEmptyMovieClip("stem",3);     //茎
        var core = container.createEmptyMovieClip("core",5);     //花芯
        var petal = container.createEmptyMovieClip("petal",4);   //花びら

        drawLeaves();

        function drawLeaves() {

            var mc1 = new drawLeaf(leave1, 95, 0, 0xffff00, 0x336633);
            var mc2 = new drawLeaf(leave2, 95, 0, 0xffff00, 0x336633);

            leave1._x = 70;
            leave1._y = 240;
            leave1._rotation = -50;
            leave1._xscale = 0;
            leave1._yscale = 0;
            leave2._x = 65;
            leave2._y = 240;
            leave2._rotation = -130;

            var tw2x = new Tween(leave2, "_xscale", Regular.easeOut, 0, 100, 1, true);
            var tw2y = new Tween(leave2, "_yscale", Regular.easeOut, 0, 100, 1, true);
            tw2y.onMotionFinished = function() {
                var tw1x = new Tween(leave1, "_xscale", Regular.easeOut, 0, 100, 1, true);
                var tw1y = new Tween(leave1, "_yscale", Regular.easeOut, 0, 100, 1, true);

                tw1y.onMotionFinished = function() {
                    drawStem();
                };
            };
        }

        function drawStem() {
            //drawLine(MC, lineLength, lineWeight, lineColor)
            var mc3:drawLine = new drawLine(stem, 150, 5, 0x336633, 100);
            stem._rotation = -90;
            stem._x = 67.5;
            stem._y = 237;
            var tw2y = new Tween(stem, "_xscale", None.easeIn, 0, 100, 1, true);
            tw2y.onMotionFinished = function() {
                drawCore();
            };
        }
        
        function drawCore() {
            //drawCircle(MC, radius, lineWeight, lineColor, fillColor)
            var mc4 = new drawCircle(core, 30, 0, 0xff0000, 0x663333);
            core._x = 67.5;
            core._y = 80;
            var tw3 = new Tween(core, "_xscale", Regular.easeIn, 0, 100, 2, true);
            tw3 = new Tween(core, "_yscale", Regular.easeIn, 0, 100, 2, true);
            tw3.onMotionFinished = function() {
                drawFlowerPetal();
            };
        }
        
        function drawFlowerPetal() {
            //drawPetal(MC, num, radius, lineWeight, lineColor, fillColor) 
            var lineColor = 0xff6600;
            var fillColor = 0xffcc00;
            //var lineColor = Math.random()*256*256*256; //色をランダムに変えたいときはこちらをアクティブに
            //var fillColor = Math.random()*256*256*256; //色をランダムに変えたいときはこちらをアクティブに
            var mc5 = new drawPetal(petal, 16, 30, 1, lineColor, fillColor);
            petal._x = 67.5;
            petal._y = 80;
        }
    }
}

drawLeaｆ.as 葉の描画（横に寝ていて、葉の下部中央が（0,0））

class drawLeaf extends MovieClip {
    //引数：drawLeave(ムービークリップ, 葉の長さ, 線幅, 線の色, 塗の色)
    function drawLeaf(container, lineLength, lineWeight, lineColor, fillColor) {
        //両側の曲線座標の定義
        var pointr = [{x:0, y:0}, {x:30, y:-40*lineLength/100}, {x:lineLength, y:0}];
        var pointl = [{x:0, y:0}, {x:30, y:40*lineLength/100}, {x:lineLength, y:0}];
        
        //曲線を引くムービークリップの定義
        var mc1 = container.createEmptyMovieClip("mc1", 1);
        var mc2 = container.createEmptyMovieClip("mc1", 2);
        
        //線幅が0以外なら
        if (lineWeight) {
            mc1.lineStyle(lineWeight,lineColor);
            mc2.lineStyle(lineWeight,lineColor);
        }
        
        //塗りの色
        mc1.beginFill(fillColor);
        mc2.beginFill(fillColor);

        mc1.moveTo(pointr[0].x,pointr[0].y);
        mc2.moveTo(pointl[0].x,pointl[0].y);

        mc1.curveTo(pointr[1].x,pointr[1].y,pointr[2].x,pointr[2].y);
        mc2.curveTo(pointl[1].x,pointl[1].y,pointl[2].x,pointl[2].y);

        mc1.endFill();
        mc2.endFill();
    }
}

drawLine.as　茎を描くための直線の描画（座標（0,0）を起点とする指定した長さの横線）

class drawLine extends MovieClip {
    //引数：drawLine(ムービークリップ、線の長さ、線幅、線の色、線の不透明度)
    function drawLine(container, lineLength, lineWeight, lineColor, opacity) {
        var mc = container.createEmptyMovieClip("mc",1);
        mc.moveTo(0,0);
        mc.lineStyle(lineWeight, lineColor, opacity);
        mc.lineTo(lineLength, 0);
    }
}

drawCircle.as　花芯を描くための円形の描画

class drawCircle extends MovieClip {
    //引数：drawCircle(ムービークリップ、半径、線幅、線の色、塗の色)
    function drawCircle(container, radius, lineWeight, lineColor, fillColor) {
        var mc = container.createEmptyMovieClip("mc", 1);
        mc._x = 0;
        mc._y = 0;
        mc.moveTo(0,0);
        if (lineWeight) {
            mc.lineStyle(lineWeight,lineColor,100);
        }
        mc.beginFill(fillColor);
        var d = 0;
        mc.onEnterFrame = function() {
            var thisx = radius * Math.sin(d / 180 * Math.PI);
            var thisy = radius * Math.cos(d / 180 * Math.PI);
            mc.lineTo(thisx,thisy);
            d += 10;
            if (d > 360) {
                delete this.onEnterFrame;
                this.endFill();
            }
        };
    }
}

drawPetal.as　花びらの描画

class drawPetal extends MovieClip {
    //引数：drawPetal(ムービークリップ、花びらの数、花芯の半径、線幅、線の色、塗の色)
    function drawPetal(container, num, radius, lineWeight, lineColor, fillColor) {
        var point = [];//頂点座標の配列宣言
        var d = radius;
        num = 2 * num;
        var stem_mc = container.createEmptyMovieClip("stem_mc1", -1);
        
        stem_mc.onEnterFrame = function() {
            d += (3 * radius - d) / 10;
            if(d > 3*radius - 3) {
                delete stem_mc.onEnterFrame;
            }
            for (var i = 0; i < num; i++) {
                var rd = 2 * Math.PI / num * i - 1 / 2 * Math.PI;
                if (i % 2) {
                    //偶数番目の頂点は最終的に半径radiusの3倍とする
                    point[i] = {x:d * Math.cos(rd), y:d * Math.sin(rd)};
                } else {
                    //奇数番目の頂点は半径radiusの円周上
                    point[i] = {x:radius * Math.cos(rd), y:radius * Math.sin(rd)};
                }
            }
            drawCurvedShape(num);
        };

        function drawCurvedShape(num) {
            if (lineWeight) {
                stem_mc.lineStyle(lineWeight,lineColor,100);
            }
            stem_mc.beginFill(fillColor);
            for (var i = 0; i < num; i++) {
                stem_mc.moveTo(point[i].x,point[i].y);
                if (i % 2 == 0) {
                    if (i == num - 2) {
                        stem_mc.curveTo(point[i + 1].x,point[i + 1].y,point[0].x,point[0].y);
                        stem_mc.endFill();
                    } else {
                        stem_mc.curveTo(point[i + 1].x,point[i + 1].y,point[i + 2].x,point[i + 2].y);
                    }
                }
            }
        }
    }
}