אינטרנט ישראל
  • ראשי
  • אודות רן בר-זיק ואינטרנט ישראל
  • ערוץ טלגרם
  • מסטודון
  • התחברו אלי בטוויטר
  • התחברו אלי בלינקדאין
  • ספר ג'אווהסקריפט
  • ראשי
  • אודות רן בר-זיק ואינטרנט ישראל
  • ערוץ טלגרם
  • מסטודון
  • התחברו אלי בטוויטר
  • התחברו אלי בלינקדאין
  • ספר ג'אווהסקריפט
ראשי » מדריכים » לימוד Action Script 3 ו-פלאש » וידאו ב-ActionScript 3

וידאו ב-ActionScript 3

רן בר-זיק אוגוסט 11, 2009 9:03 am אין תגובות

מאמר המסביר כיצד ליצור וידאו בסיסי בפלאש.

המאמר הקודם במדריך ה-AS3אודיו עם ActionScript 3
המאמר הבא במדריך ה-AS3יצירת SWC עם פלאש
כדאי תמיד להשאר מעודכנים! אם יש לכם טלגרם, בדקו את ערוץ הטלגרם של האתר שבו אני מעדכן על פוסטים חדשים 🙂 אם אתם רוצים ללמוד תכנות באופן מקיף ומסודר, הצטרפו לאלפי הלומדים בפרויקט "ללמוד ג'אווהסקריפט בעברית" שמלמד לתכנת בג'אווהסקריפט, ב-Node.js ובריאקט וגם מלמד על תרומה לקוד פתוח. גם ספרים דיגיטליים וגם ספרים מודפסים. בשיתוף הקריה האקדמית אונו ובתמיכת חברות מובילות כגון Wix, Outbrain, Elementor, Iron Source, Chegg, Really Good ועוד.

במאמר הקודם למדנו על אודיו ב-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 – דרך לשמור על האובייקטים שאתה יוצר בפלאש.

כדאי תמיד להשאר מעודכנים! אם יש לכם טלגרם, בדקו את ערוץ הטלגרם של האתר שבו אני מעדכן על פוסטים חדשים 🙂 אם אתם רוצים ללמוד תכנות באופן מקיף ומסודר, הצטרפו לאלפי הלומדים בפרויקט "ללמוד ג'אווהסקריפט בעברית" שמלמד לתכנת בג'אווהסקריפט, ב-Node.js ובריאקט וגם מלמד על תרומה לקוד פתוח. גם ספרים דיגיטליים וגם ספרים מודפסים. בשיתוף הקריה האקדמית אונו ובתמיכת חברות מובילות כגון Wix, Outbrain, Elementor, Iron Source, Chegg, Really Good ועוד.
קרנה של פלאש ירדה בשנים האחרונות, אבל כאן תוכלו ללמוד AS3 או לשפר את הידע שלכם בשפה זו.
המדריך ללימוד Action Scrip 3
ActionScript 3
ללמוד ג'אווהסקריפט בעברית

ללמוד לתכנת ג'אווהסקריפט בעברית שגייס יותר משלוש מאות אלף שקל ולמעלה מ-2000 תומכים - בואו ללמוד עכשיו איך לתכנת.

רשימת הנושאים
  • מדריכים
    • ריאקט
    • טייפסקריפט
    • ECMAScript 6
    • ES20XX
    • Node.js
    • Express
    • רספברי פיי
    • Babel
    • docker
    • MongoDB
    • Git
    • לימוד MySQL
    • SASS
    • jQuery
    • CSS3
    • HTML 5
    • SVN
    • LESS
  • פיתוח אינטרנט
    • פתרונות ומאמרים על פיתוח אינטרנט
    • jQuery Scripts
    • jQuery למתקדמים
    • יסודות בתכנות
    • נגישות אינטרנט
  • חדשות אינטרנט
  • מידע כללי על אינטרנט
    • רשת האינטרנט
    • בניית אתרי אינטרנט
  • rss logo

    לכל המאמרים

    לכל המאמרים שפורסמו באינטרנט ישראל משנת 2008 ועד עכשיו.
  • rss logo

    RSS Feed

    משתמשים בקורא RSS? אם כן, עקבו אחרי אינטרנט ישראל באמצעות פיד ה-RSS!
    מה זה RSS?
  • Twitter logo

    עקבו אחרי בטוויטר

    בחשבון הטוויטר שלי אני מפרסם עדכונים מהירים על חדשות בתחום התכנות והיזמות, התרעות על מצבי חירום ורכילות בוערת על תחום הווב.
    מה זה טוויטר?
  • facebook like image

    ערוץ הטלגרם של אינטרנט ישראל

    בערוץ הטלגרם של אינטרנט ישראל אני מפרסם את הפוסטים של באתר וכן עדכונים טכנולוגיים נוספים.
    מה זה טלגרם?
  • github logo

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

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

כל הזכויות שמורות לרן בר-זיק ולאינטרנט ישראל | מדיניות הפרטיות של אתר אינטרנט ישראל | אתר אינטרנט ישראל נגיש לפי תקן WCAG 2.0 AA | הצהרת הנגישות של האתר | אבטחת מידע ודיווח על בעיית אבטחת מידע

גלילה לראש העמוד