RSS

Category Archives: ANIMATION

ANIMATION GENERATOR

Είναι αποδεκτό ότι στο διαδύκτιο πολλές φορές ένα animation μας προκαλεί το ενδιαφέρον περισσότερο από μια στατική εικόνα. Πολλοί bloggers θέλουν να δημιουργήσουν δικά τους animation για τα ιστολόγια τους αλλά πολλοί μόλις μπαίνουν στο Photoshop παγώνουν γιατί δεν είναι ότι πιο εύκολο.
Έψαξα και βρήκα έναν animation generator ο οποίος είναι δωρεάν. Μπορείτε να το κατεβάσετε κάνοντας κλικ εδώ και το όνομα αυτού UnFREEz (έκδοση 2.1). Είναι δωρεάν και πολύ ελαφρύ πρόγραμμα (μόλις 19.20 ΚΒ). Δε χρειάζεται ούτε εγκατάσταση. Μόλις γίνει στο αρχείο unzip με ένα κλικ το πρόγραμμα αρχίζει και τρέχει. Το μειονέκτημα είναι ότι δέχεται μόνο αρχεία .gif. Αν πάρετε εικόνες άλλου τύπου (jpeg, png κλπ.) και τα μετατρέψετε σε αρχεία gif τότε θα χάσετε στην ποιότητα της εικόνας. Η εισαγωγή των εικόνων γίνεται με σύρσιμο (dag ‘n drop) μέσα στο πλαίσιο.
Όπως θα διαπιστώσετε και μόνοι σας το παραπάνω πρόγραμμα είναι πανεύκολο. Το μόνο που χρειάζεται είναι λίγος πειραματισμός και μεγάλη φαντασία. Καλή επιτυχία σε όλους και σε όλες.
UPDATE: Για να βάλουμε το animation που δημιουργήσαμε σε μια ανάρτηση ή στο ιστολόγιο μας δεν μπορούμε με μια απλή αντιγραφή – επικόλληση (copy – paste) γιατί η εκόνα που θα έχουμε θα είναι στατική και όχι animated. Θα χρειαστούμε τη συνδρομή του διαδυκτίου. Πρέπει να ανεβάζουμε το δημιούργημα μας σε ένα από τα πάμπολλα web sites (π.χ. Photobucket.com, ανατρέξτε σε παλαιότερες αναρτήσεις) και μόλις τελειώσει το upload μας βλέπουμε ότι έχουμε διάφορες επιλογές για να κάνουμε χρήση του animation. Μια από αυτές είναι και ο κώδικας που μας δίνει. Μπορούμε να τον πάρουμε και με μια αντιγραφή – επικόλληση (copy – paste) να δουλέψει το animation στο blog μας.
Δείτε το παρακάτω παράδειγμα χρησιμοποιώντας δύο εικόνες.

Οι εικόνες:

Το αποτέλεσμα:

Photobucket

 
12 Σχόλια

Posted by στο Ιουλίου 28, 2009 in ANIMATION, DOWNLOAD, FREE, GENERATOR, GIF, IMAGES, PROGRAMS, UNFREEZ 2.1

 

ΔΗΜΙΟΥΡΓΙΑ ΚΑΙ ΠΡΟΣΘΗΚΗ ANIMATED TEXT BANNER

Σήμερα θα σας δείξω πως μπορούμε να βάλουμε ένα κινούμενο banner. Ονομάζεται scrolling or marqee text, δηλαδή το κείμενο του banner κινείται από πάνω προς τα κάτω ή το αντίθετο ή από αριστερά προς τα δεξιά και το αντίθετο. Πρώτα πρέπει αν καταλάβουμε πως δουλεύει ο κώδικας έτσι ώστε να τον φέρουμε στα μέτρα μας.
Το κείμενο του banner πρέπει να περικλείεται από δύο tags. Το opening tag και το closing tag. Δείτε το παρακάτω παράδειγμα:

<opening tag> Το κείμενο σας </closing tag>

Ο κώδικας για το scrolling or marqee text banner πρέπει να μοιάζει με τον παρακάτω:

<marquee>Το κείμενο σας – Demo</marquee>

Αν προσθέσετε τον παραπάνω κώδικα στο blogspot θα δείτε ένα demo κείμενο σε άσπρο φόντο (background) και ακίνητο. Εμείς πρέπει να προσθέσουμε στον κώδικα χρώμα φόντου, ταχύτητα που κινείται το κείμενο, κατεύθυνση κειμένου, διαστάσεις banner. Για να προσθέσουμε όλα τα παραπάνω είναι ιδιαίτερα εύκολο, απλά θέλει λιγάκι προσοχή. Για παράδειγμα, για να βάλουμε κατεύθυνση κειμένου πρέπει να προσθέσουμε στον κώδικα το παρακάτω:
direction=»right»

