Skocz do zawartości


tablety.pl
Zdjęcie
* * * * * 1 głosy

FLASH 8 - Tutoriale i dodatki do strony




  • Zaloguj się, aby dodać odpowiedź
1 odpowiedź w tym temacie

#1 kulpi

kulpi

    Medium Rank

  • Użytkownicy +
  • 210 postów
  • Płeć:Mężczyzna

Napisano 30 03 2006 - 22:00

1.Galeria w Flashu


Podstawy animacji w flashu.

Na wielu witrynach internetowych możemy podziwiać ciekawe animacje. To ze większość z nich wykonana jest w flashu to chyba każdy wie, lecz nie każdy wie JAK zrobić taka lub podobna animacje. Ten przyklejony temat ma pomoc wam, zapoznać was z podstawowymi zasadami tworzenia podobnych animacji. Wiec, jeśli chcesz zrobić animowany tekst, logo, animacje na swoja stronę to czytaj dalej:).

Pierwsza animacja.

Wszystkie animacje wykonane są programie macromedia flash mx. Pokażę wam jak wykonać prosta animacje. Pierwsza rzeczą, jaka musimy zrobić jest ustalenie właściwości naszej animacji, czyli tzw. pola pracy. Ustawmy tak, jakie nam odpowiada. W oknie properties klikamy na przycisk size lub ctr+m. wyskoczy nam kolejne okno w którym możemy zmienić rozmiar naszego panelu pracy oraz kolor tła jak i prędkość animacji czyli frame rate.

Dołączona grafika

Wyskoczy nam kolejne okno w którym możemy zmienić rozmiar naszego panelu pracy oraz kolor tła jak i prędkość animacji czyli frame rate. Dobra zróbmy animacje kwadratu.: )
Proste ale pokaże nam co i jak w flashu się dzieje. moje ustawienia to: dimension-width 400px,height-100, httpframe rate-24fps. Teraz możemy przystąpić do rysowania naszego kwadratu. Z okna tools po prawej stronie wybieramy kwadrat i rysujemy go w lewym dolnym rogu. Możemy określić sobie kolor jak i kolor i grubosc obramowania naszego rysunku oraz w jaki sposób ma być narysowana linia tzn. czy przerywana czy jaka inna. Teraz wybieramy narzędzie arrow tool, to ta czarna strzałka z palety tools i zaznaczamy nasz kwadrat. Następnie otwieramy panel info wciskając ctrl+i. tutaj możemy określić jaka wielkość może mieć nasze cudo. Ja wybrałem 30px*30px. I teraz poruszymy nasz kwadrat oraz dodamy parę ciekawych efektów. W panelu time line tego na samej górze prawym klikamy na klatce z pustym kółeczkiem i wybieramy create motion twean

Dołączona grafika

Kratka podświetli się na niebiesko. Następnie zaznaczamy klatkę 50 i wciskamy F6.Ukaze nam się niebieski pasek z strzałka oznacza to ze nasz kwadrat „jest [/b]zdolny do ruchu”. Następnie wybieramy arrow tools i przeciągamy nasz kwadrat w prawo stronę. Znów wciskamy ctr+i(możemy tez na naszym kwadracie kliknąć prawym i z tamta wybrać scale) i zwiększamy nasz kwadrat. Wybrałem 70px* 70px. Teraz wyrównujemy by się cały mieścił w naszym tle. I mamy gotowa animacje, klikając entera zobaczymy jak się przemieszcza, jednak jest troche nudna wiec dodamy obroty i efekt znikania kwadratu. wracamy do pierwszej klatki. Klikamy na nią i tam gdzie wcześniej było okno z rozmiarem naszego filmu po kliknieciu na klatkę pojawia się właściwości filmu. Z rubryki rotate w której domyślnie jest zaznaczone auto wybieramy CW. Obok możemy wybrać ile ma być obrotów na klatkę ja zostawiłem tam domyślne ustawienie czyli 1. teraz klikamy na nasz kwadrat i w tym samym miejscu co size pojawia się nowe właściwości, tam klikamy na color i z rozwijanego menu wybieramy ALPHA

Dołączona grafika

i suwak na sam dol. Teraz enter i mamy obracający pojawiający się kwadrat: )

PRZYKŁAD

Animacja po torze.

