Web Authoring - Web Animation με τη χρήση DHTML

Web Animation με τη χρήση DHTML
Η εμφάνιση της Dynamic HTML στο Web εξάλειψε πολλούς απο τους
περιορισμούς που ανάγκαζαν μια HTML σελίδα να είναι στατική. Το
μέγεθος και η θέση της εικόνας μπορεί να αλλάξει δυναμικά ενώ χάρη
στις δυνατότητες που προσφέρει η DHTML, οι σχεδιαστές σελίδων
μπορούν να κατασκευάσουν animated pages σε πολύ μικρό χρόνο χωρίς τη
βοήθεια του Flash και άλλων animation tools.
της Ζωής "bezalel" Μαρμαρά
Μιλήσαμε σε προηγούμενα τεύχη για τις ιδιότητες των layers. Ορίσαμε τα layers
σαν containers, τμήματα δηλαδή μιας σελίδας, στα οποία μπορούμε να
τοποθετήσουμε εικόνες, κείμενο ακόμα και plug-in objects και να τα
επεξεργαστούμε ως ξεχωριστές οντότητες. Μπορούμε δηλαδή,
χρησιμοποιώντας ένα layer και τοποθετώντας σε αυτό μια εικόνα, να της
δώσουμε κίνηση και να αλλάξουμε το μέγεθος της δυναμικά. Είχαμε δώσει
παλιότερα και παραδείγματα χρήσης layers:
<div id="MyLayer" style="position:absolute; left:213px; top:94px; width:426px;height:47px; z-

index:1"><b><font size="7" face="Arial, Helvetica, sans-serif"color="silver">This is a
layer!</font></b></div>
Καιρός να δούμε πως μπορούμε να χρησιμοποιήσουμε τις ιδιότητες TOP και LEFT
των layers για να δημιουργήσουμε κίνηση σε μια HTML σελίδα. Στο παράδειγμα
που ακολουθεί χρησιμοποιούμε τρία layers και δίνουμε κίνηση κατα μήκος και
κατα πλάτος της σελίδας. Στόχος μας είναι να φτιάξουμε μια animated greeting card
για να ευχηθούμε στους φίλους μας καλές διακοπές μέσα απο τις σελίδες μας.
Ο κώδικας
<HTML>
<HEAD>
<TITLE>Animation with DHTML - Ένα παράδειγμα</TITLE>
<META content="text/html; charset=windows-1253" http-equiv=Content-Type>
<SCRIPT language=JavaScript>
var pos1=-95;
var pos2=-95;
var pos3=-95;
var speed1 = Math.floor(Math.random()*10)+2;

function next() {
pos1 += speed1;
pos2 += speed2;
pos3 += speed3;
if (pos1 > 370) pos1 = -95;
if (pos2 > 360) pos2 = -95;
if (pos3 > 370) pos3 = -95;
if (document.layers) {
document.layers[0].left = pos1;
document.layers[1].left = pos2;
document.layers[2].top = pos3;
}
else {
image1.style.left = pos1;
image2.style.left = pos2;
image3.style.top = pos3;
}
}
</SCRIPT>
<style type="text/css">

</style>
</HEAD>
<BODY onload=next();>
<DIV id=image1
style="HEIGHT: 81px; LEFT: 141px; POSITION: absolute; TOP: 274px; WIDTH:
75px"><IMG alt="" border=0 height=86 src="asterias.GIF" width=87> </DIV>
<DIV id=image2 style="HEIGHT: 40px; LEFT: 24px; POSITION: absolute; TOP:

105px; WIDTH: 228px; z-index: 3"><b><font color="#FF6600" size="5"
face="Times New Roman, Times, serif"><i><font face="Arial, Helvetica, sans-
serif">Καλές Διακοπές!!! </font></i></font></b></DIV>
<DIV id=image3 style="HEIGHT: 52px; LEFT: 2px; POSITION: absolute; TOP:

161px; WIDTH: 114px"><IMG alt="" border=0 height=89 src="bear.GIF"
width=122> </DIV>
</BODY></HTML>
Το script που βλέπετε παραπάνω, δημιουργεί τρία layers. Τα Image1 και Image3
περιέχουν εικόνες ενώ το Image2 περιέχει μόνο κείμενο. Απο ότι μπορείτε να
δείτε και απο τον κώδικα, ορίζουμε πρωτα τις μεταβλητές που κρατάνε την
αρχική θέση κάθε layer (pos1,pos2,pos3), δίνουμε τυχαία τιμή στις μεταβλητές
speed1,speed2,speed3 και χρησιμοποιώντας τις ιδιότητες Top και Left των layers τους
δίνουμε τυχαία ταχύτητα και κίνηση προς τα δεξιά και προς τα κάτω.
Παρατηρήστε ότι η function next ελέγχει το document.layers property για να
καθορίσει το browser που χρησιμοποιήται και ανάλογα να τρέξει τη κατάληλη
συνθήκη.
Εάν τώρα θέλετε να επαναλαμβάνετε τη κίνηση των layers, μπορείτε να

χρησιμοποιήσετε ένα timeOut. Βάζετε πολύ απλά το window.setTimeOut property να
καλέι ξανά και ξανά τη function next μετά απο κάποιο μικρό χρονικό διάστημα, π.χ.
10 milisecond:
window.setTimeout("next();",10);
Για να ανοίξετε τη σελίδα που μόλις φτιάξατε σε νέο παράθυρο και σε

