サイトを作成してみる。

2009/09/20  as3.0, チュートリアル

結局、参考書をよんでいた時のジレンマとしては、いろいろファンクションはわかったんだけど、

どうやって、作るの?っていうことでした。

 

せっかくなので簡単なサイトの枠組みですが、作って説明させていただきたいと思います。

 

1、素材を用意する

 

今回は各ページと、それに対応するボタンの素材を用いる。

page用の素材とボタン用の素材が必要です。

 

2、動作を考える

 

clickの度に対応するpageのだけが見えて、他のpageが見えないようにする。

 

3、動作を簡単に指定する為、Tweenerを用いる。

 

また演出のalphaの調整にtweenerを使用しますので、

下記サイトからcaurinaファイルをダウンロードしてください。

 

Tweener:

http://tweener.googlecode.com/files/tweener_1_33_74_as3.zip

 

 

4、asは以下のように設定を行います。

package  {
	//tweenerクラスはすべて読み込んでみましょう。
	import caurina.transitions.*;
	import caurina.transitions.properties.*;
	import flash.display.*;
	import flash.events.*;
	public class sld extends Sprite {
	public function sld() {
			//ここの中は最初に実行をされます。
			stage.frameRate=60;
			stage.quality=StageQuality.HIGH;
			stage.align=StageAlign.TOP_LEFT;
			stage.scaleMode=StageScaleMode.NO_SCALE;
			stage.stageFocusRect = false;

			//表示されているのが、だけにします。
			h.alpha = 1;
			p.alpha = 0;
			a.alpha = 0;

			//ボタンを上に持ってきた時にマウスを指にします
			h_btn.buttonMode = true;
			p_btn.buttonMode = true;
			a_btn.buttonMode = true;

			//ボタンを押したらの式を作成
			h_btn.addEventListener(MouseEvent.CLICK, h_click);
			p_btn.addEventListener(MouseEvent.CLICK, p_click);
			a_btn.addEventListener(MouseEvent.CLICK, a_click);
		}

		//homeがクリックをされた時
		private function h_click(e:Event):void {
			Tweener.addTween(h, { alpha:1, time:1, transition:"linear" });
			Tweener.addTween(p, { alpha:0, time:0.2, transition:"linear" });
			Tweener.addTween(a, { alpha:0, time:0.2, transition:"linear" });
		}
		//aboutがクリックをされた時
		private function a_click(e:Event):void {
			Tweener.addTween(h, { alpha:0, time:0.2, transition:"linear" });
			Tweener.addTween(p, { alpha:0, time:0.2, transition:"linear" });
			Tweener.addTween(a, { alpha:1, time:1, transition:"linear" });
		}
		//profileがクリックをされた時
		private function p_click(e:Event):void {
			Tweener.addTween(h, { alpha:0, time:0.2, transition:"linear" });
			Tweener.addTween(p, { alpha:1, time:1, transition:"linear" });
			Tweener.addTween(a, { alpha:0, time:0.2, transition:"linear" });
		}
	}

}

 

キリトリ線

 

flashサイトの完成です。

 

下のメニューをクリックするとページが切り替わります。

 

This movie requires Flash Player 9.0.0

 

消える速度と、出る速度に差をつける事でメリハリのついた演出になります。

 

JavaScriptなどで、flashページへの大きさを固定にしてあげれば、

簡易的ではありますが、フルフラッシュサイトの完成です。

 

フラッシュのサイト

 

 

きょうのファイル

http://prfry.net/s26/flash/sld2.zip