Podobnie jak w pierwszej części tak i tu przygotowujemy sobie miejsce do pracy. W size ustawiłem width 400px height 400px tło czarne i frame rate 24 fps. Gdy to już mamy musimy przygotować teraz layers ,inaczej warstwy do pracy. Kiedy klikniemy na ten symbol, nad naszą pierwszą warstwą pojawi się warstwa
Guide Layer
, a warstwa pierwsza odsunie się nieznacznie w prawo. Wygląda to tak: (guided layer). Warstwa pierwsza automatycznie przyjęła właściwość Guided. To oznacza, że obiekty z pierwszej warstwy będą poruszać się po torze narysowanym w warstwie Guide: Layer 1. Przechodzimy teraz do warstwy Guide i rysujemy w niej okrąg bez wypełnienia. Wypełnienie usuwamy zaznaczając w Fill

Dołączona grafika

Kiedy już narysujemy nasz okrąg na Polu Pracy, najpierw poprzez klikniecie na nim prawym przyciskiem a dokładnie na linii elipsy i wybranie opcji Scale zmniejszamy go. Następnie wybieramy Rotate i obracamy naszą elipsę do pozycji ukośnej. Obiekty w warstwie guide nie będą widoczna podczas odtwarzania animacji. Teraz przechodzimy do layers jeden i na elipsie rysujemy dowolny kwadrat. Następnie klikamy na pierwsza klatkę pierwszej warstwy i wybieramy create motion guide. A w klatce np. 40 i 80 dodajemy klatkę kluczowa czyli inaczej mówiąc wciskamy F6. następnie na warstwie guide layers wciskamy klatkę 1 i przeciągamy ja do klatki 79 i po naciśnięciu prawego wciskamy insert frame. Jeśli wsio dobrze zrobiliście to powinno to wyglądać tak:

Dołączona grafika

teraz klikając na klatce 40 ustawiamy nasz kwadrat na DOKLADNIE MNIEJ JAK POLOWIE NASZEJ ELIPSY. Żeby określić w przybliżeniu polowe warto posłużyć się liniami pomocniczymi. W panelu obok edit w view klikamy na rulers i ustawiamy jedna w pionie jedna w poziomie. W klatce 80 ustawiamy nasz kwadrat PRZED POCZATKOWA POZYCJA. Dlaczego to takie ważne? Gdy nie dokładnie ustawimy na połowie to nasz kwadrat zamiast zatoczyć pełen okrąg a raczej elipse odbije się w miejscu gdzie go ustawiliśmy. Oczywiscie teraz możecie dodać jeszcze obroty i znikania i co tylko chcecie :P

PRZYKAD2

Zmiana kształtu

Czas byśmy pobawili się w zamianę kształtu. Jak sami widzicie nadanie obrazkom dynamiki nie jest takie trudne. To tylko tak wygląda jednak nie jest takie straszne tak samo jest z zamiana kształtu zaraz się o tym przekonacie ale najpierw przygotujcie sobie podłoże jak to zrobić to już na bank wiecie. A przekształcimy sobie kwadrat w kolo. Kolo pierwszej klatce rysujemy sobie kwadrat. I tu tez uwaga by posłużyć się liniami pomocniczymi, ja je umieściłem z lewej strony i na gorze kwadratu. Nastepnie w 30 klatce prawym klikiem wybieramy Insert blank keyframe i rysujemy kolo od linii pomocniczych ctrl+i zaznaczamy cale kolo i ustawiamy parametry jak kwadratu. Przechodzimy do pierwszej klatki i w oknie properties klikamy w teen na shape:

Dołączona grafika

W panelu time line pojawiło się zielone zaznaczenie z strzałka oznacza to ze przekształcenie jest gotowe wystarczy teraz enter ot i cala filozofia:). A żeby było ciekawie to pokaże wam jak ustalić w jakim kierunku ma się kwadrat zmieniac. W pierwszej klatce naciśnijcie shift+ctr+h. powinno pojawić się czerwone kółeczko z literka „a”. powtórzcie czynność 4 razy dla każdego rogu. Teraz przyłóżcie te literki do rogów teraz na klatkę 30 i tam powinny być już literki. Umiescie je tak by zminily kolor na zielony, pobawcie się tymi literami tzn. w różny sposób je poukładajcie a zobaczycie jakie fajne efekty można otrzymać. Enter i gotowe.

