Prezentacja PowerPoint na temat obsługi programu Flash Wszelkie prawa zastrzeżone  Bartłomiej Wydro Kl. II „b”

Macromedia Flash

Niezbędne informacje: O programie: Flash jest programem powszechnie znanym. Jeśli wydaje Ci się, że jeszcze się z nim nie spotkałeś-grubo się mylisz. Jego elementy znajdziesz na wielu stronach WWW. Są to na przykład intra, bannery, animowane menu, lub nawet całe witryny. Niezbędne informacje: Przed uruchomieniem programu należy wiedzieć co nieco o formatach plików, na których to będziemy pracować. Podczas edycji naszego filmu posługujemy się plikiem z rozszerzeniem *.fla. Jest to najważniejszy plik, bez którego praktycznie niemożliwa jest edycja naszej animacji (coś na zasadzie plików *.psd w Photoshopie).

Tworzenie przycisku 3D 1.Pierwszym krokiem jest stworzenie nowego przycisku (ctrl+F8) 2.Tworzymy trzy warstwy i nazywamy je - "dolna", "środkowa", "górna" 3. Pierwszą warstwą, na której będziemy pracować jest warstwa "dolna". Tworzymy koło koloru czarnego, które pozwoli nam otrzymać efekt cienia. Dobrze będzie skopiować utworzone koło (ctrl+c) przed przejściem do warstwy następnej. 4. Jesteśmy w warstwie "środkowej". Wklejamy koło skopiowane wcześniej (ctrl+v) i wypełniamy tym razem gradientem (w moim przypadku użyłem czerwono-czarnego gradientu). Ustawiamy okrąg pokolorowany gradientem nad okrąg czarny, aby otrzymać efekt cienia.

Strzałka pokazuje kierunek w którym należy przesunąć czerwone koło. 5.W warstwie "górnej" tworzymy trzecie koło koloru jednolitego (w tym przypadku jest to kolor czerwony, ten od którego wychodziliśmy tworząc gradient), troszeczkę mniejsze od poprzednich. Przesuwamy je na centrum poprzednich kółek tak by uzyskać efekt trójwymiaru. Przechodzimy do akcji "down" w warstwie środkowej i dodajemy klatkę kluczową (F6). Ustawiamy gradient odwrotny do poprzedniego, odwracając efekt światła i powtarzamy operację z nasuwaniem kółka w jednolitym kolorze. Na pozostałych warstwach wykonujemy operacje analogiczne do poprzednich. Kończąc naszą pracę pozostaje nam jedynie dodać brakujące klatki, kopiując do akcji "over" i "hint" klatki z akcji "up" przycisku. 6.Z paska "menu" wybieramy "window">"library". Z naszej biblioteki wybieramy przycisk i przeciągamy go na scenę. Teraz tylko z paska "menu">"control">"test movie".

Tworzenie prostego preloadera: Preloader pozwala nam przedstawić wizualnie, że film się ładuje, tak aby nie denerwować potencjalnego użytkownika. Niezbędna jest w tym przypadku akcja 'If frame is loaded'. W momencie kiedy cały plik swf zostanie załadowany potrzebujemy akcji 'Go to'. Możemy to osiągnąć w następujący sposób: 2.W drugiej klatce wstawiamy akcję GotoAndPlay. W ten sposób stworzyliśmy naszą pętlę, kontrolującą załadowanie filmu. 3. Wracamy do pierwszej klatki.. Aby przetestować nasz preloader wystarczy Control Menu > Test movie a następnie Control Menu >Show streaming 1.Dodajemy dwie klatki na linii czasu. Otwieramy okno właściwości (Properties) i ustawiamy następującą akcję :

Pole klatek animacji: - Klatki podświetlone na zielono z umieszczoną pomiędzy nimi strzałką informują nas o zachodzącej akcji zmiany kształtu (shape). - Klatka ze znakiem a informuje nas o tym, że został do niej dodany jakiś skrypt w języku ActionScript (dowiecie się o nim co nieco w dalszej części kursu).  Pole klatek animacji składa się z białych i szarych prostokątów- to są właśnie klatki. O tym, w jakiej klatce aktualnie się znajdujemy informuje nas podświetlona część miarki znajdującej się powyżej klatek, oraz napis na dolnej listwie . W zależności od tego, co znajduje się w danej klatce może ona przybierać rozmaite formy: - Jeżeli klatki są podświetlone na niebiesko, a między nimi jest widoczna strzałka, oznacza to, że trwa akcja ruchu (motion). - Klatka z czarną kropką to klatka kluczowa, znajduje się w niej obiekt, który animujemy. Klatki kluczowe możemy wstawić klikając prawym przyciskiem myszy w odpowiednim miejscu na listwie czasowej i wybierając opcję Isert Keyframe (F6). - Pusta, szara klatka oznacza, że nic w niej nie ma ani nie zachodzi w niej żadna akcja.

