nightblog

Full Screen Auto Resize Background στο Flash 18 Απριλίου 2006

Όποιος έχει δεί το site του Νίκου Πορτοκάλογλου ή της Δέσποινας Βανδής, σίγουρα θα έχει παρατηρήσει ότι υπάρχει ένα full screen background το οποίο γίνεται αυτόματα resize όποτε αλλάζει το μέγεθος του παράθυρου του browser.

Για να μην αναρωτιέστε πώς γίνεται αυτό, σας παραθέτω παρακάτω το κώδικα (ActionScript) με κάποια σχόλια.

// Με το noScale αποτρέπουμε το περιεχόμενο από το να γίνεται resize, εκτός και αν του πούμε εμείς. Ουσιαστικά προκειμένου να χρησιμοποιήσουμε την onResize που είναι απαραίτητη παρακάτω, πρέπει αυτή η εντολή να υπάρχει.

Stage.scaleMode = «noScale»;

// LT σημαίνει Left Top. Ορίζουμε ότι το 0,0 pixel βρίσκεται στην πάνω αριστερή γωνία.

Stage.align = «LT»;

// Εδώ είναι το «ζουμί». Το bg είναι το MovieClip στο οποίο περιέχεται το Background Image. Ορίζουμε μία function η οποία θα διαμορφώσει ανάλογα το μέγεθος του bg MovieClip, όποτε κάνουμε Resize το παράθυρο.

mc_bg.onResize = function() {

// Stage.width και Stage.height είναι το πλάτος και το ύψος του Stage, δηλαδή ολόκληρου του SWF.

this._width = Stage.width;
this._height = Stage.height;

};

// Πρέπει να «πούμε» στο bg MovieClip να «έχει τα αυτιά του ανοικτά» για οτιδήποτε συμβεί, δηλ. για το event (onResize)

Stage.addListener(mc_bg);

// Εδώ απλά ορίζουμε τις αρχικές συντεταγμένες του mc_bg MovieClip

mc_bg._x = mc_bg._y = 0;
mc_bg.onResize();

// Οι παρακάτω γραμμές είναι υπεύθυνες για τη τοποθέτηση του MovieClip mc_content στο κέντρο της οθόνης Ακολουθείται η ίδια ακριβώς λογική όπως και με το bg, με τη διαφορά, ότι εδώ απλά τοποθετούμε το mc_content MovieClip εκεί που θέλουμε και εν προκειμένου στο κέντρο της οθόνης. Είναι λογικό ότι αυτή η τοποθέτηση πρέπει να γίνεται κάθε φορά που γίνεται resize.

mc_content.onResize = function() {

this._x = (Stage.width – this._width) / 2;
this._y = (Stage.height – this._height) / 2;

};
Stage.addListener(mc_content);
mc_content.onResize();

Εννοείται ότι για να έχετε το επιθυμητό αποτέλεσμα, θα πρέπει στο HTML OBJECT tag να ορίσετε τα properties width και height στο 100%.