HTML5 और ईजीलजेएस पर 8 मार्च के लिए ग्रीटिंग कार्ड बनाना

(तस्वीर क्लिक करने योग्य और बधाई है)

सामान्य विचार : एक सुंदर तस्वीर की पृष्ठभूमि पर और वसंत संगीत के लिए उड़ान तितलियों। ( मैं तुरंत स्वीकार करता हूं कि मेरे पास एक पोस्टकार्ड का सिल्वरलाइट संस्करण भी था जो मैंने एक साल पहले किया था। सिल्वरलाइट में तितली एनीमेशन का एक पाठ । )

मानक सीएसएस टूल के अलावा, हम पोस्टकार्ड को रेंडर करने के लिए एचटीएमएल 5 कैनवस और इजीलजेएस एनीमेशन लाइब्रेरी का उपयोग करेंगे।

तितली एनीमेशन

हम इस धारणा के साथ शुरू करेंगे कि आपने पहले से ही तितलियों को तैयार कर लिया है और आपके पास अलग-अलग पंखों के अनुरूप चित्र हैं:

चरण 1. पंखों को खींचना

आइए पंखों के सिर्फ एक जोड़े को खींचकर शुरू करें। प्रत्येक पंख को खींचने के लिए, हमें बिटमैप वर्ग की आवश्यकता है, जिसमें से हम डाउनलोड की गई छवियों के आधार पर बनाएंगे। पंखों को एक साथ रखने के लिए, हमें कंटेनर वर्ग की आवश्यकता है । इजीलजेएस में एक दृश्य प्रदान करने के लिए एक स्टेज क्लास है।

छवियाँ अपलोड करें
छवियों को डाउनलोड करने के लिए, आपको उस पर संबंधित घटनाओं को लटकाकर मानक छवि का उपयोग करने की आवश्यकता है:

// loading left wing
leftImg = new Image();
leftImg.src = leftSrc;
leftImg.onload = onWingImageLoaded;

// loading right wing
rightImg = new Image();
rightImg.src = rightSrc;
rightImg.onload = onWingImageLoaded;

(आदर्श रूप से, आपको एक बूट त्रुटि पर घटनाओं को लटका देना चाहिए और इसे सही ढंग से संभालना चाहिए।)

तितली विधानसभा
दोनों पंखों को लोड होने के बाद, उन्हें एक कंटेनर में इकट्ठा करना आवश्यक है, जिसे एक पूरे के रूप में संचालित किया जा सकता है:

// create a new container for butterfly wings
var butterfly = new Container();
// create wings
var lWing = new Bitmap(leftImg);
var rWing = new Bitmap(rightImg);

// assemble a batterfly
butterfly.addChild(lWing);
butterfly.addChild(rWing);

प्रत्येक पंख के लिए कंटेनर के अंदर आपको पंजीकरण बिंदु को स्थानांतरित करने की आवश्यकता होती है, जिसके सापेक्ष उन्हें तैनात किया जाएगा और फिर घुमाया जाएगा:

// change wings registration point inside container
lWing.regX = lWing.image.width;
lWing.regY = lWing.image.height / 2;
rWing.regX = 0;
rWing.regY = rWing.image.height / 2;

तितली का स्थान
अगला, तितली को दृश्य में जोड़ें, इसे सही जगह पर रखें और दृश्य को प्रस्तुत करना शुरू करें:

// add butterfly to stage
stage.addChild(butterfly);

// change batterfly position
butterfly.x = canvas.width * Math.random() | 0;
butterfly.y = canvas.height * Math.random() | 0;

// redraw stage
stage.update();

आम कोड

var leftSrc = "../images/Cypres 1.png" ;
var rightSrc = "../images/Cypres 2.png" ;
var leftImg;
var rightImg;
var loadedWings = 0;

