Μεταβαλλόμενο πλάτος σε flash!

[lady_invalid]

Ηelloooo!!!
Έχω ένα αρχείο swf το οποίο έχω κάνει embed σε μια ιστοσλίδα. Θέλω όμως το πλάτος του να αξάνεται καθώς ο χρήστης μεγαλώνει το παράθυρο. Any ideas?
Επίσης γίνεται καθώς μεγαλώνει το πλάτος να απέχουν τα στοιχεία που είναι μέσα στο swf, την ίδια απόσταση από τις άκρες όπως και στο αρχικό;

[Garakatsamol]

Αυτό που θέλεις να κάνεις γίνεται ως εξής στην Actionscript 2:
Γενικώς θα χρησιμοποιήσουμε τα stage properties. Ανάλογα με αυτά θα τροποποιούμε και τις ιδιότητες του εκάστοτε moviεclip
Για να λειτουργεί σωστά όμως πρέπει να ορίσουμε και κάποια στοιχεία για το πώς θα λειτουργεί το stage αυτό καθεαυτό. Στο πρώτο frame βάζουμε:

Κώδικας: Επιλογή όλων

Stage.scaleMode = "noScale";// ουσιαστικά του λέμε ότι θα κάνουμε εμείς το scaling
Stage.align = "TL";// το align του στον browser θα είναι πάνω αριστερά

Για περισσότερες πληροφορίες για τη Stage class εδώ


Κάνουμε την εικόνα που θέλουμε να μεταβάλλει το μήκος της movieclip symbol (με registration point πάνω αριστερά) τη βάζουμε στο stage και της δίνουμε Instance name (στη συγκεκριμένη περίπτωση "bg").
Θα δημιουργήσουμε μια function που θα καλέιται όταν εντοπίζεται μεταβολή στο μέγεθος του Browser.

στο πρώτο frame βάζουμε:

Κώδικας: Επιλογή όλων

function resizeStuff() {
   _root.bg._width = Stage.width;
   _root.bg._height = Stage.height;
   _root.bg._x = 0;
   _root.bg._y = 0;   
}

Με τον παραπάνω τρόπο η εικόνα παίρνει πάντα το μήκος και το πλάτος του stage και παραμένει πάνω αριστερά με την προϋπόθεση ότι έχουμε δώσει registration point πάνω αριστερά.
Με αυτό τον τρόπο όμως η εικόνα θα παραμορφώνεται ανάλογα με το resize που θα κάνει ο χρήστης. Σε περίπτωση που αυτό δεν είναι το ζητούμενο μπορούμε με τη βοήθεια απλών μαθηματικών να διατηρήσουμε την αναλογία της εικόνας σταθερή και να γίνεται κάποιο crop στη διάσταση που περισσεύει.

Δηλαδή ο κώδικας θα τροποποιηθεί ως εξής:

Κώδικας: Επιλογή όλων

function resizeStuff() {
   var imgAspect = _root.bg._width/_root.bg._height;
   var stageAspect = Stage.width/Stage.height;
   if (stageAspect>=imgAspect) {
      _root.bg._width = Stage.width;
      _root.bg._height = Stage.width/imgAspect;
   } else {
      _root.bg._height = Stage.height;
      _root.bg._width = Stage.height*imgAspect;
   }
   _root.bg._x = 0;
   _root.bg._y = 0;
}

Όπως προκύπτει, ανάλογα μπορούμε να καθορίσουμε και τη θέση διαφόρων αντικειμένων στο stage με τον ίδιο τρόπο. Δηλαδή θα ορίσουμε τα _x και _y properties του αντικειμένου ανάλογα με αυτά του Stage προηγουμένως με τα

Κώδικας: Επιλογή όλων

_root.bg._x = 0;
_root.bg._y = 0;

Έτσι αν θέλουμε ας πούμε ένα button να είναι συνεχώς 10 px από την αριστερή άκρη και 15 Px από πένω θα βάλουμε

Κώδικας: Επιλογή όλων

btn._x=10
btn._y=15

Λίγη περισσότερη δουλειά χρειάζεται αν θέλουμε να απέχει από δεξιά του Stage κάποιο διάστημα. Σε αυτή την περίπτωση θα πρέπει από το συνολικό μήκος του stage να αφαιρέσω το μήκος του button (με registration point πάνω αριστερά) καθώς και την απόσταση που θέλω να εισέρχεται πιο μέσα
δηλαδή:




Έτσι θα έχουμε

Κώδικας: Επιλογή όλων

