XMLでJPEGスライドを作成＿表示画像のリサイズ

Question

初めて質問をさせていただきます。
よろしくお願い致します。

下記の、adobe.comにある「XMLでJPEGスライドを作成する」で、
読み込む画像サイズがバラバラの場合に、
“表示サイズをそれぞれの画像によって変えたい”（縦のサイズだけ固定をし、中央に寄せて表示させたい）
と試行錯誤しているのですが、なかなか進みません。。

▼XMLでJPEGスライドを作成する
http://www.adobe.com/jp/support/flash/applications/jpeg_slideshow_xml/


この解説の中の下記のページで、
http://www.adobe.com/jp/support/flash/applications/jpeg_slideshow_xml/jpeg_slideshow_xml07.html

「ステージ上のターゲットクリップのインスタンスをリサイズすると、
ロードされた画像やムービーは同じだけ拡大縮小されることも覚えておきましょう。
ターゲット領域をリサイズしたいのだが画像サイズを替えたくという場合は、
インスタンスではなくシンボル自体をリサイズしましょう。」

と記載があるので、そもそもこのサポートセンターの方法だと
“表示サイズをそれぞれの画像によって変えたい”は難しいのでしょうか。。


（環境）
WindowsXP
flash 8


よろしくお願い致します

sassakun · Accepted Answer

まず，前置きですが。

「XML」 と 「写真のサイズや位置」 は全然別の問題ですよ。
同じ物とひっつけて考えないようにしましょう。
ごく単純に，まず，

> “表示サイズをそれぞれの画像によって変えたい”
> （縦のサイズだけ固定をし、中央に寄せて表示させたい）

ということだけを考えれば良いだけです。

Adobe の スライドショーサンプル の場合，
XML は「写真自体の"ファイル名"」 を外部ファイルから指示する単なる１つの方法例です。

「写真自体の"ファイル名"」は，
元から Flash 内にあっても，
XML ではなくて，普通の外部テキストにあっても，
FlashVars で HTML から SWF 内に送りこんでも，
PHPなどから SWF に送信しても……，
とにかくどういう形をとっても何にも変わりません。
「写真自体の"ファイル名"」 のデータの用意のしかただけ問題です。

ファイル名指定に XML を使ったとたん，
写真の位置や大きさを変えられなくなるのなら，
そんなもの使えません。
ですから，Flash 内のオブジェクトの操作と XML とは全然別ものとして考えてください。


外部画像を中央寄せする方法だけは，
つい先日回答した物にあります（この方法も一例ですが）↓。

「flash 大きさの異なる写真のスライドショーで中心点を揃えたい」
http://oshiete1.goo.ne.jp/qa2894628.html
　↑教えて！goo　　↓OKWave　（同じです）
http://okwave.jp/qa2894628.html

ごちゃごちゃ書いていますが，
必要なのは最初の最初だけですし，
ムービークリップも２つも用意する必要はありません。

読み込むムービークリップに，

---------------------------------
onClipEvent (load) {
// この MC を「ステージ中央 - MCの幅の半分」の座標に移動
this._x = Stage.width/2-(this._width/2);
// この MC を「ステージ中央 - MCの高さの半分」の座標に移動
this._y = Stage.height/2-(this._height/2);
}
---------------------------------

などのように書けば，
指定座標（上の場合ステージ中央）を基準に写真がロードされます。

JPEG（SWFも） がロードされる場合，
ムービークリップの 「"基準点"を基準」 に写真の左上のコーナーが表示されます。
これは，仕様ですから変えるわけには行きません。
しかし変えなくても全く困りません。
ずれた分だけ移動させれば良いだけのことです。

以上が前置きです。


＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

次に具体的な説明ですが。

そもそも，Adobe の スライドショーサンプル は，
それを変造したりして使うために用意されていないと思います。
だいたい変造するには使いにくいサンプルです。
「XMLをこんな風に使うことができるよ」という単なる一例のサンプルだと考えた方が良いです。

この回答でも，話が込み入るので，
最終的にはサンプルのスクリプトを使わせてもらいますが，
とりあえず XML など無視して Flash を作ってしまいます。
そして，
その作った物の「写真ファイル名」を XML から指示しなおすように変えます。


Flash 作成の前にとりあえずファイル構造です。
これはどうでもかまいませんが，
一応，サンプルと同じようにするという前提にしておきます。

　任意のフォルダ
　　　　├ ○○.html （○○.swf を表示）
　　　　├ ○○.swf
　　　　├ slides.xml （最初は不要（無視））
　　　　└ images （フォルダ）
　　　　　　　├ image1.jpg
　　　　　　　├ image2.jpg
　　　　　　　├ image3.jpg
　　　　　　　├ image4.jpg
　　　　　　　└ image5.jpg

「image」 フォルダ内の image1.jpg ～ image5.jpg には，
好きな形や大きさの JPEG ファイルを用意してください。


○○.swf の作成に移ります。
新規ドキュメントを作成して，
「image」フォルダと同じフォルダに（つまり上記の「任意のフォルダ」内に）そのドキュメントを保存します。

そして，
ステージ上に 横150px × 縦100px くらい（大きさは適当で良いです）の，
塗りの四角形を描きます。
場所も適当で良いです。

その塗りの四角形を選択してムービークリップに変換するのですが，
変換するときの「基準点」を一応左上にしてください。
シンボルに変換ダイアログで次のように左上にチェックを入れて変換するということです。

　基準点（R）：■□□
　　　　　　　　　□□□
　　　　　　　　　□□□

本当はどこでもかまいませんが，
そこにしておくと，この場合，計算しやすいという理由だけです。

