スライドバーを用いて画面の拡大/縮小

Loaderに表示した画像の拡大/縮小を
スライドバー（MediaControllerの音量ボリューム操作のようなもの）
で行いたいのですが、そのようなコンポーネントはないのでしょうか？
ない場合、実現するにはどのようにすればよいか教えてください。

No.1 回答者： sassakun 回答日時： 2006/08/02 19:02

Flash の コンポーネントはバージョンによって著しく違います。

普通のご質問の場合もそうですが，
コンポーネントに関するご質問の場合は，
お使いのバージョンを書かれた方が良いです。


しかし，
Loaderに表示した画像の拡大/縮小させるようなコンポーネントは私は知りません。
ひょっとしてあるのかもしれませんが，
私はコンポーネント嫌いなのもので，あっても知りません。
いつもは，なるべくしくみを自作で作ります。
自分で作ったものでないとカスタマイズが好きなようにできませんから。


Loader と書かれているところから考えると，
外部JPEGを読み込むのでしょうか？
コンポーネントは本来外部ファイルを読み込むためものではないので，
その辺もよくわかりませんが，
勝手に外部JPEGを読み込むものとして，
その作り方の一例を書きます。
作り方やスクリプトは作るたびに考えるので，いつも違います。
一例だと思ってください。


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


◎ まず読み込む場所（ムービークリップ）の準備

「挿入」メニューから「新規シンボル」を選択して，空のムービークリップを 作成すします。
するとなぜか，空のムービークリップ内のタイムラインの編集に自動的に入ってしまいます。
空のムービークリップ内はさわる必要はないので，
「編集」→「ドキュメントの編集」で，メインムービーの編集に戻ります。

そして，「ライブラリウインドウ」 から今作成した空のムービークリップをドラッグして，ステージの上に置きます。
ステージの中央くらいが良いのではないでしょうか。

そのステージ上のムービークリップにインスタンス名を付けます。
この説明では，「ko_img」 というインスタンス名にしておきます。
その「ko_img」 を選択して，下のアクションパネルに次のように書きます。

-------------------------------------
// ムービークリップがロードされたとき
onClipEvent (load) {
// 座標の初期化
this._x = 0;
this._y = 0;
// 幅や高さの半分だけ左上に移動
this._x -= this._width/2;
this._y -= this._height/2;
}
-------------------------------------


この「ko_img」 を選択して，
右クリック→「シンボルに変換」より，さらにムービークリップに変換します。
ムービークリップを２重に入れ子状態にするのです。
そして，新しくできたこのムービークリップにもインスタンス名を付けます。
ここでは，「oya_img」というインスタンス名にしておきます。
親の中に子がいる状態で，子にスクリプトが書いてある状態です。



◎ 次にスライドバー（ムービークリップ）の準備

一応勝手に，横スライドするバーの例です。

高さ10～20px，幅50～100px くらいの塗りの長方形をステージ上に描きます。
ステージ真ん中の下の方が良いと思います。
もしくは，ステージ真ん中の上の方です。
その長方形を選択して，右クリック→「シンボルに変換」でムービークリップにします。
その長方形ムービークリップに次のようなスクリプトを書いてパブリッシュすれば，
一応しくみは完成です。


-----------------------------------------------
// このバーMCが表示されたとき
onClipEvent (load) {
// ムービークリップko_img にJPEGをロード(★可変)
_parent.oya_img.ko_img.loadMovie("image1.jpg");
// このバーの動く幅の設定(★可変)
var scroll_w = 120;
// 拡大・縮小率の設定(★可変)
var mag = 1.5;
// このバーの初期位置を記録
var bar_x = this._x;
var bar_y = this._y;
}

on (press) {
// バーをドラッグで左右にスライドさせる
this.startDrag(false, bar_x-scroll_w, bar_y, bar_x+scroll_w, bar_y);
}

on (release) {
// ドラッグを停止
this.stopDrag();
}

onClipEvent (mouseMove) {
// バーの位置に従って ムービークリップimg を拡大縮小
var scale = (this._x-bar_x)*(mag-1)/scroll_w*100+100;
_parent.oya_img._xscale = _parent.oya_img._yscale=scale;
// 表示を更新
updateAfterEvent();
}
-----------------------------------------------


(★可変) と書いてある３箇所だけを変えるだけで良いです。
また，
ターゲットパスにはあえて全て相対パスを使っていますから，
空の 「oya_img と ko_img」 と バーのムービークリップを１つのムービークリップにさらに変換しても大丈夫です。
そうすると，コンポーネントのようにセットで持ち運び（別のファイルで使い回し）もできます。


どうやって，外部ファイルをロードするのかわからなかったので，
勝手にバーに「image1.jpg」をロードするように書きました。
外部にボタンを作って，
そのボタンにロードするスクリプトを書いても良いと思います。


---例------------------------------------
on (release) {
// ko_img に 「img2.jpg」をロード
_root.oya_img.ko_img.loadMovie("img2.jpg");
}
-----------------------------------------


読み込む 「oya_img と ko_img」を入れ子状にしたのは，
JPEG を拡大するポイントを読み込まれたJPEGの中心にしたかったからです。
こうすると， 「oya_img」の基準点が JPEG の中心に来ます。
拡大・縮小・回転などの基準は，ムービークリップの基準点が中心になるためです。

そんな必要がなければ，
「oya_img と ko_img」のように入れ子にせず，
「oya_img」だけにして，その「oya_img」にJPEGをロードしても良いです。
その場合，「oya_img」にはスクリプトを書く必要もありません。
バーだけのスクリプトになります。


読み込む 「oya_img と ko_img」や，バーの位置を色々変えてもらうとわかると思いますが，
もし既存のコンポーネントにこのようなものがあったとしても，
読み込む座標どこに持っていくとか，
拡大の中心座標をどこに持っていくとか，
そこまで色々自由にできないと思います。
それに，バーの色や形も自由です。
何でしたら，ドラえもんの形のスライドバーでも良いわけです。

既存のコンポーネントを使うとそれ独自のパラメータなどの書き方も，調べる必要が出てきて面倒です。
これくらいなら，
しくみを自作する方が良いとは思います。
だいたい以上です。



ここまで書いて気付きました。
最後になりましたが，コンポーネントという言葉をお使いのところから考えて，
Flash MX 以上をお使いだと推測しました。
上記バーなどのスクリプトは，
Flash MX 以上，Flash Player 6 以上で使用できます。

と言っても，
on (press) {} など，onイベントハンドラが Flash 5 ではムービークリップに使えないだけのことで，
そこを変えれば内容自体は，Flash 5 でも通じます。

この回答へのお礼

わかりづらい質問にここまで答えてくださってありがとうございます。
FLASHのバージョンは8です。
今後質問するときは気をつけます。

したいことは、sassakunさんの推測に一致しています。
今から教えていただいた内容を実装していきます。
またわからないことがあれば質問させてください。
取り急ぎお礼まで。
ありがとうございます。

お礼日時：2006/08/03 09:12