トップへ戻るニュースフォーラムFLASH-ML 過去ログBak@Flaダウンロードよくある質問と答
ログイン
ユーザ名:

パスワード:


パスワード紛失

新規登録
メインメニュー
メイン
   迷える子羊の部屋【初心者専用】
     トランプのカードをめくるように画像を切り替える
投稿するにはまず登録を

スレッド表示 | 新しいものから 前のトピック | 次のトピック | 下へ
投稿者 スレッド
おおき
Åê¹ÆNo.38946
投稿日時: 2008-5-24 18:31
新米
居住地: 福岡
投稿: 10
使用環境:
Mac OSX,Flash cs3
トランプのカードをめくるように画像を切り替える
http://sennendo.s198.xrea.com/sample.html


サムネイルをクリックするとカードをめくるように
画像が回転しながら切り替わるモーションを作っています。

(上記ページ参照)


レイヤーthumbの各ボタンにon (release) { gotoAndPlay("ラベル名"); }を記述。
ラベル指定のフレームに移動し再生→停止となるようにしています。


サムネイルを左から順に一回ずつクリックしていけば、
自分のイメージ通りに動きます。
クリックの順番が変わっても同じように画像が切り替わるように
するにはどうすればよいのでしょうか?


そもそも作り方自体が間違っているのかもしれません。


どなたかお分かりになる方、是非ご教授下さい。。


宜しくお願い致します。
野中文雄
Åê¹ÆNo.38947
投稿日時: 2008-5-24 19:06
ちょんまげら
居住地: 東京
投稿: 4531
使用環境:
CS5.5 .6.8 Vista Home Premium (SP1)
Re: トランプのカードをめくるように画像を切り替える
画像が5枚でしたら、5×5=25のアニメーションを作成する必要があります。その場合、再生するアニメーションのフレームラベルは、現在の画像と切替える画像のふたつを変数などに設定して、その値から決定することになります。

あるいは、画像を[ライブラリ]からスクリプトで配置すれば、アニメーション自体はひとつで足ります。その場合には、MovieClip.attachMovie()メソッドを学習する必要があります。
引用:
erickさんは書きました:
レイヤーthumbの各ボタンにon (release) { gotoAndPlay("ラベル名"); }を記述。
ラベル指定のフレームに移動し再生→停止となるようにしています。

サムネイルを左から順に一回ずつクリックしていけば、
自分のイメージ通りに動きます。
クリックの順番が変わっても同じように画像が切り替わるように
するにはどうすればよいのでしょうか?

[追記] その画像自身に切替えることはないでしょうから、実際には5×4=20のアニメーションになりますね。


----------------
 

おおき
Åê¹ÆNo.38949
投稿日時: 2008-5-24 21:26
新米
居住地: 福岡
投稿: 10
使用環境:
Mac OSX,Flash cs3
Re: トランプのカードをめくるように画像を切り替える
ちょんまげら様

早速のお返事ありがとうございました。

なるほど、結構めんどうな作業になるのですね。

>あるいは、画像を[ライブラリ]からスクリプトで配置すれば、アニメーション自体はひとつで足ります。その場合には、MovieClip.attachMovie()メソッドを学習する必要があります。


こちらの方を勉強してみようかと思います。

初心者なので、知識も乏しく不安もありますが、、、

ありがとうございます。

今後とも何卒宜しくご教授お願い致します。
おおき
Åê¹ÆNo.38954
投稿日時: 2008-5-25 0:59
新米
居住地: 福岡
投稿: 10
使用環境:
Mac OSX,Flash cs3
Re: トランプのカードをめくるように画像を切り替える
結局のところ、下記の方でやってみることにしました。
一つの画像に5通りのパターンでアニメーションを作成致しました。

ところが、変数などに設定して・・・というのがわからないのです。
なんとなくこういうことだろうな、、というのは分かるのですが、
じゃあ、どこにどう記述すればそうなるのか、、が・・・

アクションスクリプトも基礎から勉強しているわけでなく
こんなものを作りたい、作ってみよう、と、行き当たりばったり
なものでできれば、詳しく教えて頂きたいと思っています。


よろしくお願いいたします。

引用:

野中文雄さんは書きました:
画像が5枚でしたら、5×5=25のアニメーションを作成する必要があります。その場合、再生するアニメーションのフレームラベルは、現在の画像と切替える画像のふたつを変数などに設定して、その値から決定することになります。
野中文雄
Åê¹ÆNo.38955
投稿日時: 2008-5-25 1:35
ちょんまげら
居住地: 東京
投稿: 4531
使用環境:
CS5.5 .6.8 Vista Home Premium (SP1)
Re: トランプのカードをめくるように画像を切り替える
「なんとなくこういうことだろうな」というのを、具体的なステップとして挙げてください。そして、そのひとつひとつのやり方を考えたうえで、どこが具体的におわかりにならないのかをご説明ください。→【どうしたらいいですか
引用:
erickさんは書きました:
ところが、変数などに設定して・・・というのがわからないのです。
なんとなくこういうことだろうな、、というのは分かるのですが、
じゃあ、どこにどう記述すればそうなるのか、、が・・・

