Siłę twórczą masz…

Czyli galeria flash + XML. Zadaniem tego małego tutoriala jest utworzenie prostej galerii zdjęć, bazującej na danych zawartych w dokumencie XML.

1. Stworzenie projektu
   Na wstępie stwórzmy katalog w którym zawrzemy wszystkie pliki używane do stworzenia galerii.
   Teraz czas uruchomić program w, którym będziemy tworzyć galerię. W moim przypadku jest to Adobe Flash CS3.
   • Projekt
     Po uruchomieniu programu pora stworzyć nowy projekt. W tym celu z menu na górze wybieramy Plik -> Nowy. Otworzy nam się okno w którym wybieramy typ pliku. Wybieramy oczywiście Project Flash. Po kliknięciu OK wyskoczy nam okienko w którym podajemy lokalizację oraz nazwę naszego pliku. Nazwijmy go galeria.flp. Po poprawnym utworzeniu w okienku Projekt (Jeśli go nie widać wybieramy okno->projekt lub wciskamy Shift+F8) powinien widnieć napis galeria
   • Plik *.fla
     W analogiczny sposób tworzymy plik typu ActionScript 3. Po utworzeniu pliku klikamy plik->zapisz aby zapisać nasz plik. Zapisujemy go w katalogu stworzonym w punkcie 1 i nazywamy go galeria.fla.
     Pora teraz dodać plik *.fla do naszego projektu. W tym celu klikamy w panelu Projekt klikamy Prawym Przyciskiem Myszy (w skrócie PPM) na nazwie projektu (W moim przypadku galeria) i wybieramy Dodaj plik. Wskazujemy lokalizacje wyżej utworzonego pliku (galeria.fla) i klikamy OK.
   • Parametry sceny: Teraz opcjonalnie możemy zmienić rozmiar sceny oraz liczbę klatek na sekundę. Klikamy dwa razy na galeria.fla w Panelu Projekt. W panelu właściwości (Jeśli go nie widzimy okno->właściwości->właściwości lub klikamy ctrl + F3) znajdujemy napis Rozmiar: 550 x 450 pikseli i klikamy na guzik. W okienku, które się pojawi ustawiamy szerokość oraz wysokość naszej sceny. Ja ustawie 600 x 400px. ponieważ będę ładował 6 obrazków o wielkości 200×200 ułożonych w 3 kolumnach. W polu niżej Szybkość odtwarzania ustawie 24 kl/s.
   • Plik *.as
     Pora utworzyć serce naszej galerii. Plik tworzymy i dodajemy w analogiczny sposób jak poprzednie pliki. Pamiętajmy tylko by wybrać typ pliku Action Script i nazwać go *.as np. MojaGaleria.as
     We właściwościach pliku *.fla () musimy ustawić plik ActionScript (*.as) jako klasę dokumentu. W tym celu na panelu Właściwości w polu Klasa dokumentu: wpisujemy nazwę pliku *.as ale bez rozszerzenia. W moim przypadku będzie to MojaGaleria
   • Plik *.xml
     Plik xml będzie nam służył za bazę zawierającą informacje na temat obrazków w galerii. W nim będą dane na temat lokalizacji obrazków oraz pola dodatkowe np opis obrazka. Plik XML może mieć różną strukturę. Ja posłużę się najprostszą :). Plik zapisujemy w katalogu pod nazwą *.xml np. baza.xml. A oto przykładowa treść pliku.
     
<galeria>
<obraz lokalizacja="photo/photo_1.jpg" opis="obrazek 1"/>
<obraz lokalizacja="photo/photo_2.jpg" opis="obrazek 2"/>
<obraz lokalizacja="photo/photo_3.jpg" opis="obrazek 3"/>
<obraz lokalizacja="photo/photo_4.jpg" opis="obrazek 4"/>
<obraz lokalizacja="photo/photo_5.jpg" opis="obrazek 5"/>
<obraz lokalizacja="photo/photo_6.jpg" opis="obrazek 6"/>
</galeria>

     Jak widzimy nasz plik składa się z “wpisów” na temat obrazka. Zawierają się w nim dane takie jak lokalizacja obrazka oraz jego opis.
2. Action Script
   Cały mechanizm naszej galeri będzie zawarty w pliku *.as
   • Szkielet pliku
     nasz plik musi zawierać spis bibliotek z których będzie korzystał
     
package {
import flash.net.*;
import flash.display.*;
import flash.events.*;
}

     Następnie tworzymy konstruktor. Konstruktor jest to główna funkcja klasy, która jest uruchamia podczas jej używania. (Jeśli już programowałeś to pomocne będzie stwierdzenie, że konstruktor jest jak funkcja main w C)
     
public class MojaGaleria extends Sprite {
public function MojaGaleria() {
trace("Hallo!");
}

