flashの書籍について

質問

最近よく見かけるflashページ
ww.azug.jp/～mayor/monkey/work_test/t647452.html
のflaデータを探してます。スクリプトを初めから書く能力はないので
アリものを加工するつもりです。ネットに落ちてれば一番いいのですが、
CD-ROM付きの書籍等を探してます。
ご存じの方お願いします。
（※上記リンクをコピペしてもリンク先に飛ばない場合はお手数ですが
アドレスの「～」部分を打ち直してみてください。）

回答No.2

noname#35109 · ベストアンサー

＃１です。

> どちらかと言うとやりたかったのは
> 「質問：画面サイズが変わると移動するスクリプト」の方でした。

onEnterFrame の方ですか。
そっちの方がスクリプトを書くのが簡単で，
なおかつ Flash らしい変てこな動きになるので，
面白いというか，少し「オッ！？」と思いますよね。

しかし，背景画像に onEnterFrame でタイミング遅れを使うと，
ウィンドウを拡大したときにどうしても 背景画像 の外が見えてしまいますよ。

onEnterFrame のですが，
「質問：画面サイズが変わると移動するスクリプト」から，
その部分を引用すると次のように書いています。

　// ☆例2：ムービークリップ「mc1」を，
　// 左上から (x,y)＝（80％,50％) に移動
　_root.mc1.onEnterFrame = function() {
　　　this._x += (Stage.width*80/100-this._x)*_root.spd;
　　　this._y += (Stage.height*50/100-this._y)*_root.spd;
　};

結局目的の位置や目的の大きさを計算で出しておいて，
オブジェクトの位置や大きさを ○分の● ずつ近づけるというしくみになっているのです。
○分の● が，２分の１＝ 1/2 であった場合

　現在位置 += (目的位置 - 現在位置)*1/2

つまり

　現在位置 = 現在位置 + (目的位置 - 現在位置)*1/2

ということで，
これを onEnterFrame で１フレーム進む時間ごとに毎回計算し直しているのです。

　↓現在位置　　　　　　　　　　↓目的位置
　●□□□□□□□□□□□×

　onEnterFrame = function() {
　　現在位置 += (目的位置 - 現在位置)*1/2
　}
　　　　　　↓↓↓　↓↓↓

　↓現在位置　　　　　　　　　　↓目的位置
　●□□□□□□□□□□□×
　□□□□□□●□□□□□×
　□□□□□□□□□●□□×
　□□□□□□□□□□　● ×
　□□□□□□□□□□□●×
　　　　…　　　　　…　　　　　…
　　　　…　　　　　…　　　　　…

という感じで，
目的位置に永遠にたどりつくことはありませんが，
とにかく ○分の● が 1/2 であると，
1/2 ずつ目的位置に近付き続ける式になります。
Flash ではよく使われる式です。

という感じに，
どうなっているのか１行１行理解して，
その断片を頭の引き出しに入れておけば，

> アリものを加工するつもりです。

ではなくて，１から自分で書けるようになります。
どんなスクリプトでも１行１行はそんなに難しい物ではないと思います。
その難しくない物を組み合わせて行くと，複雑なものができるだけです。

>> 「質問：画面サイズが変わると移動するスクリプト」の
>> 背景にウィンドウサイズに合わせて
>> 縮小拡大する画像を貼り付けたいのです。

まず，
「縮小拡大する画像」をステージに用意して，
ムービークリップに変換し（基準点は中央），
その画像入りムービークリップにインスタンス名を付けます。
この説明では 「MyImage」 というインスタンス名にしておきます。
レイヤーを１つ増やして_rootのタイムラインを次のようにする感じです。

　□　レイヤー　筆・・|○| ←スクリプト
　□　レイヤー　筆・・|●| ←「MyImage」

実験ですから，ネット上からでも何でも良いので，
適当な JPEG を用意してムービークリップ「MyImage」にしてください。

スクリプトに書く内容は，

　数々の初期値を設定
　_root.MyImage.onEnterFrame = function() {
　　　現在位置 += (目的位置 - 現在位置)*スピード
　　　現在大きさ += (目的大きさ - 現在大きさ)*スピード
　};

という形になります。
「MyImage」 だけがステージ上にあった場合について回答すると，
次のようなスクリプトになります。
_root のフレームに書くスクリプトです（コピペ可能）。

