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: Καιρός να δούμε πως μπορούμε να χρησιμοποιήσουμε τις ιδιότητες TOP και LEFT των layers για να δημιουργήσουμε κίνηση σε μια HTML σελίδα. Στο παράδειγμα που ακολουθεί χρησιμοποιούμε τρία layers και δίνουμε κίνηση κατα μήκος και κατα πλάτος της σελίδας. Στόχος μας είναι να φτιάξουμε μια animated greeting card για να ευχηθούμε στους φίλους μας καλές διακοπές μέσα απο τις σελίδες μας. Ο κώδικας <TITLE>Animation with DHTML - Ένα παράδειγμα <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; var speed2 = Math.floor(Math.random()*10)+2; var speed3 = 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; } } <style type="text/css">

Το 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 σας όπου πιθανώς να θέλετε να ανοίγει νέο παράθυρο με το φόρτωμα της αρχικής σελίδας. Σημειώστε ότι δώσαμε στο παράθυρο το μέγεθος του 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 και δώσαμε κίνηση στις εικόνες. Με τη κάρτα αυτή που μόλις φτιάξαμε, εμείς θα σας ευχηθούμε καλές διακοπές! Ραντεβού το Σεπτέμβρη!