למבוא – HTML5 למפתחי ActionScript3
בשיעור הזה נראה כיצד ליצור את הבמה ולהוסיף לה את האלמנט הגרפי הבסיסי ביותר ה Shape. נשתמש בפקודות ציור בסיסיות בכדי לצייר על ה Shape. בנוסף ניצור אנימציה בסיסית תוך שימוש בפונקציה onEnterFrame.
נסתכל על הדוגמא הבאה: לחץ כאן בכדי להריץ את הדוגמא
<html lang="en">
<head>
<meta charset="utf-8">
<title>Ronen Tsamir: JavaScript AS3 Sample 1 </title>
<script type="text/javascript" src="DisplayObject/Shape.js"></script>
<script type="text/javascript" src="DisplayObject/Sprite.js"></script>
<script type="text/javascript" src="DisplayObject/ImageLoader.js"></script>
<script type="text/javascript" src="InitStage.js"></script>
</head>
<body>
<script type="text/javascript">
CreateStage(700,500,45);
var shape1 = new DisplayObject.Shape();
shape1.x = 100;
shape1.y = 200;
stage.addChild(shape1);
shape1.drawShape = function()
{
graphics.lineWidth=7;
graphics.lineJoin= "round";
graphics.beginPath();
graphics.rect(-10,-100,20,200)
graphics.stroke();
graphics.closePath();
}
function onEnterFrame()
{
shape1.x+=1;
if(shape1.x > mCanvas.width)
shape1.x = 1;
shape1.rotation+=0.005;
}
</script>
</body>
</html>
אם הצלחתי ביצירת הספרייה. אזי כל מפתח AS3, גם אם אינו מכיר JS, יכול להבין את הקוד הזה.
בכל זאת נראה מה היה לנו כאן:
קטע הקוד הבא טוען את קבצי הסיפריה.
<script type="text/javascript" src="DisplayObject/Sprite.js"></script>
<script type="text/javascript" src="DisplayObject/ImageLoader.js"></script>
<script type="text/javascript" src="InitStage.js"></script>
ועכשיו לקוד עצמו:
השורה הבאה יוצרת את הבמה (Stage), למעשה יוצרת Canvas בגודל של 700 על 500 וקובעת מהירות ריפרוש של 45 פריימים לשנייה (FPS)
בקטע הקוד הבא אנחנו יוצרים אובייקט מסוג Shape, קובעים לו מיקום של 100 על 200 ומוסיפים אותו לבמה.
הפונקציה drawShape תיקרא למעשה בכל פעם שה Shape יצוייר למסך. כלומר זו פונקציה וירטואלית במחלקה Shape שכל מי אשר מממש Shape אמור לדרוס אותה. במקרה הנ"ל אנו מציירים מלבן. לא אכנס כאן לפקודות ציור עצמן, יש מספיק מקומות ברשת שמלמדות אותן.
{
graphics.lineWidth=7;
graphics.lineJoin= "round";
graphics.beginPath();
graphics.rect(-10,-100,20,200)
graphics.stroke();
graphics.closePath();
}
למעשה כל מה שנשאר זה להוסיף פונקציית onEnterFrame. בדוגמא הזו אני מסובב את הצורה ומזיז אותה על ציר ה X
{
shape1.x+=1;
if(shape1.x > mCanvas.width)
shape1.x = 1;
shape1.rotation+=0.005;
}
שימוש ב Sprite
לשיעור הקודם – הכרת ה Stage ו ה Shape
בשיעור זה נילמד על ה Sprite. למעשה ה Sprite כפי שכבר ציינתי יורש מ Shape ומוסיף שתי פונקציות חשובות addChild ו removeChild. כלומר, על ה Sprite אפשר להוסיף אלמנטים גרפיים וכך לנהל היררכיה גרפית , בדומה לפלאש. למעשה ה stage הוא ה Sprite הראשון בהיררכיה.
נוסיף את הקוד הבא להדוגמא הקודמת: לחץ כאן להרצת הדוגמא.
sprite1.x = 200;
sprite1.y = 200;
stage.addChild(sprite1);
בקטע קוד הבא ניצור שני Shapes חדשים ונוסיף אותם ל Sprite במקומות שונים.
בשביל לחסוך יצרתי אותם כהעתק של shape1 מהדוגמא הקודמת:
shape2.y = 0;
shape2.x = -50;
sprite1.addChild(shape2);
var shape3 = shape1.clone();
shape3.y = 0;
shape3.x = 50;
sprite1.addChild(shape3);
עכשיו, בשביל להדגיש את ההררכיה, נסובב את ה Sprite בלולאת ה onEnterFrame וניראה שבעצם 2 הצורות שהוספנו עליו מסתובבות.
אז נוסיף את השורה הבאה לפונקציה onEnterFrame
לסיום השעור, הקוד כולו:
<html lang="en">
<head>
<meta charset="utf-8">
<title>Ronen Tsamir: JavaScript AS3 Sample 1 </title>
<script type="text/javascript" src="DisplayObject/Shape.js"></script>
<script type="text/javascript" src="DisplayObject/Sprite.js"></script>
<script type="text/javascript" src="DisplayObject/ImageLoader.js"></script>
<script type="text/javascript" src="InitStage.js"></script>
</head>
<body>
<script type="text/javascript">
CreateStage(700,500,45);
var shape1 = new DisplayObject.Shape();
shape1.x = 100;
shape1.y = 200;
stage.addChild(shape1);
shape1.drawShape = function()
{
graphics.lineWidth=7;
graphics.lineJoin= "round";
graphics.beginPath();
graphics.rect(-10,-100,20,200)
graphics.stroke();
graphics.closePath();
}
var sprite1 = new DisplayObject.Sprite();
sprite1.x = 200;
sprite1.y = 200;
stage.addChild(sprite1);
var shape2 = shape1.clone();
shape2.y = 0;
shape2.x = -50;
sprite1.addChild(shape2);
var shape3 = shape1.clone();
shape3.y = 0;
shape3.x = 50;
sprite1.addChild(shape3);
function onEnterFrame()
{
shape1.x+=1;
if(shape1.x > mCanvas.width)
shape1.x = 1;
shape1.rotation+=0.005;
sprite1.rotation+=0.05;
}
</script>
</body>
</html>