---------------------------------
// ステージ上のオブジェクトの拡大縮小なし
Stage.scaleMode = "noscale";
// ムービーを左上を基準に配置
Stage.align = "TL";

// 動くスピードの設定（★可変）
var spd = 1/4;

// 変数 MyImgW，MyImgH に MyImage の初期サイズを記録
var MyImgW = _root.MyImage._width;
var MyImgH = _root.MyImage._height;

// １フレーム進む時間ごとに毎回実行
_root.MyImage.onEnterFrame = function() {

// MyImage の大きさに関するスクリプト
// もしステージの形が MyImage より横長であれば
if ((Stage.width/_root.MyImgW)>(Stage.height/_root.MyImgH)) {
// 変数 myscale をステージ幅の比で決定
var myscale = Stage.width/_root.MyImgW;
// もしステージの形が MyImage より縦長であれば
} else {
// 変数 myscale をステージの高さの比で決定
var myscale = Stage.height/_root.MyImgH;
}

// MyMovie の位置を移動させる
this._x += (Stage.width/2-this._x)*_root.spd;
this._y += (Stage.height/2-this._y)*_root.spd;
// MyMovie の大きさを変化させる
this._xscale += (myscale*100-this._xscale)*_root.spd;
this._yscale += (myscale*100-this._yscale)*_root.spd;

};
---------------------------------

これでムービープレビューしてもらうとわかると思いますが，
最初に書いたように，やっぱり 「MyImage」の外が見えてしまいます。
「MyMovie の位置を移動させる」 はそのままで，
「MyMovie の大きさを変化させる」 を瞬時にさせる場合は，
次↓のように最後のスクリプト２行を変更すれば良いです。

---------------------------------
// MyMovie の大きさを変化させる
this._xscale += (myscale*100-this._xscale)*_root.spd;
this._yscale += (myscale*100-this._yscale)*_root.spd;

};
---------------------------------
　　　　↓↓↓ 変更　↓↓↓
---------------------------------
// MyMovie の大きさを指定
this._xscale = myscale*100;
this._yscale = myscale*100;
};
---------------------------------

しかし，やっぱり MyMovie の外が見えます。
大きさはサッと瞬時に変化するのですが，
座標移動の方が遅いので，結局 MyMovie の外が見えてしまいます。

ですから，
背景だけは ＃１ で回答したように，
　Listener.onResize = function() {}
を使って，
その上に浮いているものだけに
　MovieClip.onEnterFrame = function() {}
を使って移動させる方が良いと思います。

と言う具合にして，
色んなスクリプトを組み合わせて行くと，
だんだん複雑なものになっていくのです。

しかし，
こういう動かし方に慣れていると，
スクリプトを書く前のイメージの段階で，
onEnterFrame を使うと MyMovie の外が見えるとか見えないとかがわかるのですが，
慣れていない場合は，実際にやってみないとわかりませんよね。
というわけで，
どうなるかは想像出来ていましたが，一応スクリプトを書いてみました。

お礼

お返事さらに遅くなって申しわけございません。
できました。
本当にありがとうございました。

補足

返事遅くなって申しわけございません。
さっそくやってみます。
> アリものを加工
お叱りのお言葉もっともです。
あまりに感動したのでプロフィールをちょこっと見てみました。
先生と呼ばせて下さい。

回答No.1

noname#35109

おや？
今朝は，「t647452.html」を見ることができましたが，
今は見ることができません。不思議。
朝は忙しくて即答できるようなご質問ではなかったので，
「t647452.swf」とご質問の文章を保存して，夕方には回答しようと，
その保存した「t647452.swf」とご質問の文章を見ながら以下の回答を書きました。
だから回答が書けました。
以上は単なる前置きです。以下，超長文です。

～　～　～　～　～　～　～　～　～

そもそも flaデータ や，
CD-ROM付きの書籍などはあるのでしょうか？
私は知りません。
でも，作り方ならわかります。
書籍ほど図説もできませんが，一応説明します。

まず，その Flash ですが，
CD-ROM が仮にあったとしたら，
おそらく，Macromedia（Adobe）Flash MX 2004 用の FLA ファイルが付いてくると思います。
もしFlash MX 2004 以上をお持ちでなければ開くこともできません。
しかし，スクリプト自体は Flash MX 以上があれば大丈夫です。

