SYSTEM NAWIGACJI

Teraz przedstawię najważniejszą część tutoriali czyli system nawigacji. Bez systemu nawigacji nie można zrobić strony dlatego też jest ona najważniejszym elementem strony.

Tutaj możesz zobaczyć gotowy tutorial.

1. Narzędziem Rectangle tool tworzymy przycisk, zaznaczamy go i konwertujemy go do klipu filmowego (Convert to Symbol).

2. Przycisk kopiujemy klika razy i rozmieszczamy na scenie

3. Do warstwy dodajemy kilka klatek Frames. Na poziomie warstwy zaznaczamy na listwie czasowej klatke i wciskamy prawy przycisk myszy. Z otwartego menu wybieramy Insert Frame. Ilość klatek, które stworzymy zależy o ilości podstron zawartych na stonie.

Gdy przyciski są już gotowe możemy zacząć robić podstrony:

4. Tworzymy nową warstwę i na zaznaczamy klatkę. Następnie otwieramy panel Properties. W polu Frame nadajemy nazwę klatki, czyli wyraz za pomocą którego będziemy się odwoływac do tej klatki.

Chcąc dodać następne podstrony na listwie czasowej dodajemy nową pustą klatkę kluczową (Insert Blank Keyframe). Później dodajemy nazwę klatki.

Gdy już stworzyliśmy wszystkie podstrony zajmiemy się odwoływaniem się do nich.

5. Zaznaczamy przycisk i dodajemy do niego akcje:

on (release) {
_root.gotoAndStop("nazwa_klatki")
}

Należy pamiętać, że informacja zawarta w nawiasach to nazwa podstrony do której przycisk będzie się odwoływał

To już prawie koniec jednak musimy dodać nową warstwę i w jej pierwszej klatce za pomoca panelu Actions dodajemy akcję:

stop();

Dodając tą akcje wymusimy zatrzymanie się odtwarzania filmu by przejście do kolejnych podstron nie wykonywało się samoczynnie tylko po rzyciśnięciu przycisku z nazwą podstrony.

PRELOADER

Na poczatku stworzymy preloader czyli animację wstępną, która zatrzyma odtwarzanie strony do czasu całkowitego jej załadowania. Oprócz wyświetlania załadowanych procentów nasz preloader będzie mieć pasek postępu. Preloader jest łatwy do zrobienia, jednak sprawia młodym twórcom wiele kłopotów i jest tematem rozmów na wielu forach. Tak więc poniższy przykład spróbuje wyjaśnić wam jak najdokładniej. Na dole znajdziecie link do gotowego już Preloadera.

1. W pustym dokumencie Flash'a tworzymy 3 puste klatki kluczowe (Blank KeyFrame). Warstwę z tymi klatkami nazywamy "akcje". To na tej warstwie bedziemy dodawać wszystkie akcje Action Script.

2. Tworzymy drugą warstwę, którą nazywamy "zawartość". Na pierwszej klatce rysujemy narzedziem Rectangle Tool poziomy pasek wraz z ramką.

3. Na warstwie "zawartość" dodajemy jedną zwykłą klatkę (Frame). Natomiast w 3 klatce tej samej warstwy dodajemy pustą klatkę kluczową (Blank KeyFrame), na której piszemy "animacja została załadowana". Całość powinna wyglądać tak:

4. Wracamy do 1 klatki preloadera i klikamy na wcześniej utworzone wypełnienie prostokąta. Uważamy by nie zaznaczyć obramowania. Teraz wciskamy F8 lub w menu Modify -> Convert to Symbol. W pole Name wpisujemy nazwę, która bedzie identyfikowała nasz klip w bibliotece. Natomiast w polu Behavior zaznaczamy na Movie Clip i klikamy na OK. Po tej czynności zobaczysz, że nasz nowo powstały symbol zasłonił kawałek ramki. Możesz to poprawić rozmieszczając ją na nowej warstwie która musi sie znajdować pod tą z paskiem.

5. Zaznaczamy nasz nowo powstały symbol i klikamy na panel Properties. W polu gdzie wpisane jest Instance Name wpisujemy nazwę, którą będziemy odnosili sie do tego elementu w naszym kodzie. Piszemy więc "pasek"

6. Teraz czas na dodanie kodu AS. Zaznaczamy pierwszą klatkę na warstwie "akcje" i wklejamy niżej podany kod:

