円を描画していき、徐々に透明になるスクリプトの作り方

このQ&Aのポイント
  • AS3.0を使用して円をランダムに描画しながら、先に描画した円から徐々に透明にしていくスクリプトの作り方を教えてください。
  • 現在のスクリプトでは全体が透明になってしまいますが、常に透明度が1の円を描画しつつも、徐々に透明になるスクリプトにする方法を教えてください。
  • イベントリスナーを使用して円の描画と透明度の変化を制御する方法を教えてください。
回答を見る
  • ベストアンサー

円をランダムで描画していき、最初の円から徐々に透明になる

現在AS3.0にてランダムで永遠と円を描きながらも、描画した円から順番に透明になっていくスクリプトを書いているのですが、以下のスクリプトですと全体が透明になっていき、最終的に何も残らなくなってしまいます。 常に透明度1の円を描画しつつも、先に描画した円から徐々に透明になっていくスクリプトにするにはどうすればよいのでしょうか?ご教授お願いできればと思います。 addEventListener(Event.ENTER_FRAME, rain); import flash.display.Sprite; import flash.display.MovieClip; var mySprite:Sprite = new Sprite(); var myClip:Sprite = new Sprite(); addChild(myClip); function rain(event:Event):void { with(mySprite.graphics) { var circle:int = Math.floor(Math.random()*100); var stageX:int = Math.floor(Math.random()*stage.stageWidth); var stageY:int = Math.floor(Math.random()*stage.stageHeight); beginFill(0x000000); drawCircle(stageX, stageY , circle); endFill; myClip.addChild(mySprite); var diff:Number = 0.01; myClip.alpha -= diff; } }

  • Flash
  • 回答数1
  • ありがとう数2

質問者が選んだベストアンサー

  • ベストアンサー
  • cspl
  • ベストアンサー率83% (55/66)
回答No.1

