- 締切済み
Flash・AS3・曲線が伸びていくアニメ作成法
FlashCS4で、曲線が徐々に伸びていくアニメの作成法が知りたいです。 (植物がニョロニョロ伸びていくようなイメージです) 教えてgoo内で「消しこみ」という方法を知ったのですが、これ以外の方法を探しています。 とりあえずモーショントゥイーンで、「線を上に伸ばす」アニメを作って、伸びていく上部分のパスをまげて曲線にしようとしたのですが、モーショントゥイーンでは「上だけ伸ばす」という動きが出来ませんでした。(上下に拡大されてしまいました) シェイプトゥイーンでは伸ばすことは出来たのですが、パスを曲げることができませんでした。 そこで質問なのですが、これをAS3で再現しようとした場合どのような方法になるのでしょうか? AS3も入門程度の知識で申し訳ないのですが、感覚的には「短い直線を何個も繋げる」という方法で合っていますか?(lineTo?) でも上記の方法だと、線が引かれている過程がありません。 どうすればいいのでしょうか…。
- みんなの回答 (1)
- 専門家の回答
みんなの回答
- BlurFiltan
- ベストアンサー率91% (1611/1754)
CS4 だと書かれていらしゃるそのまんまの アレ があるじゃないですか。 あのすごく笑える機能。 [描画エフェクト] の [つる模様]! 私は面白くて2時間ぐらいこれで遊んでましたよ。 [選択ツール(矢印)] や [バケツツール] などが並んだ [ツール] パネルの中に [パターン描画ツール] という,鉛筆にストラップが付いたようなボタンがありますから, それをクリックした状態で [プロパティインスペクタ] より [▽描画エフェクト] の欄で [つる模様 |▼] を選択して, ステージ上 を チョン とクリックすれば, つるが伸びる伸びるぅ ~~w~.,.,W~w~~~~~ww.~~,.,w~。 [詳細オプション] の欄で [□ パターンをアニメーション化] にチェックを入れておけば, その様子が各フレームに自動描画されてつる模様が伸びるアニメーションも作成できます(↓図)。 その他,各色々な設定すると,つるの伸び方や色や葉や花もカスタマイズできますよ。 つる模様を発生させる同じレイヤーにあらかじめ障害物を描いておくと, その障害物を避けるようにつるが伸びます。 もし, この [描画エフェクト] の [つる模様] をしたことがなければ是非やってみてください。 この機能,いったい何に使えるのだかよくわかりませんが, 私は面白くて笑ってしまいました。 Flash の機能で「笑えた」のは初めてかもしれません。 (その他,ボーンツールも笑えます。こちらは発展性がかなりありそうです。) ========================= > これをAS3で再現しようとした場合どのような方法になるのでしょうか? > 感覚的には「短い直線を何個も繋げる」という方法で合っていますか?(lineTo?) > でも上記の方法だと、線が引かれている過程がありません。 lineTo でできると思いますよ。 「線が引かれている過程がない」という意味が今ひとつわかりませんが, 1フレーム進む時間毎にちょっとずつ lineTo すれば良いと思います。 ただし, その線の方程式もしくは座標データなどははどうするのかは知りませんが。 すっごい適当に作ってみた例↓(メインタイムラインのフレーム1に記入) ---------------------------------------- // 線を伸ばすスタート地点を設定 var startX:Number=0; var startY:Number=stage.stageHeight/2; // 線のスタイルを設定 this.graphics.lineStyle(1, 0x000000); // 線の描画開始 this.graphics.moveTo(startX, startY); // ENTER_FRAME イベントリスナーを登録(growLineを実行) this.addEventListener(Event.ENTER_FRAME,growLine); // 変数 i の初期化 var i:int=0; // ユーザ定義関数 growLine を定義 function growLine(evt:Event):void { i+=2; if (i<=Math.floor(stage.stageWidth/2)) { this.graphics.lineTo(startX+i, startY+100*Math.sin(i*Math.PI/50)); } else if (i<=Math.floor(stage.stageWidth)) { this.graphics.lineTo(startX+i, startY+Math.random()*50); } else { this.removeEventListener(Event.ENTER_FRAME, growLine); } } ---------------------------------------- 上のスクリプトをフレームにコピペして, 即「制御」→「ムービープレビュー」で見ることができると思います。 ========================= あと, モーションガイド 付 クラシックトゥイーン でムービークリップを動かして, そのムービークリップの座標に Event.ENTER_FRAME で moveTo() lineTo() しても良いですね。 当然, モーショントゥイーン(CS4からの新モーショントゥイーン)でムービークリップを動かして, そのムービークリップの座標に同じく Event.ENTER_FRAME で moveTo() lineTo() しても良いと思いますが。 これらの方法だと,難しい方程式や面倒な座標データなどを用意せずに済みます。 しかし,複数の線が込み入るとこれでも難しいかも...ですが。