function init() {
// create a new stage and point it at our canvas:
canvas = document .getElementById( "canvas" );
stage = new Stage(canvas);

// loading left wing
leftImg = new Image();
leftImg.src = leftSrc;
leftImg.onload = onWingImageLoaded;

// loading right wing
rightImg = new Image();
rightImg.src = rightSrc;
rightImg.onload = onWingImageLoaded;
}

function onWingImageLoaded( event ) {
loadedWings++;
if (loadedWings == 2)
onButterflyReady();
}

function onButterflyReady() {
// create a new container for butterfly wings
var butterfly = new Container();
// create wings
var lWing = new Bitmap(leftImg);
var rWing = new Bitmap(rightImg);

// assemble a batterfly
butterfly.addChild(lWing);
butterfly.addChild(rWing);

// change wings registration point inside container
lWing.regX = lWing.image.width;
lWing.regY = lWing.image.height / 2;
rWing.regX = 0;
rWing.regY = rWing.image.height / 2;


// add butterfly to stage
stage.addChild(butterfly);

// change batterfly position
butterfly.x = canvas.width * Math.random() | 0;
butterfly.y = canvas.height * Math.random() | 0;

// redraw stage
stage.update();
}

एक तैयार उदाहरण यहां पाया जा सकता है: उदाहरण 1 ।

चरण 2. अपने पंखों को फ्लैप करें

घड़ी
आप विभिन्न तरीकों से एनिमेशन या अनुक्रमिक कार्यक्रम चला सकते हैं। इजीलजेएस में, आप दृश्य अपडेट टाइमर की सदस्यता ले सकते हैं और हर कदम पर बदलाव कर सकते हैं। (यह एक गेम स्टेट अपडेट चक्र के समान है जिसमें एक दृश्य को टाइमर पर खींचा जाता है।)

सबसे पहले, आपको टाइमर की सदस्यता लेने की आवश्यकता है (प्रतिक्रिया आवृत्ति भी सेट की जा सकती है):

Ticker.addListener(window);

अगला, आपको खिड़कियों के दायरे में टिक फ़ंक्शन को परिभाषित करने की आवश्यकता है, जिसके अंदर आपको दृश्य की स्थिति को अपडेट करने और प्रतिपादन करने की आवश्यकता है:

// update scene on each tick
function tick() {
butterfly.move()
stage.update();
}

पंखों के कदम-दर-चरण एनीमेशन
एक तितली के एनीमेशन का वर्णन करने के लिए, आपको सभी फड़फड़ाते पंखों और आंदोलनों को अलग-अलग चरणों में तोड़ने की आवश्यकता है। लेकिन पहले, आइए एक और पैरामीटर सेट करें जो तितली की प्रारंभिक स्थिति को निर्धारित करता है - प्रारंभिक पैमाने (सिद्धांत में, आप इसे सेट नहीं कर सकते हैं, यदि आप विभिन्न आकारों की तितलियों को बनाने की योजना नहीं बनाते हैं, तो स्केल = 1.0):

// initial scale
butterfly.scale = butterfly.lWing.scaleX
= butterfly.lWing.scaleY = butterfly.rWing.scaleX
= butterfly.rWing.scaleY = 0.5 + 0.2 * Math.random();

क्षैतिज (एक्स) स्केलिंग के माध्यम से विंग एनिमेशन करना अच्छा है, और आवधिकता के लिए त्रिकोणमितीय कार्यों का उपयोग किया जा सकता है।

आइए एनीमेशन चरणों की संख्या निर्धारित करें:

// animation steps
butterfly.step = butterfly.steps = 40 + 60 * Math.random();

अब यह प्रत्येक लहर का वर्णन करने के लिए बना हुआ है:

butterfly.move = function () {
var wingAngle = (butterfly.steps - butterfly.step) / butterfly.steps * Math.PI;
butterfly.lWing.scaleX = butterfly.rWing.scaleX
= butterfly.scale * (0.4 + 0.6 * Math.abs(Math.cos(wingAngle * 4)));

butterfly.step--;
}

आम कोड