     Należy pamiętać, że nazwa klasy musi być taka sama jak nazwa pliku *.as (Wielkość liter ma znaczenie). Nazwa funkcji konstruktora też musi być taka sama jak nazwa klasy (Wielkość liter ma znaczenie). Nasz plik powinien w tym momencie wyglądać następująco
     
package {
import flash.net.*;
import flash.display.*;
import flash.events.*;public class MojaGaleria extends Sprite {
public function MojaGaleria() {
trace("Hallo!");
}
}
     Aby sprawdzić czy wszystko działa poprawnie klikamy plik->zapisz lub ctrl+s aby zapisać zmiany oraz sterowanie->testuj film lub ctrl+Enter aby uruchomić plik. Jeśli wszystko przebiegło poprawnie w Panelu Wyjście (Jak go nie widzimy klikamy okno->wyjście lub F2) powinniśmy zobaczyć napis Hallo!.
   • ładowanie pliku xml
     mając gotowy szkielet skryptu czas załadować treść naszego pliku XML do skryptu. Aby to uczynić skorzystamy z funkcji URLLoader , URLRequest oraz Event.COMPLETE
     Tip:

     Deklaracja zmienny globalnych w AS. Zmienne globalne deklarujemy przed funkcjami.
     public var nazwa:typ;

     Deklarując zmienne lokalne w AS MUSIMY od razu przypisać do niej wartość
     var nazwa:typ = wartosc;

     Tworzenie nowych obiektów
     new NazwaObiektu(parametry_konstruktora);

     Musimy zadeklarować zmienną globalną typu URLLoader. U mnie nazywa się ona loader. Globalną ponieważ będziemy się do niej odnosić z funkcji loading().
     public var loader:URLLoader;
     Następnie tworzymy zmienną typu URLRequest. U mnie nazywa się ona link. Jako parametr konstruktora podajemy w cudzysłowie lokalizację pliku XML.
     var link:URLRequest = new URLRequest("baza.xml");
     Do wcześniej utworzonej zmiennej globalnej przypisujemy nowy obiekt typu URLLoader.
     loader = new URLLoader();
     Do zmiennej loader dodajemy ‘punkt nasłuchiwania’. addEventListener(zdarzenie, funkcja) Spowoduje to wykonanie się funkcji funkcja po wykonaniu się zdarzenia zdarzenie. W naszym przykładzie spowoduje to uruchomienie funkcji loading po załadowaniu pliku wskazywanego przez zmienna loader.
     loader.addEventListener(Event.COMPLETE, loading);
     Pozostało nam wskazać co ma załadować nasz loader. W tym celu posłużymy się funkcją load, której argumentem jest zmienna typu URLRequest. Tak więc aby załadować plik XML wpiszemy
     loader.load(link)
     Pozostało nam więc tylko napisanie funkcji laoding, której zadaniem będzie parsowanie pliku XML. Tworzymy więc zmienną typu XML
     var XMLgaleria:XML = new XML();
     i przypisujemy tej zmiennej zawartość pliku XML po przeprowadzeniu parsowania.
     XMLgaleria = XML(loader.data);
     Następnie wyświetlamy treść pliku
     trace(XMLgaleria);
     Jeśli wszystko poszło poprawnie to podczas testowania filmu (ctrl+enter) w Panelu wyjście powinna wyświetlić się zawartość naszego pliku XML.
     A tak powinien wyglądać nasz kod na stan obecny.
     
package {
import flash.net.*;
import flash.display.*;
import flash.events.*;
public class MojaGaleria extends Sprite {
public var loader:URLLoader;
public function MojaGaleria() {
trace("Hallo!");
var link:URLRequest = new URLRequest("baza.xml");
loader = new URLLoader();
loader.addEventListener(Event.COMPLETE, loading);
loader.load(link);
}
function loading(evt:Event):void {
var XMLgaleria:XML = new XML();
XMLgaleria = XML(loader.data);
trace(XMLgaleria);
}
}
}

   • ładowanie zdjęć
     Pora teraz wyświetlić nasze zdjęcia. W tym celu musimy stworzyć pętle, która będzie tworzyć zmienne typu obraz,a następnie wprowadzi lokalizacje zdjęć pobraną z pliku XML.
     Tip:

     Składnia pętli for each
     for each (var nazwa_zmiennej in nazwa_tablice) { }
     Dostęp do zawartości pól tablicy uzyskujemy przez zmienną.
     Dla składni XML, którą posługuje się w tym przykładzie dostęp do zmiennych jest bardzo prosty. Obdywa się poprzez napisanie nazwa_zmiennej.@lokalizacja

     Posłużymy się pętlą for each, która wykonuje się dla wszystkich elementów tablicy
     for each (var obraz in XMLgaleria.children()) {}
     Teraz zajmiemy się wnętrzem pętli. Musimy stworzyć załadować obrazki. Tworzymy więc zmienną typu URLRequest w której podamy lokalizacje obrazka oraz Loader
     var req:URLRequest = new URLRequest(obraz.@lokalizacja);
var img:Loader = new Loader();

     Ładujemy obrazek do zmiennej
     img.load(req);
     Aby wyświetlić obiekt na scenie posługujemy się funkcją addChild
     addChild(img);
     Jeśli wszystko poszło dobrze i nie mamy żadnych błędów, powinniśmy zobaczyć ostatni obrazek. To dobrze, oznacza to, że załadowaliśmy wszystkie obrazki, jednak nakładają one się na siebie dlatego widzimy tylko ostatni. Nasz plik powinien wyglądać tak
     
package {
import flash.net.*;
import flash.display.*;
import flash.events.*;
public class MojaGaleria extends Sprite {
public var loader:URLLoader;
public function MojaGaleria() {
trace("Hallo!");
var link:URLRequest = new URLRequest("baza.xml");
loader = new URLLoader();
loader.addEventListener(Event.COMPLETE, loading);
loader.load(link);
}
function loading(evt:Event):void {
var XMLgaleria:XML = new XML();
XMLgaleria = XML(loader.data);
trace(XMLgaleria);
for each (var obraz in XMLgaleria.children()) {
var req:URLRequest = new URLRequest(obraz.@lokalizacja);
var img:Loader = new Loader();
img.load(req);
addChild(img);
}
}
}
}

   • porządkowanie obrazków
     Do ustawiania obrazków posłużymy się tablicą w której będą się znajdować współrzędne lewego górnego rogu kolejnych obrazków. Tablice definiujemy przed pętlą. Ponieważ moje obrazki mają wymiary 200×200, a obrazki będą wyświetlane w 3 kolumnach to tablica będzie wyglądać tak
     var tablica:Array = [[0,0],[0,200],[200,400],[200,200],[0,400],[200,0]];

     Teraz należy przyporządkować odpowiednie wartości z tablicy do współrzędnych obrazka. W tym celu tworzymy przed pętlą pomocniczy licznik.
     var i:int = 0;
     Następnie wewnątrz pętli przypisujemy wartości z tablicy oraz zwiększamy wartość licznika, by przemieszaczać się po tablicy.
     img.x = tablica[i][1];
img.y = tablica[i][0];
i+=1;
Jeśli wszystko się udało powinniśmy zobaczyć obrazki w następującej kolejności: 1,2,5,6,4,3. A nasz powinien wyglądać tak
     
package {
import flash.net.*;
import flash.display.*;
import flash.events.*;
public class MojaGaleria extends Sprite {public var loader:URLLoader;
public function MojaGaleria() {
trace("Hallo!");
var link:URLRequest = new URLRequest("baza.xml");
loader = new URLLoader();
loader.addEventListener(Event.COMPLETE, loading);
loader.load(link);
}
function loading(evt:Event):void {
var XMLgaleria:XML = new XML();
XMLgaleria = XML(loader.data);
trace(XMLgaleria);
var tablica:Array = [[0,0],[0,200],[200,400],[200,200],[0,400],[200,0]];
var i:int = 0;
for each (var obraz in XMLgaleria.children()) {
var req:URLRequest = new URLRequest(obraz.@lokalizacja);
var img:Loader = new Loader();
img.load(req);
img.x = tablica[i][1];
img.y = tablica[i][0];
addChild(img);
i+=1;
}
}
}
}
   • pola podpisu
     Do naszej galeri możemy jeszcze dodać pola tekstowe w których będzie znajdować się opis obrazka. Posłużymy się zmienną typu TextField. Aby jej użyć należy dodać następującą bibliotekę
     import flash.text.TextField;
     Tworzenie obiektów typu TextFiels odbywa się analogicznie jak tworzenie każdej innej zmiennej.
     var txt:TextField = new TextField();
     Nastepnie do tego pola należy przypisać tekst opisujący obrazek, który pochodzi z pliku XML.
     txt.text = obraz.@opis;
     Teraz pozostało tylko wyświetlić i rozmieścić opisy na scenie. Robimy to w analagoczny sposób. Ja posłuże się gotową już tablicą zawierającą współrzędne rogów obrazków i dodam tylko odpowiedni offset.
     
addChild(txt);
txt.x = tablica[i][1]+75;
txt.y = tablica[i][0]+150;
Tak wygląda gotowy plik
     
package {
import flash.net.*;
import flash.display.*;
import flash.events.*;
import flash.text.TextField;
public class MojaGaleria extends Sprite {public var loader:URLLoader;
public function MojaGaleria() {
trace("Hallo!");
var link:URLRequest = new URLRequest("baza.xml");
loader = new URLLoader();
loader.addEventListener(Event.COMPLETE, loading);
loader.load(link);
}
function loading(evt:Event):void {
var XMLgaleria:XML = new XML();
XMLgaleria = XML(loader.data);
trace(XMLgaleria);
var tablica:Array = [[0,0],[0,200],[200,400],[200,200],[0,400],[200,0]];
var i:int = 0;
for each (var obraz in XMLgaleria.children()) {
var req:URLRequest = new URLRequest(obraz.@lokalizacja);
var img:Loader = new Loader();
img.load(req);
img.x = tablica[i][1];
img.y = tablica[i][0];
addChild(img);
var txt:TextField = new TextField();
txt.text = obraz.@opis;
addChild(txt);
txt.x = tablica[i][1]+75;
txt.y = tablica[i][0]+150;
i+=1;
}
}
}
}

A tu można pobrać plik z gotową galerią (Uwaga tylko pliki *.swf,*.xml oraz zdjęcia !)

Download
Mirror 1
Mirror 2
Mirror 3