PRZYKŁAD3

Animowany tekst.

Na wielu stronach spotyka się fajne efekty z tekstem w tym tutorialu pokaże jak zrobić osik podobnego. Przy tworzeniu animowanego tekstu będziemy korzystać z wielu efektów. Ustawmy wymiary naszego filmu na 400x100px. będziemy animowali tekst WWW.searchengines.pl. W tym celu wybieramy text tool i wpisujemy searchengines następnie narzędziem arrow tool zaznaczamy cały tekst i wciskamy ctrl+b. pozwoli nam to zaznaczyć literę i każda z osobna umieścić w osobnej warstwie gdyż każda litera będzie animowana. Gdy mamy już podzielone litery prawym dokładnie na literze nie w polu z litera, lecz na literze wybieramy distribute to layers.

Dołączona grafika

Umieści to każda literę w osobnej warstwie. Kiedy już mamy we wszystkich warstwach klatki kluczowe, zaczynamy animować literki. W pierwszej warstwie "s" animujemy literę s. Klikamy prawym przyciskiem na pierwszej klatce kluczowej i wybieramy Create Motion Tween. Teraz wstawiamy klatki kluczowe w klatce 10 i 20. W pierwszej klatce w okienku Info (ctr+i) zmniejszamy zaznaczoną literkę do szerokości i wysokości 1px. Przechodzimy do klatki 10 i tam szerokość ustawiamy na 30 a wysokość na 50px. Ja dodatkowo w 1 klatce ustawiłem jeszcze efekt Tint na 100%. Teraz czynność tą powtarzamy dla wszystkich literek a w ostatniej warstwie tworzymy napis WWW. Przerwa na tekst .pl. teraz wracamy do drugiej klatki czyli do litery „e” i następnie zaznaczamy cale 20 klatek i przesuwamy o 3 klatki. czynność powtarzamy z każdą litera przesuwając o kolejne 3.powinno to wyglądać tak.

Dołączona grafika

uruchamiając animacje zuwazymy ze litery jednak znikają, by zapobiec temu w klatce 56 dodajemy puste klatki czyli do każdej litery prawoklik na 56 klatce i insert frame lub F5. mając to zajmiemy się ostatnio warstwa z WWW pl. litery ustawiamy w ostatniej klatce tam gdzie kończą się litery czyli w klatce 56 i nadajemy ruch przez nadanie opcji create motion tween. Około 15 klatek dalej wciskamy F6 lub prawoklik i insert keyframe. Teraz przechodzimy do 56 klatki i zaznaczając WWW, prawym myszki wybieramy scale i poszerzamy nasz napis. Teraz wystarczy dodać puste klatki do napisu „searchengines” by nie znikały i gotowe.

PRZYKŁAD4

Zapisanie i edycja na stronie.

Gdy odwaliliśmy kawał dobrej roboty i chcemy pochwalić się nią przed innymi należy to wrzucić na stronke. Aby to uczynić wpierw należy zapisać to każdy wie jak zrobić, gdy zapisujemy powstaje plik z rozszerzeniem .fla jest to cos podobnego jak w photoshopie .psd czyli plik z warstwami. Żeby inni oglądali nasza grafikę należy ja opublikowac. Robimy to tak:file publish i już po kłopocie i mamy stronke oraz plik z rozszerzeniem .swf, czyli prawidłowy film.

Efekt maski.

W tej części tutoriala pokażę wam jak stworzyć efektywny napis przy pomocy maski. Dobra zacznijmy od utworzenia movie clip(CTRL+F8) zaznaczamy stosowna opcje i dajemy ok. mając utworzony movie clip przystępujemy do stworzenia dwóch warstw. Pierwsza nazwijmy maska a druga np. tekst. Teraz, gdy mamy w pełni przygotowane pole pracy możemy przystąpić do tworzenia napisu z maska. Przechodzimy do pierwszej klatki warstwy, której nadaliśmy nazwę tekst, wybieramy narzędzie TEXT TOOL i piszemy sobie dowolny tekst np. swoje imię, ksywkę lub, co tam chcecie. Będąc w warstwie napis w klatce np. 40 wstawiamy pusta klatkę(F5) lub z prawokliku insert frames.
U mnie to wygląda tak:

Dołączona grafika

Teraz przechodzimy do warstwy maska i rysujemy przed napisem w pierwszej klatce prostokąt o wysokości nieco większej od naszego tekstu i szerokości, około 40px. W moim przypadku przy czcionce 96px kwadrat ma właśnie 40px. Teraz animujemy nasz kwadrat z lewej do prawej strony. Jak to zrobić to chyba nie musze już mówić?. Gdy już mamy gotowa animacje wystarczy prawym klikiem wybrać opcje MASK w warstwie maska:

Dołączona grafika

I gotowe… no prawie gotowe. Klikajac entera zobaczymy pojawiający i znikający kwadrat z zawartością naszych liter nam jednak zależy by te litery były widoczne. Co zrobić? Już mowie. Wystarczy ze utworzymy nowa warstwę(Add Layer, tuz pod warstwami) przeniesiemy ja na sam dół skopiujemy pierwsza klatkę(Copy Frames z prawokliku) z warstwy napis, wkleimy(Paste Frames)w pierwsza klatkę warstwy dolnej a następnie używając narzędzia TEXT TOOL zmienimy kolor tekstu z dolnej warstwy i już nie powinno znikać.Aha ważna uwaga, kiedy mamy włączoną maskę nie możemy dokonywać żadnych modyfikacji. W takim wypadku należy wyłączyć maskę lub odblokować kłódki znajdujące się w polu z nazwa warstwy. Ja trochę przesunąłem tekst w warstwie napis stad to przesuniecie u mnie. Mając taki plik chcielibyśmy by inni zobaczyli nasze efekty, ale sama publikacja tego pliku nie wystarczy, ponieważ jest to movie clip trzeba go najpierw wczytać do głównego panelu pracy. Nad linia czasowa znajdują się dwie ikonki jedna zatytułowana scene1 a druga to jest właśnie plik nad którym aktualnie pracujemy wciskamy Scene 1. Pojawilo się puste pole pracy. Teraz trzeba tylko nasz plik dołączyć do tego pola, wciskamy CTRL+L(lub z prawej strony na zakładkę LIBRARY i tam właśnie znajduje się nasza animacja klikajac dwukrotnie na niej wrócimy do edycji naszego pliku natomiast przeciągając na główne pole pracy będziemy w stanie opublikować nasza animacja. Teraz CTRL+Enter dla pewności ze wsio ok. z nasza animacja i teraz tylko SHIFT+F12 i animacja opublikowana. Gotowe mi tak wyszło:

PRZYKLAD5

A po dodatkowej modyfikacji....

PRZYKLAD6

Przycisk

W tym tutorialu pokażę wam jak wykonać przycisk na stronę, który może być wykorzystany jako baner lub po prostu przycisk na wasza stronę. Zaczynamy standardowo od ustalenia właściwości naszego panelu pracy. Następnie tworzymy przycisk przez wciśniecie CTRL+F8 i wybieramy opcje BUTTON. W linii czasowej zamiast standardowych klatek pojawiły się 4. Wybieramy klatkę UP i rysujemy nasz przycisk dowolny. Ja posłużyłem się prostokątem o wymiarach 200 na 70 po to by był wyraźny, wypełniłem go gradientem liniowym z tymi ustawieniami:

Dołączona grafika

Następnie wpisujemy jakiś tekst. Po tym zabiegu możemy śmiało skopiować nasza klatkę do pozostałych klatek. Teraz by uatrakcyjnić wygląd naszego przycisku dodamy do niego jakąś animacje. Tworzymy nowy clip, czyli standardowo CTRL+F8 z buttona zmieniamy na movie clip i Tak tworzymy nasza animacje do przycisku. Gdy już utworzymy nasza animacje wracamy do przycisku klikajac CTRL+L i tam po lewej stronie po otworzeniu się biblioteki dwukrotnie klikamy na Symbol1, czyli ikonę buttona
Dołączona grafika
Teraz żeby animacja była wyświetlana po najechaniu przycisku w klatce oznaczonej jako OVER przeciągam z biblioteki (CTRL+L) nasza animacje. Możemy dodać jeszcze dźwięk. Dźwięk dodaje się następująco po wciśnięciu CTRL+R wybieramy miejsce skąd mamy pobrać dźwięk klikamy dwa razy i plik zostaje dodany do biblioteki. Ja użyłem typowych dźwięków windowsa. Po importowaniu dźwięku do naszej biblioteki w klatce OVER przeciagamy nasz dźwięk na przycisk powinna pojawić się prosta pozioma kreska w klatce OVER. Mamy już przygotowany button czas by spełniał swoja role i odsyłał odwiedzających do celu. Przechodzimy na główny plan pracy(Screen 1) i przeciągamy przycisk na środek planszy następnie przechodzimy do zakładki Actions. To ta zaraz pod spodem naszego miejsca pracy i tuz nad zakładką Properties. Otwieramy ja i wklejamy lub przepisujemy dokładnie ten kod:

on (release) {
getURL ("http://searchengines.pl");
}


Już wyjaśniam, o co chodzi. Komenda on (release) odpowiedzialna jest za przekierowanie nas do danego adresu, ale dopiero po wciśnięciu przycisku, który stworzylismy, a adres strony oczywiście można wstawić inny, każdemu według potrzeb. Ot i cala filozofia Buttona. Teraz ładnie zapisać plik .fla opublikować, co zrobiliśmy i gotowe. Owocnej pracy:)