var leftSrc = "../images/Cypres 1.png" ;
var rightSrc = "../images/Cypres 2.png" ;
var leftImg;
var rightImg;
var loadedWings = 0;
var butterfly;
var butterflyLoaded = false ;

function init() {
// create a new stage and point it at our canvas:
canvas = document .getElementById( "canvas" );
stage = new Stage(canvas);

// loading left wing
leftImg = new Image();
leftImg.src = leftSrc;
leftImg.onload = onWingImageLoaded;

// loading right wing
rightImg = new Image();
rightImg.src = rightSrc;
rightImg.onload = onWingImageLoaded;

// subscribe to Ticker
Ticker.addListener(window);
}

function onWingImageLoaded( event ) {
loadedWings++;
if (loadedWings == 2)
onButterflyReady();
}

function onButterflyReady() {
// create a new container for butterfly wings
butterfly = new Container();
// create wings
butterfly.lWing = new Bitmap(leftImg);
butterfly.rWing = new Bitmap(rightImg);

// assemble a batterfly
butterfly.addChild(butterfly.lWing);
butterfly.addChild(butterfly.rWing);

// change wings registration point inside container
butterfly.lWing.regX = butterfly.lWing.image.width;
butterfly.lWing.regY = butterfly.lWing.image.height / 2;
butterfly.rWing.regX = 0;
butterfly.rWing.regY = butterfly.rWing.image.height / 2;


// add butterfly to stage
stage.addChild(butterfly);

// change batterfly position
butterfly.x = canvas.width * Math.random() | 0;
butterfly.y = canvas.height * Math.random() | 0;

// initial rotation
butterfly.lWing.rotation = butterfly.rWing.rotation
= butterfly.angle = 360 * Math.random() | 0;

// initial scale
butterfly.scale = butterfly.lWing.scaleX
= butterfly.lWing.scaleY = butterfly.rWing.scaleX
= butterfly.rWing.scaleY = 0.5 + 0.2 * Math.random();

// animation steps
butterfly.step = butterfly.steps = 40 + 60 * Math.random();

// move butterfly
butterfly.move = function () {
var wingAngle = (butterfly.steps - butterfly.step) / butterfly.steps * Math.PI;
butterfly.lWing.scaleX = butterfly.rWing.scaleX
= butterfly.scale * (0.4 + 0.6 * Math.abs(Math.cos(wingAngle * 4)));

butterfly.step--;
}

butterflyLoaded = true ;

// redraw stage
stage.update();
}

// update scene on each tick
function tick() {
if (butterflyLoaded && butterfly.step >= 0) {
butterfly.move()
}
stage.update();
}

एक समाप्त उदाहरण यहां पाया जा सकता है: उदाहरण 2 ।

चरण 3. तितली को स्थानांतरित करें

अब जब हमने तितली को इसके पंखों को फड़फड़ाना सिखाया है, तो चलिए इसे आगे बढ़ाते हैं। ऐसा करने के लिए, हमें रोटेशन के कोण और आंदोलन की दिशा और गति को ध्यान में रखना होगा:

// initial rotation
butterfly.lWing.rotation = butterfly.rWing.rotation
= butterfly.angle = 360 * Math.random() | 0;
// movement direction
butterfly.direction = 8 * Math.random() - 4.0;
// movement speed
butterfly.speed = 5 * Math.random() + 5;

बटरफ्लाई । लो फंक्शन के अंदर, यह रोटेशन एंगल में एक बदलाव जोड़ने के लिए बना हुआ है:

butterfly.angle += butterfly.direction + (5.0 * Math.random() - 2.5);
butterfly.lWing.rotation = butterfly.rWing.rotation = butterfly.angle;

और आंदोलन वृद्धि:

butterfly.x += (butterfly.speed * Math.sin((butterfly.angle) / 180.0 * Math.PI));
butterfly.y -= (butterfly.speed * Math.cos((butterfly.angle) / 180.0 * Math.PI));