function resizeStuff() {
btn._x=Stage.width-btn._width-10 //για απόσταση 10px
}

Ειδικά αν θέλουμε να είναι στη μέση:

Κώδικας: Επιλογή όλων

function resizeStuff() {
btn._x=Stage.width/2-btn._width/2
}

Αυτονόητο είναι ότι με τον ίδιο τρόπο δουλεύουμε και στον y άξονα

Το τελευταίο στάδιο είναι να δημιουργήσουμε έναν StageListener ωστε να γίνεται η διαδικασία κάθε φορά που γίνεται resize:

Κώδικας: Επιλογή όλων

stageListener = new Object();
stageListener.onResize = resizeStuff;
Stage.addListener(stageListener);


Οπότε συνολικά συνοψίζοντας τα παραπάνω:

Κώδικας: Επιλογή όλων

Stage.scaleMode = "noScale";
Stage.align = "TL";
function resizeStuff() {
   var imgAspect = _root.bg._width/_root.bg._height;
   var stageAspect = Stage.width/Stage.height;
   if (stageAspect>=imgAspect) {
      _root.bg._width = Stage.width;
      _root.bg._height = Stage.width/imgAspect;
   } else {
      _root.bg._height = Stage.height;
      _root.bg._width = Stage.height*imgAspect;
   }
   _root.bg._x = 0;
   _root.bg._y = 0;
   _root.btn._x = btn._x=Stage.width-_root.btn._width-10;
   _root.btn._y = btn._y=Stage.height/2-_root.btn._height/2; //στη μέση του ύψους του stage
}
stageListener = new Object();
stageListener.onResize = resizeStuff;
Stage.addListener(stageListener);
resizeStuff(); //καλώ για πρώτη φορα τη function, για το αρχικό Positioning


Μερικές παρατηρήσεις:
Όπως αναφέρθηκε το registration Point είναι σε όλα τα παραδείγματα πάνω αριστερά. Σε διαφορετική περίπτωση θα πρέπει να γίνουν οι κατάλληλες μετατροπές. Πχ για registration στο κέντρο του αντικειμένου θα πρέπει σε όλους τους τύπους παραπάνω να προστεθεί το btn._width/2

προσοχή στη σύνταξη της Stage επειδή δεν παίρνει κάτω παύλα όπως στα properties δηλαδή
Stage.width --> σωστό
Stage._width --> λάθος

Επίσης για χάρη ευκολίας όλα τα Objects που χρησιμοποιήθηκαν στο παράδειγμα είναι στο root επίπεδο.


Κάποτε είχα κάνει ένα class που αυτοματοποιεί κάποια πράματα στο Positioning, αν ενδιαφέρει κάποιον θα μπορούσα να την ξεσκονίσω και να την ανεβάσω

[Garakatsamol]

Στο τελευταίο blocck κώδικα υπάρχει ένα λάθος
Αυτό είναι το σωστό, σόρυ

Κώδικας: Επιλογή όλων

Stage.scaleMode = "noScale";
Stage.align = "TL";
function resizeStuff() {
   var imgAspect = _root.bg._width/_root.bg._height;
   var stageAspect = Stage.width/Stage.height;
   if (stageAspect>=imgAspect) {
      _root.bg._width = Stage.width;
      _root.bg._height = Stage.width/imgAspect;
   } else {
      _root.bg._height = Stage.height;
      _root.bg._width = Stage.height*imgAspect;
   }
   _root.bg._x = 0;
   _root.bg._y = 0;
   _root.btn._x = Stage.width-_root.btn._width-10;
   _root.btn._y = Stage.height/2-_root.btn._height/2; //στη μέση του ύψους του stage
}
stageListener = new Object();
stageListener.onResize = resizeStuff;
Stage.addListener(stageListener);
resizeStuff(); //καλώ για πρώτη φορα τη function, για το αρχικό Positioning

[lady_invalid]

Σ' ευχαριστώ πολύ!!! Δεν υπηρχε περίπτωση να το καταφέρω αλλιώς

[lady_invalid]

problem... Δεν έχω εικόνα στο background :S

[Garakatsamol]

Δε χρειάζεται να έχεις εικόνα, δουλεύει με οποιοδήποτε movie clip, εκτός αν εννοείς κάτι άλλο που δεν το κατάλαβα

[lady_invalid]

Έβαλα τον κώδικα στο actioncript panel, έφτιαξα ένα movie clip που να περικλείει το φόντο και το ονόμασα bg, αλλά συνεχίζει να μην ανταποκρίνεται και να μη δουλεύει .

