Full Screen Flash

Zelite napraviti modernu Flash web stranicu? Vecina takvih stranica su „ full screen“ tj. zauzimaju cijeli prozor internetskog preglednika. Zbog toga je malo teze kontrolirati sve elemente na stranici tj. njihove pozicije – npr. footer da bude uvijek na dnu, a meni na vrhu. Za pozicioniranje elemenata bez obzira na velicinu prozora koristiti cemo Stage klasu. Uz ovo dinamicki cemo iscrtavati background (pozadinu) stranice u ovisnosti o velicini prozora uz pomoc Bitmap klase. Kliknite na sliku ispod i otvoriti ce Vam se primjer u novom prozoru.

Full Screen Flash Page

Download Ovdje mozete skinuti source
Otvorite Flash i kreirajte novi dokument (File>New>Flash File ( ActionScript 2.0). U Properties prozoru postavite Frame rate na barem 30 (slika)
Full Screen Flash PageImportirajte grafiku koju zelite da bude background – File>Import>Import to Library
Kada je grafika u Library-ju desni klik na ime i odaberite Linkage... (vidi sliku)Full Screen Flash PagePostavite Linkage kao bkg (vidi sliku)
Full Screen Flash Page
Tada cemo importirati i dvije grafike od kojih ce jedna uvijek biti u sredini prozora bez obzira na velicinu istog i druga ce uvijek ce biti u donjem desnom uglu. Importirajte ih na Stage File>Import>Import to Stage... (ili Ctrl+R). Svaku od tih grafika pretvorite u Movie Clip tako da selektirate jednu grafiku i stisnete tipku F8 (Edit>Conver to Symbol...). Postavite im imena po volji. Glavno da svakom Movie Clipu postavite odgovarajuci Instance name u properties prozoru. Za onu grafiku koja ce biti u sredini prozora postavite Instance nama - sredina_mc, dok drugom MC-u postavite Instance name - ugao_mc. Pripazite da registacijske tocke budu kao na slici!!!
Full Screen Flash PageKada smo to napravili krecemo sa ActionScriptom. Otvorite ActionScript prozor(tipka F9). Kao sto sam rekao u uvodu koristiti cemo Bitmap klasu. Da bi je mogli koristiti moramo je najprije pozvati. To cemo napraviti tako da upisemo sljedece: [a]import flash.displa.BitmapData;[/a]Zatim cemo narediti Flashu da sve elemente na stranici „ravna“ prema gornjem lijevom uglu i da ne skalira elemente kako se prozor povecava.
PLAIN TEXT
Actionscript:
  1. Stage.align = "TL";
  2. Stage.scaleMode = "noScale";

Prvo cemo sa ActionScriptom postaviti nasa dva MovieClipa u pravu poziciju – jednog na centar prozora, i drugog u donji desni ugao.

PLAIN TEXT
Actionscript:
  1. sredina_mc._x=Stage.width/2;
  2. sredina_mc._y=Stage.height/2;
  3. ugao_mc._x=Stage.width;
  4. ugao_mc._y=Stage.height;

Zatim cemo kreirati BitmapData objekt u koji cemo ucitati grafiku iz Library-ja (za pozadinu).

PLAIN TEXT
Actionscript:
  1. var pozadina:BitmapData = Bitmap.Data.loadBitmap("bkg");

Uocite da cemo grafiku iz Library-ja pozvati upravo preko njezinog Linkage imena kojeg smo ranije postavili.
Kad smo ucitali grafiku trebamo je kopirati po sceni tako da ispuni cijeli prozor. U tu svrhu napraviti cemo funkciju koja ce raditi upravo to. Najprije cemo definirati prostor koji zelimo ispuniti, a to je cijeli prozor, a zatim cemo ga „ispuniti“ sa bitmapom.

PLAIN TEXT
Actionscript:
  1. function iscrtaj_pozadinu() {
  2. this.beginBitmapFill(pozadina);
  3. this.moveTo(0,0);
  4. this.lineTo(Stage.width,0);
  5. this.lineTo(Stage.width, Stage.height);
  6. this.lineTo(0,Stage.height);
  7. this.lineTo(0,0);
  8. this.endFill();
  9. }
  10. iscrtaj_pozadinu();

Primjetite u funkciji naredbe Stage.width i Stage.height s kojima dobivamo sirinu tj. visinu flasha. Te vrijednosti su nam potrebne da bi znali koje podrucje cemo ispuniti sa Bitmapom (moveTo,lineTo).
Testirajte dobiveni rezultat sa Ctrl+Enter.
Dobivamo dobro iscrtanu pozadinu medutim prilikom promijene velicine prozora (povecanje) nece biti iscrtan onaj dio za koliko smo povecali prozor. Tome cemo doskociti sa Listenerom koji ce „osluskivati“ promijenu velicine i pozivati vec napravljenu funkciju koja ce ponovo iscrtati pozadinu.

PLAIN TEXT
Actionscript:
  1. var osluskivac:Object= new Object();
  2. osluskivac.onResize=function() {
  3. iscrtaj_pozadinu();
  4. sredina_mc._x=Stage.width/2
  5. sredina_mc._y=Stage.height/2;
  6. ugao_mc._x=Stage.width;
  7. ugao_mc._y=Stage.height;
  8. }
  9. Stage.addListener(osluskivac);

Najprije cemo napraviti objekt osluskivac. Tada cemo napraviti funkciju koja ce se izvrsavati nakon kod promijene velicine flasha. Unutar funkcije postavimo ime funkcije koju smo ranije napravili za crtanje pozadine. Osim te funkcije jos cemo dodati naredbe za pozicioniranje ona dva MovieClipa (sredina_mc i ugao_mc). Dovoljno je samo iskopirati naredbe za njihovo pozicioniranje koje smo na pocetku upisali. Jos samo treba dodati Listener na Stage i pridruziti ga nasem objektu. Time pri svakoj promijeni velicine Stagea poziva se funkcija onResize u kojoj pozivamo funkciju za crtanje pozadine i naredbe za pozicioniranje Movie Clipova.
Testirajte sa Ctrl+Enter i pokusajte mijenjati velicinu prozora.

SWFObject
Sada jos treba dobiveni swf (File>Export>Export Movie...> swf) ubaciti u HTML. Da bi sve bilo po standardima struke i da ne bi bilo problema u Internet Exploreru koristiti cemo SWFObject http://blog.deconcept.com/swfobject/
Slijedite gornji link i skinite SWFObject sa primjerima (http://blog.deconcept.com/swfobject/swfobject.zip) Tamo je sve dobro objasnjeno i ne bi smjelo biti problema – radite po primjeru fullpage.html.Takoder mozete vidjeti kako sam ja napravio u svom primjeru.

1 Star2 Stars3 Stars4 Stars5 Stars (2 votes, average: 4.5 out of 5)
Loading ... Loading ...

Kategorija: Actionscript objavljeno 05.09. 2007

7 Responses to “Full Screen Flash”

  1. ivica, on 07.09. 2007 at 1:05 Said:

    Poštovanje!
    Evo da se ja malo uključim na ovu temu koju i ja pokušavam napraviti.Možete li mi pomoči oko toga kako napraviti da recimo 5 _mc-ova koji su dugmad ,da se rasporede pri vrhu ekrana na način da zavisno od širine ekrana budu ravnomjerno raspoređeni ( da bude jednak razmak između njih ).
    Znači da prvi bude 5px odmaknut od početka ,zadnji 5px odmaknut od kraja a ostala tri da se ravnomjerno rasporede između njih.

    Ima li za to riješenje?

    Unaprijed se zahvaljujem

  2. admin, on 07.09. 2007 at 1:37 Said:

    Naravno da postoji rijesenje. Pod pretpostavkom da su registracijske tocke svakog tog MC-a na vrhu u sredini (http://www.kirupa.com/developer/mx/rpoint.htm) cijeli kod je:
    //————————————————————-
    import flash.display.BitmapData;
    Stage.align = “TL”;
    Stage.scaleMode = “noScale”;

    var x_odmak=5;
    //—————————————————————
    var pozadina:BitmapData = BitmapData.loadBitmap(”bkg”);

    function iscrtaj_pozadinu() {
    this.beginBitmapFill(pozadina);
    this.moveTo(0,0);
    this.lineTo(Stage.width,0);
    this.lineTo(Stage.width, Stage.height);
    this.lineTo(0,Stage.height);
    this.lineTo(0,0);
    this.endFill();
    }
    iscrtaj_pozadinu();
    postavi_mcs();

    //—————————————————————

    function postavi_mcs() {
    mc1._y=mc2._y=mc3._y=mc4._y=mc5._y=0;
    mc1._x= x_odmak mc1._width/2;
    mc5._x= Stage.width - (x_odmak mc5._width/2);
    var delta_x = (mc5._x- mc1._x)/4;
    mc2._x = mc1._x delta_x;
    mc3._x = mc2._x delta_x;
    mc4._x = mc3._x delta_x;
    }

    //—————————————————————

    var osluskivac:Object= new Object();

    osluskivac.onResize=function() {
    iscrtaj_pozadinu();
    postavi_mcs();
    }

    Stage.addListener(osluskivac);

    //—————————————————————-

    Najprije sam definirao varijablu x_pomak koja ce nam govoriti koliko se trebamo odmaknuti od ruba. Zatim sam postavio y pozicije koje su svima iste tj. 0. X pozicija prvog mc-a je odmak pola njegove sirine. Zatim sam odredio poziciju zadnjeg, a to je sirina prozora - odmak - pola njegove sirine. Zatim sam odredio razmak izmedu preostalih MC-a i podijelio sa 4. Svakom sljedecom sam dodavao tu vrijednost na X vrijednost prethodnog MC-a.

    Source ovdje: http://www.as-flash.com/fla/full-screen-flash2.fla

  3. ivica, on 08.09. 2007 at 0:44 Said:

    Skinuo sam source i to je to,samo to moram primjeniti prema svojum _mc-ovima.Probao sam smanjivati stranicu i ponaša se upravo onako kako bih htio.

    Hvala,Hvala.

    Jedino,ako mogu nešto dodati ? Prema naslovu pomislio sam da je to stvarni FullScreen Flash,bez adresne trake i svega ostalog,da je na cijelom ekranu Flash.Zašto tome nije tako ?

    Svaka pohvala za ovakove tutoriale !!!

  4. admin, on 08.09. 2007 at 0:50 Said:

    Nisam radio takav “Full screen” jer mi se cini neupotrebljivim kod web stranica. Zapravo meni je to super, ali mislim da bi “obicne” korisnike iritiralo… Mozda sam u krivu…
    Gledati cu da napravim i taj tutorijal :D
    Pozdrav i hvala na lijepim rijecima

  5. AS-flash.com » Blog Archive » Pravi FullScreen, on 08.11. 2007 at 22:57 Said:

    […] disciplina, posebno od Flash Playera 9,0,28,0. Sam tutorijal ce se naslanjati na prethodni “Full Screen Flash” Pogledajte na primjeru (klik na sliku otvara primjer u novom […]

  6. Igor, on 10.06. 2008 at 7:28 Said:

    Kad source otvorim u flashu i idem na test movie, prijavi mi sledecu gresku:

    Error opening URL “file:///C|/Documents and Settings/Ante/Desktop/Tutorijal/Untitled-1.swf”

  7. Igor, on 10.06. 2008 at 7:29 Said:

    Kad source otvorim u flashu i idem na test movie, prijavi mi sledecu gresku:

    Error opening URL “file:///C|/Documents and Settings/Ante/Desktop/Tutorijal/Untitled-1.swf”

    ?! :(

Komentari

Verification Image

Unesite slova sa slike.

« Print Flash i PHP »