तितली को उड़ना चाहिए।



एक समाप्त उदाहरण यहां पाया जा सकता है: उदाहरण 3 ।

चरण 4. हम कोड बनाते हैं

तब से हमें तितलियों के पूरे संग्रह को संसाधित करने की आवश्यकता होगी, एक अलग ब्लॉक में तितली के काम का वर्णन करने वाले कोड का चयन करना तर्कसंगत है (जोड़ा गया माउस प्रतिक्रिया भी नीले रंग में हाइलाइट की गई है):

( function (window) {

Butterfly = function (leftImg, rightImg) {
this .initialize();
this .initButterfly(leftImg, rightImg);
}

var p = Butterfly.prototype = new Container();

p.lWing = null ;
p.rWing = null ;
p.angle = 0;
p.direction = 0;
p.speed = 0;

p.steps = 0;
p.step = -1;

p.initButterfly = function (leftImg, rightImg) {
// create wings
this .lWing = new Bitmap(leftImg);
this .rWing = new Bitmap(rightImg);

// change wings registration point inside container
this .lWing.regX = this .lWing.image.width;
this .lWing.regY = this .lWing.image.height / 2;
this .rWing.regX = 0;
this .rWing.regY = this .rWing.image.height / 2;

// initial rotation
this .lWing.rotation = this .rWing.rotation = this .angle = 360 * Math.random() | 0;

// initial scale
this .scale = this .lWing.scaleX = this .lWing.scaleY = this .rWing.scaleX = this .rWing.scaleY = 0.5 + 0.2 * Math.random();

// assembling batterfly
this .addChild( this .lWing);
this .addChild( this .rWing);

this .mouseEnabled = true ;
this .onMouseOver = function (e) { this .reset(); };
};

p.reset = function () {
// animation steps
this .step = this .steps = 40 + 60 * Math.random();
// movement direction
this .direction = 8 * Math.random() - 4.0;
// movement speed
this .speed = 5 * Math.random() + 5;
};

p.move = function () {
// update rotation
this .angle += this .direction + (5.0 * Math.random() - 2.5);
this .lWing.rotation = this .rWing.rotation = this .angle;

// update wings
var wingAngle = ( this .steps - this .step) / this .steps * Math.PI;
this .lWing.scaleX = this .rWing.scaleX = this .scale * (0.4 + 0.6 * Math.abs(Math.cos(wingAngle * 4)));

// update position
this .x += ( this .speed * Math.sin(( this .angle) / 180.0 * Math.PI));
this .y -= ( this .speed * Math.cos(( this .angle) / 180.0 * Math.PI));
this .step--;
};

p.isActive = function () {
return this .step >= 0;
};

window.Butterfly = Butterfly;
} (window));

कोड का शेष टुकड़ा थोड़ा सरल है, आपको माउस से ईवेंट ट्रैकिंग को सक्षम करने की भी आवश्यकता है:

var leftSrc = "../images/Cypres 1.png" ;
var rightSrc = "../images/Cypres 2.png" ;
var leftImg;
var rightImg;
var loadedWings = 0;
var butterfly;
var butterflyLoaded = false ;

function init() {
// create a new stage and point it at our canvas:
canvas = document .getElementById( "canvas" );
stage = new Stage(canvas);
stage.enableMouseOver(10);

// loading left wing
leftImg = new Image();
leftImg.src = leftSrc;
leftImg.onload = onWingImageLoaded;

// loading right wing
rightImg = new Image();
rightImg.src = rightSrc;
rightImg.onload = onWingImageLoaded;

// subscribe to Ticker
Ticker.addListener(window);
}

function onWingImageLoaded( event ) {
loadedWings++;
if (loadedWings == 2)
onButterflyImagesReady();
}

function onButterflyImagesReady() {
// create a new container for butterfly wings
var butterfly = new Butterfly(leftImg, rightImg);

// add butterfly to stage
stage.addChild(butterfly);

// change batterfly position
butterfly.x = canvas.width * Math.random() | 0;
butterfly.y = canvas.height * Math.random() | 0;

butterfly.reset();
butterflyLoaded = true ;

// redraw stage
stage.update();
}

