come visualizzare un SWF al 100%

[Flep]

Avete presente quelle applicazioni Flash che sono visualizzate a 100% sul browser dell' utente ?


Per poter lavorare con quele carateristiche, dobbiamo intervenire sul setting di pubblicazione dell' SWF, più precisamente sul file html che crea Flash, in modo che il nostro SWF si espanda o si restringa in base alla risoluzione dell' utente..
Fatto questo, dobbiamo* lavorare con Actionscript 3.0 per mantenere gli oggetti ( MovieClip, campi di testo ecc ecc ) nella medesima posizione* su qualsiasi misura prenderà il nostro SWF.
Inoltre, possiamo anche impostare un listener in ascolto di un eventuale cambio di risoluzione e quindi risistemare gli oggetti.

Vediamo come fare...*

Creo un FLA che salvo con nome ' main.fla '.
Mantengo le dimensioni di default: 550x400.
Un livello che chiamo ' sfondo ' nel quale inserisco una MovieClip con nome istanza ' bg_mc '. Rettangolare, stesse dimensioni dello stage e punto di registrazione in alto a sinistra.

Adesso vado nel setting di pubblicazione e nella categoria HTML imposto il seguente setting:



Flash ha creato un file che si chiama ' main.html '.
Lo apro ( io utilizzo Dreamweaver ma si può fare con qualsiasi html editor ) e imposto tutti i margini a zero dal pannello proprietà della pagina, come foto seguente:



Adesso creo la Document Class, un file AS che salvo con nome ' Main.as ', implementata in questo modo:

package
{
	import flash.display.MovieClip;
	
	public class Main extends MovieClip
	{
		public function Main()
		{
			init();
		}
		
		private function init():void
		{
			stage.frameRate=31;
			
			bg_mc.x=0;
			bg_mc.y=0;
			bg_mc.width=stage.stageWidth;
			bg_mc.height=stage.stageHeight;
		}
	}
}

nel metodo init:
imposto una velocità di framerate
stage.frameRate=31;
dico a bg_mc di mettersi a coordinate 0,0 e di avere larghezza e altezza uguali a larghezza e altezza dello stage. In questo modo, in qualsiasi misura lo stage venga aperto dal browser dell' utente ho la certezza che l' SWF viene visualizzato a 100%
bg_mc.x=0;
bg_mc.y=0;
bg_mc.width=stage.stageWidth;
bg_mc.height=stage.stageHeight;

otteniamo il seguente risultato:
PROVA 1
Chiaramente se avessimo sistemato degli oggetti sullo stage noteremo che se testiamo l' SWF senza file html ( quindi alle sue dimensioni originali ) gli oeggti sarebbero al posto giusto, mentre se fossero stati nell' esempio del precedente link si sarebbero spostati.
Faccio un esempio, aggiungo una movieClip rettangolare con punto di registrazione centrale e con nome istanza ' clip_mc ' al centro dello stage ed ottengo questo risultato:

vediamolo ora a risoluzione 100% :
PROVA 2
non è più centrato ! clip_mc non è più al centro dello stage.
A questo punto serve agire con Actionscript e nel metodo init() aggiungiamo:
clip_mc.x=stage.stageWidth/2;
clip_mc.y=stage.stageHeight/2;
dicendo a Flash che clip_mc.x deve stare esattamente alla metà della larghezza dello stage e stessa cosa per la y che starà alla metà dell' altezza delo stage.
Infatti ecco che ora è centrato:
PROVA 3
Altro esempio, supponiamo ora di avere un campo di testo ( rights_txt ) che deve stare in basso, in fondo all' altezza dello stage, in questo modo:

pubblicandolo a 100% senza utilizzare Actionscript, avremmo questo risultato:
PROVA 4
e anche quì non è dove dovrebbe stare dato che l' swf è più grande.
Quindi ricorriamo ad Actionscript:
importo la classe textField
import flash.text.TextField;
ed imposto le coordinate del campo di testo, la x deve stare alla larghezza massima dello stage meno la larghezza del suo stesso testo e la y all' altezza massima dello stage meno l' altezza del suo stesso testo
rights_txt.x=stage.stageWidth-rights_txt.textWidth;
rights_txt.y=stage.stageHeight-rights_txt.textHeight;
e quindi adesso anche in risoluzione 100% avrà il corretto posizionamento:
PROVA 5
Attenzione adesso !
Se l' utente ridimensionasse la finestra del browser con il nostro bello SWF visualizzato a 100% ?
Semplice risposta, gli oggetti non si riposizionerebbero.
Provate a ridimensionare la finestra:
PROVA 5
Abbiamo bisogno di un listener in ascolto dell' evento RESIZE che ci avviserà quando il nostro SWF viene ridimensionato.
Ecco come usarlo:
importo l' evento
import flash.events.Event;
aggiungo un chiamata ad un metodo subito dopo la chiamata di init()
checkResize();
creo il metodo checkResize
private function checkResize():void
{
aggiungo un listener allo stage in ascolto dell' evento RESIZE della classe Event che chiamerà la funzione resizeStage
stage.addEventListener(Event.RESIZE, resizeStage);
}
la funzione resizeStage richiamerà il metodo init() che riposizionerà gli oggetti sullo stage
private function resizeStage(event:Event):void
{
init();
}
provate ora a ridimensionare la finestra:
PROVA 6

Alla prossima !

[Aiki86]

Non sò se posso scrivere dopo un tutorial, spero di si
(premetto che sono un principiante del flash)

Mettiamo di avere sempre un MovieClip di nome istanza "bg_mc", nell'esempio che hai fatto questo era nel frame 1.

Io vorrei sapere invece come si mantiene la dimensione adattata come nell'esempio se

"bg_mc" parte con alpha 0% nel frame 1
per poi diventare con un Motion Tween alpha 100% nel frame 30 (per esempio)

Io il massimo che riesco a ottenere è un rettangolino piccolino che compare fino al frame 29 e poi si mette al 100% solo una volta che è arrivato al frame 30
invece la dimensione dovrebbe essere per ogni frame al 100%

[Flep]

Ciao e benvenuto
Certo che puoi scrivere, questi tutorials sono stati inseriti quì nel forum apposta, in modo che si può discutere liberamente.

A riguardo del tuo problema, la motion tween la fai con una MovieClip dentro a bg_mc oppure direttamente sulla timeline ?

[Aiki86]

direttamente dalla timeline, "con il tasto destro :)"

[Flep]

Così non va bene.
Apri bg_mc e falla lì dentro.
Seleziona la forma, convertila i MovieClip.
Aggiungi un keyframe al 30 e fai la Motion.

[Aiki86]

Originally Posted by Flep

la motion tween la fai con una MovieClip dentro a bg_mc oppure direttamente sulla timeline ?

Si :D pensa che non lo sapevo neanche che potevo farla dentro!

grazie mille !!

[Onsitus]

Buongiorno,

qualcuno mi spiega il parameter (event:Event) a che serve

private function resizeStage(event:Event):void

Grazie.

[Flep]

Ciao Gaelle

Se chiami una funzione ( nel tuo caso resizeStage ) da un addEventListener, la funzione vuole come parametro l' evento associato al listener.
Quindi, se ad esempio hai:
stage.addEventListener(Event.RESIZE, resizeStage);
la funzione resizeStage vuole un parametro di tipo Event.
Quel parametro serve per recuperare l' oggetto al quale è stato associato quell' evento.
Quindi nel tuo caso se all' interno di stageResize scrivi trace(event.target); flash ti stampa Stage.
Serve soprattutto nei casi in cui usi dei cicli.
Se in un ciclo associ un evento ad esempio MouseEvent.CLICK a 200 MovieClip ed ogni volta che una delle 200 MC viene cliccata vuoi che venga chiamata una funzione che si chiama goWeb, come fai a sapere dentro tale funzione quale MC è stato cliccato ?
Semplice, la funzione goWeb vuole un parametro di tipoevent:MouseEvent e tramite quello risali alla MC che è stata cliccata:
event.target

[floppy]

Scusate, tanto per sapere..
ma con questo sistema le eventuali immagini bitmap non diventano uno schifo ?

:-(

[Flep]

Le immagini non scalano, perchè abbiamo settato la proprietà Scale a no scale, per cui rimangono delle dimensioni originali.