וידאו ב-ActionScript 3

במאמר הקודם למדנו על אודיו ב-ActionScript 3. הצגת וידאו בפלאש אינה שונה באופן מהותי מהצגת אודיו. ישנן שתי דרכים להצגת וידאו בפלאש – כ-stream בעזרת flash media server וכהדמיה של stream למי שאין להם גישה ל-flash media server (רוב העולם). אנו נראה הצגת וידאו בדרך השניה.

לשם דוגמא אני אשתמש באותו נגן שהשתמשתי בו במאמר הקודם עם אותם כפתורים – לנגן, לעצור ולשנות את רמת הקול.

על מנת לאפשר וידאו, אני צריך ליצור כמה אובייקטים. הראשון שבהם הוא אובייקט וידאו שהוא די מתבקש. האובייקט השני הוא netconnection שמאפשר את החיבור בין ה-flv שלנו לפלאש. האובייקט השלישי והחשוב מכולם הוא netstream, זה שיוצר את ההדמיה של הסטרימינג ואליו אנו מתייחסים בכל פעולותנו. אובייקט חשוב נוסף הוא קליינט שיאפשר לנו להצמיד אליו מאזינים כדי לנטר את הוידאו. הקליינט הוא חובה ואם הוא לא יהיה קיים יהיו בעיות. אובייקט אחרון הוא אובייקט SoundTransform שמאפשר לנו, בדומה לאודיו, לשלוט על עוצמות הקול ומאפיינים נוספים של האודיו שצמוד לוידאו.

היצירה של האובייקטים האלו פשוטה:

		private var myVideo:Video = new Video();
		private var nc:NetConnection = new NetConnection();
		private var customClient:Object = new Object();
		private var ns:NetStream;
		private var videoVolumeTransform:SoundTransform = new SoundTransform();

עכשיו, יש צורך ביצירת הוידאו ממש. אנו יוצרים את netconnection ומעבירים בתוכו null (כיוון שאין לנו קשר סטרימינג אמיתי). אחרי כן יוצרים את ה-netstream ומעבירים בתוכו כפרמטר את ה-netconnection. את הקליינט שלנו אנו מגדירים כתכונת client של ה-netstream ולבסוף אנו משתמשים במתודת attachNetStream על מנת להצמיד את ה-netstream שלנו לאובייקט הוידאו. כך זה נראה:

			nc.connect(null);
			ns = new NetStream(nc);
			ns.client = customClient;
			myVideo.attachNetStream(ns);

נותר רק לטפל במאזינים של הקליינט. הם אחראים לקבל את המטא-דאטה ואת האירועים השונים. מדובר במאזינים מנדטוריים שאם הם לא יתקיימו יהיו בעיות.

אלו המאזינים:

			customClient.onCuePoint = cuePointHandler;
			customClient.onMetaData = metaDataHandler;

הפונקציות המינימליות שצריך על מנת שיפעלו הן:

		function cuePointHandler(infoObject:Object):void 
		{
    		trace("cuePoint");
		}
		function metaDataHandler(infoObject:Object):void 
		{
		    trace("metaData");
		}			

לבסוף יש להצמיד את הוידאו ל-stage או לכל אובייקט אחר כמו movieClip. בדוגמא שלי אני פשוט מצמיד אותו ל-stage עם:

myStage.addChild(myVideo);

ההפעלה של הקובץ פשוטה ואנו מציבים אותה בפונקציה שמופעלת עם הקליק. היא נראית כך:

ns.play("https://internet-israel.com/internet_files/flash/helmsdeep.flv");

כאשר ה-URL הוא קובץ flv. במקרה הזה מדובר בסרט שאני הכנתי לפני שנים וזכויות היוצרים עליו שייכות לי.

הקוד המלא נראה כך:

package {
	import flash.display.Sprite;
	import flash.events.*;
	import flash.geom.*;
	import flash.text.*;
	import flash.net.*;
	import flash.media.*

	public class myVideoPlayer 
	{
		private var myStage;
		
		private var mute:Boolean = false;
		private var startingX:Number = 10;
		
		private var myVideo:Video = new Video();
		private var nc:NetConnection = new NetConnection();
		private var customClient:Object = new Object();
		private var ns:NetStream;
		private var videoVolumeTransform:SoundTransform = new SoundTransform();
		
		public function myVideoPlayer(myStage) 
		{
			this.myStage = myStage;
			createButton('play');
			createButton('stop');
			createButton('mute/unmute');
			
			nc.connect(null);
			ns = new NetStream(nc);
			ns.client = customClient;
			myVideo.attachNetStream(ns);

			customClient.onCuePoint = cuePointHandler;
			customClient.onMetaData = metaDataHandler;
			myStage.addChild(myVideo);
		}
		function cuePointHandler(infoObject:Object):void 
		{
    		trace("cuePoint");
		}
		function metaDataHandler(infoObject:Object):void 
		{
		    trace("metaData");
		}			
		private function createButton(buttonText:String) {
			/* Creating Sprite */
			this.startingX+=20;
			var m_animSprite:Sprite = new Sprite();
			m_animSprite.graphics.beginFill(0x000000);
			m_animSprite.graphics.drawRect(startingX, 300, 50, 50);
			m_animSprite.graphics.endFill();
			this.myStage.addChild(m_animSprite);

			/* Creating text Field */
			var myTextField:TextField = new TextField();
			myTextField.text = buttonText;
			myTextField.textColor = 0xFF0000;
			myTextField.x = startingX+5;
			myTextField.y = 300;
			this.myStage.addChild(myTextField);
			this.startingX+=100;
			
			/* Adding event handlers */
			switch (buttonText) {
				case "play" :
					myTextField.addEventListener(MouseEvent.CLICK, playMySound);
					break;
				case "stop" :
					myTextField.addEventListener(MouseEvent.CLICK, stopMySound);
					break;
				case "mute/unmute" :
					myTextField.addEventListener(MouseEvent.CLICK, muteUnmuteMySound);
					break;
				default :
					trace("Error");
			}
		}
		private function playMySound(ev:Event) 
		{
			ns.play("https://internet-israel.com/internet_files/flash/helmsdeep.flv");
		}
		private function stopMySound(ev:Event) 
		{
			ns.close();
		}
		private function muteUnmuteMySound(ev:Event) {
			
			if (this.mute == false) 
			{
				videoVolumeTransform.volume = 0;
				ns.soundTransform = videoVolumeTransform;
				this.mute = true;
			} 
			else 
			{
				videoVolumeTransform.volume = 1;
				ns.soundTransform = videoVolumeTransform;
				this.mute = false;
			}
		}
	}
}

וכך זה נראה:

יש עוד לא מעט דברים לעשות עם וידאו, אך זהו הבסיס שקל להתפתח ממנו הלאה – בזכות הדוקומנטציה.

במאמר הבא והאחרון בסדרה, אנו נלמד על SWC – דרך לשמור על האובייקטים שאתה יוצר בפלאש.