total = _level.getBytesTotal();
loaded = _level.getBytesLoaded();
procent = Math.round(loaded/total*100);
pasek._xscale = procent;
if (loaded>=total) {
gotoAndPlay(3);
}

kod ten pobiera całkowity rozmiar filmu, ilość załadowanych Bajtów i przelicza na procenty. Trzecia linia wyświetla określony procent paska w zależności od załadowania filmu.Ostatnia część sprawdza czy został załadowany cały film. Jeśli tak film "przechodzi" do 3 klatki

do drugiej klatki dodajemy kod:

gotoAndPlay(1);

kod ten powoduje zapętlenie filmu do czasu całego załadowania

w 3 klatce dodajemy kod

stop();

powoduje on zatrzymanie filmu

7. W pierwszej klatce na warstwie "zawartosć" umieszczamy pole tekstowe narzędziem Text Tool i w panelu Properties zmieniamy jego typ na Dynamic Text. W pole Var piszemy "procent".

8. By móc sprawdzić nasz preloader nie umieszczając go na stronie umieszczamy na scenie w 3 klatce warstwy "zawartość" dowolny obrazek by podnieść "wagę" naszej animacji.

9. Teraz Wciskamy Ctrl + Enter lub Control -> Test Movie czynność tą powtarzamy trugi raz by symulowac ściąganie nie umieszczając filmu na serwerze. Koniec.

NAGŁÓWKI

Jak każdy wie nie ma złotej recepty na stworzenie ładnej grafiki. Jednak pręzetuje kilka ciekawych i łatwych pomysłów na nagówki do strony www. Można je wykorzystać uatrakcyjniając nimi stronę.

Pierwszy efekt, który tutaj przedstawię bedzie związany z obramowaniem tekstu. Jest on bardzo łatwy do zrobienia, ale ładnie wyglada i można go wykorzystać do nagłówka strony.

Zaczynamy:

1. Na początku tworzymy tekst używając narzędzia Text Tool

2. Rozbijamy go wciskając 2 razy Ctrl + B lub w menu Modify -> Break Apart. Za pierwszym wciśnieciem rozbijemy go na pojedyncze litery, a za drugim na grafikę, którą można edytować.

3. Teraz kopiujemy litery i wklejamy na nową warstwę koniecznie w tym samym miejscu (Edit -> Paste in Place).

4. Zmieniamy kolor nowego tekstu. UWAGA: Tekst musi mieć inny kolor niż pierwszy.

5. Zwiekszamy rozmiar tekstu wciskając w menu Modify -> Shape -> Expand Fill

6. W okienku opcję Direction ustawiamy na Expand, a opcję Distance na 3px (można ją edytowac gdyż odpowiada ona za grubość obramowania). Wciskamy OK.

7. Stary napis (mniejszy) kopiujemy na warstwę z wiekszym napisem. Pustą warstwę możemy usunąć.

To już koniec, jednak możemy usunąć wypełnienie wewnętrzne by napis miał wypełnienie koloru tła. Można także pogrupować litery Ctrl + G lub Modify -> Group co zapobiegnie niepotrzebnemu edytowaniu.

Następnym ciekawym napisem jest napis 3D. Jest on najprostrzy do wykonania.

1. Tworzymy nowe 2 warstwy (razem są 3).

2. Na pierwszej warstwie piszemy treść naszego nagłówka. Nie może jednak on mieć koloru czarnego albo białego.

3. Całość kopiujemy i wklejamy w to samo miejsce (Edit -> Paste in Place lub Ctrl + Shift + V) na niższej warstwie. Następnie przesuwamy o 2 px w górę i w lewo oraz zmieniamy kolor napisu na czarny.

4. Czynność powtarzamy na 3 warstwie. Jednak tym razem skopiowany napis przesuwamy o 2 px w prawo i dół, a kolor zmieniamy na biały.

Koniec

By urozmaicić strone można dodać napis z wypełnieniem obrazka. Jak to zrobić przedstawiam w poniższym tutorialu.

1. Tworzymy nową warstwę (razem są 2) i na wyższej warstwie piszemy treść nagłówka.

2. Na drugą warstwę wklejamy bitmapę, która posłuży nam na tło do napisu.

3. Klikamy na warstwę z napisem prawym przyciskiem myszy i w menu wybieramy opcję Mask.

Jeżeli wszystko dobrze zrobiliśmy ikonki na warstwach powinny się zmienić. W ten oto sposób zrobiliśmy ciekawy napis z wykorzystaniem maski.

