flashでインスタンスを斜めに回転させたいときはどうすればよろしいでしょうか？？

質問

始めまして。
flashは始めたばかりなのですが。
インスタンスを斜めに回転させるやり方がわかりません。

縦や横なら　_xscale　などを使って出来るのですが、
どうにもこうにも斜めに動かせません。

分かり難いかもしれないのですが、下記のサイトの
ボタンの上にマウスが乗ったときの動きをしたいです。
http://www.sony.jp/cyber-shot/madewith/

説明がへたくそで申し訳ないのですが、どうか教えてください。
宜しくお願いします。

回答No.2

DPE · ベストアンサー

ボタンにマウスカーソルが重なった時のエフェクト程度でよければ、難しい計算をしなくても、シェイプトゥイーンで手軽に作れますよ。

次のように考えます。
ひし形から長方形に変化するシェイプトゥイーンのムービークリップを作ります。
このムービークリップをボタンに重ねて配置し、最初は非表示にしておきます。
ボタンにマウスカーソルが重なった時にエフェクトのムービークリップを表示し、ムービークリップのフレーム１から再生します。
マウスカーソルが外れた時はエフェクトのムービークリップを非表示にするのですが、いきなり消えてしまうと不自然ですから、ご提示のサイトの作品のようにフェードアウトで徐々に消していくのが簡単にできる演出だと思います。

----------------------------------------------------

作り方の一例です。
お使いの Flash のバージョンが分かりませんが、とりあえず MX ～ CS3 まで、Flash Player 6 以降・ ActionScript は 1.0 で考えます。
ここでは１から全てを説明できません。描画ツールの使い方・基本的な用語・トゥイーンの作り方等は解説書や解説サイト等をご参考になさってください。

まず、エフェクトのムービークリップを作ります。
「挿入」メニュー→「新規シンボル」で、”ムービークリップ”を選びます。
ムービークリップシンボルの編集画面になったら、長方形を１つ、描画します。
適当な長さのフレーム数を空けて、タイムラインにキーフレームを１つ作ります。フレームの数は演出の長さや作品のフレームレート等に応じて加減してください。あまりダラダラ長くしない方が演出のキレがよく、粗も目立ちにくくなります。
最初のキーフレームを選択し、「シェイプトゥイーン」を設定します。設定は「プロパティ」パネルの”トゥイーン”のリストの中にあります。
イージングを設定しても面白いかもしれません。イージングは”アウト”（最初は速く、徐々にゆっくりになる変化）がオススメです。

これだけでは最初と最後が全く同じ形で何も変化しませんので、最初のキーフレームの長方形を「歪曲」の変形ツールでひし形に変形します。「歪曲」変形は、ツールボックスで「自由変形」を選択した時のオプションから選ぶか、長方形を選択している状態で「修正」メニュー→「変形」を選ぶとその中にあります。
ボックスの四隅のハンドルを内側に向かってドラッグすると、角が内側に寄っていきます。右上と左下のハンドルをドラッグして、あまり不格好にならない程度にひし形になるように変形してください。厳密にひし形にならなくても、大体で構いません。
変形ができたら、タイムラインの再生ヘッドをドラッグして、大体のアニメの出来具合を確認してみてください。ひし形が長方形に変わるアニメになっていれば成功です。
ご提示のサイトの作品では、エフェクトが薄表示になっています。これは、最初のひし形と最後の長方形の塗りの色にアルファを設定しておくと簡単です。ひし形と長方形でアルファの数値を変えると、徐々に濃くなるアニメも同時に付けることができます。

レイヤーを１つ追加して、最後の長方形が表示されているフレームにキーフレームを作り、stop(); アクションを記述します。
これで、エフェクトのムービークリップは完成です。

**********************************

次に、ボタンのムービークリップを作ります。
いろいろな作り方がありますが、ボタンとエフェクトのムービークリップを１つのムービークリップにまとめておくと、後でボタンの位置や大きさを変えたくなった時にも一緒に変更できて便利です。

別のムービークリップシンボルを、もう１つ作ります。
何か適当な絵を描き、この演出を施したい部分に先ほど作ったムービークリップを配置してください。
エフェクトのムービークリップにインスタンス名を付けます。ここでは仮に”eff_clip”とします。

ボタンのムービークリップをステージに配置し、こちらにもインスタンス名を付けます。仮に”btn_clip”とします。

以上で準備は完了です。
次はスクリプトを書きます。

**********************************

スクリプトはメインのタイムラインのフレーム１に記述します。
スクリプト専用のレイヤーを作っておくと便利です。

（↓各行頭に全角のスペースが入っています。コピーする際は、全て半角のスペースかタブに置き換えてください）