「基礎」を勉強された方が、結果として早道だと思います。

参考: Flash ActionScript Helper「アクションのタイプ」「変数」「加算と文字列連結
引用:
アクションスクリプトも基礎から勉強しているわけでなく
こんなものを作りたい、作ってみよう、と、行き当たりばったり
なものでできれば、詳しく教えて頂きたいと思っています。


----------------
 

おおき
Åê¹ÆNo.38964
投稿日時: 2008-5-25 17:57
新米
居住地: 福岡
投稿: 10
使用環境:
Mac OSX,Flash cs3
Re: トランプのカードをめくるように画像を切り替える
・初期表示用画像のとき→1枚目の(サムネイルをクリックして)画像1(インスタンス名)へ切り替わるアニメーションのラベルを(mc_01)

・初期表示用画像のとき→2枚目の(サムネイルをクリックして)画像2(インスタンス名)へ切り替わるアニメーションのラベルを(mc_02)

・初期表示用画像のとき→3枚目の(サムネイルをクリックして)画像3(インスタンス名)へ切り替わるアニメーションのラベルを(mc_03)

・初期表示用画像のとき→4枚目の(サムネイルをクリックして)画像4(インスタンス名)へ切り替わるアニメーションのラベルを(mc_04)

・初期表示用画像のとき→5枚目の(サムネイルをクリックして)画像5(インスタンス名)へ切り替わるアニメーションのラベルを(mc_05)

これと同様に

・1枚目の画像のとき→1枚目のサムネイルをクリックし1枚目の画像が回転しながらもう一度表示(mc_11)

・1枚目の画像のとき→2枚目のサムネイルをクリックし2枚目の画像へ切り替わる(mc_12)

・1枚目の画像のとき→3枚目のサムネイルをクリックし3枚目の画像へ切り替わる(mc_13)

・1枚目の画像のとき→4枚目のサムネイルをクリックし4枚目の画像へ切り替わる(mc_14)

・1枚目の画像のとき→5枚目のサムネイルをクリックし5枚目の画像へ切り替わる(mc_15)


・・・・・・・

というようにすべてのパターンのアニメーションを同一タイムライン上に作成しています。


 あるサムネイルをクリックすると現在表示されている画像が裏返りながらクリックしたサムネイルと同様の画像へ切り替わるのであれば、スクリプトの記述は『ある(現在表示中の)画像のとき、このサムネイルをクリックすると、ラベル○○へ移動し再生・停止する』というふうにすればよいのだから、各サムネイル(インスタンス名はt1、t2、t3、t4、t5)のオブジェクトあるいはサムネイルのレイヤー・第一フレームのいずれかに

例えば、

1の画像表示中にサムネイル5(t5)をクリックしたら、mc_15のラベルへ移動、再生・停止しなさい、

というような命令を記述すればよい。


のではないかと。


でもやっぱりスクリプトの基本的な知識がなければ、できませんね。
教えて頂いたページを見ながら、長い道のりだなあ、と正直思いました。それでもやはり急がば回れ、ですね。。ごもっともです。


ありがとうございます。







引用:

野中文雄さんは書きました:
「なんとなくこういうことだろうな」というのを、具体的なステップとして挙げてください。そして、そのひとつひとつのやり方を考えたうえで、どこが具体的におわかりにならないのかをご説明ください。



野中文雄
Åê¹ÆNo.38965
投稿日時: 2008-5-25 19:05
ちょんまげら
居住地: 東京
投稿: 4531
使用環境:
CS5.5 .6.8 Vista Home Premium (SP1)
Re: トランプのカードをめくるように画像を切り替える
基礎を学習されるのが先決という点は変わりありませんが、指針として。以下の処理を理解する必要があります。参考ドキュメントは、先の回答で示したとおりです。

[1] 移動先フレームラベルは変数に設定して、ボタンクリックでそのフレームに移動する。
[2] 現在の画像(1)とクリックしたサムネイル(5)から、フレームラベルの文字列(mc_15)をスクリプトで生成して、そのフレームラベルに移動する。
引用:
erickさんは書きました:
例えば、

1の画像表示中にサムネイル5(t5)をクリックしたら、mc_15のラベルへ移動、再生・停止しなさい、

