jump to navigation

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

Posted by Νικόλας in ActionScript.
Tags: ,
trackback

Όποιος έχει δεί το 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%.

Advertisements

Σχόλια»

1. paulos - 7 Σεπτεμβρίου 2006

epitelous ena elliniko site gia flash…to action pou exete me esose giati den ixera ti na kano…thelo na kano mia erotisi..mipos exete ipopsin pou mporo na vro etoimo action gia tavli?Enoo programma ta grafika tha ta kano ego alla apo programmatismo den exo idea kai thelo na valo sto site mou ena tavli opos sto zoo.gr an to gnorizete

thx!

2. Νικόλας - 7 Σεπτεμβρίου 2006

Να ‘σαι καλά για τα καλά σου λόγια.
Όσο αφορά στο flash_tavli, λυπάμαι, αλλά δεν έχω ιδέα. Σου πρωτείνω ωστόσο να κοιτάξεις το γνωστό http://www.flashkit.com/

3. counterstr - 15 Μαρτίου 2008
4. asdasd - 5 Δεκεμβρίου 2008

den leitoyrgei….why?

5. Κατερίνα - 13 Ιανουαρίου 2009

Καλησπέρα!!!
Μετά από ψάξιμο, βρήκα αυτό που έψαχνα…αλλά για κάποιο λόγο δε μου παίζει.
Έχω flash αρχείο (site) και θελω να γίνεται αυτόματα resize, ανάλογα με την οθόνη του καθένος.

Έβαλα το κώδικα που έχετε εδώ σε ένα movie clip που έφτιαξα στο backround, αλλά τίποτα…

Έχετε καμία ιδεά…να με βοηθείσετε.

Ευχαριστώ πολύ

6. Νικόλας Δ. - 13 Ιανουαρίου 2009

Κατερίνα, δεν έχω καταλάβει τί ακριβώς έχεις κάνει, αλλά αυτό που πρέπει να καταλάβεις είναι ότι αυτό που γίνεται resize είναι το Movieclip bg, το οποίο περιέχει μόνο ένα Image.

Πολύ πιθανόν, κάτι στην ιεραρχία των MovieClips που έχει δημιουργήσει δεν είναι με τη σωστή σειρά.

7. konstantinos karamitsio - 5 Ιουλίου 2010

kalispera sas, poli orea tutorial. apla iparxi mia paralipsi, dn diefkrinizete pou akrivos kanume copy/paste ton parapano kodika.

to kanume pano sto mc_bg i sto proto frame tis efarmogis mas ? i kapou allou ?

sas efxaristo

Νικόλας - 6 Ιουλίου 2010

Στο πρώτο frame της εφαρμογής.


Σχολιάστε

Εισάγετε τα παρακάτω στοιχεία ή επιλέξτε ένα εικονίδιο για να συνδεθείτε:

Λογότυπο WordPress.com

Σχολιάζετε χρησιμοποιώντας τον λογαριασμό WordPress.com. Αποσύνδεση / Αλλαγή )

Φωτογραφία Twitter

Σχολιάζετε χρησιμοποιώντας τον λογαριασμό Twitter. Αποσύνδεση / Αλλαγή )

Φωτογραφία Facebook

Σχολιάζετε χρησιμοποιώντας τον λογαριασμό Facebook. Αποσύνδεση / Αλλαγή )

Φωτογραφία Google+

Σχολιάζετε χρησιμοποιώντας τον λογαριασμό Google+. Αποσύνδεση / Αλλαγή )

Σύνδεση με %s

Αρέσει σε %d bloggers: