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

Θέματα web + mobile design, development & cyberculture.

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

Δημοσίευσηαπό lady_invalid » 08.08.08, 3:42 pm

Ηelloooo!!!
Έχω ένα αρχείο swf το οποίο έχω κάνει embed σε μια ιστοσλίδα. Θέλω όμως το πλάτος του να αξάνεται καθώς ο χρήστης μεγαλώνει το παράθυρο. Any ideas?
Επίσης γίνεται καθώς μεγαλώνει το πλάτος να απέχουν τα στοιχεία που είναι μέσα στο swf, την ίδια απόσταση από τις άκρες όπως και στο αρχικό;
Άβαταρ μέλους
lady_invalid
Member
 
Posts: 23
Εγγραφή: 09.05.08, 4:16 pm
Τοποθεσία: Desert island of West Samo(a)s

Δημοσίευσηαπό Garakatsamol » 09.08.08, 4:00 pm

Αυτό που θέλεις να κάνεις γίνεται ως εξής στην 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
Senior Member
 
Posts: 681
Εγγραφή: 11.12.07, 8:21 pm

Δημοσίευσηαπό Garakatsamol » 09.08.08, 6:58 pm

Στο τελευταίο 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
Όλοι βιτριόλι...
Άβαταρ μέλους
Garakatsamol
Senior Member
 
Posts: 681
Εγγραφή: 11.12.07, 8:21 pm

Δημοσίευσηαπό lady_invalid » 11.08.08, 9:34 am

Σ' ευχαριστώ πολύ!!! :) Δεν υπηρχε περίπτωση να το καταφέρω αλλιώς :shock:
Άβαταρ μέλους
lady_invalid
Member
 
Posts: 23
Εγγραφή: 09.05.08, 4:16 pm
Τοποθεσία: Desert island of West Samo(a)s

Δημοσίευσηαπό lady_invalid » 11.08.08, 10:22 am

problem... Δεν έχω εικόνα στο background :S
Άβαταρ μέλους
lady_invalid
Member
 
Posts: 23
Εγγραφή: 09.05.08, 4:16 pm
Τοποθεσία: Desert island of West Samo(a)s

Δημοσίευσηαπό Garakatsamol » 11.08.08, 11:41 am

Δε χρειάζεται να έχεις εικόνα, δουλεύει με οποιοδήποτε movie clip, εκτός αν εννοείς κάτι άλλο που δεν το κατάλαβα
Όλοι βιτριόλι...
Άβαταρ μέλους
Garakatsamol
Senior Member
 
Posts: 681
Εγγραφή: 11.12.07, 8:21 pm

Δημοσίευσηαπό lady_invalid » 11.08.08, 12:39 pm

Έβαλα τον κώδικα στο 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, αλλά πάλι τίποτα
Άβαταρ μέλους
lady_invalid
Member
 
Posts: 23
Εγγραφή: 09.05.08, 4:16 pm
Τοποθεσία: Desert island of West Samo(a)s

Δημοσίευσηαπό Garakatsamol » 11.08.08, 12:42 pm

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

Έδωσες instance name?
Όλοι βιτριόλι...
Άβαταρ μέλους
Garakatsamol
Senior Member
 
Posts: 681
Εγγραφή: 11.12.07, 8:21 pm

Δημοσίευσηαπό lady_invalid » 11.08.08, 12:46 pm

ναι.. :S
Άβαταρ μέλους
lady_invalid
Member
 
Posts: 23
Εγγραφή: 09.05.08, 4:16 pm
Τοποθεσία: Desert island of West Samo(a)s

Δημοσίευσηαπό Garakatsamol » 11.08.08, 12:48 pm

Θα πρέπει ν'ανεβάσεις κάπου το αρχείο
Όλοι βιτριόλι...
Άβαταρ μέλους
Garakatsamol
Senior Member
 
Posts: 681
Εγγραφή: 11.12.07, 8:21 pm

Δημοσίευσηαπό lady_invalid » 11.08.08, 12:59 pm

Όλα τα αρχεία που χρειάζοντα είναι εδώ!
http://www.analyse-it.gr/carousel2.rar
Άβαταρ μέλους
lady_invalid
Member
 
Posts: 23
Εγγραφή: 09.05.08, 4:16 pm
Τοποθεσία: Desert island of West Samo(a)s

Δημοσίευσηαπό Garakatsamol » 11.08.08, 1:16 pm

Έτσι όπως το έκανες λειτουργεί, απλώς επειδή το background είναι λευκό, δε βλέπεις κάποια διαφορά. Αν βάλεις μια εικόνα στο Movie clip "bg" θα δεις ότι δουλεύει όπως πρέπει.
Μάλλον κάτι άλλο θέλεις να κάνεις, μήπως θες να το εξηγήσεις καλύτερα?[/u]
Όλοι βιτριόλι...
Άβαταρ μέλους
Garakatsamol
Senior Member
 
Posts: 681
Εγγραφή: 11.12.07, 8:21 pm

Δημοσίευσηαπό lady_invalid » 11.08.08, 1:19 pm

ouch, noob detected :oops:
Γίνεται να κάνουν resize και τα περιεχόμενα του carousel?
Άβαταρ μέλους
lady_invalid
Member
 
Posts: 23
Εγγραφή: 09.05.08, 4:16 pm
Τοποθεσία: Desert island of West Samo(a)s

Δημοσίευσηαπό Garakatsamol » 11.08.08, 1:37 pm

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

Θα τροποποιήσεις τη γραμμή:
Κώδικας: Επιλογή όλων
var home:MovieClip = this;

σε αυτή
Κώδικας: Επιλογή όλων
var home:MovieClip = this.container;


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



Μήπως όμως έχεις μπλέξει με κάτι μακρυά από τις δυνατότητές σου?
Όλοι βιτριόλι...
Άβαταρ μέλους
Garakatsamol
Senior Member
 
Posts: 681
Εγγραφή: 11.12.07, 8:21 pm

Δημοσίευσηαπό lady_invalid » 11.08.08, 2:04 pm

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

Θα κάνω edit με τα αποτελέσματα σε λιγάκι!
Άβαταρ μέλους
lady_invalid
Member
 
Posts: 23
Εγγραφή: 09.05.08, 4:16 pm
Τοποθεσία: Desert island of West Samo(a)s

Δημοσίευσηαπό lady_invalid » 12.08.08, 2:24 pm

Τραγικό...
Δεν είχα βάλει instance name στα buttons :P
Τώρα μένει η main area..!!
Wish me good luck!!! :)
Άβαταρ μέλους
lady_invalid
Member
 
Posts: 23
Εγγραφή: 09.05.08, 4:16 pm
Τοποθεσία: Desert island of West Samo(a)s

Δημοσίευσηαπό VaLKyRiE » 12.08.08, 3:23 pm

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

Πες οτι θελω να κανω ενα σαιτ και θελω αντι για ενα jpg bg image, να παιζει ενα flash movie με μεταβαλλομενο πλατος. Ολο το σαιτ θα ειναι σε html h php, και θα πρεπει να παιζει πανω απο το flash με divs...Tι κανω σε αυτη τη περίπτωση για να ορισω πως θελω να παιζει φλας σαν background? Γινεται βασικα κατι τετοιο? Καπου το εχω πετυχει αλλα δεν εχω ιδεα αν μπορω και πως να το κανω!
Nothing Lasts Forever...!
Άβαταρ μέλους
VaLKyRiE
Master Member
 
Posts: 4402
Εγγραφή: 26.07.05, 9:42 am
Τοποθεσία: Εκεί στο Νότο... & Εκει στα BΔ.Π !

Δημοσίευσηαπό Garakatsamol » 12.08.08, 4:27 pm

Καλησπέρα, δυστυχώς δεν τα ξέρω και τόσο καλά όσο θα έπρεπε αλλά προσπαθώ :D
Λοιπόν αυτό που θέλεις δε γίνεται προφανώς με την έννοια του κλασσικού html background αλλά γίνεται με z-index και καθορισμό του βάθους του html layer. Υπάρχει όμως και ένα πρόβλημα, ανάλογα με ποιό τρόπο κάνεις embed το flash movie θα πρέπει στις παραμέτρους να θέσεις το "wmode" σε "transparent"
Ένα πολύ πολύ γρήγορο παράδειγμα ετοίμασα εδώίσα για να το δεις πως γίνεται
Όλοι βιτριόλι...
Άβαταρ μέλους
Garakatsamol
Senior Member
 
Posts: 681
Εγγραφή: 11.12.07, 8:21 pm

Δημοσίευσηαπό VaLKyRiE » 12.08.08, 6:18 pm

Ναι, ειδα το source, αυτο με τα zindex τα γνωριζω καθως και το ποτε θα χρειαστει να ειναι wmode transparent... το θεμα μου ειναι βασικα το μεταβαλλομενο μεγεθος αυτου μαζι με την html τι αποτελεσμα θα βγαλει...και οι διαφορες σε Moz- explorer και λοιπα... παντως πιστευω πως καπως ετσι οπως εδειξες στο παραδειγμα σου αυτο που αναρωτιεμαι γινεται αρκει το flash να εχει z index μικροτερο απο αυτο που εχουν τα απο πανω Html layers :)
Nothing Lasts Forever...!
Άβαταρ μέλους
VaLKyRiE
Master Member
 
Posts: 4402
Εγγραφή: 26.07.05, 9:42 am
Τοποθεσία: Εκεί στο Νότο... & Εκει στα BΔ.Π !

Δημοσίευσηαπό Garakatsamol » 13.08.08, 4:17 am

Η αλήθεια είναι ότι δεν το έχω δοκιμάσει με μεταβαλλόμενες διαστάσεις αλλά λογικά δε θα έχεις πρόβλημα αν δεις αυτά που έχω γράψει παραπάνω. Βέβαια η συγκεκριμένη πρακτική (html over flash) δεν είναι και ό,τι καλύτερο αλλά αν είναι απαραίτητο να γίνει δεν ξέρω άλλο τρόπο.
Όλοι βιτριόλι...
Άβαταρ μέλους
Garakatsamol
Senior Member
 
Posts: 681
Εγγραφή: 11.12.07, 8:21 pm

Επόμενο

Επιστροφή στο II.I Ιστοσχεδίαση + Mobile + Διαδίκτυο

Μέλη σε σύνδεση

Μέλη σε αυτή την Δ. Συζήτηση: Δεν υπάρχουν εγγεγραμμένα μέλη και 2 επισκέπτες

Visual Communication Designers Club

Το Visual Communication Designers Club, το μεγαλύτερο Ελληνικό online design forum, αποτελεί μια Ελληνική κοινότητα σχεδιαστών οπτικής επικοινωνίας, υπό την ευρύτερη έννοια του όρου, θέλοντας να συμπεριλάβει στα μέλη της κάθε ειδικότητα και βαθμίδα όσων σπουδάζουν ή εργάζονται στον χώρο της επικοινωνίας, έντυπης, διαδικτυακής, τρισδιάστατης ή εφαρμογών πολυμέσων