というような命令を記述すればよい。


----------------
 

ひろゆき
Åê¹ÆNo.38970
投稿日時: 2008-5-26 0:14
ちょんまげら
居住地: 東京砂漠
投稿: 4403
使用環境:
10.8.5

Flash Professional CS4/CS6/CC

Safari 6.1
Re: トランプのカードをめくるように画像を切り替える
アニメーション自体をスクリプトで処理してしまうという方法もあるかと思います。
参考まで。

サンプル

_root に、ムービークリップ(インスタンス名: card, thumb1?thumb5) を配置。
card は、5フレーム。各フレームに、画像を配置して、stop();を記述。

for (var n:Number = 1; n <= 5; n++) {
	var _btn:MovieClip = this["thumb"+n];
	_btn.id = n;
	_btn.onRelease = function():Void {
		closeCard(this.id);
	};
}

var angle:Number = 10;
function closeCard(id:Number):Void {
	card.rotation = 0;
	card.onEnterFrame = function():Void {
		this.rotation += angle;
		var radian:Number = setDegreeToRadian(this.rotation);
		this._xscale = Math.cos(radian)*100;
		if (this.rotation >= 90) {
			this.rotation = 90;
			delete this.onEnterFrame;
			openCard(id);
		}
	};
}
function openCard(id:Number):Void {
	card.gotoAndStop(id);
	card.rotation = 90;
	card.onEnterFrame = function():Void {
		this.rotation -= angle;
		var radian:Number = setDegreeToRadian(this.rotation);
		this._xscale = Math.cos(radian)*100;
		if (this.rotation <= 0) {
			this.rotation = 0;
			delete this.onEnterFrame;
		}
	};
}
function setDegreeToRadian(degree:Number):Number {
	var radianToDegree:Number = 180/Math.PI;
	var angle:Number = degree/radianToDegree;
	return angle;
}


----------------
質問する際は、回答者に具体的な情報を与えてください。

おおき
Åê¹ÆNo.38971
投稿日時: 2008-5-26 1:11
新米
居住地: 福岡
投稿: 10
使用環境:
Mac OSX,Flash cs3
Re: トランプのカードをめくるように画像を切り替える
野中様

ちょんまげらというのが名前ではないということに今、気がつきました。。恥
失礼しました。

勉強させて頂きます。ありがとうございます。
(頭がかなり混乱してますが・・・)




おおき
Åê¹ÆNo.38972
投稿日時: 2008-5-26 1:21
新米
居住地: 福岡
投稿: 10
使用環境:
Mac OSX,Flash cs3
Re: トランプのカードをめくるように画像を切り替える
ひろゆき様


sample見せて頂きました。。

正直、喉から手が出る程そのflaファイルが欲しいです。。苦笑

しかし、自分でやってみないと憶えないぞ、と思い、
ひろゆきさんのいうように作ってみました。

引用:


_root に、ムービークリップ(インスタンス名: card, thumb1?thumb5) を配置。
card は、5フレーム。各フレームに、画像を配置して、stop();を記述。

for (var n:Number = 1; n <= 5; n++) {
	var _btn:MovieClip = this["thumb"+n];
	_btn.id = n;
	_btn.onRelease = function():Void {
		closeCard(this.id);
	};
}

var angle:Number = 10;
function closeCard(id:Number):Void {
	card.rotation = 0;
	card.onEnterFrame = function():Void {
		this.rotation += angle;
		var radian:Number = setDegreeToRadian(this.rotation);
		this._xscale = Math.cos(radian)*100;
		if (this.rotation >= 90) {
			this.rotation = 90;
			delete this.onEnterFrame;
			openCard(id);
		}
	};
}
function openCard(id:Number):Void {
	card.gotoAndStop(id);
	card.rotation = 90;
	card.onEnterFrame = function():Void {
		this.rotation -= angle;
		var radian:Number = setDegreeToRadian(this.rotation);
		this._xscale = Math.cos(radian)*100;
		if (this.rotation <= 0) {
			this.rotation = 0;
			delete this.onEnterFrame;
		}
	};
}
function setDegreeToRadian(degree:Number):Number {
	var radianToDegree:Number = 180/Math.PI;
	var angle:Number = degree/radianToDegree;
	return angle;
}



・・なぜ、sampleのように動かないのか、まずは、この記述を読解できなければゴールへは辿り着けませんね、、

ちょっと色々試して調べて考えてみます。

ありがとうございます。
(1) 2 »
スレッド表示 | 新しいものから 前のトピック | 次のトピック | トップ

投稿するにはまず登録を
 
Copyright (C) 2003 FLASH-japan. All rights reserved.
Powered by Xoops