הכרת ה Stage ו ה Shape

למבוא – HTML5 למפתחי ActionScript3


בשיעור הזה נראה כיצד ליצור את הבמה ולהוסיף לה את האלמנט הגרפי הבסיסי ביותר ה Shape. נשתמש בפקודות ציור בסיסיות בכדי לצייר על ה Shape. בנוסף ניצור אנימציה בסיסית תוך שימוש בפונקציה onEnterFrame.

נסתכל על הדוגמא הבאה: לחץ כאן בכדי להריץ את הדוגמא

<!DOCTYPE html>
<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/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>

ועכשיו לקוד עצמו:
השורה הבאה יוצרת את הבמה (Stage), למעשה יוצרת Canvas בגודל של 700 על 500 וקובעת מהירות ריפרוש של 45 פריימים לשנייה (FPS)

    CreateStage(700,500,45);

בקטע הקוד הבא אנחנו יוצרים אובייקט מסוג Shape, קובעים לו מיקום של 100 על 200 ומוסיפים אותו לבמה.

var shape1 = new DisplayObject.Shape();
    shape1.x = 100;
    shape1.y = 200;
    stage.addChild(shape1);

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

    shape1.drawShape = function()
    {
        graphics.lineWidth=7;
        graphics.lineJoin= "round";
        graphics.beginPath();
        graphics.rect(-10,-100,20,200)
        graphics.stroke();
        graphics.closePath();
}

למעשה כל מה שנשאר זה להוסיף פונקציית onEnterFrame. בדוגמא הזו אני מסובב את הצורה ומזיז אותה על ציר ה X

       function onEnterFrame()
   {
       shape1.x+=1;
       if(shape1.x > mCanvas.width)
           shape1.x = 1;
       shape1.rotation+=0.005;
   }

כתיבת תגובה

האימייל לא יוצג באתר.

תגי HTML מותרים: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>