Postάρω τον κώδικα

import mx.utils.Delegate;

var numOfItems:Number;
var radiusX:Number = 180;
var radiusY:Number = 25;
var centerX:Number = Stage.width / 1.85;
var centerY:Number = Stage.height / 1.8;
var speed:Number = 0;
var perspective:Number = 15;
var home:MovieClip = this;

var tooltip:MovieClip = this.attachMovie("tooltip","tooltip",10000);
tooltip._alpha = 0;

var xml:XML = new XML();
xml.ignoreWhite = true;

xml.onLoad = function()
{
var nodes = this.firstChild.childNodes;
numOfItems = nodes.length;
for(var i=0;i<numOfItems;i++)
{
var t = home.attachMovie("item","item"+i,i+1);
t.angle = i * ((Math.PI*2)/numOfItems);
t.onEnterFrame = mover;
t.toolText = nodes[i].attributes.tooltip;
t.content = nodes[i].attributes.content;
t.link = nodes[i].attributes.link;
t.icon.inner.loadMovie(nodes[i].attributes.image);
t.r.inner.loadMovie(nodes[i].attributes.image);
t.icon.onRollOver = over;
t.icon.onRollOut = out;
t.icon.onRelease = released;

}
}

function over()
{
home.tooltip.tipText.text = this._parent.toolText;
home.tooltip._x = this._parent._x;
home.tooltip._y = this._parent._y - this._parent._height/2;
home.tooltip.onEnterFrame = Delegate.create(this,moveTip);
home.tooltip._alpha = 100;
}

function out()
{
delete home.tooltip.onEnterFrame;
home.tooltip._alpha = 0;

}
function released()
{
trace(this._parent.toolText);
getURL(this._parent.link);

}



function moveTip()
{
home.tooltip._x = this._parent._x;
home.tooltip._y = this._parent._y - this._parent._height/2;
}

xml.load("icons.xml");

function mover()
{
this._x = Math.cos(this.angle) * radiusX + centerX;
this._y = Math.sin(this.angle) * radiusY + centerY;
var s = (this._y - perspective) /(centerY+radiusY-perspective);
this._xscale = this._yscale = s*100;
this.angle += this._parent.speed;
this.swapDepths(Math.round(this._xscale) + 100);
}





leftbt.onPress = function() {
this.ButtonDown = true

}
leftbt.onRelease = function() {
this.ButtonDown = false

}

leftbt.onEnterFrame = function() {
if(this.ButtonDown) {
//Move Carousel
}
}

leftbt.onReleaseOutside =function(){
this.ButtonDown = false

}



rightbt.onPress = function() {
this.ButtonDown = true
}
rightbt.onRelease =rightbt.onDragOut = function() {
this.ButtonDown = false
}
rightbt.onEnterFrame = function() {
if(this.ButtonDown) {
//Move Carousel
}
}

Stage.scaleMode = "noScale";
Stage.align = "TL";
function resizeStuff() {
var imgAspect = _root.bg._width/_root.bg._height;
var stageAspect = Stage.width/Stage.height;
if (stageAspect>=imgAspect) {
_root.bg._width = Stage.width;
_root.bg._height = Stage.width/imgAspect;
} else {
_root.bg._height = Stage.height;
_root.bg._width = Stage.height*imgAspect;
}
_root.bg._x = 0;
_root.bg._y = 0;
_root.leftbt._x = Stage.width-_root.leftbt._width-10;
_root.leftbt._y = Stage.height/2-_root.leftbt._height/2; //στη μέση του ύψους του stage
}
stageListener = new Object();
stageListener.onResize = resizeStuff;
Stage.addListener(stageListener);
resizeStuff();




Δοκίμασα και χωρίς το _root, αλλά πάλι τίποτα

[Garakatsamol]

Έβαλα τον κώδικα στο actioncript panel, έφτιαξα ένα movie clip που να περικλείει το φόντο και το ονόμασα bg, αλλά συνεχίζει να μην ανταποκρίνεται και να μη δουλεύει .

Έδωσες instance name?

[lady_invalid]

ναι.. :S

[Garakatsamol]

Θα πρέπει ν'ανεβάσεις κάπου το αρχείο

[lady_invalid]

Όλα τα αρχεία που χρειάζοντα είναι εδώ!
http://www.analyse-it.gr/carousel2.rar

[Garakatsamol]