PRZYKLAD7
Dołączona grafika

Dołączona grafika

#2 kulpi

kulpi

    Medium Rank

  • Użytkownicy +
  • 210 postów
  • Płeć:Mężczyzna

Napisano 29 06 2006 - 19:00

Witam

Tym razem zajmiemy sie czyms ambitniejszym i byc moze wykracza to poza podstawy flash, ale jest bardzo przydatne. O czym mowa?
Chodzi między innymi o galerię wykonaną w flashu. Tak, wlaśnie pokaze wam jak takowa galerie wykonac, nie jest to takie proste ale tez nie nie dozrobienia. Koniec ględzenia i zabieramy sie do pracy. Stworzcie glowny katalog w ktorym bedzie wasza galeria nastepnie zrobcie dwa katalogi jeden o nazwie „big” a drugi „small”. W katalogach tych beda przechowywane wasze zdjecia, w katalogu „big” beda przechowywane zdjecia o rozmiarach 380*280 px, natomiast w „small” 50*30 px. Oczywiscie parametry te sa do mojego szablonu i jesli rozmiary wam nie pasuja to mozecie je zmienic ale musicie pamietac by takze zmienic rozmiary ramek pod te zdjecia poniewaz moze wam buba wyjsc. Dobra teraz przydaloby sie zmniejszyc wasze wybrane zdjecia, przyklad ten bedzie sie opieral na 20 fotkach jednak wasza galeria nie musi sie ograniczac tylko do 20 wazne jest to byscie poznali zasade robiennia takiej galerii. Aby zmniejszyc zdjecia potrzebny bedzie soft, ja osobiscie uzywam Image Resizer, prosty lekki intuicyjny i nic mu nie brak. Program pobierzecie ze strony producenta:
IMAGE RESIZER

oczywiscie zdjecia sa w formacie .jpg. kiedy mamy juz przygotowane zdjecia czas przystapic do tworzenia pliku xml w ktorym znajduje sie lista z naszymi zdjecia. Plik ten jest niezbedny! Najprosciej ten plik stworzyc w notatniku a tworzy sie go tak samo jak stronke tyle tylko ze rozszerzenie jego to xml czyli zapiszcie go jako „list.xml” gdyz taka nazwa bedzie wykorzystywana w kodzie. Wklejamy ponizszy kod zapisujac jako list.xml

<!--kodowanie "utf-8" niezbedne poniewaz kodowanie to obslugiwane jest przez Flasha-->
<?xml version="1.0" encoding="utf-8"?>
<!-- na poczatku umieszczamy element glowny "pictures"-->
<pictures>
	 <!--natomiast dane o kazdym obrazku z osobna umieszczone sa w znaczniku "pic" w ktorym okreslamy	 dostep do naszych zdjec czyli "small/1.jp" oraz "big/1.jpg"-->
	<pic small="small/1.jpg" big="big/1.jpg">
		<!-- w znaczniku title umieszczamy oczywiscie tytul naszej foty jesli nie chcemy to nie musimy tworzyc tego znacznika to samo tyczy sie "description" jest opis fotki-->
		<title>BLA..BLA...BLA.. TYTUL</title>
		<desc>OPISANY OPIS OPISUJACEGO OPISYWACZY</desc>
	</pic>
	<pic small="small/2.jpg" big="big/2.jpg">
	</pic>
	<pic small="small/3.jpg" big="big/3.jpg">
	</pic>
