スクリプトでいろいろな線を引く

　画面上で、ポイントが動きながら線が引かれているのを見ると気持ちがいいものだ。　今回は、基本的な形状の線をスクリプトで引くお勉強をしたい。　形状としては、直線、複数の直線、格子状の線、斜線の格子、サインカーブ、円、円弧、らせん、渦巻き、虹の10種類について、動きのある線引きをしてみたい。　それぞれを単独でも使用できるように独立の関数にしてあり、ここでは、これらをボタン操作で再生できるようにした。
<サンプル>　
<ステージ等の準備>
● 330*400、背景色：0x999999、fsp：48のステージ
● ステージ下部に、10個のボタンを配し、インスタンス名を、btn1,btn2,,,btn10 とする。
<スクリプト> (as2.0)



//直線

function singleLine() {

    removeMc();

    var x0 = 50;

    var y0 = 50;

    var dx = 0;

    mc = this.createEmptyMovieClip("mc", 1);

    mc.moveTo(x0,y0);

    mc.lineStyle(2,0xffffff,100);

    mc.onEnterFrame = function() {

        dx += 5;

        thisx = x0 + dx;

        thisy = y0 + dx;

        this.lineTo(thisx,thisy);

        if (thisx > 250) {

            delete this.onEnterFrame;

        }

    };

}



//多重線

function multipleLine() {

    removeMc();

    var x0 = 50;

    var y0 = 50;

    var n = 0;

    while (n++ < 10) {

        mc = this.createEmptyMovieClip("mc" + n, n);

        mc.moveTo(x0,y0 + (n - 1) * 25 * 10 / 9);

        mc.lineStyle(2,0xffffff,100);

        mc.dx = 0;

        delay = 300 * (n - 1);

        drawMultiLine(mc,n,delay);

    }

    function drawMultiLine(mc, n, delay) {

        mc.interval = function() {

            clearInterval(mc.ID);

            mc.onEnterFrame = function() {

                this.dx += 20;

                thisx = x0 + this.dx;

                thisy = y0 + (n - 1) * 25 * 10 / 9;

                if (thisx > 250) {

                    delete this.onEnterFrame;

                }

                this.lineTo(thisx,thisy);

            };

        };

        mc.ID = setInterval(mc, "interval", delay);

    }

}



//格子

function grid() {

    removeMc();

    var x0 = 60;

    var y0 = 60;

    var n = 0;

    while (n++ < 20) {

        mc = this.createEmptyMovieClip("mc" + n, n);

        if (n < 11) {

            mc.moveTo(x0,y0 + (n - 1) * 20 * 10/9);

        } else {

            mc.moveTo(x0 + (n - 11) * 20 *10/9, y0);

        }

        mc.lineStyle(2,0xffffff,100);

        mc.dx = 0;

        delay = 300 * (n - 1);

        drawLine(mc,n,delay);

    }

    function drawLine(mc, n, delay) {

        mc.interval = function() {

            clearInterval(mc.ID);

            mc.onEnterFrame = function() {

                this.dx += 10;

                if (n < 11) {

                    thisx = x0 + this.dx;

                    thisy = y0 + (n - 1) * 20 * 10/9;

                    if (thisx > 250) {

                        delete this.onEnterFrame;

                    }

                } else {

                    thisx = x0 + (n - 11) * 20 * 10/9;

                    thisy = y0 + this.dx;

                    if (thisy >250) {

                        delete this.onEnterFrame;

                    }

                }

                this.lineTo(thisx,thisy);

            };

        };

        mc.ID = setInterval(mc, "interval", delay);

    }

}



//斜線格子

function diagonalCross() {

    removeMc();

    var x0 = 50;

    var y0 = 50;

    var n = 0;

    while (n++ < 20) {

        mc = this.createEmptyMovieClip("mc" + n, n);

        if (n < 11) {

            mc.moveTo(x0 + (n - 1) * 20, y0);

        } else {

            mc.moveTo(x0 + (n - 11) * 20, y0 + 220);

        }

        mc.lineStyle(2,0xffffff,100);

        delay = 300 * (n - 1);

        drawDiagonalLine(mc,n,delay);

    }

    function drawDiagonalLine(mc, n, delay) {

        mc.interval = function() {

            clearInterval(mc.ID);

            if (n < 11) {

                thisx = x0 + (n + 1) * 20;

                thisy = y0 + 220;

            } else {

                thisx = x0 + (n - 9) * 20;

                thisy = y0;

            }

            this.lineTo(thisx,thisy);

        };

        mc.ID = setInterval(mc, "interval", delay);

    }

}



//サインカーブ

