לשיעור הקודם – הכרת ה Stage ו ה Shape
בשיעור זה נילמד על ה Sprite. למעשה ה Sprite כפי שכבר ציינתי יורש מ Shape ומוסיף שתי פונקציות חשובות addChild ו removeChild. כלומר, על ה Sprite אפשר להוסיף אלמנטים גרפיים וכך לנהל היררכיה גרפית , בדומה לפלאש. למעשה ה stage הוא ה Sprite הראשון בהיררכיה.
נוסיף את הקוד הבא להדוגמא הקודמת: לחץ כאן להרצת הדוגמא.
var sprite1 = new DisplayObject.Sprite();
sprite1.x = 200;
sprite1.y = 200;
stage.addChild(sprite1);
sprite1.x = 200;
sprite1.y = 200;
stage.addChild(sprite1);
למעשה הקוד הזה זהה ממש ל AS3. יצרנו Sprite והוספנו אותו לבמה במיקום 200 על 200
בקטע קוד הבא ניצור שני Shapes חדשים ונוסיף אותם ל Sprite במקומות שונים.
בשביל לחסוך יצרתי אותם כהעתק של shape1 מהדוגמא הקודמת:
בקטע קוד הבא ניצור שני Shapes חדשים ונוסיף אותם ל Sprite במקומות שונים.
בשביל לחסוך יצרתי אותם כהעתק של shape1 מהדוגמא הקודמת:
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);
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
sprite1.rotation+=0.05;
לסיום השעור, הקוד כולו:
<!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();
}
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>
<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>