-Create Motion Tween - wybranie tej opcji powoduje utworzenie akcji ruchu pomiędzy sąsiednimi klatkami kluczowymi; -Insert Frame - wstawia w wybranym miejscu pustą klatkę; -Remove Frames - kasuje zaznaczoną klatkę/klatki -Insert Keyframe - wstawia klatkę kluczową; -Insert Blank Keyframe - wstawia pustą klatkę kluczową; -Clear Keyframe - usuwa zawartość z klatki kluczowej; -Select All - zaznacza wszystkie klatki we wszystkich warstwach; -Cut Frames - wycina zaznaczoną klatkę; -Copy frames - kopiuje zaznaczoną klatkę; -Paste Frames - wkleja w wybrane miejsce wyciętą lub skopiowaną klatkę -Reverse Frames - odwraca kolejność zaznaczonych klatek; -Synchronize Symbols - uzgadnia w czasie (synchronizuje) obiekty w zaznaczonych klatkach; -Actions - dodaje akcje do wybranej klatki; -Panels - do wyboru Frame i Sound, otwiera zakładki z panelu instance pozwalające np. nadać nazwę klatce (label) lub dodać do niej dźwięk. Kiedy klikniemy prawym przyciskiem myszy na wybranej klatce pojawia nam się:

Wszystko o scenach: DO CZEGO SŁUŻA SCENY ? Sceny są używane do podzielenia filmu na sekcje. Można ich używać według własnego uznania. Zaczynają pracę z Flashem od razu mamy do dyspozycji gotową scenę o nazwie scena 1. Najlepiej pracować ze scenami przenosząc je na główny ekran. W tym celu z menu wybieramy window > panels > scene. DODAWANIE I USUWANIE SCEN Wybierając opcję "Add Scene". Flash automatycznie nazwie sceny - Scena2, Scena3 itd.Tej samej metody można użyć do usuwania scen. Wybieramy scenę, która chcemy usunąć i wybieramy opcję Delete Scene

ZMIANA KOLEJNOŚCI W JAKIEJ GRAJĄ SCENY Jeśli znacie wiadomości o warstwach przesuwanie scen nie powinno sprawić wam problemu. Wszystko co musicie zrobić to wybrać scenę, którą chcecie przenieść - kliknąć na niej i przesunąć w górę lub w dół w zależności gdzie ma się ona znajdować Jak można zauważyć na obrazku poniżej dla ułatwienia pojawi się linia gdy będziecie przenosić scenę. ZMIANA NAZW SCEN Aby zmienić nazwę sceny wystarczy podwójnie kliknąc na danej nazwy sceny. Pojawi sie okienko do wpisania nowej nazwy - tak jak na obrazku poniżej. PORUSZANIE SIĘ POMIEDZY SCNAMI A FILMEM Jeśli spojrzycie w prawy górny róg ekranu Flasha zauważycie dwa małe guziczki. Jeden z nich nazywa się "Edit Scene". Można go używać za każdym razem gdy chcecie wybrać scenę na której chcecie pracować i ją edytować.

POWRACANIE DO GŁÓWNEJ LINI CZASY Powracanie do głównej linii czasu ogranicza się do kliknięcia przycisku widocznego na orazku poniżej (Scene1) lub dowolnie nazwanej sceny. Niezależnie od tego ile scen ma wasz film zostaniecie przeniesieni do jednej z nich.

Wszystko o Warstwach (Layerach) Linia czasu: Na lini czasu umieszczamy kolejne cząści animacji. Wkrótce będziecie dodawać obiekty na waszej lini czasu, by stworzyć dany film czy animację. Napewno wam się to spodoba. Ogólne wiadomości o warstwach: Warstwy są najważniejszą częścia Flasha. Czerwona linia na obrazku pokazuje warstwę pierwszą. Można dodawać bardzo wiele warstw do animacji w zależności od potrzeb. Aby zmienić nazwę warstwy wystarczy podwójnie kliknąć na niej i wpisać nową nazwę. By ułatwić sobie prace najlepiej dostosowywć nazwy warstw do tego co sie w nich znajduje, po to by uniknąć pogubienia.