Το παραπάνω πρέπει να προστεθεί μετά το opening tag που στην περίπτωση μας είναι το <marquee> Ο κώδικας του banner θα πρέπει να δείχνει κάπως έτσι:

<marquee direction=»right»>Το κείμενο σας – Demo</marquee>

Με τον ίδιο τρόπο προσθέτουμε και τα υπόλοιπα στοιχεία, values στα αγγλικά, (χρώμα φόντου, ταχύτητα που κινείται το κείμενο, διαστάσεις banner) στον κώδικα. Ας προσθέσουμε χρώμα φόντου. Το στοιχείο που θα προσθέσουμε είναι της μορφής bgcolor=»#FF00FF» (όπου #FF00FF είναι το χρώμα). Να θυμάστε ότι πάντα προσθέτουμε τα values μετά το opening tag που στην περίπτωση μας είναι το <marquee> Ο κώδικας θα πρέπει να μοιάζει με τον παρακάτω:

<marquee bgcolor=»#FF00FF» direction=»right»>Το κείμενο σας – Demo</marquee> Με τον ίδιο τρόπου βάζουμε και τα υπόλοιπα στοιχεία του βαννερ μας. Παρακάτω έχω ένα πίνακα με τα στοιχεία που μπορείτε να προσθέσετε και μια μικρή επεξήγηση του καθενός.

The Value

ΕΠΕΞΗΓΗΣΗ

direction=»left» Κάνει το κείμενο να κινείται προς τα αριστερά.
direction=»right» Κάνει το κείμενο να κινείται προς τα δεξιά.
direction=»up» Κάνει το κείμενο να κινείται προς τα πάνω.
direction=»down»
Κάνει το κείμενο να κινείται προς τα κάτω.
behavior=»alternate» Κάνει το κείμενο να κινείται προς τα δεξιά και μόλις φτάσει στο τέλος της διαδρομής του το κείμενο αλλάζει κατεύθυνση (προς τα αριστερά) και επιστρέφει στην αρχή.
behavior=»slide» Κάνει το κείμενο να σταματάει μόλις φτάσει στο τέλος της διαδρομής του.
loop=»4″ Αν θέλετε να ελέγχετε πόσες φορές θα εμφανιστεί το κείμενο στο banner προσθέστε αυτό το value και αλλάξτε τον αριθμό (4) στον επιθυμητό από εσάς.
scrollamount=»2″ Με αυτό το value ελέγχετε την ταχύτητα που κινείται το κείμενο. Το 1 είναι αργό, το 2 γρηγορότερο και τα 3, 4, 5 ακόμη γρηγορότερα. Όσο μεγαλύτερο αριθμό βάλετε τόσο αυξάνεται η ταχύτητα με την οποία κινείται το κείμενο.
width=»400″ Με αυτό ελέγχετε το πλάτος του banner. Όσο μεγαλύτερη τιμή τόσο φαρδύτερο το banner.
height=»66″ Με αυτό ελέγχετε το ύψος του banner. Όσο μεγαλύτερη τιμή τόσο ψηλότερο το banner.
onmouseover=»this.stop()» onmouseout=»this.start()» Με αυτό το value καθορίζουμε το κείμενο να σταματάει όταν πάνω στο banner βρίσκεται ο δείκτης από το ποντίκι και όταν το απομακρύνουμε να συνεχίσει να κινείται το κείμενο.
bgcolor=»#9999CC» Με αυτό αλλάζουμε το χρώμα του φόντου (background). Θα σας δείξω αργότερα πως βρίσκουμε την κωδική ονομασία του επιθυμητού χρώματος.
style=»color: #FF0000″ Με αυτό αλλάζουμε το χρώμα της γραμματοσειράς. Θα σας δείξω αργότερα πως βρίσκουμε την κωδική ονομασία του επιθυμητού χρώματος.
style=»font-size: 1em» Με αυτό αλλάζουμε το μέγεθος της γραμματοσειράς.
style=»font-family: Tahoma» Με αυτό αλλάζουμε τη γραμματοσειρά.
style=»font-size: 12pt; color:
#800000; font-family: Tahoma»
Με αυτόν το τρόπο μπορούμε να προσθέσουμε στον κώδικα του banner τα values και να αλλάξουμε τη γραμματοσειρά, το μέγεθος αυτής και το χρώμα αυτής.

Αν θέλετε να βάλετε links αντί για κείμενο θα πρέπει να ανάμεσα στα opening tags να βάλετε τον παρακάτω κώδικα:

<a href=»Link URL»>Link Title</a>

Αν θέλετε και κείμενο και link απλά μέσα στο κείμενο βάλτε τον παραπάνω κώδικα και όπου Link URL είναι η διεύθυνση που θέλετε να βάλετε και όπου Link Title είναι ο τίτλος για το link.
Ένας demo κώδικας για animated banner που φτιάξαμε είναι ο παρακάτω:

<marquee direction=»Up» scrollamount=»8″ width=»318″ style=»font-size: 12pt;
color: #800000; font-family: Tahoma» height=»66″ bgcolor=»#FFCC99″>Το κείμενο σας – Demo</marquee>

Το αποτέλεσμα είναι το παρακάτω:

Το κείμενο σας - Demo

Όταν δημιουργήσετε τον κώδικα του banner σας η προσθήκη αυτού είναι εύκολη υπόθεση. Πάτε πανόπτης, διάταξη, προσθήκη gadget και HTML/JavaScript και πατάτε αποθήκευση (save).
Σχετικά με το πως βρίσκουμε τις κωδικές ονομασίες των χρωμάτων για να αλλάξουμε το όνομα της γραμματοσειράς ή το χρώμα του φόντου είχα περιγράψει έναν τρόπο στο post για την προσθήκη animated cloud. Ας τον επαναλάβουμε:
Για να αλλάξουμε χρώμα στο φόντο ή τη γραμματοσειρά πρέπει να αλλάξουμε την παράμετρο #ffffff. Πώς όμως; Πρέπει να ανοίξουμε άλλο ένα παράθυρο εργασίας στον browser και να μπούμε πάλι στο λογαριασμό μας και από εκεί πάμε πανόπτης, διάταξη και γραμματοσειρές και χρώματα. Εκεί μπορούμε να δούμε τον κωδικό των χρωμάτων φόντου και γραμματοσειρών. Δείτε την παρακάτω φωτογραφία (κλικ για μεγέθυνση): Στα δεξιά βλέπετε τον κωδικό χρώματος που στην προκειμένη περίπτωση είναι το άσπρο. Εσείς στον κώδικα πρέπει να βάλετε τον κωδικό του χρώματος του template σας.

Άλλος τρόπος είναι να ψάξουμε μέσω της Google για free color generator. Ένα free download code generator μπορείτaι να κάνετε από εδώ. Καλή επιτυχία!

 
16 Σχόλια

Posted by στο Φεβρουαρίου 15, 2009 in ANIMATION, BANNER, BLOGGER, BLOGSPOT, GADGET, TEXT, WIDGET

 

ΠΡΟΣΘΗΚΗ ANIMATED TAG CLOUD

Μια αναγνώστρια του blog μου ζήτησε να κάνω ανάρτηση για το πως μπορούμε να βάλουμε ένα animated tag cloud όπως αυτό που έχω στο blog. Η αλήθεια είναι ότι δε μπαίνει σαν widget αλλά πρέπει να πειράξουμε τον κώδικα. Η διαδικασία είναι πολύ απλή.
Μπαίνουμε στο λογαριασμό μας, πάμε πανόπτης, διάταξη και επεξεργασία HTML. Παίρνουμε πρώτα ένα back up του κώδικα μας για λόγους ασφαλείας και συνεχίζουμε. Πατάμε Ctrl+F και κάτω ανοίγει ένα ψαχτήρι. Μέσα στο πλαίσιο βάζουμε το παρακάτω κομμάτι του κώδικα:

<b:section class=’sidebar’ id=’sidebar’ preferred=’yes’>

Μόλις το βρούμε αμέσως κάτω απ’ αυτή τη γραμμή κάνουμε αντιγραφή – επικόλληση (copy – paste) τον παρακάτω κώδικα:

<b:widget id=’Label99′ locked=’false’ title=’Labels’ type=’Label’> <b:includable id=’main’> <b:if cond=’data:title’> <h2><data:title/></h2> </b:if> <div class=’widget-content’> <script src=’http://halotemplates.s3.amazonaws.com/wp-cumulus-example/swfobject.js&#8217; type=’text/javascript’/> <div id=’flashcontent’>Blogumulus by <a href=’http://www.roytanck.com/’>Roy Tanck</a> and <a href=’http://locusblogus.blogspot.com’>hackaday</a></div&gt; <script type=’text/javascript’> var so = new SWFObject(«http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf», «tagcloud», «240», «300», «7», «#ffffff»); // uncomment next line to enable transparency //so.addParam(«wmode», «transparent»); so.addVariable(«tcolor», «0x333333»); so.addVariable(«mode», «tags»); so.addVariable(«distr», «true»); so.addVariable(«tspeed», «100»); so.addVariable(«tagcloud», «<tags><b:loop values=’data:labels’ var=’label’><a expr:href=’data:label.url’ style=’12’><data:label.name/></a></b:loop></tags>»); so.addParam(«allowScriptAccess», «always»); so.write(«flashcontent»); </script> <b:include name=’quickedit’/> </div> </b:includable> </b:widget>

