Strona WWW od podstaw.doc

Strona WWW od podstaw

Po przeczytaniu powyższych kursów możecie zajrzeć do tego działu by zdobyć umiejętności praktyczne w posługiwaniu się Flash'em. Przedstawie tutaj szereg tutoriali, które pomogą wam zrobic własną stronę internetową.

Wstęp

W poniższym dziale chciałbym zaprezentować wam tworzenie interaktywnych stron we Flash'u. Strony takie są łatwe do zrobienia. Przy odrobinie pracy możecie bez problemu wykonac własną strone domową. Oczywiscie nie będą one od razu wyglądały jak te: www.blitzds.com, www.2advanced.com, które zostały zrobione przez grupy doświadczonych webdesingerów. Jednak z czasem Wasze strony będą coraz lepsze. Jednak zanim umieścicie swoją wizytówke w sieci zapraszam do tego działu przeznaczonego specjalnie dla młodych twórców stron w technologi Flash. No to do roboty :)

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 z przewijaniem

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

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();
}