συγκεκριμένο μέγεθοςσε συγκεκριμένο μέγεθος, χρησιμοποιήστε τον παρακάτω
κώδικα στο body tag της σελίδας σας. Μιλάμε φυσικά για την αρχική σελίδα του
site σας όπου πιθανώς να θέλετε να ανοίγει νέο παράθυρο με το φόρτωμα της
αρχικής σελίδας.
<body bgcolor="#FFFFFF"
onLoad="newWin=window.open('summerCard.htm','Card','width=369,height=37
1');">
Σημειώστε ότι δώσαμε στο παράθυρο το μέγεθος του background της σελίδας μας.
Τέλος παρατηρήστε προσεκτικά το stylesheet που χρησιμοποιήται με το body
{ background-image: url(beach.jpg); background-repeat: no-repeat}. Για όσους
και όσες ψάχνατε μέχρι τώρα πως να μην επαναλαμβάνετε το background image
στις σελίδες σας αυτή είναι η λύση!
H κίνηση σε έναν WYSIWYG Editor
Επιλέξαμε το DreamWeaver της Macromedia για να σας δείξουμε πως μπορείτε να

προσθέσετε κίνηση με layers στις στατικές σελίδες σας. Η επιλογή του
συγκεκριμένου προγράμματος έγινε με γνώμονα την ευκολία και την
σταθερότητα που παρέχει το Dreamweaver στους χρήστες του. Πολύ εύκολα και
χωρίς σχεδόν να παρέμβετε στον κώδικα μπορείτε να έχετε ένα αξιοζήλευτο
αποτέλεσμα.
Απο το μενού Objects του προγράμματος, μπορείτε να επιλέξετε Draw Layer και να
σχεδιάσετε το layer στη θέση και τις διαστάσεις που εσείς θέλετε. Το μενού
Properties του προγράμματος σας δείχνει τις ιδιότητες του κάθε layer. Σίγουρα
έχετε υπόψη σας την ασυμβατότητα των παλαιότερων Browsers με τα layers.
Ανάλογα με τον browser Για τον οποίο προορίζετε το animation επιλέγετε και το
κατάλληλο tag (DIV ,SPAN ,LAYER ,ILAYER ). Τις περισσότερες φορές το Div θα
καλύψει τις ανάγκες σας για σωστό αποτέλεσμα τόσο στον Netscape Navigator όσο
και στον Internet Explorer.
Αφού σχεδιάσετε τα layers που θέλετε, κάντε Insert μιά εικόνα ή γράψτε ένα
κείμενο μέσα στο πλαίσιο. Στη συνέχεια κάντε δεξί κλίκ στο layer και κάντε Add to
timeline. Θα εμφανιστεί το παράθυρο Timeline του προγράμματος. Εάν είστε
εξικοιωμένοι με τα προγράμματα της Macromedia το Timeline θα σας θυμίσει το
Director και κυρίως το γνωστό Flash. Χωρίς να φτάνει το μέγεθος των
δυνατοτήτων των παραπάνω προγραμμάτων, το Dreamweaver έχει παρόμοια
χρήση. Στο timeline θα δείτε τα layers που μόλις κάνατε add. Πατήστε στο τελευταίο
frame και μετακινήστε το layer. Επιλέξτε Autoplay για να ξεκινήσει το animation όταν
φορτώσει η σελίδα σας. Κάντε τώρα ένα preview και θα δείτε το layer να κινήτε
σταδιακά. Για να πετύχετε κυκλική κίνηση αρκεί να επιλέξετε την αρχική και τη
τελική θέση του layer και απλά να επιλέξετε το frame στο οποίο θέλετε να αλλάζει
η κίνηση. Επιλέξτε το με δεξί κλίκ και κάντε Add keyframe. Με τον ίδιο τρόπο
μπορείτε να επεξεργαστείτε και τα υπόλοιπα layers. Μπορείτε ακόμα να αλλάξετε
τα images που έχετε μέσα στα layers, να μεγαλώσετε ή να μικρύνετε το μέγεθος
τους δυναμικά (καθώς τρέχει δηλαδή η σελίδα), και να προσθέσετε ήχους και
άλλα καλούδια. Εμείς φτιάξαμε μια όμορφη κάρτα με animated και interlaced gifs.
Παίξαμε λίγο με το background και δώσαμε κίνηση στις εικόνες.
Με τη κάρτα αυτή που μόλις φτιάξαμε, εμείς θα σας ευχηθούμε καλές διακοπές!
Ραντεβού το Σεπτέμβρη!

Web Authoring - Web Animation με τη χρήση DHTML

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Web Authoring - Web Animation με τη χρήση DHTML

Uploaded by

Copyright:

Available Formats

Web Animation με τη χρήση DHTML

της Ζωής "bezalel" Μαρμαρά

<div id="MyLayer" style="position:absolute; left:213px; top:94px; width:426px;height:47px; z-

<META content="text/html; charset=windows-1253" http-equiv=Content-Type>

var speed1 = Math.floor(Math.random()*10)+2;

<DIV id=image2 style="HEIGHT: 40px; LEFT: 24px; POSITION: absolute; TOP:

<DIV id=image3 style="HEIGHT: 52px; LEFT: 2px; POSITION: absolute; TOP:

Εάν τώρα θέλετε να επαναλαμβάνετε τη κίνηση των layers, μπορείτε να

Για να ανοίξετε τη σελίδα που μόλις φτιάξατε σε νέο παράθυρο και σε

H κίνηση σε έναν WYSIWYG Editor

Επιλέξαμε το DreamWeaver της Macromedia για να σας δείξουμε πως μπορείτε να

You might also like