Teraz przedstawie troche trudniejszy, lecz animowany napis.

1. Tworzymy 2 nowe warstwy.

2. Na pierwszej piszemy treść naszego nagłówka.

3. Następnie na najniższą warstwę kopiujemy ten napis w to samo miejsce.

4. Na środkowej warstwie rysujemy kwadrat bez obramowania. Jego wielkość zależy od wielkości czcionki naszego napisu.

5. Kolor naszego kwadratu będzie stanowić wypełnienie gradientowe. Zaznaczamy kwadrat i otwieramy panel Color mixer używając skrótu Shift + F9 lub z menu Window -> Design Panels -> Color Mixer.

6. W panelu z menu wybieramy opcję Linear, a następnie tworzymy takie wypełnienie gradientowe:

Środkowe wypełnienie jest koloru białego, zewnętrzne są też koloru białego jednak z kanałem Alpha ustawionym na 0%

7. Gdy wypełnienie jest gotowe kwadrat konwertujemy na Movie Clip (F8).

8. Klip obracamy o około 30 stopni w prawo narzędziem Free Transform Tool . Gdy zaznaczyliśmy klip kierujemy kursor na prawy górny róg. Możemy obrócic klip tylko wtedy gdy zamiast kursora pojawi się okrągła strzałka.

9. Teraz ustawiamy go przed napisem.

10. Na listwie głównej na warstwie w której się znajduje na około 50 pozycji dodajemy Klatkę Kluczową (Key Frame). Do pozostałych warst na tej samej pozycji wstawiamy zwykłą klatkę (Frame).

11. Na nowo utworzonej klatce kluczowej nasz kwatrat przesuwamy na koniec napisu.

12. Na warstwie z kwadratek klikamy prawym przyciskiem w środku listwy (między klatkami kluczowymi) i z wyświetlonego menu wybieramy Create Motion Tween . Jeśli dobrze to zrobiliśmy pojawi się strzałka na fioletowym tle.

13. Najwyższą warstwie ustawiamy na Mask.

ODTWARZACZ MP3

Chciałbyś rozluźnić odwiedzających Twoją stronę gości nastrojową muzyką w tle? Nie ma problemu. W poniższym tutorialu zaprezętuje jak stworzyć łatwy odtwarzacz, który można zamieścic na każdej stronie.

1. Na początku stworzymy 2 przyciski, które będą odpowiadać za zatrzymywanie i odtwarzanie dźwięku.

2. Do stworzonych przycisków dodajemy akcje:

//dodać do przycisku odpowiadającego za zatrzymanie się dźwięku
on (release) {
if (odtwarzanie != false) {
_root.muzyka.stop();
odtwarzanie = false;
}
}

oraz

//dodać do przycisku powodującego wznowienie dźwięku
on (release) {
if (odtwarzanie != true) {
_root.muzyka.start();
odtwarzanie = true;
}
}

3. Teraz na listwę główną dodajemy akcję:

Volume = 100;
muzyka = new Sound();
muzyka.loadSound("dźwięk.mp3", true);
muzyka.stop();
muzyka.setVolume(Volume);

Teraz czas na stworzenie slidera, który będzie regulować głośność naszego dźwięku.

4. Tworzymy pionową linię i konwertujemy ją do klipu filmowego (F8), a w panelu Properties w polu Instance Name wpisujemy "linijka". Ten pasek będzie torem ruchu dla naszego slidera.

5. Rysujemy mały poziomy pasek, który będzie naszym suwakiem. Konwertujemy go do klipu filmowego (F8) i w panelu Actions dodajemy poniższy kod:

onClipEvent (load) {
this._y = _root.linijka._y;
this._x = _root.linijka._x;
left = _root.linijka._x;
top = _root.linijka._y;
right = _root.linijka._x;
bottom = _root.linijka._height;
}
onClipEvent (enterFrame) {
pasek = _y;
linijka = _root.linijka._height;
_root.muzyka.setVolume(linijka-pasek);
_root.Volumetext = _root.muzyka.getVolume();
}
onClipEvent (mouseDown) {
startDrag(this, false, left, top, right, bottom);
}
onClipEvent (mouseUp) {
this.stopDrag();
}

6. Na koniec narzędziem TextTool tworzymy pole. W panelu Properties zmieniemy jego typ na Dynamic Text i w polu Var wpisujemy "Volumetext".

SYSTEM NEWSÓW I PRZEWIJANIA