</picture>

Tutaj sa tylko trzy zdjecia jednak galeria ma miec ich w naszym przypadku conajmniej 20 wiec potrzebujemy 20 znacznikow przy czym ostatni bedzie mial nazwe 20.jpg:
<pic small="small/20.jpg" big="big/20.jpg">
</pic>

Mam nadzieje ze zrozumieliscie. Majac katalogi z zdjeciami i plik xml mozemy otworzyc Flasha.
Po pierwsze potrzebny będzie nam szablon graficzny. Jesli chcecie mozecie wykonać swój szablon lub skorzystać z mojego. Zeby uproscic wam zadaniem i nie meczyc sie z importem plików do biblioteki udostepniam wam swoj plik zrodlowy (zrodlo.fla), wystarczy ze go otworzycie. Plik zawiera to co najpotrzebniejsze czyli wszelkie backgrounds, grafiki i inne potrzebne drobiazgi, naszym zadnaiem bedzie jedynie posklejac to do kupy i napisac kod Action Script. Pierwszej warstwie nadajemy nazwe „bg” i przeciagamy nasze tlo na glowna scene. Teraz musimy dopasowac okno akcji w zakladce „Properties” wchodzimy w „Size” i ustawiamy parametry na 676px*495px a „frame rate” na 25 fps pozwoli to na plynna animacje naszej galerii, a teraz wyrownujemy do gornej i lewej krawedzi najpierw klikajac na naszym tle a potem wpisujac w polu „x” i „y” 0:

Dołączona grafika


Kiedy mamy juz tlo potzrebujemy teraz rozstawic nasze pozostale elementy, zajmijmy sie miniaturkami. Tworzymy nowa warstwe i nazywamy ja „small_picture”. Pierwsza (small_pic) miniaturke przeciagamy z biblioteki i nadajemy jej wspolrzedne: x:47, y:440. Kolejne miniaturki odsuwamy od siebie co 65 pikseli tzn ze nastepna bedzie miala wspolrezdne: x:125, y:440, i tak do konca az umiescimy 9 miniaturek. Jezeli komus sie nie podoba ze sa tak zgniecione te miniaturki to oczywiscie moze zrobic ich mniej np: 7 lub 8. Miniaturkom nalezy teraz nadac nazwy od 0 do 8(small_0....small_8) nazwy nadajemy w polu „Instance Name”:


Dołączona grafika


Po nadaniu wszystkim miniaturkom nazwy przechodzimy do maski. Maska bedzie potzrebna nam do animacji przejscia z jednego zdjecia do drugiego. Towrzymy nowa warstwe o nazwie „mask” i na scene przeciagamy klip o nazwie ”masc_pic” i nadajemy nazwe w polu „Instance Name” „mask”. Oprocz warstwy maski nalezy dodac kolejne dwie warstwy i nazywamy je „container 1” i „container 2” wypelnaimy te warstwy klipem z biblioteki o nazwie „empty”, w warstwach tych beda przechowywane obrazki pomiedzy poszczegolnymi przejsciami do kolejnych zdjec. Oczywiscie tez odwpowiednio nazywamy te klipy w polu Instance Name (container1, container2). Wszystkie 3 klipy powinny miec te same wspolrzedne czyli: x:146, y:85. Postepuje w identyczny sposob czyli tworzymy warstwe, przeciagamy z biblioteki, i nadajemy nazwe w polu „Instance Name”. Klipy o nazwie „end” „beg” „prev” czy „next” mozemy umiescic na jednej warstwie jednak nazwa kazdego musi byc inna czyli odpowiednia dla „end” nazywamy „end” i tak dalej. Ponizej podaje przykladowe rozmieszczenia jak to ja zrobilem:

Dołączona grafika

Teraz towrzymy jeszcze trzy warstwy jedna nazywamy „description” a druga „title” a trzecia „numTxt”. Warstwy te posluza nam do opisu naszych zdjec a dokladniej mowiac do „odczytania opisu i tytulu z pliku list.xml”. w warstwie desription wybieramy narzedzie „text tool” i w oknie zmieniamy wlasciwosc tekstu na „dynamic text”

Dołączona grafika

Oraz nadajemy nazwe „description” i wspolrzedne x:75 y:400. Podobnie postepujemy z warstwa „title” gdzie wspolrzedne jej to: x:245, y:35, a wspolrzedne numTxt x:80, y:84.Po rozmieszczeniu wszystkich elementow towrzymy ostatnia warstwe i nazywamy ja „action”. Warstwa ta bedzie zawierala caly nasz kod ktory ozywi nasza galerie. Zanim przystapimy do napisania kodu powrocmy jeszcze do miniaturek. Aby miniaturki byly wyswietlone musimy jeszcze skorzystac z gotowej klas SmallPic ktora skojarzymy z symbolem miniaturki. Dzieki temu nie trzeba bedzie pisac czesci skryptu. Gotowy skrypt do miniaturek zawarty jest w pliku „SmallPic.as”. w celu przypisania klasy „SmallPic” do symbolu miniaturki, w bibliotece klikamy prawym pzryciskiem myszy i wybieramy properties. Zaznaczamy „Export for ActionScript” i w pole AS2.0 Class wpisujemy „SmallPic”:

Dołączona grafika

Teraz mozemy przystapic do pisania naszego kodu. W warstwie action klikamy na 1 klatke i w zakladkach wybieramy zakladke action lub klikamy na F9:

Dołączona grafika

Najpierw deklarujemy zmienne:


var fileName:String;
var fromNum:Number;
var maxNum:Number;
var current:Number;
var list:XML;
var root:XMLNode;
var toLoad:MovieClip;
var jpgLoader:MovieClipLoader;

W zmiennej „fileName” zawarta bedzie sciezka dostepu i nazwa pliku XML, zmienna „fromNum” przechowuje numer pierwszej miniatury wyswietlonej na pasku, „maxNum” liczbe wszystkich obrazkow, zmienna „current” bedzie zawierac numer aktualnie wyswietlanejgo obrazka, zmienna „list” to obiekt klasy XML do ktorego jest wczytany plik „list.xml”. „root” przechowuje referencje do wezla odpowiadajecego elementowi glownemu, „toLoad” zawarte beda referencje do jednego z pustego klipow „container1” lub „container2” do ktorych bedzie ladowany powiekszony plik, a „jpgLoader” odpowiedzialny jest za ladowanie obrazow. Teraz przypisujemy wartosci do zadeklarowanych zmiennych:


fileName = 'list.xml';
mask.initMask();
loader._visible = false;
fromNum = 0;
toLoad = container2;

inicjalizujemy maske „mask.initMask” ktory pelni funkcje plynnego przejscia pomiedzy poszczegolnymi zdjeciami, dzieki klipowi „loader” bedzie widoczny postep przy ladowaniu zdjec jednak bedzie on widziany tylko przy ladowaniu zdjec.


jpgLoader = new MovieClipLoader();
jpgLoader.addListener(loader);


naszym nastepnym zadaniem bedzie zdefiniowanie funkcji zdarzen ktore wywolane beda przez obiekt „jpgLoader” na poczatku ladowania, podczas ladowania i po zaladowaniu.


loader.onLoadStart = function() {
	this._visible = true;
	this.strip._xscale = 0;
	with (this._parent) {
		title.text = '';
		description.text = '';
	}
};
loader.onLoadProgress = function(tmc, bl, bt) {
	this.strip._xscale = Math.round(bl/bt*100);
};


„onLoadStart” przypisana jest funkcja widzialnego loadera podczas ladowania obrazow, natomiast „onLoadProgress” zawiera skalowanie szerokosci paska postepu „strip”.


loader.onLoadComplete = function() {
	this._visible = false;
	with (this._parent) {
		title.text = root.childNodes[current].childNodes[0].firstChild.nodeValue;
		description.text = root.childNodes[current].childNodes[1].firstChild.nodeValue;
		numTxt.textColor = 0x333333;
		numTxt.text = '[ '+(current+1)+' / '+maxNum+' ]';
		//
		toLoad.setMask(mask);
		mask.playMask();
	}
};