以下のスクリプトで動作するはずです。 「円を作る」作業と「円のアルファ値を下げる」作業を 分けて考えることがポイントです。 参考にしてみてください。 _____________________________________________________ import flash.display.Sprite; var myClip:Sprite = new Sprite(); addChild(myClip); addEventListener(Event.ENTER_FRAME, createCircle); function createCircle(event:Event):void { var radius:int = Math.floor(Math.random()*100); var stageX:int = Math.floor(Math.random()*stage.stageWidth); var stageY:int = Math.floor(Math.random()*stage.stageHeight); var mySprite:Sprite = new Sprite(); mySprite.graphics.beginFill(0x000000); mySprite.graphics.drawCircle(stageX, stageY , radius); mySprite.graphics.endFill(); myClip.addChild(mySprite); mySprite.addEventListener(Event.ENTER_FRAME, clearCircle); } function clearCircle(event:Event):void { var circle = event.currentTarget; circle.alpha -= 0.01; if (circle.alpha <= 0) { // アルファが0以下になった円は動作を止めて消す。 circle.removeEventListener(Event.ENTER_FRAME, clearCircle); myClip.removeChild(circle); } } _____________________________________________________

keropiyo
質問者

お礼

csplさんお返事遅くなり誠に申し訳ございません。 おっしゃる通り、分けてスクリプトを書くことでとても分かりやすく 理解することが出来、うまく行きました。 本当に有難うございました。

関連するQ&A

  • actionscript 3.0 初心者です

    以下の3つの質問にご回答いただければ幸いです。 以下の参考にさせていただいている、スクリプトにて 1、random関数の()の後に来る数字はどのような範囲を意味しているのでしょうか? 2、sList[i].vx = Math.random() -0.5;という記述について、これはあるオブジェクトの 落下(進行)の速度を示しているらしいのですが、その手前の記述で、 private var vx:Number = 0;という記述があります。自分で定義したものをプロパティーとして使い事はできるのでしょうか?(もしくわこのvxはarrayのプロパティとして使われていると考えてよろしいのしょうか?) 3、なぜ速度をわざわざ配列で記入する必要があるのでしょうか? 多岐にわたっておりますが、是非よろしくお願い致します。 package{ import flash.display.Sprite; import flash.display.MovieClip; import flash.geom.Matrix; import flash.events.Event; import flash.filters.BlurFilter; public class Main extends Sprite { private var snow:Ball;     private var num:int = 200; private var sList:Array = []; private var vx:Number = 0; public function Main(){ for(var i:int = 0; i < num; i++){ var snow:Ball = new Ball(2,0xaaffff) //初期位値 snow.x = Math.random() * stage.stageWidth; snow.y = Math.random() * stage.stageHeight; //大きさを生成順に小さく snow.scaleX = snow.scaleY = 1 / (0.02 * i + 1); //配置して配列に入れる addChild(snow); sList.push(snow); //それぞれのx方向の速度設定 sList[i].vx = Math.random() -0.5; } addEventListener(Event.ENTER_FRAME,go1); } private function go1(evt:Event):void{ for(var i = 0; i < num; i++){ //x方向とy方向の動き設定(奥のものほど遅くなる) sList[i].x += sList[i].vx / (0.02 * i + 1); sList[i].y += 4 / (0.02 * i + 1); //ステージ外(下)に出たら移動 if(sList[i].y > 400){ sList[i].x = Math.random() * stage.stageWidth; sList[i].y = 0; } } } } }

    • ベストアンサー
    • Flash
  • flashで円の描画。

    長文失礼します。 FLASH,CS3でActionScript2.0で作業しています。 FLASHで複数の円を重ねて円グラフの様な描画をしたくて、ネット上にあったソースを自分で少しいじりました。 しかし複数の円を描画しようとすると他の円が消えてしまいます。 外部に円を描画するスクリプト(DrawArc.as)がおいてあります。 //DrawArc.as class DrawArc { var mc:MovieClip; function DrawArc(target:MovieClip) { mc = target; } function drawLine(x:Number, y:Number, radius:Number, arc:Number, startAngle:Number, thickness:Number, color:Number, alpha:Number, yRadius:Number) { mc.clear(); mc.lineStyle(thickness,color,alpha,false,"none","none"); mc.moveTo(x,y); if (arguments.length<8) { return; } if (yRadius == undefined) { yRadius = radius; } if (Math.abs(arc)>360) { arc = 360; } var segs = Math.ceil(Math.abs(arc)/45); var segAngle = arc/segs; var theta = -(segAngle/180)*Math.PI; var angle = -(startAngle/180)*Math.PI; var ax = x-Math.cos(angle)*radius; var ay = y-Math.sin(angle)*yRadius; if (segs>0) { for (var i = 0; i<segs; i++) { angle += theta; var angleMid = angle-(theta/2); var bx = ax+Math.cos(angle)*radius; var by = ay+Math.sin(angle)*yRadius; var cx = ax+Math.cos(angleMid)*(radius/Math.cos(theta/2)); var cy = ay+Math.sin(angleMid)*(yRadius/Math.cos(theta/2)); mc.curveTo(cx,cy,bx,by); } } } } そしてFLASHのフレーム内に import DrawArc; mc = new DrawArc(this); targetNum = 0; onEnterFrame = function () { if (targetNum<=220) { targetNum += 2; change(); } else { delete this.onEnterFrame; } }; function change() { mc.drawLine(Stage.width/2,65,40,-targetNum,90,30,0x69f203,100); } とかいてあります。 これで円を描画してくれるんですが、 さらにもう一つの円を重ねて表示させたいので FLASHのフレーム内に import DrawArc; mc = new DrawArc(this); mc2 = new DrawArc(this);//新しい用 targetNum = 0; targetNum2 = 0;//新しい用 onEnterFrame = function () { if (targetNum<=220) { targetNum += 2; change(); } if (targetNum2<=210) { targetNum2 += 2; change2(); } }; function change() { mc.drawLine(Stage.width/2,65,40,-targetNum,90,30,0x002503,100); mc.mc.swapDepths(10); trace(mc.mc.getDepth()); } function change2() { mc2.drawLine(Stage.width/2,65,40,-targetNum2,90,30,0x69f203,100); mc2.mc.swapDepths(11); trace(mc2.mc.getDepth()); } と書いたのですがDepthが両方とも10になってしまいます。このDepthが別々になれば両方ちゃんと表示されると思うのですが、手詰まりになってしまいました。 どなたか解決策が分かる方教えてください。

    • ベストアンサー
    • Flash
  • removeChild()についてご教授願います。

    AS3.0の初心者です。 Stratボタン、Stopボタンで以下のスクリプトで表示と非表示を繰返ししたいのですが、 Stopボタンで、単にremoveChild();にしますと、 「#2025: 指定した DisplayObject は呼び出し元の子でなければなりません。」 とエラーとなります。 色々と調べてみたのですが、よく判判りません。 Stopボタンの記述をどの様にすればよいのでしょうか? 初歩的質問で大変恐縮ですが、どうかご教授お願い致します。 [メインスクリプト] var stageH = stage.stageHeight; var stageW = stage.stageWidth; //Stratボタン start.addEventListener(MouseEvent.MOUSE_DOWN,gene); function gene(e:Event):void { for (var i = 0; i < 20; i++) { var mc:Candy = new Candy(); mc.x = Math.random()*stageW + 10; mc.y = Math.random()*stageH + 10; addChild(mc); } } //Stopボタン stop.addEventListener(MouseEvent.MOUSE_DOWN,stp); function stp(e:Event):void { removeChild(mc); この部分がよく判らないのですが、 どの様に記述したら良いのでしょうか? } --------------------------------------- [mc のスクリプト] var mcH:int = this.height; var mcW:int = this.width; var stageH = stage.stageHeight; var stageW = stage.stageWidth; var speedY:uint = Math.random() * 5 + 5; var speedX:uint = Math.random() * 2; addEventListener(Event.ENTER_FRAME,loop); function loop(Event):void { y += speedY; x += speedX; if ( y > stageH ) { y = - mcH; } if ( x > stageW ) { x = - mcW; } } -----------------------------------------

    • ベストアンサー
    • Flash
  • ActionScript3.0について…

    ある課題で下記の条件を満たしたものを制作するというものがありまして、 制作してみたんですが、回答例と異なっていました。 私が制作したものでは、なにか間違っているのか分かりませんので質問させていただきました。よろしくお願いいたします。 ☆☆☆ 条件 ☆☆☆ ★ _mcの移動幅を5~10もしくは-10~-5の範囲になるようにします。 ★ 縦方向、横方向ともにステージの端まで移動したら反転するようにします。 ※ステージ幅は400px、高さは300pxとします。 ※条件ではありませんが、この問題を解くヒントとして、 「移動幅は2分の1の確率で-1を掛ける」と 「2分の1を表す条件式の例としては[ Math.random < 0.5 ]が考えられます。」とあります。 ☆☆☆ 回答例 ☆☆☆ var stepX:int = Math.floor(Math.random() * 6) + 5; var stepY:int = Math.floor(Math.random() * 6) + 5; if (Math.random() < 0.5){ stepX *= -1; } if (Math.random() < 0.5){ stepY *= -1; } _mc.addEventListener(Event.ENTER_FRAME, xEnterFrame); function xEnterFrame(evt) { _mc.x += stepX; _mc.y += stepY; if (_mc.x >= 400 || _mc.x <= 0){ stepX *= -1; } if (_mc.y >= 300 || _mc.y <= 0){ stepY *= -1; } } ☆☆☆ 私が書いたもの ☆☆☆ var stepX:int = Math.floor(Math.random() * 6) + 5; var stepY:int = Math.floor(Math.random() * 6) + 5; _mc.addEventListener(Event.ENTER_FRAME, xEnterFrame); function xEnterFrame(evt) { _mc.x += stepX; _mc.y += stepY; if(_mc.x > 400 || _mc.x < 0){ stepX *= -1; } if(_mc.y > 300 || _mc.y < 0){ stepY *= -1; } } あくまでもヒントでしたので、私が書く際にはヒントを見ずに書きました。

    • ベストアンサー
    • Flash
  • ASファイルからのstage

    flashcs3 actionscript3.0で作成しています。 asファイル "Test.as" package { import flash.display.DisplayObjectContainer; import flash.display.Sprite; import flash.display.Stage; import flash.display.StageDisplayState; import flash.events.*; public class Test extends Sprite { public function Test() { init(); } private function init() { for (var i:uint = 0; i<10; i++) { var sp:Sprite = new Sprite(); sp.graphics.beginFill(0x00CCFF); sp.graphics.drawRect(i*20,50,20,20); sp.graphics.endFill(); stage.addChild(sp); } } } } flash var hoge2 = new Test(); と書いてflash上のstage上にSpriteをaddChildしたいのですがstageをnullと解釈してしまいます。 この場合flash上のstageを参照するにはどうすれば良いのでしょうか?

    • ベストアンサー
    • Flash
  • javascriptによる複数の円の描画

    http://okwave.jp/qa/q8255766.htmlの質問のつづきになります。 回答いただいた以下の円を複数(3つ以上)描きたいとき、 //ここに追加 の部分に単純に たとえば ctxt.arc(150, 100, radius, 0, Math.PI*2, false); ctxt.arc(0, 0, radius, 0, Math.PI*2, false); と足しても円は綺麗にならず添付した画像のように不思議な図形になります。 すみません。回答いただけたらと思います。 何卒よろしくお願いいたします。 var canvas = document.getElementById('test'), ctxt = canvas.getContext('2d'); var rmin = 1, rmax = 25, diff = 1, radius = rmin; var r = 0, g = 255, b = 0; var dc = Math.floor(255/rmax), dr = dc, dg = -dc, db = 0; var timer = setInterval(function(){ canvas.width = 255;//canvas clear ctxt.fillStyle = 'rgb(' + r +',' + g + ',' + b + ')'; ctxt.arc(100, 80, radius, 0, Math.PI*2, false); //ここに追加 ctxt.fill(); radius += diff; if(radius >= rmax){ diff = -1; db = dc; dr = -dc; r = 255; b = 0; g = 0; } if(radius <= rmin){ diff = 0; db = 0; dr = 0; r = 0; b = 255; g = 0; } r += dr; g += dg; b += db; }, 200);

  • 画像をランダムに表示したい

    var image = new Image[2]; // おまけ画像の読み込み image[0].src = "aaaa1.jpg"; image[1].src = "bbbb2.jpg"; // プレゼント画像を描画 int r=(int)(Math.random()*2); //ランダムに表示 context.drawImage(image[r], 0, 0); これだけでは、だめなのでしょうか!?

  • Flash ActionScript 3のエラー

    下記のコードについて、エラーがわからず困っています。 上から13行目の(stage.addChild(background)に対して、 Error Message: "Cannot access a property or method of a null object reference." がでます。 この13行目までは、ちゃんと動いていたのに、これ以降コードを加えていくと、 動きません。 お分かりになる方、どうぞ教えてください。 まだ初心者(2週間)なので、初歩的な質問かもしれませんが、よろしく お願いします。 [コード] import flash.display.MovieClip; import flash.display.Stage; import flash.events.Event; public class GameEngine extends MovieClip { public function GameEngine() { super(); //create background and add to stage var background:Background = new Background(); stage.addChild(background); background.x = 500 / 2; background.y = 400 / 2; //create fly and add to stage var fly:Fly = new Fly(stage); stage.addChild(fly); fly.x = 100; fly.y = 400 / 2; //creat new enemy objects addEventListener(Event.ENTER_FRAME, createEnemy, false, 0, true); } private function createEnemy(e:Event):void{ if(Math.floor(Math.random() * 90) == 5){ var enemy:FlySwatter = new FlySwatter(stage); } } } (行はじめの } の余白が入力した通りに表示されませんので、余白は無視してください)

  • ランダムで画像を表示させるには?

    環境はFlashCS5で、アクションスクリプト3.0を使用しています。 5枚の画像(インスタンス名:mc0~mc4)をランダムで表示させるムービーを制作しているのですが、 下記のスクリプトですと、ランダムで画像が表示されるのですが、画像の切り替えがループになってしまって、次から次へとランダムで画像が切り替わります。フレーム1に下記のスクリプトを記述し、フレーム1にムービーインスタンス「mc0」から「mc4」を配置しています。 function randomShowMC():void { for (var i:int=0; i<5; i++) { this["mc" + i].visible = false; } var rnd:int = Math.floor(Math.random() * 5); this["mc" + rnd].visible = true; } randomShowMC(); var myTimer:Timer = new Timer(3000); myTimer.addEventListener(TimerEvent.TIMER ,function(){randomShowMC()}); myTimer.start(); このスクリプトを改良?改造?して、ランダムの画像が1回のみ…つまり、おみくじみたいに、(mc0~mc4の画像を)ランダムで1回のみ画像を表示させたいのです…表示後の画像が切り替わらずそのままで停止させたいのです。 又は、ムービーインスタンス「mc0」から「mc4」の画像をランダムで表示させ、最初に表示された、その画像で停止させるスクリプトを新規に記述しても構いませんので、ご指導・アドバイスをお願い致します…。 どなたか、解る方がいましたらランダム画像表示で1回表示のみのループしないスクリプトを教えてください。よろしくお願い致します…。

    • ベストアンサー
    • Flash
  • 画像リンクをランダムに4つ表示する

    このようなタグを使って、画像リンクのランダム表示を作成しました。 ((hard内)) <script type="text/javascript"><!-- // var imglist = [ [ "画像1", "", "リンク先1" ] , [ "画像2", "", "リンク先2" ] ]; function RandomImageLink() { // var selectnum = Math.floor(Math.random() * imglist.length); // var output = '<a href="' + imglist[selectnum][2] + '">' + '<img src="' + imglist[selectnum][0] + '"' + ' alt="' + imglist[selectnum][1] + '"><br>' + imglist[selectnum][1] + '</a>'; // document.write(output); } // --></script> ((body内)) <script type="text/javascript"><!-- RandomImageLink(); // --></script> こうしてランダムに表示できるようになったのですが、私は『ランダムに1つ表示』ではなく、『ランダムに4つ表示』にしたいのです。 …どうすればいいのでしょうか? どなたか回答をお願いします。

専門家に質問してみよう