Έτσι όπως το έκανες λειτουργεί, απλώς επειδή το background είναι λευκό, δε βλέπεις κάποια διαφορά. Αν βάλεις μια εικόνα στο Movie clip "bg" θα δεις ότι δουλεύει όπως πρέπει.
Μάλλον κάτι άλλο θέλεις να κάνεις, μήπως θες να το εξηγήσεις καλύτερα?[/u]

[lady_invalid]

ouch, noob detected
Γίνεται να κάνουν resize και τα περιεχόμενα του carousel?

[Garakatsamol]

Λοιπόν, επειδή τα στοιχεία του carousel φορτώνουν δυναμικά στο _root, θα πρέπει να φορτώνουν όλα μέσα σ'ενα movie clip για να μπορείς μετά να κάνεις σε αυτό ότι θέλεις από sizing και scaling.
Στην περίπτωσή σου μπορείς να κάνεις ένα κενό movie clip που θα το ονομάσεις "container" και θα το βάλεις στο stage και στη συνέχεια μπορείς να τροποποιήσεις τα χαρακτηριστικά του κατά τα γνωστά, όπως εξήγησα και πιό πριν

Θα τροποποιήσεις τη γραμμή:

Κώδικας: Επιλογή όλων

var home:MovieClip = this;

σε αυτή

Κώδικας: Επιλογή όλων

var home:MovieClip = this.container;

και στη resizeFunction θα κάνεις το Positioning και το scaling



Μήπως όμως έχεις μπλέξει με κάτι μακρυά από τις δυνατότητές σου?

[lady_invalid]

H αλήθεια είναι ότι είμαι πολύ αρχάρια στο flash, αλλά είναι μέρος της πρακτικης μου. Επίσης, άμα δεν προσπαθήσω, πώς θα μάθω;

Θα κάνω edit με τα αποτελέσματα σε λιγάκι!

[lady_invalid]

Τραγικό...
Δεν είχα βάλει instance name στα buttons
Τώρα μένει η main area..!!
Wish me good luck!!!

[VaLKyRiE]

Garakatsamol εσυ που τα ξερεις καλα απ οτι βλεπω εχω κι εγω μια απορια παρομοια, αν μπορεσεις να μου τη λυσεις.

Πες οτι θελω να κανω ενα σαιτ και θελω αντι για ενα jpg bg image, να παιζει ενα flash movie με μεταβαλλομενο πλατος. Ολο το σαιτ θα ειναι σε html h php, και θα πρεπει να παιζει πανω απο το flash με divs...Tι κανω σε αυτη τη περίπτωση για να ορισω πως θελω να παιζει φλας σαν background? Γινεται βασικα κατι τετοιο? Καπου το εχω πετυχει αλλα δεν εχω ιδεα αν μπορω και πως να το κανω!

[Garakatsamol]

Καλησπέρα, δυστυχώς δεν τα ξέρω και τόσο καλά όσο θα έπρεπε αλλά προσπαθώ
Λοιπόν αυτό που θέλεις δε γίνεται προφανώς με την έννοια του κλασσικού html background αλλά γίνεται με z-index και καθορισμό του βάθους του html layer. Υπάρχει όμως και ένα πρόβλημα, ανάλογα με ποιό τρόπο κάνεις embed το flash movie θα πρέπει στις παραμέτρους να θέσεις το "wmode" σε "transparent"
Ένα πολύ πολύ γρήγορο παράδειγμα ετοίμασα εδώίσα για να το δεις πως γίνεται

[VaLKyRiE]

Ναι, ειδα το source, αυτο με τα zindex τα γνωριζω καθως και το ποτε θα χρειαστει να ειναι wmode transparent... το θεμα μου ειναι βασικα το μεταβαλλομενο μεγεθος αυτου μαζι με την html τι αποτελεσμα θα βγαλει...και οι διαφορες σε Moz- explorer και λοιπα... παντως πιστευω πως καπως ετσι οπως εδειξες στο παραδειγμα σου αυτο που αναρωτιεμαι γινεται αρκει το flash να εχει z index μικροτερο απο αυτο που εχουν τα απο πανω Html layers

[Garakatsamol]

Η αλήθεια είναι ότι δεν το έχω δοκιμάσει με μεταβαλλόμενες διαστάσεις αλλά λογικά δε θα έχεις πρόβλημα αν δεις αυτά που έχω γράψει παραπάνω. Βέβαια η συγκεκριμένη πρακτική (html over flash) δεν είναι και ό,τι καλύτερο αλλά αν είναι απαραίτητο να γίνει δεν ξέρω άλλο τρόπο.