Kiedy obraz jest juz zaladowany, loader znika. Za pomoca metody „setMask” ustawiona zostaje maska dla klipu „toLoad”. Sama animacja maski zostaje wlaczona przy uzyciu metody „playMask”. Zmienna „root” zawiera
Referencje do wezla glownego odpowiadajacego tagowi <pictures> dokumentu XML. Wlasnosc „childNodes” to tablica, czyli tagi <pics>.



list = new XML();
list.ignoreWhite = true;
list.load(fileName);
list.onLoad = function(success:Boolean) {
	if (!success) {
		trace('Błąd, nie można było załadowac pliku!');
		return;
	}
	root = this.firstChild;
	maxNum = root.childNodes.length-1;
	loadSmallImgs(fromNum);
};


Ten fragment kodu bedzie tworzyl obiekt XML i ladowal plik okreslony przez zmienna „fileName”. W funkcji „onLoad” przypisany jest przypisany jest wezel glowny do zmiennej „root” oraz liczba wszystkich obrazkow w zmiennej „maxNum”. Na podstawie dokumentu XML tworzymy funkcje ladujaca miniatury:


function loadSmallImgs(n:Number):Void {
	for (var i = 0; i<9; i++) {
		this['small_'+i].loadSmall(root.childNodes[n+i].attributes.small);
		this['small_'+i].num = n+i;
	}
	fromNum = n;
}


W fukcji „loadSmallImgs” znajduje sie petla „for” ktora przechodzi przez kazda z 9 miniatur przypisujac wlasciwy numer i wywolujac metode „loadSmall”. Metoda „loadSmall” wymaga argumentu w postaci sciezki dostepu do pliku, atrybutem w pliku XML jest nazwa „small” w tagu <pic>.


function loadPicture(n:Number):Void {
	if (current) {
		numTxt.textColor = 0x999999;
		numTxt.text = '[ '+(current+1)+' > '+(n+1)+' ]';
	}
	mask.resetMask();
	toLoad.setMask(null);
	if (toLoad.getBytesLoaded() == toLoad.getBytesTotal()) {
		if (toLoad == container2) {
			toLoad = container1;
		} else {
			toLoad = container2;
		}
		container1.swapDepths(container2);
	}
	jpgLoader.loadClip(root.childNodes[n].attributes.big, toLoad);
	current = n;
}


Przekazany funkcji „loadPicture” numer obrazka odpowiada indeksowi tablicy wezlow potomnych „childNodes” wezla glownego, (wezel jest to obiekt klasy XML ktory odpowiada tagom lub tresci dokumentu tego, natomiast wezel potomny sa to tagi umieszcone wewnatrz innego wezla). Nastepnie zostaje wywolana metoda „resetMask” ktora ustawia maske na poczatek animacji. Zmienna „toLoad” wskazuje na klipy „container1” i „container2” ktore maja zapobiec blednemu dzialaniu galeri gdy podczas ladowania jednego obrazu wcisniemy kolejny obrazek. Przewijanie obrazkow zrealizowane jest za pomoca przyciskow prev, next, end i beg. Przewijanie opiera sie na wywolaniu funkcji „loadSmallImgs”:


prev.onRelease = function() {
	if (fromNum>0) {
		this._parent.loadSmallImgs(--fromNum);
	}
};
next.onRelease = function() {
	if (fromNum<maxNum-8) {
		this._parent.loadSmallImgs(++fromNum);
	}
};
beg.onRelease = function() {
	this._parent.loadSmallImgs(0);
};
end.onRelease = function() {
	this._parent.loadSmallImgs(maxNum-9);
};


A tu mamy pasek przewijania opisu gdy sie nie zmiesci w oknie


down.onPress = function() {
	this._parent.description.scroll++;
};
up.onPress = function() {
	this._parent.description.scroll--;
};


I to caly kod juz. Teraz CTRL+ENTER i mozecie podziwiac swoje dzielo. Pamietajcie zeby galeria byla wyswietlona na stronie musicie wrzucic dwa katalogi, plik swf, plik SmallPic.as, oraz plik XML no i oczywiscie html. A tak wyglada ta galeria
GALERIA
Tutaj natomiast pobierzecie pliki ktore beda wam potrzebne
Pliki zrodlowe
Dołączona grafika

Dołączona grafika




Użytkownicy przeglądający ten temat: 0

0 użytkowników, 0 gości, 0 anonimowych