טקסט עם ActionScript 3

במאמר הקודם למדנו על bitmap וכיצד לשלב אותו בפלאש באמצעות ActionScript 3. הפעם אנו נלמד איך לשלב טקסט בפלאש שלנו עם ActionScript 3.

בעוד שב-HTML יש לנו הפרדה בין טקסט לבין input שבו אנו מזינים טקסט, בפלאש אין הפרדה כזו. טקסט זה טקסט. אך ראשית אנו נתמקד בהכנסת טקסט סטטי. טקסט הוא אובייקט שדומה במהותו ל-sprite או ל-shape שעליהם עברנו במאמרים קודמים. מדובר באובייקט מסוג TextField שיש לו תכונה שנקראת text. כל מה שאנו צריכים לעשות זה ליצור את האובייקט ולהכניס לו טקסט באמצעות התכונה הזו.

וככה זה נראה, אני מייבא את flash.text, ויוצר אובייקט בדיוק כמו שיצרנו sprite. אני מכניס טקסט לתכונה של האובייקט ומצמיד אותו ל-stage:

package 
{
	import flash.text.*;

	public class myTextField {
		private var myStage;
		private var m_myTextField:TextField = new TextField();
		
		public function myTextField(myStage) 
		{
			this.myStage = myStage;
			this.m_myTextField.text = "שלום עולם";
			myStage.addChild(m_myTextField);
		}
	}
}

גם ה-fla פשוט מאד וזהה לחוטין ל-flaים האחרים שבהם השתמשנו:

var m_myTextField:myTextField  = new myTextField(stage);

וכך זה נראה, טקסט שאין לו תואר ולא הדר, אבל טקסט:

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

כך למשל שיניתי את רוחב אלמנט הטקסט ואת יישור הטקסט לימין:

package 
{
	import flash.text.*;

	public class myTextField {
		private var myStage;
		private var m_myTextField:TextField = new TextField();
		
		public function myTextField(myStage) 
		{
			this.myStage = myStage;
			this.m_myTextField.autoSize = "right";
			this.m_myTextField.width = 400;
			this.m_myTextField.text = "שלום עולם";
			myStage.addChild(m_myTextField);
		}
	}
}

וככה זה נראה במציאות:

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

באופן מפתיע, אפשר להכניס HTML למחרוזות שלנו. במקום תכונת text אנחנו צריכים להשתמש בתכונת htmlText ופשוט להכניס את ה-HTML! שימו לב לקוד הבא:

package 
{
	import flash.text.*;

	public class myTextField {
		private var myStage;
		private var m_myTextField:TextField = new TextField();
		
		public function myTextField(myStage) 
		{
			this.myStage = myStage;
			this.m_myTextField.autoSize = "right";
			this.m_myTextField.multiline = true;
			this.m_myTextField.htmlText = "
Children list:

Moshe Choen 
Haim Levi";
			myStage.addChild(m_myTextField);
		}
	}
}

מה שעשיתי כאן, מלבד להשאיר את autoSize מיושר לימין ולהכניס HTML לתכונת htmlText הוא לקבוע true לתכונת multiline שמאפשרת ששדה הטקסט יהיה באורך של כמה שורות.

ככה זה נראה בעולם האמיתי:

תגיות ה-HTML המותרות בפלאש:

• a – עבור לינקים
• b – עבור הדגשות
• br – שבירת שורה, בתנאי שיש multiline
• font – קביעת פונט. שימו לב שזה תלוי משתמש, להטמעת פונט בפלאש עצמו כדאי לקרוא בהמשך
• img – עבור תמונות. ה-SRC חייב להיות חיצוני
• i – טקסט נטוי
• li – עבור רשימה רגילה. אין צורך ב-UL או ב-OL כיוון שכל הרשימות בפלאש הן ללא מספור. בתנאי שיש multiline
• p – פסקה. בתנאי שיש multiline
• u – קו תחתון
• span- עבור span שישמש אותנו להכנסת CSS

שימוש ב-CSS

אפשר גם להכניס CSS לטקסט. כן! CSS של ממש עם classים שיטפל בכל נושא עיצוב הטקסט. איך עושים את זה? יוצרים אובייקט שמכיל את ה-CSS. יוצרים אובייקט ששמו הוא styles ומפעילים מתודה שנקראת parseCSS ואת התוצאה מעבירים לתכונת styleSheet של אובייקט textField. הנה, אני אעשה זאת:

package 
{
	import flash.text.*;

	public class myTextField {
		private var myStage;
		private var m_myTextField:TextField = new TextField();
		
		public function myTextField(myStage) 
		{
			var cssString:String = "p{color:#FF0000; font-family:Arial; font-size: 15px;}";
			var styles:StyleSheet = new StyleSheet();
			styles.parseCSS(cssString);
			m_myTextField.styleSheet = styles;
			
			this.myStage = myStage;
			this.m_myTextField.autoSize = "right";
			this.m_myTextField.multiline = true;
			this.m_myTextField.htmlText = "
Children list:

Moshe Choen 
Haim Levi";
			myStage.addChild(m_myTextField);
		}
	}
}

בעולם האמיתי זה נראה כך:

את ה-CSS אפשר לייבא גם ממקור חיצוני (עוד על ייבוא, באחד המאמרים הבאים).

עיצוב באמצעות TextFormat

בעוד שרוב האנשים יעדיפו להשתמש ב-CSS, ישנה עוד דרך לעצב טקסט והיא באמצעות אובייקט TextFormat שמאפשר שליטה הרבה יותר הדוקה על הטקסט. אם צריך עיצוב ל-100 האותיות הראשונות למשל, או לאות 1-5, השימוש ב-TextFormat יהיה אידיאלי.

ראשית צריך להגדיר את האובייקט ואז להשתמש במתודת setTextFormat של textField על מנת להטמיע את ה-textformat. חשוב מאד לבצע את ההטמעה רק אחרי שהכנסנו את הטקסט, אחרת זה לא יעבוד.

package 
{
	import flash.text.*;

	public class myTextField {
		private var myStage;
		private var m_myTextField:TextField = new TextField();
		
		public function myTextField(myStage) 
		{
			/*Creating textFormat Object */
			var textFormat:TextFormat = new TextFormat();
			textFormat.font = "Arial";
			textFormat.color = 0x4444FF;
			textFormat.size = 18;
			
			this.myStage = myStage;
			this.m_myTextField.multiline = true;
			this.m_myTextField.width = 400;
			this.m_myTextField.htmlText= "
Children list:

Moshe Choen 
Haim Levi";
			
			/* Adding (after creating the text) the text format to text field */
			this.m_myTextField.setTextFormat(textFormat);
			
			myStage.addChild(m_myTextField);
		}
	}
}

וכך זה נראה בעולם האמיתי:

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

nameField.setTextFormat(textFormat, 5, 10);

זה מכניס את העיצוב מאות 5 עד אות 10. אם אני רוצה שהוא יכניס את העיצוב מאות 5 ועד הסוף, אני פשוט מעביר רק את 5.

במאמר הבא אנו נעבור על inputs באמצעות ActionScript 3