W tym tutorialu pokaże wam jak zrobić łatwy system newsów. Newsy ładowane są z pliku zewnętrznego więc żeby zmienić newsa nie trzeba ładować na serwer całej strony, lecz tylko jeden plik, w którym będą one zawarte. Ciekawe jest to, że tekst można formatować za pomocą znaczników HTML co dodatkowo pozwoli Wam kontrolować wygląd tekstu. Jeżeli text nie zmieści się w polu będzie go można swobodnie przewijać.

1. Na początku narzędziem Text Tool tworzymy duże pole, w którym będą wyświetlane nasze Newsy. Zaznaczamy pole i w panelu Properties zmieniamy jego typ na Dynamic text. W polu Instance Name wpisujemy "text", natomiast w polu Var wpisujemy "pole".

2. Po lewej stronie pola Var z rozwijanej listy wybieramy opcję Multiline. Wybór tej opcji pozwale wyświetlić tekst w wielu liniach. Następnie uaktywniamy pole Render text as HTML co pozwoli nam edytować plik znacznikami HTML oraz pole Show border around text dzięki czemu będzie wyświetlać się ramka dookoła tekstu.

Czas teraz na stworzenie przycisków przewijających nasze Newsy

3. Rysujemy przycisk, zaznaczamy go i wciskamy F8 czyli opcja Convert to Symbol i klikamy OK. Tak samo tworzymy drugi przycisk

4. Do przycisków dodajemy akcje:

//do przycisku przewijającego w górę
on (press) {
--_root.text.scroll;
}
onClipEvent (enterFrame) {
if (_root.text.scroll == 1) {
this._visible = false;
} else {
this._visible = true;
}
}

oraz

//do przycisku przewijającego w dół
on (press) {
++_root.text.scroll;
}
onClipEvent (enterFrame) {
if (_root.text.scroll == _root.text.maxscroll) {
this._visible = false;
} else {
this._visible = true;
}
}

5. Teraz do listwy głównej dodajemy akcje:

System.useCodepage = true
loadVariablesNum("text.txt", 0);

I na tym pracę z Flashem zakończymy. Jednak musimy jeszcze utworzyć plik z danymi.

6. Tworzymy plik tekstowy o nazwie "text" z zawartością:

pole= treść newsa

SYSTEM NEWSÓW I PRZEWIJANIA V.2

W tym tutorialu przedstawię jak zrobić system newsów w wersji nieco ulepszonej niż poprzednia.

1.Na początku torzymy pole tekstowe, które będzie pokazywać nasze newsy. Wybiramy narzędzie Text Tool i robimy nim pole. Następnie klikamy na nie i w panelu Properties ustawiamy jego typ na Dynamic Text. Pod typem wpisujemy w pole news_pole. Ta nazwa będzie identyfikowac pole przy przewijaniu tekstu. W pole war wpisujemy tresc_newsa. Tą nazwą ustalamy pole do którego bedziemy wczytywac newsy. Zmieniamy jeszcze właściwość pola na Multiline co spowoduje wyświetlanie w kilku liniach. Na koniec zaznaczamy pole render text as HTML.

2. Teraz tworzymy dwa przyciski, które będą przewijać nasze newsy. Rysujemy przycisk, następnie zaznaczamy i wciskamy F8 (Convert to Symbol). Upewniając się, że typ mamy zaznaczony jako Movie Clip wciskamy OK. Otwieramy panel Propertiesi w polu Instance name wpisujemy gora. Przycisk kopiujemy a jego pole Instance name wypełniamy napisem dol.

3. Teraz to klatki na listwie głównej dodajemy akcje:

System.useCodepage = true;
dane = new LoadVars();
dane.load("plik_z_newsami.txt");
dane.onLoad = function() {
tresc_newsa = "<b>NEWSY:</b><br>";
for (i in this) {
if (!(this[i] instanceof Function)) {
tresc_newsa += this[i]+"<br>";
tresc_newsa += "-----------------------------------------<br>";
}
}
};
gora.onPress = function() {
nacisniety_gora = true;
};
dol.onPress = function() {
nacisniety_dol = true;
};
onMouseUp = function () {
nacisniety_gora = false;
nacisniety_dol = false;
};
gora.onEnterFrame = function() {
if (nacisniety_gora == true) {
news_pole.scroll--;
}
};
dol.onEnterFrame = function() {
if (nacisniety_dol == true) {
news_pole.scroll++;
}
};

