Strony Flash
maja na zadaniu przyblizyc odwiedzajacemu swiat wirtualny, zmniejszyc ograniczenia, zrobic wrazenie, przedstawic mozliwosci i zareklamowac.
Decydujac sie na stworzenie strony we flashu musimy na poczatku wszystko dobrze zaplanowac, autor powinien wiedziec juz na samym poczatku jaki efekt koncowy mniej wiecej chce osiagnac i jak bardzo zawansowana technika animacji ma zostac uzyta...
Dla tego pierwsze co robimy to planujemy:
- Typ strony:
- Strona w pelni dynamiczna (Cala strona skladajaca sie z animacji tla, menu oraz przejsc po miedzy stronami)
- Strona w pol dynamiczna (Na stronie tylko tlo lub takst jest animowany, reszta to grafika stala)
- Strona czesciowa (Szablon strony wykonany jest w html jako podstawa, a wprowadzone zostaja tylko fragmenty flasha z osobnych plikow)
Gdy wybieramy pelna strone we flashu, musimy podjac decyzje:
- Czy strona bedzie pokazowa
- Czy strona ma byc funkcjonalna i optymalna
Pozwole sobie dac linki do przykladowych stron we Flashu:
seb-gal.net(Amatorska strona|strona dynamiczna|pokazowa)
seb-gal.org(Amatorska strona|strona dynamiczna|pokazowa)
Agencja Interaktywna(Profesjonalna strona|strona dynamiczna|pokazowa)
2ADVANCED(Profesjonalna strona|strona pol dynamiczna|funkcja i optymalizacja)
KKP-GEZLER(Profesjonalna strona|strona dynamiczna|pokazowa)
Jest to wazne, gdyz decydujac sie na strone pokazowa musimy znac wlasciwosci serwera na ktorym bedzie ona dzialac tzn. dozwolony maksymalny rozmiar pojedynczego pliku, obsluga php, mozliwosc umieszczania rozszezen: swf, rar, zip, xml. Tego typu strony najczesciej maja robic jak najlepsze wrazenie przy czym ich funkcjonalnosc nie jest az tak zawansowana. Potrzebuja one sporo miejsca i szybkoch laczy odwiedzajacych.
Tak samo jesli chcemy stworzyc funcjonalna i optymalna strone, ktora ma chodzic szybko przy czym ladnie wygladac i dzialac jak nalezy, ale taka strona nie bedzie wymagac sporo miejsca ani szybkich laczy odwiedzajacych - bo specjalnie bedzie tworzona pod wolne lacza (o ile takie jeszcze sa) - zakladac mozna ze pod 256 Kb lub predkosci modemowe max 128 Kb.
Przy czym by uzyskac to wszystko bedzie potrzebne sporo czasu, wytrwalosci oraz logiczne myslenie - niekiedy sporo nieprzespanych nocy...
Nastepnym krokiem jest wejscie w posiadanie programow, dzieki ktorym bedziemy mogli stworzyc swoja strone. Programy ktore tu wymienie sa najczesciej stosowane podczas tworzenia zawansowanych stron graficznie (Nie wystraszcie sie):
- Macromedia Flash (minimum ver. 8 obslugujacym ActionScrypt 2.0)
- Adobe Photoshop (do uzyskania efektow i polepszenia jakosci tworzonej grafiki)
- Corel Graphics | minimum ver 12 (do grafiki wektorowej)
- Autodesk 3d Max Studio (do tworzenia animacji) tu polecam ver 2010 - jest prosta do uzytku
- Nero Wave Edytor (ja najczesciej uzywam tego ale moze byc kazdy rozbudowany program do edycji dzwieku
- grund to mozliwosc zapisu w stereo i lepiej) - Native Instruments Traktor DJ Studio 3 (program do mixowania dzwiekow w czasie rzeczywistym)
- Sony Vegas Studio (polecam ver. 10 i 12 sa doskonale do edycji i tworzenia filmow)
- Virtualdub (super programik do koncowej obrobki i kompresji - jest FREE)
- oraz polecam zestaw kodekow do dzialania ACE MEGA CODES PACK (Skonfigurowany na profil professional)
Programy i tak dobiera sie pod projekt strony wiec nic na sile...
Jak widac po samych przygotowaniach - jest to cos wiecej niz tylko "dobra zabawa".
Do tego powinnismy posiadac dobrej jakosci aparat cyfrowy - min 8 Mpx z mozliwoscia zapisu zdjec bez dodatkowej kompresji aparatu w formie jpg...
-------------------------------------------------------------------------------------------------------------------------------------------------
Typy plikow FLASHRozszerzenie plikow roboczych:
fla - plik dokumentu flash (
tych plików nie instaluje sie na serwerze)
flp - plik projektu flash (
tych plików nie instaluje sie na serwerze)
as - plik skryptu "actionscript" (stosowany jako zewnetrzny plik) (
instaluje sie na serwer)
jsfl - plik skryptu "javascript" (stosowany jako zewnetrzny plik) (
instaluje sie na serwer)
Rozszerzenia plikow wykonawczych:
swf - "moveclip" - plik dokumentu fla
pozostale pliki multimedialne typu video, audio, photo, anim-photo...
-------------------------------------------------------------------------------------------------------------------------------------------------
START...By moc jaknajlepiej zaczac projektowac i tworzyc nowe stronki i nie tylko - nalezy zajac sie ustawieniami narzedzi oraz wygladu programu Flash - pod swoje wymagania... Dodac dodatkowe pola z narzedziami oraz elementy strony takie jak linijka itp...
(Oczywiscie wymagane sa tu podstawy znajomosci programu)
Jak widac na rysunku - program sklada sie z wielu elementow takich jak:
Obszaru roboczego - na ktorym tworzy sie projekt oraz na ktorym mozna przegladnac gotowa animacje.
Obszaru narzedzi - dostepne sa tu wszystkie narzedzia sluzace do edycji projektu.
Obszaru filtrow i menadzerow - inna grupa rozbudowanych narzedzi do operowania caloscia badz tylko elementami projektu.
Paska czasowego - na ktorym mozna ustawiac poszczegolne ujecia, osobne klatki (1 klatka = 1 kratka) gdzie:
Zamieszczone zostaly "powloki" (grupy klatek), kazda z powlok odnosi sie do wyrownania perspektywicznego w projekcie - gorna powloka to przod - dolna to tyl na projekcie.
Kazda z powlok zawiera roznego typu kratki:
- biala kratka to pusty obraz bez niczego - zadnych elementow graficznych, dzwiekowych,
- czarna kropka w siwej kartce to znak iz w tej klatce sa jakies elementy projektu,
- kratka z biala kropka - to puste ujecie do ktorego mozna dodac elementy projektu badz opis polecen (action script)
- siwa kratka to znak kontynuacji od ostatniej z lewej strony kratki z kroka - czyli wszystkie elementy z ostatniej kropce beda pokazane na tej klatce bez koniecznosci ponownego ich kopiowania,
- kratka z ciagla linia - to znak ze na tej kratce utworzona zostala animacja widoczna w projekcie,
- kratka z przerywana ciagla linia - to znak ze na tej kartce najpier zostala utworzona animacja a pozniej zostalo cos dodane co moze niepasowac do reszty animacji powstalej,
- calkowity brak kratki, biale puste pole to pole w ktorym nie ma niczego i nic nie moze zostac dodane - zadne elementy projektu.
- kratka z czerwona flaga - klatka w ktorej zostala przypisana jakas odpowiedzialna funkcja zwrotna np. odnoscik do tego wlasnie miejsa - czyli zaznaczenie.
- kratka z widmem dzwieku - to wprowadzony dzwiek w dane klatki.
- kratka z bialym prostokatem - to koniec ciagu projektu w linii czasowej, badz pojedynczej klatki z elementem.
- kratka z kropka oraz z mala litera "alfa" - to klatka, w ktorej zostaly przypisane jakies polecenia (action script)
(Uwaga - by zapewnic lepsza orientacje uzytkownika na pasku czasu - tworcy programu wprowadzili "kratownice" - szaro-biala)
Gdy juz ustawimy pod siebie programik to mozemy przystapic do ustawien strony oraz pola animacji - wpierw oczywiscie musimy wiedziec co chcemy zrobic, jaki projekt wykonac (omowione na poczatku).
- Zasada przy rozdzielczosci animacji jest taka, jesli animacja ma byc duza i dobrej jakosci - to nalerzy zastosowac min rozdzielczosc 1024x768 - oczywiscie podlega to duzej ilosci testow - czy dana animacja nie przeciaza procesora, czy niezajmuje zbyt duzej ilosci pamieci oraz miejsca itp.
Jesli jednak chcemy zrobic stronke we flashu to sugeruje tu stosowanie mniejszych rozdzielczosci niz 800x600.
Rozdzielczosc zmieniamy w polu "properties"
gdzie:
dimensions - wymiary [szerokosc] i [wysokosc]
match - gotowe profile rozmiarow strony
background color - tlo kartki (strony)
frame rate - ilosc klatek na sekunde [norma to 12 i 24]
rule unit - jednostka stosowana w linijce [pixele]
Oczywiscie po ustawieniu tych zmiennych - istnieje mozliwosc ustawienia ich jako szablonu wyjsciowego poprzez Make Default
-------------------------------------------------------------------------------------------------------------------------------------------------
Ogolna budowa strony flashowej...Stronka we flashu - w zalerznosci od typu struktury plikow i budowy samej strony przewanie sklada sie z:
- podklad w kodzie html [index.html]
- glownego pliku swf [core.swf]
- kontenerow dzialowych [inne pliki swf]
- plikow multimedialnych i innych
przyklad podkladu strony w kodzie html [implementacja plikow swf w kodzie html]:
Prosty przyklad:
- Kod: Zaznacz cały
<body>
<object type="application/x-shockwave-flash" data="core.swf"
width="100" height="200" align="middle">
<param name="movie" value="core.swf">
</object>
</body>
Gdzie:
type - definiuje typ obiektu do ktorego odwoluje sie polecenie
data - nazwa pliku z danymi [gdzie znajduja sie dane]
width - szerokosc podana w pikselach [jesli ma byc automatyczna to width="*"]
height - wysokosc podana w pikselach [jesli ma byc automatyczna to height="*"]
align - wyrownanie w polu na plaszczyznie pionowej [gora align="top" ; srodek align="middle" ; dol align="bottom"]
name - definiuje nazwe typu obiektu
value - definiuje sciezke dostepu do obiektu
Rozbudowane mozliwosci inicjacji flasha na stronie htmlTeraz zajmiemy sie plikami swf - jak wiadomo, jesli strona jest zbudowana z kilku plikow swf - a kazdy z nich stanowi podstrone to strona startowa, oraz podstrony musza posiadac "preloadera" - czyli okno pokazujace odwiedzajacemu co dzieje sie w momencie wejscia na strone badz przejscia po miedzy stronami - prezentuje on postep ladowania sie strony [postep pobierania pliku swf]. Preloadery nalezy stosowac dla duzych rozmiarowo stron oraz jesli strona posiada podstrony - unikniemy w dzieki temu braku reakcji po kliknieciu w link albo w momencie wejscia na strone - zamiast czarnego lub bialego ekranu bedziemy widzieli animacje preloadera oraz informacje o pobieraniu sie strony...
Typy preloaderowW zasadzie kazdy projektant strony tworzy wlasny pod siebie preloader - nie ma jako tako gotowych dla wszystkich stron preloaderow, gdyz zawsze wystepuja pewne bledy badz niezgodnosci sprzetowe i programowe co sprawia ze niekiedy preloadery wogole nie dzialaja - blokujac strone na dobre...
Jesli tworzymy preloadera to musimy sie zastanowic czy ma on wyswietlac tylko animacje - w postaci paska postepu pobierania, czy tez ma posiadac prezentacje liczbowa - wyliczanie % postepu...
Nalezy pamietac ze niektore preloadery [kody as 2.0] nie dzialaja prawidlowo w stronach, gdzie wystepuja tzw kontenery - czyli aktywne pola gdzie ladowana jest zawartosc innego pliku swf... Prosciej mowiac - w jednym pliku swf laduje sie inny plik swf jako jego element a nie jako calosc.
Wtedy trzeba troszke pokombinowac z kodem od preloadera, czy root - czyli glowny plik swf ma byc caly nadpisany innym plikiem swf czy tez ma posiadac tylko pole aktywne.
Przyklad universalnego preloadera przedstawiono w na tym
zrodleInne przykladPrezentacja preloaderow roznego typu [as 2.0 oraz as 3.0]
Uwaga - jesli po wejsciu na strone - dlugo nie pokazuje sie preloader - to znaczy ze preloader jest zbyt duzy i nalezy go wagowo zmniejszyc, gdyz sporo czasu potrzeba na jego ladowanie a co dopiero na ladowanie nastepnej strony...PROSTY TUTORIAL pod AS 2.0 "Preloader in Flash 8"TUTORIAL TWORZENIA PRELOADERA pod AS 2.0 "Flash Preloader tutorial"TWORZENIE PRO PRELOADERA pod AS 2.0 "Preloader in Flash Loading bar for your movies! - Tutorial"Jesli ktos bedzie potrzebowal przykladu preloadera to zapraszam do kontaktu ze mna ... (PROSZE NIE PISAC W TYM TEMACIE - GDYZ TEMAT BEDZIE ROZBUDOWYWANY - DZIEKUJE)