Πατήστε προεπισκόπηση για να δείτε το tag cloud που προσθέσατε και μετά αποθήκευση (save).
Το tag cloud είναι προρυθμισμένο ως:
Πλάτος: 240px (pixels)
Ύψος: 300px
Χρώμα φόντου: άσπρο
Χρώμα γραμματοσειράς: γκρι
Μέγεθος γραμματοσειράς: 12

Επειδή όμως θέλουμε να φαίνεται το tag cloud σαν να αιωρείται και να είναι πιο καλαίσθητο καλό θα ήταν να το φέρουμε στα μέτρα μας και να έχει το ίδιο χρώμα με αυτό του template μας. Πάμε να δούμε πως θα κάνουμε παραμετροποίηση. Αν θέλουμε να αλλάξουμε πλάτος, ύψος και χρώμμα του φόντου πρέπει να βρούμε το παρακάτω κομμάτι κώδικα σε αυτό που προσθέσαμε προηγουμένως:

var so = new SWFObject(«http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf», «tagcloud», «240«, «300«, «7», «#ffffff»);

Όπου 240 το πλάτος, 300 το ύψος και #ffffff το χρώμα. Για να αλλάξουμε το ύψος και το πλάτος και να μεγαλώσουμε το tag cloud βάζουμε μεγαλύτερες τιμές. Για να το μικρύνουμε κάνουμε το αντίθετο.
Για να αλλάξουμε χρώμα στο φόντο του tag cloud πρέπει να αλλάξουμε την παράμετρο #ffffff. Πώς όμως; Πρέπει να ανοίξουμε άλλο ένα παράθυρο εργασίας στον browser και να μπούμε πάλι στο λογαριασμό μας και από εκεί πάμε πανόπτης, διάταξη και γραμματοσειρές και χρώματα. Εκεί μπορούμε να δούμε τον κωδικό των χρωμάτων φόντου και γαμματοσειρών. Δείτε την παρακάτω φωτογραφία (κλικ για μεγέθυνση): Στα δεξιά βλέπετε τον κωδικό χρώματος που στην προκειμένη περίπτωση είναι το άσπρο. Εσείς στον κώδικα πρέπει να βάλετε τον κωδικό του χρώματος του template σας.


Με τον ίδιο τρόπο μπορείτε να αλλάξετε και το χρώμα της γραμματοσειράς του tag cloud. Αρκεί να βρείτε το κομμάτι του κώδικα (στον κώδικα του tag cloud):
so.addVariable(«tcolor», «0x333333«);

Διαλέξτε τον κωδικό του χρώματος που θέλετε και αντικαταστήστε με αυτόν που προϋπήρχε (default – αυτό που έχω κοκκινίσει στον κώδικα είναι το γκρι χρώμα, δηλαδή το 333333).
Άλλη μια τροποποίηση που μπορούμε να κάνουμε είναι το μέγεθος της γραμματοσειράς του tag cloud. Αρκεί να βρούμε στον κώδικα του tag cloud το παρακάτω κομμάτι:

so.addVariable(«tagcloud», «<tags><b:loop values=’data:labels’ var=’label’><a expr:href=’data:label.url’ style=’12‘><data:label.name/></a></b:loop></tags>»);

Το 12 που είναι με κόκκινο χρώμα είναι το μέγεθος της γραμματοσειράς. Αν θέλουμε να τη μεγαλώσουμε βάζουμε έναν αριθμό μεγαλύτερο από το 12. Αν θέλουμε να τη μικρύνουμε κάνουμε το αντίθετο (δηλαδή βάζουμε μια τιμή μικρότερη του 12).
Πριν κάνετε αποθήκευση (save) σε οτιδήποτε αλλαγές του κώδικα καλό θα ήταν να κάνετε προεπισκόπηση για να δείτε αν τα αποτελέσματα των ενεργειών σας θα σας αφήσουν ευχαριστημένους. Αν όχι πειραματιστείτε μέχρι να φτάσετε στο επιθυμητό αποτέλεσμα. Αν ναι, πατήστε αποθήκευση και τέλος. Καλή επιτυχία.

 
19 Σχόλια

Posted by στο Ιανουαρίου 23, 2009 in ANIMATION, HACKS, HTML, TAG CLOUD, TAGS