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

input וטפסים ב-ActionScript 3

רן בר-זיק אוגוסט 6, 2009 6:42 am אין תגובות

במאמר מוסבר כיצד יוצרים input וטופס בפלאש באמצעות ActionScript 3

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

במאמר הקודם למדנו על שדות טקסט בפלאש עם ActionScript 3. במאמר הזה אנו נלמד על איך לייצר input. האמת היא שכפי שציינתי במאמר הקודם, TextField הוא אובייקט שמשמש אותנו גם להכנסת טקסט וגם ל-input. על מנת להפוך טקסט ל-input, כל מה שאנו צריכים לעשות זה לשנות את תכונת ה-type של אובייקט ה-TextField שלנו ל-input:


package 
{
	import flash.text.*;

	public class myTextField {
		private var myStage;
		private var m_myTextField:TextField = new TextField();
		
		public function myTextField(myStage) 
		{
			/*Creating textFormat Object */
			this.m_myTextField.type = "input";
			this.m_myTextField.border = true;
			this.m_myTextField.borderColor = 0x0000FF;

			this.myStage = myStage;
			myStage.addChild(m_myTextField);
		}
	}
}

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

וכך זה נראה:

אם אני רוצה להגביל את סוג התווים שאני מרשה למשתמשים להכניס, אני יכול לעשות את זה עם תכונת restrict של TextField. אם היא null (כמו ב-default) אז אני אוכל להכניס כל תו. אם אני רוצה להגביל אני יכול לכתוב שם "0 – 9" ובכך להגביל אותה למספרים בלבד, אני יכול לכתוב שם "0-9 A-Z" ובכך להגביל את ה-input לאותיות אנגליות גדולות ומספרים בלבד. אני יכול גם להשתמש ב-^ על מנת לאסור ספציפית על תוים מסוימים. למשל "0-9 ^" תאפשר להכניס כל תו למעט מספרים. אם רוצים להכניס את התוו – משתמשים ב: "-\\".

דוגמא תראה כמה זה פשוט:


package 
{
	import flash.text.*;

	public class myTextField {
		private var myStage;
		private var m_myTextField:TextField = new TextField();
		
		public function myTextField(myStage) 
		{
			/*Creating textFormat Object */
			this.m_myTextField.type = "input";
			this.m_myTextField.border = true;
			this.m_myTextField.borderColor = 0x0000FF;
			this.m_myTextField.restrict = "0-9 \\-";
			this.m_myTextField.x = 10;
			this.myStage = myStage;
			myStage.addChild(m_myTextField);
		}
	}
}

כך זה נראה בעולם האמיתי, שימו לב שאפשר להכניס רק מספרים ומקף.

טפסים

אם יש לנו שדה (אחד או יותר) אנחנו צריכים גם כפתור. באופן עקרוני, שום דבר לא מונע מאיתנו ליצור sprite עם event של קליק שגורם להרצת פונקציה שלוקחת את הטקסט משדה הטקסט ושולחת אותו הלאה. חוץ מנושא השליחה, עשינו את הכל. אבל זו הזדמנות מצויינת לעבור על אובייקט שנקרא SimpleButton. מדובר באובייקט שיעזור לנו ליצור כפתור מודרני ונחמד שיש בו כמה מצבים – מצב רגיל (כאשר אף אחד לא נוגע בכפתור), מצב של hover (כאשר העכבר הוא מעל הכפתור), מצב של down (כאשר אני לוחץ על הכפתור). נכון, באמצעות האירועים שכבר למדנו ו-sprite אפשר לעשות את כל זה. אבל SimpleButton פשוט חוסך לנו עבודה.

כל מה שעלי לעשות זה ליצור 3 סוגים של sprite ואז להכניס את כולם ל-constructor של SimpleButton שידע כבר לעשות את הכל. כך אני יוצר את הכפתור:


package 
{
	import flash.display.*;

	public class myTextField {
		private var myStage;
		
		public function myTextField(myStage) 
		{
			/* the over state will be red, this will show when the user hovers over the button */
			var overSprite:Sprite = new Sprite();
			overSprite.graphics.beginFill(0xff0000, 1);
			overSprite.graphics.drawRect(0, 0, 100, 100);
			overSprite.graphics.endFill();
			/* the up state will be green, this will show when the user is not interacting with the button */
			var upSprite:Sprite = new Sprite();
			upSprite.graphics.beginFill(0x00ff00, 1);
			upSprite.graphics.drawRect(0, 0, 100, 100);
			upSprite.graphics.endFill();
			/* this is the down state sprite which will show when the user clicks on the  button */
			var downSprite:Sprite = new Sprite();
			downSprite.graphics.beginFill(0x000000, 1);
			downSprite.graphics.drawRect(0, 0, 100, 100);
			downSprite.graphics.endFill();
			/* now we just pass the sprites into the SimpleButton so that it has all of its
			states immediately, the last parameter describes the hitTestState, that is, the
			area that can be moused over or clicked on */
			var btnOne:SimpleButton = new SimpleButton(upSprite, overSprite, downSprite, overSprite);
			
			btnOne.x = 200;
			btnOne.y = 200;
			
			/* adding the textfield and the button */
			myStage.addChild(btnOne);
		}
	}
}

וככה זה נראה, נסו לעבור וללחוץ על הכפתור. מאד פשוט ואלגנטי:

עכשיו נוסיף את שדה הטקסט שלנו ל-constructor ואני אוסיף event listener לכפתור שברגע שהוא נלחץ, הוא יקח את הטקסט שיש בשדה וידפיס אותו ב-trace.


package 
{
	import flash.text.*;
	import flash.display.*;
	import flash.events.*;

	public class myTextField {
		private var myStage;
		private var m_myTextField:TextField = new TextField();
		
		public function myTextField(myStage) 
		{
			/*Creating textFormat Object */
			this.m_myTextField.type = "input";
			this.m_myTextField.border = true;
			this.m_myTextField.borderColor = 0x0000FF;
			this.m_myTextField.restrict = "0-9 \\-";
			this.m_myTextField.x = 10;
			this.m_myTextField.maxChars = 11;
			this.myStage = myStage;
			
			
			/* the over state will be red, this will show when the user hovers over the button */
			var overSprite:Sprite = new Sprite();
			overSprite.graphics.beginFill(0xff0000, 1);
			overSprite.graphics.drawRect(0, 0, 100, 100);
			overSprite.graphics.endFill();
			/* the up state will be green, this will show when the user is not interacting with the button */
			var upSprite:Sprite = new Sprite();
			upSprite.graphics.beginFill(0x00ff00, 1);
			upSprite.graphics.drawRect(0, 0, 100, 100);
			upSprite.graphics.endFill();
			/* this is the down state sprite which will show when the user clicks on the  button */
			var downSprite:Sprite = new Sprite();
			downSprite.graphics.beginFill(0x000000, 1);
			downSprite.graphics.drawRect(0, 0, 100, 100);
			downSprite.graphics.endFill();
			/* now we just pass the sprites into the SimpleButton so that it has all of its
			states immediately, the last parameter describes the hitTestState, that is, the
			area that can be moused over or clicked on */
			var btnOne:SimpleButton = new SimpleButton(upSprite, overSprite, downSprite, overSprite);
			btnOne.addEventListener(MouseEvent.CLICK, getTheText)
			
			btnOne.x = 200;
			btnOne.y = 200;
			
			/* adding the textfield and the button */
			myStage.addChild(m_myTextField);
			myStage.addChild(btnOne);
		}
		function getTheText(ev:Event)
		{
			var myText = this.m_myTextField.text;
			trace(myText);
		}
	}
}

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

במאמר הבא אנו נלמד על External data – איך לשלוח ולקבל מידע מ/אל פלאש באמצעות ActionScript 3.

כדאי תמיד להשאר מעודכנים! אם יש לכם טלגרם, בדקו את ערוץ הטלגרם של האתר שבו אני מעדכן על פוסטים חדשים 🙂 אם אתם רוצים ללמוד תכנות באופן מקיף ומסודר, הצטרפו לאלפי הלומדים בפרויקט "ללמוד ג'אווהסקריפט בעברית" שמלמד לתכנת בג'אווהסקריפט, ב-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 | הצהרת הנגישות של האתר | אבטחת מידע ודיווח על בעיית אבטחת מידע

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