Flash 切り替え 画像について

質問

http://www.e-liberty.co.jp/

このようなＦＬＡＳＨの画像を流す為には、どのようにして作成すれいいのでしょうか？

初心者なので、何卒わかりやすく教えていただけると幸いです。
・具体的にtopの画像で、マウスをロールオーバした時に画像が切り替わるのが、どうしてもできません。
モーションで流れる画像を作って流しつつ、画像が流れている途中でも即座にロールオーバーをすると切り替わるといのが、どう作っていいのかわかりません。

何卒よろしくお願い致します。

回答No.2

BlurFiltan

Flash はそのソフトのバージョンによって大きく仕様が変わります。
またできることやできないことも変わります。
さらに ActionScript のバージョンによってもスクリプトはまるで変わります。

その重要ポイントについて何一つ書かれていらっしゃいませんね。
ですから本来は 「回答不可能な質問」 ということになります。

ちゃんとした回答は不可能ですが，
勝手に Flash MX 以上（Flash MX，MX 2004，8，CS3，CS4）をお持ちで，
勝手に ActionScript1.0 を使う場合のみについて回答します。

> 何卒わかりやすく教えていただけると幸いです。

「わかりやすいスクリプト」 と 「洗練されたスクリプト」 と 「使いやすいスクリプト」 は全く違います。
ここでは，わかりやすさをなるべく重視したスクリプトを書きます。
　（スクリプトを短くするようなテクニックや，
　 変数もなるべく使わない方法で作りましたから
　 スクリプトがやたら長いです。
　 また使い勝手も少々悪いです。）

実検用サンプルの作り方です。

ステージ上に適当な四角い塗りを描いてその塗りをムービークリップに変換します。
ムービークリップに変換するとき，「基準点」の位置に気を付けます。
ここでは一応「基準点を左上にしたムービークリップ」を作成することとします。

適当な四角い塗り入りムービークリップができましたら，インスタンス名を付けます。
ここでは 「pic_mc」 というインスタンス名を付けることにしておきます。
【↓下の図を参照のこと↓】

そのレイヤーの上に新しいレイヤーを挿入して，
適当なボタンシンボルのインスタンスを４つ縦に並べます。

そのボタンにもインスタンス名を付けます。
ここでは上から 「btn0」 「btn1」「btn2」「btn3」というインスタンス名を付けることにしておきます。

さらにそのレイヤーの上に新しいレイヤーを挿入して，
そのフレーム1に次のようなスクリプトを書きます。

----------------------------------------------
// ---↓初期設定↓---

// 座標を設定する配列を作成
zahyouArr = [-100, 0, 100, 200];

// 初期表示画像座標番号の設定
num = 1;

// ---↓自動動作⇔ボタン動作 切り替えフラグ↓---

// ボタン動作フラグを false にしておく
btnFlag = false;

// ---↓主要エンジン↓---

// pic_mcに1フレーム進む時間毎に実行する関数を定義
pic_mc.onEnterFrame = function() {
// pic_mcのx座標を zahyouArr[num] に 0.3 の割合で近付ける
this._x += (zahyouArr[num]-this._x)*0.3;
};

// ---↓ボタンの動作↓---

// btn0にロールオーバー時に実行する関数を定義
btn0.onRollOver = function() {
// 変数 num を 0 にする
num = 0;
// ボタン動作フラグを true にする
btnFlag = true;
};

// btn1にロールオーバー時に実行する関数を定義
btn1.onRollOver = function() {
// 変数 num を 1 にする
num = 1;
// ボタン動作フラグを true にする
btnFlag = true;
};

// btn2にロールオーバー時に実行する関数を定義
btn2.onRollOver = function() {
// 変数 num を 2 にする
num = 2;
// ボタン動作フラグを true にする
btnFlag = true;
};

// btn3にロールオーバー時に実行する関数を定義
btn3.onRollOver = function() {
// 変数 num を 3 にする
num = 3;
// ボタン動作フラグを true にする
btnFlag = true;
};

