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

טקסט עם ActionScript 3

רן בר-זיק אוגוסט 5, 2009 12:23 pm אין תגובות

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

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

במאמר הקודם למדנו על 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

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

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