そのムービークリップにインスタンス名を付けます。
これも何でも良いのですが，一応サンプルに合わせて，
「targetClip」 というインスタンス名を付けたとしておきます。

そして，
その 「targetClip」 に次のようなスクリプトを書きます（コピペ可能）。

----------------------------------------
// このムービークリップが読み込まれたとき
onClipEvent (load) {
// 高さの指定（※可変）
var my_h = 200;
// 位置の指定（※可変）
var my_x = Stage.width/2;
var my_y = Stage.height/2;
//
// サイズの変更
this._width = my_h*this._width/this._height;
this._height = my_h;
// 座標の移動
// この MC を「指定位置 - MCの幅の半分」に移動
this._x = my_x-(this._width/2);
// この MC を「指定位置 - MCの高さの半分」に移動
this._y = my_y-(this._height/2);
}
----------------------------------------

（※可変） のついた３つの変数の値は，
仮にいれてあるだけですから，適当に変更してください。

一応これで「制御」→「ムービープレビュー」などをして，
書いた四角が 指定位置 に 指定の高 さで表示されるかどうかを確かめます。


次に動作検証のために，
ステージ上にボタンを１つ作成し，
そのボタンに，

--------------------------
on (release) {
_root.targetClip.loadMovie("images/image1.jpg");
}
--------------------------

と書きます。
内容はシンプルですね。

　クリックしたら
　「images/image1.jpg」を「targetClip」にロード

という意味のことが書いてあるだけです。

このボタンをコピペで５つにして（４つ増やして），
コピペでできたボタンのスクリプトをそれぞれ，

--------------------------
on (release) {
_root.targetClip.loadMovie("images/image2.jpg");
}
--------------------------
　～　　略　～
--------------------------
on (release) {
_root.targetClip.loadMovie("images/image5.jpg");
}
--------------------------

のように変更して（.jpg の前の数字を変更するだけ），
「制御」→「ムービープレビュー」などをして，
JPEGが 指定位置 に 指定の高 さで表示されるかどうかを確かめます。

XML でやることは，
このボタンに書いた，
「images/image1.jpg」～「images/image5.jpg」というファイル名を，
外部に用意しておくというだけのことですよ。
ただそれだけのことです。
Flash の中の動きとは一切関係がありませんよね。

ここまでできたら，
動作検証のために作成したボタンを消してください。



＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

以上をまず作成して，
サンプルのスクリプトを使わせてもらうなどをすれば良いわけです。

現在ドキュメントには，
「targetClip」があるレイヤーしかないはずですから，
新規でレイヤーを追加して，
そのレイヤーのフレーム1に，
Adobe のスライドショーサンプルのスクリプト，

　slides_xml = new XML();
　slides_xml.onLoad = startSlideShow;
　slides_xml.load("slides.xml");
　slides_xml.ignoreWhite = true;
　　　～　略　～
　　　　currentIndex--;
　　　　currentSlideNode = previousSlideNode;
　　　　updateSlide(previousSlideNode);
　　　}
　};

を貼り付けて，

ステージ上には，
「currentIndex」 という変数名のダイナミックテキストフィールドと，
「totalSlides」 という変数名のダイナミックテキストフィールドと，
「slideText」 という変数名のダイナミックテキストフィールドと，
「back_btn」 というインスタンス名の「←」ボタンと，
「next_btn」 というインスタンス名の「→」ボタンを適当に作成すればできあがりです。

本当は，
サンプルにあるスクリプトを貼り付けるより，
「書かれてある内容を理解して，自分で考えて書く。」
という方が良いですよ。
そのためのサンプルなのですから。



※注意１

Adobe のスライドショーサンプルは，
分かり易さを重視しているためか，なぜかテキストフィールドに「変数名」を付けています。
しかし，本当は推奨されていません。
テキストフィールドには「インスタンス名」をつけて「変数名」は付けないようにし，
スクリプトもそれ用に変更した方が良いです
変更しなければならないことはありませんが，変更した方が良いという意味です。

「テキストフィールドのインスタンス名と変数名について」
http://livedocs.macromedia.com/flash/8_jp/main/00001418.html


※注意２

あと，JPEGの大きさが本当にバラバラである場合
（縦も横も本当にバラバラである場合），
上で回答したスクリプトを実行すると，
本当に JPEG の高さを一定にするようにFlash上でJPEG全体のサイズが変更されますが，
その結果，写真がきたなく表示される場合が多いです。
Flash Player はJPEGなどビットマップ画像をリサイズするソフトではなく，
単に拡大縮小することができるというだけのものだからです。

ですから，実際には，
ちゃんとしたフォトレタッチソフトを使って，
高さについてだけは指定したいサイズに設定して JPEG を全体的にリサイズしておいて，
そのリサイズした JPEG をネット上にアップして，
それを Flash でロードするようにした方が良いですよ。

　高さについては全て等しくリサイズしたイメージ例

　□□□　□□□□　□□　□□□□□　□□□□
　□□□　□□□□　□□　□□□□□　□□□□
　□□□　□□□□　□□　□□□□□　□□□□
　　1.jpg　　　2.jpg　　　3.jpg　　　　4.jpg　　　　　5.jpg

HTMLに貼り付ける場合もそうですね。
ブラウザも JPEG などビットマップ画像をリサイズするソフトではなく，
単に拡大縮小表示することができるというだけのソフトです。

Flash を使う使わないに限らず，
ネット上で見るちゃんとしたサイトの画像のほとんどは，
表示サイズにリサイズしています。
何千枚もの JPEG があっても１枚１枚リサイズするのが普通です。
それくらいの手間を省いては良い物はできません。

XMLでJPEGスライドを作成＿表示画像のリサイズ

まず，前置きですが。

似たような質問が見つかりました

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング