【AS3】全画面FLVをやる

| | トラックバック(0)
今日はよくある全画面FLVの作り方を”BaseUI"というクラスを使い簡単に実装するやり方を紹介します。

で、できたものは↓↓↓です。
ちょっとカオスな感じですがあしからず。

できたもの
ブラウザがリサイズされたらコンテンツが中央配置にイージングし、後ろの映像がリサイズするようになってます。
ちなみにビデオはループしません。

手順:
  1. まず、こちらからクラスファイルをダウンロード。
  2. 今回はTweenerも使ってますので持ってない方はこちらからダウンロードして下さい。
  3. さらに、ビデオ再生用のクラスをflaファイルの位置からcom/AO/media/video/の位置に格納します。
    ビデオクラスは下の方にあります。
    (ループとかさせたい場合はこちらを拡張していけば良いかと思われます。)
  4. そして、下記クラスとflvをFLaファイルの隣に置きます。

以上です。

以下ソースです。
DemoTween(↓これ↓をドキュメントクラスに設定します。)
package {

	import flash.display.Sprite;
	import flash.net.NetStream;
	import flash.events.*;

	import gs.easing.*;
	import gs.TweenMax;
	import caurina.transitions.*;
	//Layout
	import com.soundstep.ui.ElementUI;
	import com.soundstep.ui.BaseUI;
	import com.soundstep.ui.events.BaseEventUI;
	//Video
	import com.AO.media.video.VideoSp;

	public class DemoTween extends Sprite {

		public function DemoTween() {
			
			//Main
			var baseUI:BaseUI = new BaseUI(this);
			var s:Sprite = new Sprite();
			s.name = "mySprite";
			s.graphics.beginFill(0x333333, .7);
			s.graphics.drawRect(0, 0, 900, 500);
			addChild(s);
			
			//Button
			var t:Title = new Title();
			t.alpha = 0;
			t.x = 20;
			t.y = 20;
			addChild(t);
			Tweener.addTween(t, {x:0,transition:"easeOutExpo",time:1.6,delay:0.2*i,alpha:1});

			for (var i = 0; i<5; i++) {

				var b:Sprite = new Sprite();
				b.alpha = 0;
				b.buttonMode = true;
				b.name = "Box"+i;
				var boxY:Number = (s.height/2)+(b.height/2);
				b.y = boxY;
				b.graphics.beginFill(0xffffff, .8);
				b.graphics.drawRect(0, 0, 100, 100);

				s.addChild(b);
				Tweener.addTween(b, {y:boxY,x:100+ ((b.width+10) *i),transition:"easeOutBack",time:1.6,delay:0.2*i,alpha:1});

			}
			//VideObject
			var url:String = "demo.flv";
			var vid:VideoSp = new VideoSp();
			var elBG:ElementUI = baseUI.add(vid);
			elBG.ratio = ElementUI.RATIO_OUT;
			addChildAt(vid, 0);
			vid.x = 0;
			vid.y = 0;
			vid.alpha = 0;
			vid.width = stage.stageWidth;
			vid.height = stage.stageHeight;
			vid.play(url);
			Tweener.addTween(vid, { x:0, transition:"easeOutExpo", time:2, delay:0.2, alpha:1 } );

			//リサイズ時に移動させるオブジェクトを設定
			var el:ElementUI = baseUI.add(s);
			var et:ElementUI = baseUI.add(t);
			var ev:ElementUI = baseUI.add(vid);
			el.horizontalCenter = el.verticalCenter = 0;
			el.addEventListener(BaseEventUI.BEFORE_UPDATE, tween);
			et.addEventListener(BaseEventUI.BEFORE_UPDATE, tween);
			ev.addEventListener(BaseEventUI.BEFORE_UPDATE, tween);

		}
		//リサイズ時にイージングしながら所定の位置に移動させる
		private function tween(e:BaseEventUI):void {
			e.stopImmediatePropagation();
			var obj:Object = e.properties;
			obj['ease'] = Expo.easeOut;
			TweenMax.to(e.elementUI.element, 1.6, obj);
		}
	}
}

ビデオ再生用クラス

package com.AO.media.video{

	import flash.display.Sprite;
	import flash.media.Video;
	import flash.events.*;
	import flash.net.NetConnection;
	import flash.net.NetStream;

	public class VideoSp extends Sprite {

		private var nc:NetConnection;
		private var ns:NetStream;
		private var video:Video;

		function VideoSp() {

			initConnect();
		}
		private function initConnect():void {

			nc = new NetConnection();
			nc.addEventListener(NetStatusEvent.NET_STATUS, onNCstatus);
			nc.connect(null);

		}
		private function onNCstatus(e:NetStatusEvent):void {

			if (e.info.code == "NetConnection.Connect.Success") {

				initStream();
			} else {

				trace(e.info.code);

			}
		}
		private function initStream():void {

			ns = new NetStream(nc);
			ns.addEventListener(NetStatusEvent.NET_STATUS, onNSstatus);
			ns.bufferTime = 2;
			ns.client = new Object();
			video = new Video;
			video.attachNetStream(ns);
			addChild(video);

		}
		private function onNSstatus(e:NetStatusEvent):void {

			switch (e.info.code) {
				case "NetStream.Play.StreamNotFound" :

					trace("StreamNotFound");
					break;

				default :

					trace(e.info.code);

			}
		}
		public function play(url:String):void {

			ns.play(url);

		}
	}
}

トラックバック(0)

このブログ記事を参照しているブログ一覧: 【AS3】全画面FLVをやる

このブログ記事に対するトラックバックURL: http://alwaysfinetuning.com/mt/mt-tb.cgi/49

このブログ記事について

このページは、が2008年9月16日 19:24に書いたブログ記事です。

ひとつ前のブログ記事は「【AS3】Preloaderを作る」です。

次のブログ記事は「【AS3】¥記号をScript内でStringとして使う時の注意」です。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。