4. Na końcu tworzymy plik tekstowy o nazwie plik_z_newsami o rozszerzeniu .txt

Dodawanie newsów polega na dodaniu lini z nowym newsem do pliku txt:
news+numer=<b>Data dodania<b><br>tresc newsa &
W moim przypadku wygląda to tak:
news1=<b>16.01.2005</b><br>tresc pierwszego newsa&
news2=<b>16.01.2005</b><br>tresc drugiego newsa&
news3=<b>16.01.2005</b><br>tresc trzeciego newsa&

KURSOR

W poniższym tutorialu przedstawię Wam jak stworzyć własny kursor, którym można zastąpić w dokumentach Flash'a standardowy odpowiednik.

1. Narzędziem Text tool rysujemy kursor.

2. Konwertujemy na klip filmowy (Movie Clip). Musimy uważać by "czubek" naszego kursora był dokładnie w lewym górnym rogu klipu filmowego (na "krzyżyku").

Gdy juz kursor będzie gotowy klikamy na niego i wywołujemy panel Actions (F9) i dodajemy akcję:

onClipEvent (load) {
Mouse.hide();
}
onClipEvent (enterFrame) {
this._x = _root._xmouse;
this._y = _root._ymouse;
updateAfterEvent();
}

Nasz kursor już gotowy.

PASEK W MENU

W tym tutorialu przedstawiam dość ciekawy efekt przesuwającego się paska, który można wykorzystać w menu.

1. Narzędziem Rectangle Tool tworzymy prostokątny pasek, który będzie się przesuwać po wciśnięciu przycisku.

2. Konwerujemy go do klipu filmowego (Movie Clip)

3. Następnie gotowy klip zaznaczamy i w panelu Properties z listy Color wybieramy Alphai ustawiamy na około 50%.

4. Gdy pasek menu mamy gotowy otwieramy zakładkę Actions i wklejamy do niego kod:

onClipEvent (enterFrame) {
this._x += (_root.x-this._x)/4;
}

Teraz zajmiemy się zrobieniem przycisków:

5. Rysujemy nasz przycisk narzędziem Rectangle Tool, a następnie konwerujemy go do klipu filmowego.

6. Gotowy przycisk powielamy (Copy oraz Paste), a następnie skopiowane przyciski umieszczamy obok siebie.

7. Do każdego przycisku dodajemy akcje:

on (release) {
_root.x = this._x;
}

Menu mamy juz gotowe.

ZEGAR

W tym tutorialu przedstawię jak zrobić prosty cyfrowy zegar na stronę www.

1. Otwieramy nowy dokument Flash'a, a natępnie tworzymy nowyMovie Clip(Ctrl + F8).

2. W nim tworzymy dynamiczne pole tekstowe, a w polu Var wpisujemy "godzina".

3. Następnie do pierwszej klatki naszego klipu wkejamy kod:

this.onEnterFrame = function() {
czas = new Date();
sec = czas.getSeconds();
min = czas.getMinutes();
godz = czas.getHours();
if (sec<10) {
sec = "0"+sec;
}
if (min<10) {
min = "0"+min;
}
if (godz<10) {
godz = "0"+godz;
}
godzina = "Godzina: "+godz+" : "+min+" : "+sec;
};

Teraz musimy z biblioteki (Library) przeciągąć nasz zegar na scenę.

ULUBIONE, STRONA STARTOWA, E-MAIL

W poniższym tutorialu pokażę jak można urozmaicić stronę internetową.

Dodawanie do ulubionych

Do przycisku dodajemy akcję:

on (release) {
getURL("javascript:window.external.AddFavorite('http://www.webdiary.vel.pl',' serwis webmastera')");
}

Wysyłenie e-maila ze strony

Do przycisku dodajemy akcję:

on (release) {
getURL("mailto:[e-mail]");
}

Ustawianie strony startowej

Do przycisku dodajemy akcję:

on (release) {
getURL ("javascript:Startowa()");
}

Dodatkowo musimy otworzyć opublikowany plik *.html i dodać między znacznikami head akcje:

SCRIPT
function Startowa(){
dom.setHomePage("http://www.webdiary.vel.pl");
}
/SCRIPT

Oczywiście wyraz SCRIPT zamykamy między trójkątnymi nawiasami. Trzeba jeszcze pamiętać by przy następnym publikowaniu nie nadpisać zmienionej wersji pliku html.

1

---