/****************************************************/

　//最初はエフェクトを非表示にしておく
　btn_clip.eff_clip._visible = false;

　//エフェクトをフェードアウトさせる関数
　function Effect_FadeOut()
　{
　　//アルファを下げる
　　//※速度は適宜変更してください
　　this._alpha -= 10;

　　//完全に透明になったら、非表示にして終了
　　if( this._alpha <= 0 )
　　{
　　　this._visible = false;
　　　this.onEnterFrame = undefined;
　　}
　}

　//マウスカーソルが重なった時の処理
　btn_clip.onRollOver = function()
　{
　　//エフェクトを表示し、アルファを戻す
　　this.eff_clip._visible = true;
　　this.eff_clip._alpha = 100;

　　//フェードアウトの演出を削除する
　　this.eff_clip.onEnterFrame = undefined;

　　//エフェクトを再生
　　this.eff_clip.gotoAndPlay( 1 );
　};

　//マウスカーソルが外れた時の処理
　btn_clip.onRollOut = function()
　{
　　//エフェクトをフェードアウトさせる
　　this.eff_clip.onEnterFrame = Effect_FadeOut;
　};

/****************************************************/

「ムービープレビュー」で動作を確認してみてください。
エフェクトのアニメがおかしい場合はエフェクトのムービークリップシンボル（特にシェイプトゥイーンの設定など）を、マウスを操作しても何も起こらない場合はインスタンス名の誤りなどがないかを確認してみてください。

今回はスクリプトについては詳しくは触れませんが、要するに何をしているかといいますと、

　・普段はエフェクトを非表示にしておく。
　・ボタンにカーソルが重なった時、エフェクトを表示して、エフェクトのフレーム１から再生する。
　　エフェクトは最後のフレームで止まるようになっているので、アニメが終わったら、
　　カーソルが重なっている間は長方形がずっと表示される仕組み。
　・カーソルが外れた時は、エフェクトをフェードアウトで徐々に消し、最後は非表示にする。

といった処理を行っています。
ボタンのムービークリップの構成が異なる場合は、ターゲットパスの誤りにご注意ください。

当方は Flash CS4 を持っていないので、詳しくは分からないのですが。
CS4 ではトゥイーンの扱いがこれまでと大きく異なり、従来のいわゆるモーショントゥイーンやシェイプトゥイーンは”クラシックトゥイーン”というカテゴリーに移動してしたそうです。
３Ｄ回転のトゥイーンもできるようなので、そちらを使うと正確な回転エフェクトが簡単に作れるかもしれませんね。

いずれにしても、こうしたエフェクトのアニメをムービークリップとして用意しておけば、あとはフレームの操作などの基本的なスクリプトだけで制御できます。ボタンの大きさが違う場合も、ムービークリップを伸縮させるだけで簡単に合わせることができます。
その他の様々なエフェクトも、同様にムービークリップのタイムラインを利用して用意すると便利です。機会がありましたら、ユニークなエフェクトを作ってみてください。

お礼

有難う御座います(=^▽^=)

教えて頂きました内容でバッチリ動きました。

動きから、スクリプトまで一連の流れを細かく
書いて頂いたので、すごく分かりやすかったです。
本当に有難う御座います。

まだまだ初心者なのですが、がんばっていきます。

回答No.1

H240S18B73

対角線で疑似3D的に
回転したいってことですか？

ちょっと難しいですよ

var W=stage.stageWidth
var H=stage.stageHeight

//回転するSprite
var spr=addChild(new Sprite()) as Sprite

//ここは顔かいてるだけ
with(spr.graphics){
beginFill(0x55AA55)
drawRect(20,20,W-40,H-40)
endFill()
beginFill(0)
drawEllipse(100,100,100,100)
endFill()
beginFill(0)
drawEllipse(350,100,100,100)
endFill()
beginFill(0)
drawRect(100,280,350,30)
endFill()
}

//この関数でsprのマトリックスをいじって斜め回転を表現
function setRad(rad){
var mtr=new Matrix()
var D=W*H*(H/W)/(W+H*(H/W))*(1-Math.cos(rad))
with(mtr){
a=(W-D)/W
b=D*(W/H)/W
c=D/H
d=(H-D*(W/H))/H
}
spr.transform.matrix=mtr
}

//いざ動かしてみる
addEventListener(Event.ENTER_FRAME,frameTick)
function frameTick(e){
setRad(getTimer()/50*Math.PI/180)
}

お礼

わざわざ画像まで付けて頂きまして本当に有難う御座います。
今日の朝からがんばっているんですが、まだ時間がかかりそうです。
ほんとへたれでスイマセン。

動くまでがんばってみます^^