// update scene on each tick
function tick() {
if (butterflyLoaded && butterfly.step >= 0) {
butterfly.move()
}
stage.update();
}

एक तैयार उदाहरण यहां पाया जा सकता है: उदाहरण 4 ।

बहुत सी तितलियाँ

अब और अधिक तितलियों को जोड़ते हैं। हमें विंग इमेज एड्रेस की एक सरणी की आवश्यकता है:

var bfimgsrc = [{ left: "../images/Didius 1.png" , right: "../images/Didius 2.png" },
{ left: "../images/Amphitrion 1.png" , right: "../images/Amphitrion 2.png" },
{ left: "../images/Catenarius 1.png" , right: "../images/Catenarius 2.png" },
{ left: "../images/Cyanides 1.png" , right: "../images/Cyanides 2.png" },
{ left: "../images/Cypres 1.png" , right: "../images/Cypres 2.png" },
{ left: "../images/Diana 1.png" , right: "../images/Diana 2.png" },
{ left: "../images/Hecuba 1.png" , right: "../images/Hecuba 2.png" },
{ left: "../images/Peleides 1.png" , right: "../images/Peleides 2.png" },
{ left: "../images/Polyphemus 1.png" , right: "../images/Polyphemus 2.png" },
{ left: "../images/Sulkowski 1.png" , right: "../images/Sulkowski 2.png" }];

हम एक अलग फंक्शन लोड में तितलियों को बनाएंगे। बटरफ्लाईस और हम माउस पर क्लिक करके अधिक तितलियों को लॉन्च करेंगे:

function init() {
// create a new stage and point it at our canvas:
canvas = document .getElementById( "canvas" );
stage = new Stage(canvas);
stage.enableMouseOver(10);

loadButterflyis(18);

canvas.onclick = function () {
loadButterflyis(5);
};

// subscribe to Ticker
Ticker.addListener(window);
}

function loadButterflyis(count) {
for ( var k = 0; k < count; k++) {
var i = Math.floor(bfimgsrc.length * Math.random());

var bfimages = {
left: new Image(),
right: new Image(),
loadedWings: 0,
onready: onButterflyImagesReady
};

// loading left wing
bfimages.left.src = bfimgsrc[i].left;
bfimages.left.onload = onWingImageLoaded;
bfimages.left.butterfly = bfimages;

// loading right wing
bfimages.right.src = bfimgsrc[i].right;
bfimages.right.onload = onWingImageLoaded;
bfimages.right.butterfly = bfimages;
}
}

अपडेटेड टिक :

// update scene on each tick
function tick() {
for ( var i = 0; i < bfs.length; i++) {
var butterfly = bfs[i];
if (butterfly.isActive()) {
butterfly.move();
}
else if (Math.random() > 0.999) {
butterfly.reset();
}
}
stage.update();
}

एक तैयार उदाहरण यहां पाया जा सकता है: उदाहरण 5 ।

विशेष प्रभाव

अतिरिक्त प्रभाव काफी सरल होगा। थीम्ड पृष्ठभूमि:



और पृष्ठभूमि में ऑडियो:

< audio src ="audio/ArrivalForest.mp3" autoplay loop />

(मोगल उत्साही अन्य ऑडियो प्रारूपों के लिए आसानी से समर्थन जोड़ सकते हैं।)

अंतिम संस्करण भी उपलब्ध है ।

Upd।

मैं होस्टिंग के साथ समस्या को हल करता हूं, इसे अस्थायी रूप से एक परीक्षण पार्किंग पर और अलग से लगाता हूं : मध्यवर्ती उदाहरण और एक फ़ाइल में अंतिम संस्करण - narod.ru/disk/6923480001/March8.zip.html

Source code was highlighted with Source Code Highlighter .