Strona 1 z 1

Tutorial Flah - krop po kroku... Flash 8

PostNapisane: Śr sty 20, 10 04:21
przez kseiko
Cześć,

:arrow: W tym temacie będę próbował przedstawić sposoby korzystania i tworzenia ciekawych animacji i efektów dla Flasha 8 (AS 2.0)


:idea: W razie czego postaram się pomóc...

Re: Tutorial Flah - krop po kroku... Flash 8

PostNapisane: Wt sty 26, 10 14:42
przez kseiko
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...

-------------------------------------------------------------------------------------------------------------------------------------------------

:arrow: Typy plikow FLASH

Rozszerzenie 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...

-------------------------------------------------------------------------------------------------------------------------------------------------

:arrow: 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)
Obrazek

Jak widac na rysunku - program sklada sie z wielu elementow takich jak:

Obrazek
Obszaru roboczego - na ktorym tworzy sie projekt oraz na ktorym mozna przegladnac gotowa animacje.

Obrazek
Obszaru narzedzi - dostepne sa tu wszystkie narzedzia sluzace do edycji projektu.

Obrazek
Obszaru filtrow i menadzerow - inna grupa rozbudowanych narzedzi do operowania caloscia badz tylko elementami projektu.

Obrazek
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"
Obrazek

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

-------------------------------------------------------------------------------------------------------------------------------------------------

:arrow: 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 html


Teraz 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...

:arrow: Typy preloaderow

W 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 zrodle
Inne przyklad

Prezentacja 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 ... :wink:


(PROSZE NIE PISAC W TYM TEMACIE - GDYZ TEMAT BEDZIE ROZBUDOWYWANY - DZIEKUJE)

Re: Tutorial Flah - krop po kroku... Flash 8

PostNapisane: N cze 06, 10 11:52
przez kseiko
:arrow: Pozycjonowanie i analiza SEO...

Normalnie ludzie biora za to mnustwo kasy example - za pozycjonowanie miesieczne 1 strony flash cena ksztaltuje sie od 3 tys zł nawet do 40 tys zł dla portalu firmowego...
Pozycjonowanie flasha moim skromnym zdaniem jest duzo latwiejsze niz innych stron, gdyz boty bardziej poluja na pliki swf w internecie bo zapelniaja swoje swierze biblioteki / indeksy...

----------------------------------------------------------------------------------------------------------------------------------------------

:arrow: Przygotowania do pozycjonowania

Pozycjonowanie czyli przypisywanie jak najwiekszej liczby skojarzen (slow kluczowych) dla naszej strony - Zapraszam teraz do zapoznania sie problematyka i teoria pozycjonowania przeznaczona dla firm...

"Cz.11 FIRMA W INTERNECIE Pozycjonowanie strony internetowej"
http://www.youtube.com/watch?v=jzMQtGkmvZ8

w/w czesc szkolenia prezentuje metody podstawowe SEO, jak pokazano wiekszosc narzedzi do przeprowadzenia analizy jest udostepniona przez same google, ktore dodatkowo sa platne badz darmowe - w zalerznosci od rodzaju przenaczenia strony - czy komercyjna czy tez nie...
Ale w praktyce kod i zawartosc samej strony sa najlepszym narzedziem do pozycjonowania.
Jesli mowimy o stronach flash to by ulatwic sobie szybkie i skuteczne pozycjonowanie - zachecam do tworzenia podkladu strony w html wraz z normalnymi meta tagami, ramkami oraz metode wstepnie opisana na prezentacji - czyli czarne pozycjonowanie. Obiekty flash lepiej jest zamiescic za pomoca JavaScript lub przy pomocy polecenia <object> (ktory zostal opisany wyzej). Jesli ktos zdecyduje sie na stosowanie tylko i wylacznie plikow swf bez zadnego podkladu - sposob pozycjonowania jest opisany ponizej w "Przygotowanie strony flash do pozycjonowania."

Zalecane jest stosowanie osobnych folderow na serwerze dla plikow swf, glownych html, gdyz jesli nie zastosujemy folderow to podczas pozycjonowania - boty znajda i indeksuja nie tylko strony html ale rowniez osobno stworza linki do poszczegolnych obiektow swf - np. do loga w naglowku, menu itp - a tego nikt nie chce. Dodatkowym zabezpieczeniem by boty nie grasowaly po calych naszych zasobach jest zastosowanie prostego sposobu pliku robots.txt
Plik ten dziala jak drogowskaz dla wiekszosci botow i spiderow - mowiac gdzie moga one dotrzec i co zobaczyc a co maja omijac - szczegoly opisu i pomoc podczas generowania zawartosci pliku robots.txt znajduje sie na stronie http://www.mcanerin.com/en/search-engine/robots-txt.asp

Jak juz stworzymy swoj plik robots.txt i wprowadzimy do niego male zmiany to nalezy za kazdym razem sprawdzac jego poprawnosc skladni
http://tool.motoricerca.info/robots-checker.phtml
Plik robots.txt umieszczamy zawsze w glownym katalogu "/" na serwerze - czyli nie moze byc w zadnym folderze !

Tym sposobem mozemy wybierac foldery i osobne pliki do ktorych boty nie beda mialy dostepu - wiec nie pokaza sie w wyszukiwarce (nie jest to 100% pewne). Jak juz mamy to za soba to mozemy recznie zglosic swoja witryne do indeksowania zawartosci w google przy pomocy tego narzedzia:
http://www.google.com/addurl/?continue=/addurl

W polu "Uwagi:" nalezy wprowadzic slowa kluczowe takie same jakie wpisalismy w meta-tagach, slowach kluczowych na stronie flash.
Jesli chcemy by nasza strona posiadala dodatkowe podstrony z osobnymi adresami to nalezy wprowadzic za kazdym razem adres do pierwszego pliku html badz flash.
Przyklad:

http://www.przyklad.ugu.pl/index.html
http://www.przyklad.ugu.pl/strona2.html
http://www.przyklad.ugu.pl/strona3.html
http://www.przyklad.ugu.pl/strona4.html

WAZNE JEST ZACHOWANIE TYCH SAMYCH TYTULOW W POLU "<HEAD><TITLE>PRZYKLAD</TITLE></HEAD>" NA WSZYSTKICH STRONACH.

Jesli chodzi o tytuly strony Flash to z tym jest rownie - w takich sytuacjach warto polegac na ActionScript i JavaScript.

----------------------------------------------------------------------------------------------------------------------------------------------

:arrow: Przygotowanie strony flash do pozycjonowania...

Jesli posiadamy strone flash z preloaderem to w obszarze preloadera tworzymy na pierwszej warstwie od gory klatke o nazwie TAGI badz META - w projekcie boty moga widziec rowniez nazwy poszczegolnych warstw co ulatwie im znajdowianie keywords itp...

Na tej warstwie tworzymy dynamiczne pole tekstowe - najlepiej rowniez na samej gorze strony preloadera - nie bedzie ono widzialne dla gosci ogladajacych nasza strone ale bedzie dla botow...

w pole tekstowe wpisujemy wczesniej ustalone klucze slow, wszystko co kojarzy sie z nasza strona itp
-wpisujemy w nastepujacy sposob:
example:
Kod: Zaznacz cały
mis, miś, misiu, misiek, misiem, z misiem, na misiu, pod misiem, misiem, misiaczek, z misiaczkiem


Jak widac sposob formatu slow jest taki sam jak na stronach www - oddzielony przecinkami i spacja...
Flash posiada dodatkowo mozliwosc interpretacji znakow specjalnych - co dla normalnych stron www nie jest mozliwe - pozycjonowanie znakow dodatkowych
mozemy stosowac :
@, $, !!, #, ^^, ** itp

Jak juz wpiszemy wszystkie tagi w pole tekstowe - musimy to pole ustawic na stronie - teoretycznie powinno znajdowac sie na samej gorze strony nad wszelkim tekstem i nie powinno wychodzic poza obszar stron - dla tego warto uzywac marginesow - teraz jak juz tekst jest juz na swoim miejscu - zaznaczamy go i zmieniamy go na taki sam kolor, jaki posiada tlo za tekstem - jesli tlo jest mieszane to mozna posluzyc sie funkcja przezroczystosci obiektu - ale odradzam bo malo ktore boty widza ten tekst - takie specjalne zabezpieczenie...


.....................................Ciag dalszy nastapi...