function sinCurve() {

    removeMc();

    var x0 = 30;

    var y0 = 150;

    var a = 75;

    mc = this.createEmptyMovieClip("mc", 1);

    mc.moveTo(x0,y0);

    mc.lineStyle(2,0xffffff,100);

    var d = 0;

    mc.onEnterFrame = function() {

        thisx = x0 + d / 3;

        thisy = y0 - a * Math.sin(d / 180 * Math.PI);

        this.lineTo(thisx,thisy);

        d += 10;

        if (d > 730) {

            delete this.onEnterFrame;

        }

    };

}



//円

function circle() {

    removeMc();

    var x0 = y0 = 150;

    var r = 100;

    mc = this.createEmptyMovieClip("mc", 1);

    mc.moveTo(x0,y0 - r);

    mc.lineStyle (2, 0xffffff, 100);

    var d = 0;

    mc.onEnterFrame = function() {

        thisx = x0 + r * Math.sin(d / 180 * Math.PI);

        thisy = y0 - r * Math.cos(d / 180 * Math.PI);

        this.lineTo(thisx,thisy);

        d += 10;

        if (d > 370) {

            delete this.onEnterFrame;

        }

    };

}



//らせん

function spiral() {

    removeMc();

    var x0 = 75;

    var y0 = 150;

    var r = 75;

    mc = this.createEmptyMovieClip("mc", 1);

    mc.moveTo(x0,y0 - r);

    var d = 0;

    mc.lineStyle(2,0xffffff,100);

    mc.onEnterFrame = function() {

        thisx = x0 + d / 10 + r * Math.sin(d / 180 * Math.PI);

        thisy = y0 - r * Math.cos(d / 180 * Math.PI);

        this.lineTo(thisx,thisy);

        d += 10;

        if (d > 360 * 4.5) {

            delete this.onEnterFrame;

        }

    };

}



//渦巻

function volute() {

    removeMc();

    var x0 = y0 = 150;

    var r = 100;

    mc = this.createEmptyMovieClip("mc", 1);

    mc.moveTo(x0,y0 - r);

    var d = 0;

    mc.lineStyle(2,0xffffff,100);

    mc.onEnterFrame = function() {

        thisx = x0 + r * Math.sin(d / 180 * Math.PI);

        thisy = y0 - r * Math.cos(d / 180 * Math.PI);

        this.lineTo(thisx,thisy);

        d += 10;

        r -= 0.4;

        if (d > 360 * 6) {

            delete this.onEnterFrame;

        }

    };

}



//円弧

function arc() {

    removeMc();

    var x0 = 150;

    var y0 = 150;

    var r = 100;

    mc = this.createEmptyMovieClip("mc", 1);

    mc.moveTo(x0 - r,y0);

    mc.lineStyle(2,0xffffff,100);

    var d = 0;

    mc.onEnterFrame = function() {

        thisx = x0 + r * Math.sin((d - 90) / 180 * Math.PI);

        thisy = y0 - r * Math.cos((d - 90) / 180 * Math.PI);

        this.lineTo(thisx,thisy);

        d += 5;

        if (d > 180) {

            delete this.onEnterFrame;

        }

    };

}



//虹

function rainbow() {

    removeMc();

    var x0 = y0 = 150;

    var n = 0;

    var r0 = 100;

    var lineColor = new Array("0xff0000", "0xff6600", "0xffff00", "0x006600", 
"0x66ffff", "0x0033ff", "0x6666ff");

    while (n++ < 7) {

        var mc = this.createEmptyMovieClip("mc" + n, n);

        color = lineColor[n - 1];

        mc.lineStyle(4,color,100);

        mc.r = r0 - 4*(n-1);

        mc.moveTo(x0 - mc.r, y0);

        var d = 0;

        createRainbow(mc,n);

    }

    function createRainbow(mc, n) {

        mc.onEnterFrame = function() {

            r = this.r;

            thisx = x0 + r * Math.sin((d - 90) / 180 * Math.PI);

            thisy = y0 - r * Math.cos((d - 90) / 180 * Math.PI);

            this.lineTo(thisx,thisy);

            d += 0.5;

            if (d > 180) {

                delete this.onEnterFrame;

            }

        };

    }

}



//描画されている線を消すため30までの深度を空のMCで上書き

function removeMc() {

    for (i = 0; i < 30; i++) {

        this.createEmptyMovieClip("dammy",i);

    }

}



//ボタン類のリリースイベント

btn1.onRelease = function() {

    singleLine();

};

btn2.onRelease = function() {

    multipleLine();

};

btn3.onRelease = function() {

    grid();

};

btn4.onRelease = function() {

    diagonalCross();

};

btn5.onRelease = function() {

    sinCurve();

};

btn6.onRelease = function() {

    circle();

};

btn7.onRelease = function() {

    spiral();

};

btn8.onRelease = function() {

    volute();

};

btn9.onRelease = function() {

    arc();

};

btn10.onRelease = function() {

    rainbow();

};
HOME　　　お勉強総リスト
このページのコンテンツには、Adobe Flash Player の最新バージョンが必要です。
