「Movieクラス」の版間の差分
(ページの作成:「==Movieクラスとは?== ==Movieを移動させる== ==Movieを回転させる== ==Movieを拡大縮小させる== ==Movieを反転させる== ==Movieを半透明にす...」) |
|||
1行: | 1行: | ||
==Movieクラスとは?== | ==Movieクラスとは?== | ||
+ | MovieクラスはFlashのムービークリップに相当します。<br/> | ||
+ | javascriptを用いることでMovieクラスを制御したり情報を得たりすることができます。<br/> | ||
+ | ==Movieクラスを作る== | ||
+ | Movieクラスを作成するには主に2つの方法があります。 | ||
+ | *Flashで静的に配置する。 | ||
+ | Flashのタイムライン上にムービークリップを配置することで作成します。<br/> | ||
+ | インスタンス名を設定することでjavascriptで参照得ることもできます。<br/> | ||
+ | *javascriptを用いて動的に生成する。 | ||
+ | 下記のコードでFlashのライブラリに存在するムービークリップを動的に配置することができます。<br/> | ||
+ | 戻り値として生成されたMovieの参照を取得することができます。<br/> | ||
+ | <Movieインスタンス>.attachMovie(<リンケージ名>, <配置後のMovieの名前>, <オプション(省略可)>); | ||
+ | |||
+ | //sample | ||
+ | var movie = this.attachMovie("hoge", "piyo"); | ||
+ | 上記のthisは、フレームスクリプトが記述されているムービークリップ自身になります。<br/> | ||
+ | なので、上記の例は自身にリンケージ名"hoge"のMovieを"piyo"という名前にして配置となります。<br/> | ||
==Movieを移動させる== | ==Movieを移動させる== | ||
+ | Movieをjavascriptで移動させるサンプルです。 | ||
+ | //movieをx:100,y:100に移動させる | ||
+ | <Movieインスタンス>.x = 100; | ||
+ | <Movieインスタンス>.y = 100; | ||
+ | |||
+ | //movieをx:50,y:50に移動させる | ||
+ | <Movieインスタンス).moveTo(50,50); | ||
+ | |||
+ | //movieを現在地からx+200 y+50する | ||
+ | <Movieインスタンス>.move(200,50); | ||
+ | |||
==Movieを回転させる== | ==Movieを回転させる== | ||
+ | Movieをjavascriptで回転させるサンプルです。 | ||
+ | //movieを45度回転させる | ||
+ | <Movieインスタンス>.rotation = 45; | ||
+ | |||
+ | //movieを現在の角度から-20度回転させる | ||
+ | <Movieインスタンス>.rotate(-20); | ||
+ | |||
==Movieを拡大縮小させる== | ==Movieを拡大縮小させる== | ||
+ | Movieをjavascriptで拡縮させるサンプルです。 | ||
+ | //movieの横スケールを2倍にする | ||
+ | <Movieインスタンス>.scaleX = 2; | ||
+ | |||
+ | //movieの縦横スケールを2倍にする | ||
+ | <Movieインスタンス>.scaleTo(2,2); | ||
+ | |||
+ | //movieの現在のスケールに設定した値を加算する | ||
+ | <Movieインスタンス>.scale(0.1, 0.1); | ||
+ | |||
==Movieを反転させる== | ==Movieを反転させる== | ||
+ | Movieを反転させるにはscale値をマイナスに設定します。<br/> | ||
+ | //movieを左右反転する | ||
+ | <Movieインスタンス>.scaleX = -1; | ||
+ | //movieを上下反転する | ||
+ | <Movieインスタンス>.scaleY = -1; | ||
==Movieを半透明にする== | ==Movieを半透明にする== | ||
+ | Movieのアルファ(透明度)を設定します。0で透明 1で不透明になります。 | ||
+ | //movieを半透明にする | ||
+ | <Movieインスタンス>.alpha = 0.5; | ||
+ | 完全に非表示したい場合はalphaよりvisibleを使用してください。<br/> | ||
+ | alpha=0; は visible=false より描画負荷がかかってしまいます。<br/> | ||
==Movieを非表示にする== | ==Movieを非表示にする== | ||
+ | Movieの表示状態を設定します。 | ||
+ | //movieを非表示する | ||
+ | <Movieインスタンス>.visible = false; | ||
+ | //movieを表示する | ||
+ | <Movieインスタンス>.visible = true; | ||
==動的にMovieを生成する== | ==動的にMovieを生成する== | ||
+ | Movieにライブラリに存在するMovieを配置するサンプルです。 | ||
+ | <Movieインスタンス>.attachMovie(<リンケージ名>, <配置後のMovieの名前>, <オプション(省略可)>); | ||
+ | |||
+ | //movieを配置し参照を取得。 生成時に非表示状態を設定する。 | ||
+ | var movie = this.attachMovie("hoge", "piyo", { | ||
+ | "load":function(){ | ||
+ | this.visible = false; | ||
+ | } | ||
+ | }); | ||
+ | 第3引数のオプションは省略することもできますが、設定することで特定のタイミングで指定した関数を実行することができます。<br/> | ||
+ | {| border="1" cellpadding="3" | ||
+ | !オプション名 | ||
+ | !実行タイミング | ||
+ | |- | ||
+ | |load | ||
+ | |movieが生成されたタイミング。<br/>この時点では、まだタイムラインの制御などは行うことができません。 | ||
+ | |- | ||
+ | |postLoad | ||
+ | |movieの生成が完了したタイミング。 | ||
+ | |} | ||
==動的に生成したMovieを破棄する== | ==動的に生成したMovieを破棄する== | ||
+ | 動的に配置されたMovieを破棄するサンプルです。タイムライン上に静的に配置されたMovieには適用できません。<br/> | ||
+ | //自身を親から破棄する | ||
+ | <Movieインスタンス>.removeMovieClip(); | ||
+ | |||
+ | //子のMovieを破棄する | ||
+ | <Movieインスタンス>.detachMovie(<破棄するMovieインスタンス>); | ||
+ | 破棄したあともmovieインスタンスは残っていますが、再attachすることはできません。<br/> | ||
+ | //NG | ||
+ | var movie = this.attachMovie("hoge","piyo"); | ||
+ | movie.removeMovieClip(); | ||
+ | this.attachMovie(movie); | ||
==Movieの深度を取得する== | ==Movieの深度を取得する== | ||
==Movieの深度を変更する== | ==Movieの深度を変更する== |
2013年9月6日 (金) 02:46時点における版
Movieクラスとは?
MovieクラスはFlashのムービークリップに相当します。
javascriptを用いることでMovieクラスを制御したり情報を得たりすることができます。
Movieクラスを作る
Movieクラスを作成するには主に2つの方法があります。
- Flashで静的に配置する。
Flashのタイムライン上にムービークリップを配置することで作成します。
インスタンス名を設定することでjavascriptで参照得ることもできます。
- javascriptを用いて動的に生成する。
下記のコードでFlashのライブラリに存在するムービークリップを動的に配置することができます。
戻り値として生成されたMovieの参照を取得することができます。
<Movieインスタンス>.attachMovie(<リンケージ名>, <配置後のMovieの名前>, <オプション(省略可)>); //sample var movie = this.attachMovie("hoge", "piyo");
上記のthisは、フレームスクリプトが記述されているムービークリップ自身になります。
なので、上記の例は自身にリンケージ名"hoge"のMovieを"piyo"という名前にして配置となります。
Movieを移動させる
Movieをjavascriptで移動させるサンプルです。
//movieをx:100,y:100に移動させる <Movieインスタンス>.x = 100; <Movieインスタンス>.y = 100; //movieをx:50,y:50に移動させる <Movieインスタンス).moveTo(50,50); //movieを現在地からx+200 y+50する <Movieインスタンス>.move(200,50);
Movieを回転させる
Movieをjavascriptで回転させるサンプルです。
//movieを45度回転させる <Movieインスタンス>.rotation = 45; //movieを現在の角度から-20度回転させる <Movieインスタンス>.rotate(-20);
Movieを拡大縮小させる
Movieをjavascriptで拡縮させるサンプルです。
//movieの横スケールを2倍にする <Movieインスタンス>.scaleX = 2; //movieの縦横スケールを2倍にする <Movieインスタンス>.scaleTo(2,2); //movieの現在のスケールに設定した値を加算する <Movieインスタンス>.scale(0.1, 0.1);
Movieを反転させる
Movieを反転させるにはscale値をマイナスに設定します。
//movieを左右反転する <Movieインスタンス>.scaleX = -1; //movieを上下反転する <Movieインスタンス>.scaleY = -1;
Movieを半透明にする
Movieのアルファ(透明度)を設定します。0で透明 1で不透明になります。
//movieを半透明にする <Movieインスタンス>.alpha = 0.5;
完全に非表示したい場合はalphaよりvisibleを使用してください。
alpha=0; は visible=false より描画負荷がかかってしまいます。
Movieを非表示にする
Movieの表示状態を設定します。
//movieを非表示する <Movieインスタンス>.visible = false; //movieを表示する <Movieインスタンス>.visible = true;
動的にMovieを生成する
Movieにライブラリに存在するMovieを配置するサンプルです。
<Movieインスタンス>.attachMovie(<リンケージ名>, <配置後のMovieの名前>, <オプション(省略可)>); //movieを配置し参照を取得。 生成時に非表示状態を設定する。 var movie = this.attachMovie("hoge", "piyo", { "load":function(){ this.visible = false; } });
第3引数のオプションは省略することもできますが、設定することで特定のタイミングで指定した関数を実行することができます。
オプション名 | 実行タイミング |
---|---|
load | movieが生成されたタイミング。 この時点では、まだタイムラインの制御などは行うことができません。 |
postLoad | movieの生成が完了したタイミング。 |
動的に生成したMovieを破棄する
動的に配置されたMovieを破棄するサンプルです。タイムライン上に静的に配置されたMovieには適用できません。
//自身を親から破棄する <Movieインスタンス>.removeMovieClip(); //子のMovieを破棄する <Movieインスタンス>.detachMovie(<破棄するMovieインスタンス>);
破棄したあともmovieインスタンスは残っていますが、再attachすることはできません。
//NG var movie = this.attachMovie("hoge","piyo"); movie.removeMovieClip(); this.attachMovie(movie);