Właściwości warstw: Na obrazku widzimy 4 warstwy. Teraz omówimy właściwości każdej z nich: Warstwa 1 - w naszym przypadku jest to warstwa, na której pracujemy w chwili obecnej. Informuje nas o tym specjalny ołówek widoczny przy nazwie warstwy. Warstwa 2 - warstwa ukryta, nie widoczna w animacji, oznaczona krzyżykiem. Odblokowanie tej opcji następuje przez podwójne kliknięcie. Warstwa 3 - warstwa zamknięta, oznaczona mała kłódeczka. Przy włączonej tej opcji nie można wybrać żadnego obiektu z tej warstwy. Odblokowanie przez podwójne kliknięcię. Warstwa 4 - warstwa na której nie wybrano żadnej z opcji. Dodawanie i usuwanie warstw: Warstwę dodajemy przez wybranie przycisku "Add Layer" widocznego na obrazku. Kasujemy warstwę przez wybranie przycisku "Delate Layer"

Pole Pracy: Pole Pracy to duże pole, którego właściwości określamy wybierając opcję MOVIE z menu MODIFY. To właśnie tutaj edytujemy i rysujemy nasze obiekty. Background Color - definiujemy kolor tła, domyślnie biały. Frame Rate -ilość klatek wyświetlanych na sekundę. Domyślna wartość to 12. Dimension -tu określamy rozmiar Pola Pracy dla naszego filmu. W polu Widt definiujemy szerokość, a w Height wysokość. Wartości te określamy domyślnie w pixelach (px). Ruler Units -tu wybieramy jednostki, w jakich chcemy pracować (pixele, inche). Właściwości Pola Pracy: Wybierając opcję MOVIE z menu MODIFY naszym oczom ukaże się następujące okno:

Pierwsza animacja: Pierwszą rzeczą, o którą musimy zadbać podczas tworzenia każdej animacji, są cechy naszego Pola Pracy a tym samym całego filmu. Aby je edytować posłużymy się panelem Movie Properties (Modify/Movie lub Ctrl+M).  Szerokość naszego Pola Pracy ustawiamy na 400px (Width), a wysokość na 100px (Height). Kolor tła zróbmy czarny,  a liczbę odtwarzanych na sekundę klatek na 24 (fps). Resztę opcji pozostawiamy bez zmian. Nasza klatka oraz warstwa "Layer 1" podświetliła się na czarno- to znak że możemy rozpocząć w niej pracę. Z panelu z narzędziami znajdującego się po lewej stronie wybieramy Rectangle Tool- symbol kwadratu (lub wciskamy W).

Wypełnienie dla naszego kwadratu ustawiamy na szare, linię zrobimy białą . W panelu Stroke (Window/Panels/Stroke) możemy także wybrać styl i grubość naszej linii. Możemy już narysować kwadrat z lewej strony Pola Pracy. Rysujemy kwadrat Teraz wybieramy narzędzie Arrow Tool (lub wciskamy V), a następnie zaznaczamy nasz obiekt klikając lewym przyciskiem myszy na wolnej przestrzeni i przeciągając kursor tak, by objął cały nasz rysunek (tak, jak to się robi przy zaznaczaniu kilku plików w Windowsie). Kiedy już kwadrat zostanie zaznaczony otwieramy panel Info (Ctrl+Alt+i) i wpisujemy wartości dla W i H- po 30px. Obiekt zmienił swoje rozmiary, teraz umieśćcie go w lewym dolnym rogu Pola Pracy. Pozostało nam utworzenie akcji ruchu i dodanie kilku efektów. Akcję ruchu tworzymy klikając prawym przyciskiem myszy na klatce kluczowej i z dostępnych opcji wybierając Create Motion Tween. Klatka podświetliła się na niebiesko. Następnym krokiem jest umieszczenie klatki kluczowej w 50 klatce naszej animacji. Aby to uczynić wybieramy 50 klatkę na listwie czasowej i wciskamy klawisz F6. Obszar pomiędzy klatkami podświetlił się na niebiesko i pojawiła się czarna strzałka.

1. Nadal będąc w 50 klatce wybieramy narzędzie Arrow Tool, klikamy na kwadrat i przeciągamy go na wschód:), tak , by znalazł się przy prawej krawędzi Pola Pracy. Teraz powiększamy nasz obiekt klikając na nim prawym przyciskiem myszy, wybierając Scale i "ciągnąc" w górę za wybrany róg kwadratu. Następnie pozycjonujemy powiększony kwadrat tak, by nie wystawał poza pole pracy. Dokonujemy tego klikając na 50 klatkę i w panelu Effect (Window/Panels/Effect) wybieramy opcję Alpha, której wartość ustalamy na 0% 2. Wróćmy do 1 klatki i w okienku instance (Ctrl+i), zakładce Frame ustawmy Tweening na Motion, Rotate na CV, a liczbę obrotów ( .. times) ustawmy na 1. 3. Znów wciskamy Enter, aby zobaczyć naszą animację.