// btn0～3にロールアウト時，ドラッグアウト時に
// 実行する関数を定義
btn0.onRollOut
=btn0.onDragOut
=btn1.onRollOut
=btn1.onDragOut
=btn2.onRollOut
=btn2.onDragOut
=btn3.onRollOut
=btn3.onDragOut=function () {
// ボタン動作フラグを false にする
btnFlag = false;
};

// ---↓自動動作↓---

// 2000ミリ秒(２秒)間隔で実行
myID = setInterval(function () {
// もし ボタン動作フラグが false であれば
if (!btnFlag) {
//そして num が 座標設定配列の要素数-1 未満であれば
if (num<zahyouArr.length-1) {
// num に 1 を加算
num++;
// それ以外であれば
} else {
// num を 0 にする
num = 0;
}
}
}, 2000);
----------------------------------------------

上のスクリプトの最初

　// 座標を設定する配列を作成
　zahyouArr = [-100, 0, 100, 200];

これは当然適当です。
作るものによって座標は変わりますからこの辺は調節してください。

実際にはもっと横長画像を入れると思うので，だいたいの雰囲気，

// 座標を設定する配列を作成
zahyouArr = [0, -400, -800, -1200];

// 初期表示画像座標番号の設定
num = 0;

のような感じになるのではないかと思います。
しかしこのような数値では，適当に作ったムービークリップが見えなくなってしまう可能性があるので，
一応 [-100, 0, 100, 200] のような数値を適当にいれています。

また，

　// pic_mcのx座標を zahyouArr[num] に 0.3 の割合で近付ける
　this._x += (zahyouArr[num]-this._x)*0.3;

の 0.3 も適当ですし
最後の行の時間間隔 2000ミリ秒

　}, 2000);

これも適当です。
好みなどによって変えてください。

とにかく上のスクリプトの本体は

　// ---↓主要エンジン↓---

　// pic_mcに1フレーム進む時間毎に実行する関数を定義
　pic_mc.onEnterFrame = function() {
　　// pic_mcのx座標を zahyouArr[num] に 0.3 の割合で近付ける
　　this._x += (zahyouArr[num]-this._x)*0.3;
　};

これだけです。

このスクリプトの zahyouArr[num] の部分，
つまり　-100, 0, 100, 200 が入る部分 を
ボタンや時間によって切り替えているだけです。
ただそれだけのことです。

この部分さえちゃんとわかれば，
どのようなスクリプトに変えても良いということになります。
上のようにグダグダと長いスクリプトを書く必要もないということです。

なお，書かれていらっしゃるページのものは，
ボタンの色なども変化していますが，
その辺はボタンをムービークリップで自作するなどして機能を付け加えて行きます。
そんなこんなを全て書いていると
さらに理解不能になるかもしれませんので省略します。

サンプル FLA ファイルが提示できれば，
「このファイルのようにすれば良い」 の一言ですむかもしれません。

しかしここでは，FLAファイルの提示はできませんので，
なんとか上の部分までを理解して，さらに先へ発展させてみてください。
　（回答者にとっても，上のように回答するより
　 サンプルファイルを提示するだけの方が100倍簡単なのです。
　 ここはそれができませんから，
　 「わかりやすく教える」 にも限度があります。
　 さらに画像↓も 420×314px １枚しか添付できません。
　 つまりここでは，基本的に わかりにくい説明 しかできません。）

お礼

詳しく教えていただきまして、誠に感謝しております。
時間は、経過しましたがなんとか無事に作成することができました。
またわからない事質問させていただきますので、宜しくお願い致します。
因みにＡＳができるという事は、ＪＳもできますでしょうか？
教えていただけるならまた教えてください。
困ってる事があるので、宜しくお願い致します。

回答No.1

pintate

たぶんＨＴＭＬも混ぜて作ってるのかも？

以下のサイトで参考になるかもしれません
　超初心者解説サイト
http://www2.netwave.or.jp/~light/index.html

Flash ActionScript Helper（Flash MX版）
http://homepage3.nifty.com/ginga-b/MX/index.html

なんか自分も作ろうとしたとき関数が壁になって自滅した記憶があります

参考URL：

http://homepage3.nifty.com/ginga-b/MX/index.html