この説明では基本的に Flash MX 以上をお持ちであるということを前提に回答します。
Flash MX 以上（Flash MX，Flash MX 2004 ，Flash 8）をお持ちでなければ作れません。

////////////////////////////////////////////////////////////////

書かれている Flash は
「ネコや背景のピントがだんだん合うアニメーション」
の部分と，
「各ムービークリップが一定の場所に表示されるActionScript」
の部分に分けられると思います。

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

まず，
「ネコや背景のピントがだんだん合うアニメーション」ですが，
これには ActionScript は必要ありません。
単なるモーショントゥイーンです。
唯一，トゥイーンし終わったフレームに
stop();　というActionScriptが要るくらいです。

だんだんピントが合うアニメーションは，
Flash MX 2004 以下，および Flash Basic 8 では，
Photoshop など写真編集ソフトで
「ピントが合った画像」と「ピントのぼけた画像」の２枚を
あらかじめ用意しておきます。
「ピントが合った画像」は Flash でも作れますから，
もしFlashで作った場合は，その画像をBMPなどで書き出します。
そして，そのBMPなどに Photoshop など写真編集ソフトなどでぼかしをかけます。

ちまみに書かれている「ネコや背景」の画像は Photoshop ではなく，
おそらく Illustrator で原画を作って，
ぼかしていないJPEGと，ぼかしたJPEGを書き出したものだと思います。
どうも Illustrator の臭いがします。

そして，「ピントが合った画像」を
「ファイル」→「読み込み」からFlashに読み込みます。

その「ピントが合った画像」をムービークリップに変換するのですが，
後のスクリプトのために基準点は中央にしてムービークリップに変換してください。
「シンボルに変換ダイアログ」を図示すると次のような感じです。
変形していたらすみません。

-----------------------------------------
名前(N)：[ 任意の名前　　　　　　　　　]
タイプ(T)： ◎ ムービークリップ　基準点（R）：□□□
　　　　　　○ ボタン　　　　　　　　　　　　　　　 □■□
　　　　　　○ グラフィック　　　　　　　　　　　　 □□□
-----------------------------------------

これで「OK」をクリックし，
次にこの「ピントが合った画像ムービークリップ」をダブルクリックして，
ムービークリップ内の編集に入ります。

ムービークリップ内は１レイヤー１フレームだけで，
そのフレームに「ピントが合った画像」が入っているはずですから，
レイヤーの挿入で，これを３レイヤーにし，フレームも30ほどにしておきます。
そして「ピントが合った画像」のレイヤーを一番下のレイヤーにしておきます。

　　　　　　　　　　　　　１　　　　　　　30
　□　レイヤー　筆・・|○　　　　　　[]|
　□　レイヤー　筆・・|○　　　　　　[]|
　□　レイヤー　筆・・|●////////[]|

「ピントが合った画像」のレイヤーの上のレイヤーのフレーム1を選択して，
今度はそこに，「ピントのぼけた画像」を読み込みます。
違うレイヤーに画像が２枚重なるわけですが，
２枚の画像の座標はきっちり合わせておいてください。

そして上に表示されているはずの「ピントのぼけた画像」を選択して，
グラフィックシンボルに変換します。
そして，
「ピントのぼけた画像グラフィック」のレイヤーの
最終フレームをキーフレームにして，
その最終フレームの「ピントのぼけた画像グラフィック」を選択し，
下のプロパティインスペクタでアルファを0にします。
つまり透明で見えなくするのです。
そして，そのレイヤーのフレーム1を選択して，
下のプロパティインスペクタで，
モーショントゥイーンをかけます。

このムービークリップ内の一番上のレイヤーが残っていますが，
この一番上のレイヤーの最終フレームをキーフレームにして，

stop();

と書きます。
これで，このムービークリップ内のタイムラインはループ再生しません。

　　　　　　　　　　　　　１　　　　　　　30
　□　レイヤー　筆・・|○　　　　　 []|○| ←スクリプト
　□　レイヤー　筆・・|●------>[]|●| ←ピンボケ
　□　レイヤー　筆・・|●///////// []| ←ピントの合った画像

この状態でムービープレビューしてもらうと，
ピントがだんだん合うアニメーションができていることがわかると思います。

書かれている Flash のファイル容量は 261KB もありますが，
この容量の大半（98％くらい）はFlashの重さではなく２枚の画像の重さです。

最初に，
Flash MX 2004 以下，および Flash Basic 8 では…
と書きましたが
Flash Professional 8 では，上記のようなことは普通しません。
こういう方法でします↓。ブラー（ぼかし）です。

ぼかすアニメーション　FLASHRAVE - FLASH 講座 -
http://flashrave.org/anima/shade/index.html

Flash MX 2004 以下の方法でも，
Flash Professional 8 の方法でも，
どっちにしても ActionScript は特に要りません。
Flash Professional 8 の方法だと作るのも簡単で，かつ，ファイルが軽くできます。

「ネコや背景」の画像くらいのものであれば Flash でも簡単に描けますから
絵もFlashで描いてしまえば，261KB の10分の１の25KBくらいで十分できると思います。

さらに余談ですが，Flash Professsional 8 で，
「ネコ」と「背景」を別のムービークリップ内に作って，

　「背景」ピントがあった状態→→→ピンボケ
　「ネコ」ピンボケ→→→ピントがあった状態

というモーショントゥイーンを作ると，
「最初は遠景の『背景』にピントが合っていて，だんだん近景の『ネコ』にピントが合う」
というような奥行き感ある作品が簡単に作れます。

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

次に，
「各ムービークリップが一定の場所に表示されるActionScript」です。

これはムービークリップ内ではなく，
ドキュメントの編集で _root（メインムービー）の編集に戻ります。

実は，似た質問が何度かあって，
それに回答したことがあります↓。

「質問：パーセントで配置したフラッシュについて」
http://oshiete1.goo.ne.jp/kotaeru.php3?q=1838609
　↑教えて！goo　↓OKWave　（同じです）
http://okwave.jp/kotaeru.php3?q=1838609

「質問：画面サイズが変わると移動するスクリプト」
http://oshiete1.goo.ne.jp/kotaeru.php3?q=2326170
　↑教えて！goo　↓OKWave　（同じです）
http://okwave.jp/kotaeru.php3?q=2326170

何かの参考にでもしてください。
今回は，今回で，説明し直します。

_root（メインムービー）の編集に戻ると，
_root のタイムラインは １レイヤー１フレームだと思います。
これを３レイヤーにします。

　□　レイヤー　筆・・|○|
　□　レイヤー　筆・・|○|
　□　レイヤー　筆・・|●| ←ピントがだんだん合うムービークリップ

そしてステージ上の「ピントがだんだん合うムービークリップ」を選択して，
下のプロパティインスペクタでインスタンス名を付けます。
この説明では 「MyMovie」 というインスタンス名を付けておきます。

あと，
「TopLeft」，「TopRight」，「BottomRight」というインスタンス名のムービークリップを
下から２番目のレイヤーのステージ上に作成します。
そのレイヤーであればステージ上のどこに置いてもかまいません。
スクリプトで配置します。
ただし，これらのムービークリップを作るとき，基準点は，「MyMovie」と同じく中央にしてください。

　□　レイヤー　筆・・|○| ←スクリプト
　□　レイヤー　筆・・|●| ←その他３つのムービークリップ
　□　レイヤー　筆・・|●| ←ピントがだんだん合うムービークリップ

結局，ActionScript では，
ステージの大きさが変わっても，
中身のムービークリップなどの大きさは変化させず，
それら４つのムービークリップの座標を，
ステージの大きさが変わる度に再指定してやれば良いのです。
あと， ステージがどんな大きさや形になっても，
「MyMovie」 の外を見せない工夫です。

それぞれのムービークリップの座標は，
ステージ上のオブジェクトに書いてあるとおり，

～～～～～～～～～～～～～～～～～～
TopLeft
x=60，y=0

TopRight
x=Stage.width-60，y=50

BottomRight
x=Stage.width-90，y=Stage.height

MyMovie（書いてませんがステージ中央です）
x=Stage.width/2，y=Stage.height/2

※Stage.width：ステージの幅
　 Stage.height：ステージの高さ
～～～～～～～～～～～～～～～～～～

です。

「MyMovie」，「TopLeft」，「TopRight」，「BottomRight」というインスタンス名の
４つのムービークリップができましたら，
_root のタイムラインの一番上のレイヤーに次のように書けば完成です。
点線---内のコピペも可能です。

----------------------------------------
// ムービーの拡大・縮小をなしにする
Stage.scaleMode = "noScale";
// ムービーを左上を基準に固定する
Stage.align = "TL";

// 変数 MyMovW，MyMovH に MyMovie の初期サイズを記録
var MyMovW = _root.MyMovie._width;
var MyMovH = _root.MyMovie._height;

// 各ムービークリップの座標や大きさを指定するユーザ定義関数
// designCoordinatesの定義
function designCoordinates() {

// 各ムービークリップの座標を指定
_root.TopLeft._x = 60;
_root.TopLeft._y = 0;
_root.TopRight._x = Stage.width-90;
_root.TopRight._y = 50;
_root.BottomRight._x = Stage.width-60;
_root.BottomRight._y = Stage.height;
_root.MyMovie._x = Stage.width/2;
_root.MyMovie._y = Stage.height/2;

// MyMovie の大きさに関するスクリプト
// もしステージの形が MyMovie より横長であれば
if ((Stage.width/MyMovW)>(Stage.height/MyMovH)) {
// 変数 myscale をステージ幅の比で決定
var myscale = Stage.width/MyMovW;
// もしステージの形が MyMovie より縦長であれば
} else {
// 変数 myscale をステージの高さの比で決定
var myscale = Stage.height/MyMovH;
}

// MyMovie の大きさを指定
_root.MyMovie._xscale = myscale*100;
_root.MyMovie._yscale = myscale*100;

}

// ユーザ定義関数 designCoordinates の実行
designCoordinates();

// リスナーオブジェクトの作成
myListener = new Object();

// リスナーオブジェクト.onResize 関数の定義
myListener.onResize = function() {
// ユーザ定義関数 designCoordinates の実行
designCoordinates();
};

// myListener を Stage.addListener に登録
Stage.addListener(myListener);
----------------------------------------

長くてわかりにくいかもしれませんが，
結局，文全体は

--------------------------------
// ムービーの拡大・縮小をなしにする
Stage.scaleMode = "noScale";
// ムービーを左上を基準に固定する
Stage.align = "TL";

function 任意の関数名() {
//←ココに何かすることを書く
}

// 任意の関数の実行
任意の関数名();

// リスナーオブジェクトの作成
任意のリスナー名 = new Object();

// リスナーオブジェクト.onResize 関数の定義
任意のリスナー名.onResize = function() {
// 任意の関数の実行
任意の関数名();
};

// 任意のリスナー を Stage.addListener に登録
Stage.addListener(任意のリスナー名);
--------------------------------

という構造になっています。
function 任意の関数名()
は特に定義しなくてもいいのですが，
定義しないと同じ事を２回も書かないとならないため，
各ムービークリップの配置をする関数を作りました。

あと SWF とともに HTML をパブリッシュする場合は，
パブリッシュ設定で「HTML」タブを選択して，
「サイズ」を「パーセント」にして，
100×100パーセントなどでパブリッシュしてください。
そうでないとせっかく書いたスクリプトの意味がなくなります。
Flash の話ではなく HTML の話ですが，
Flash の周りに余白ができるのがダメでしたら，
<body>タグを
<body bgcolor="#ffffff">
　　↓変更↓
<body bgcolor="#ffffff" topmargin="0" leftmargin="0"rightmargin="0">
のようにしてください。マージンが 0 になります。

長くなった上，書籍のようにうまくは説明できませんでしたが，
以上です。

Flashゲーム講座＆ASサンプル集
【表示に関する情報について】
http://hakuhin.hp.infoseek.co.jp/main/as/stage.html

「Stage.onResizeリスナーイベント」
http://www.fumiononaka.com/TechNotes/Flash/FN0307003.html

お礼

本当にありがとうございました。
できました。
リンク先の分も参考になりました。どちらかと言うとやりたかったのは
「質問：画面サイズが変わると移動するスクリプト」の方でした。
すみません。
それであつかましいのですが、もう少し質問させて下さい。
「質問：画面サイズが変わると移動するスクリプト」の背景にウィンドウサイズに合わせて
縮小拡大する画像を貼り付けたいのです。
自分なりにいろいろ試してみたのですがダメでした。
教えて下さい。お願いします。

補足

すごい！！長い！！
ありがとうございます。
さっそくチャレンジしてみます。
分からなくなったらまた質問させてもらうかもしれません。