Prezentacja PowerPoint na temat obsługi programu Flash Bartek Wydro Kl. II. ,,B’’

Spis treści: 1. Krótko o programie 2. Pierwsza animacja 3. Listwa czasowa 4. Okno obrazu 5. Pole pracy 6. Wszystko o scenach 7. Tworzenie preloadera 8. Pole klatek animacji 9. Warstwy (Layers)

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. Ważne: 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).

Listwa czasowa Listwa czasowa: Listwa czasowa jest nieodłączną formą animacji. Na niej zaznaczasz z jaką prędkością ma być odtwarzana animacja, ile warstw będzie zawierała itd. Pamiętaj, że warstwa 1 (Layer 1) będzie przykrywała obraz zawarty na warstwie 2 (layer 2). Listwę czasową możesz przemieszczać po ekranie. Może znajdować się z boku jak i na górze ekranu. Nazywa się to dokowaniem.

Okno Obrazu Okno obrazu: Okno obrazu to obszar zawierający wszystkie elementy graficzne wchodzące w skład filmu Flasha. Możemy go określicz jako ekran na którym wyświetlany jest film. W lokalnym kinie ekran posiada rozmiary, które zwykle dopasowane są do rozmiarów sali kinowej. We Flashu rozmiary ekranu, jego kolory oraz inne parametry możesz ustalać oddzielnie dla każdego tworzonego filmu. Rozmier, oraz wygląd okna jest kontrolowany za pomocą okna dialogowego "Movie Properties". Na początku pracy powinniśmy ustalić jakich wymiarów ma być nasza prezetacja. W Movie Properties znajduje się takie miejsce o nazwie "Dimensions". Tam podajemy wymiary okna w pixelach (px). Możemy także w innych jednostkach, ale wydaje mi się, że taka jest najlepsza.     

Warstwy (Layery) Warstwy to z pewnością najważniejszy element programu, to w nich znajdują się klatki (omówione dalej), w których umieszczamy nasze obiekty. Panel warstw jest domyślnie widoczny w górnej części ekranu, możemy go ukryć odznaczając w menu Viev opcję Timeline (Ctrl+Alt+T). Dobrym nawykiem jest nadawanie warstwom nazw pochodzących od zawartych w nich obiektów bądź animacji. To w znacznym stopniu ułatwi nam nawigację, a po jakimś czasie gdy będziemy chcieli edytować nasz film unikniemy żmudnego przypominania sobie co znajduje się w jakiej warstwie. Należy także wspomnieć, że warstwy można dowolnie pozycjonować względem siebie. Polega to na kliknięciu na danej warstwie i przeciągnięciu jej w górę lub w dół.

Oznacza to, że jeżeli na przykład chcemy umieścić tło "pod" tekstem, tak aby był on widoczny, warstwa z tłem musi się znaleźć poniżej warstwy z tekstem. W innym wypadku nasz tekst zostanie przykryty przez tło i nie będzie widoczny Symbole znajdujące się nad nazwami warstw: - Aktywna funkcja Show/Hide All Layers, powoduje, że warstwa ta jest niewidoczna podczas edycji. Aktywna opcja jest oznaczona krzyżykiem. - Lock/Unlock All Layers. Jej aktywowanie powoduje zamknięcie wybranej warstwy. Jeśli ta opcja jest włączona, nie możemy wybrać żadnego elementu z tej warstwy - Show All Layers as Outlines, Jej włączanie jak i wyłączanie przebiega identycznie jak w omówionych powyżej przypadkach.

Pole klatek animacji Pole klatek animacji składa się z białych i szarych prostokątów- to są właśnie klatki.   - - 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.

- 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).  - Jeżeli klatki są podświetlone na niebiesko, a między nimi jest widoczna strzałka, oznacza to, że trwa akcja ruchu (motion). -  Klatki podświetlone na zielono z umieszczoną pomiędzy nimi strzałką informują nas o zachodzącej akcji zmiany kształtu (shape). -Create Motion Tween - 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 w 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 - synchronizuje obiekty w klatkach; -Actions - dodaje akcje do wybranej klatki; -Panels - otwiera zakładki z panelu instance

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. Tworzenie obiektów jest banalnie proste i sprowadza się do opanowania Toolbaru, widocznego z prawej strony, Wybierając opcję MOVIE z menu MODIFY naszym oczom ukaże się następujące okno: 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). Units. Grid Spacing i Show Grid -w Grid Spacing ustalamy wielkość siatki. Ruler Units -tu wybieramy jednostki, w jakich chcemy pracować (pixele, inche).

Wszystko o scenach: - Nawigator to okienko, które wywołujemy wybierając Modify/Scene. Tutaj w łatwy sposób możemy zarządzać scenami. Możemy usunąć wybraną scenę klikając na ikonkę  (Delete Scene), lub dodać nową za pomocą  (Add Scene). Możemy także zamienić kolejność scen klikając na dana scenę i przesuwając ją w górę lub w dół. - Możemy także zamienić kolejność scen klikając na dana scenę i przesuwając ją w górę lub w dół. - Aby zmienić nazwę sceny wystarczy dwukrotnie kliknąć lewym przyciskiem myszy na wybranej nazwie, wpisać nową i zatwierdzić operację klawiszem Enter.

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ę :

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.

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% 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. Znów wciskamy Enter, aby zobaczyć naszą animację.

KONIEC !!! 