Pobierz prezentację
Pobieranie prezentacji. Proszę czekać
OpublikowałGrażyna Wysocka Został zmieniony 9 lat temu
1
Grafika animacyjna w Macromedia Flash Joanna Sekulska-Nalewajko Katedra Informatyki Stosowanej Politechnika Łódzka 2006
2
2 Wprowadzenie Technologia Flash zapewnia wydajną, strumieniową metodę przesyłania grafiki w Internecie (streaming). Jest więc odpowiedzią na potrzeby projektantów sieciowych, którzy pragną większej ilości grafiki i lepszej nad nią kontroli. Flash umożliwia przesyłanie w sieci grafiki wektorowej. Pliki z grafiką tego typu są bardzo małe, a obrazy są skalowalne. Technologia ta umożliwia tworzenie filmów, gier i aplikacji multimedialnych.
3
3 Możliwości Flasha Tworzenie grafiki wektorowej Animowanie grafiki Tworzenie interfejsów Tworzenie kodu HTML Programowanie w języku skryptowym
4
4 Historia Flasha Flash rozpoczął swoje istnienie pod nazwą Splash Animator. Był to niewielki program do animowania obrazów. W 1997 roku firma Macromedia przejęła program FutureSplash i zmieniła jego nazwę na Flash. Program służył do tworzenia grafiki sieciowej. W każdej kolejnej wersji dodawane są nowe elementy, dzięki temu rozszerzane są możliwości programu w dziedzinie interaktywnej grafiki.
5
5 Formaty filmowe Flasha Pliki Flasha są nazywane „filmami”, bez względu na to, czy są to filmy znajdujące się jeszcze w środowisku autorskim, czy już w postaci finalnej. Filmy robocze mają rozszerzenie.fla Filmy gotowe do oglądania konwertowane są do formatu czytelnego dla procedury odtwarzającej (Flash Player); mają rozszerzenie.swf
6
6 Publikowanie filmów dla www Publikacja projektu (.fla) następuje poprzez wybranie opcji Publish w menu File. Plik.swf należy następnie umieścić na serwerze HTTP, odpowiednio wiążąc go z kodem HTML. Ze względu na nietypową składnię (w porównaniu z klasycznymi obrazami umieszczanymi na stronach WWW – znacznik ), Flash generuje przy okazji dokument HTML, w którym zawarty jest fragment kodu gotowy do skopiowania do docelowego dokumentu.
7
7 Flash a HTML Kojarzenie hiperłączy z obiektem Flasha na stronie dokonywane jest przy pomocy języka ActionScript, nie ma w tym udziału HTMLa. ActionScript to język skryptowy podobny w budowie do JavaScript.
8
8 Publikowanie filmów Format.swf i.html są tworzone (publikowane) domyślnie. Inne formaty należy zaznaczyć, jeśli chce się opublikować tego typu projekt. Każde rozszerzenie ma szereg ustawień zlokalizowanych na osobnej zakładce.
9
9 Ochrona pliku Jeżeli chcemy uniknąć „dekompilacji” animacji z formatu.swf do pliku projektu.fla, poprzez opcję Publish Settings... z menu File zakładka Flash poprzez zaznaczenie opcji Protect from import i określenie hasła w polu Password możemy zdefiniować hasło chroniące nasze „dzieło”.
10
10 Odtwarzacz Flash Player Dawniejsze wersje przeglądarek nie obsługiwały materiałów tworzonych we Flashu, konieczne więc było stosowanie specjalnej procedury odtwarzającej – Flash Player. Obecnie, procedury Flash Player są standardem znajdują się w ostatnich wersjach systemu Windows i Macintosh.
11
11 Okno powitania Otwieranie istniejącego projektu Otwieranie pustego projektu
12
12 Korzystanie z szablonów otwarcie stron www zawierających informacje, pomoc i instrukcje do programu Szablon pokazu zdjęć Szablon prezentacji
13
13 Spis szablonów
14
14 Okno programu FLASH 5
15
15 Okno programu FLASH 8 Pro
16
16 Listwa Timeline Okno Timeline zawiera oś czasu służącą do zarządzania warstwami i klatkami składającymi się na animację.
17
17 Listwa Timeline (2) Obiekt na warstwie „koło” Ikona „dodaj warstwę” i ikona „dodaj warstwę typu Guide” warstwy sceny klatki licznik klatek „Usuń warstwę”
18
18 Warstwy Warstwy to jeden z najważniejszych elementów naszej animacji. W nich to właśnie umieszczamy elementy które potem będziemy wyświetlać i animować. Ukryta warstwa Wyświetlanie tylko konturów obiektów Warstwa aktywna (podświetlenie) Warstwa zablokowana
19
19 Warstwy (2) Nazwę warstwy można zmienić, klikając dwukrotnie na tekst Kolejność warstw można zmienić, metodą „przeciągnij i upuść” Zawartość warstwy znajdującej się na dole listy jest przesłaniana obiektami lezącymi na wyższych warstwach.
20
20 Typy warstw normalna prowadnica ruchu prowadzona maskująca maskowana Warstwa prowadząca służy tylko do animacji ruchu (motion tweening). Warstwa maskująca służy do maskowania obiektów leżących na warstwie maskowanej. Uwaga! Ponieważ warstwy prowadzące i maskujące przekształcają swoją zawartość, nie należy umieszczać na nich obiektów innych niż ścieżki ruchu lub wykorzystywane jako maski.
21
21 Okno właściwości warstw Nazwa warstwy Wyświetlanie i blokowanie Typ warstwy Wyświetlanie konturów obiektów
22
22 Wstawianie warstw Z menu Wstaw (Insert) Za pomocą ikon w oknie Timeline
23
23 Dół okna listwy czasowej Wyśrodkowanie klatki Opcje przenikania klatek (widok „onion skin”) Bieżąca klatka Szybkość odtwarzania klatek Czas trwania dtwarzania
24
24 „Onion skin”
25
25 Właściwości filmu
26
26 Rodzaje klatek Klatki kluczowe – zawierają elementy dla określonego momentu odtwarzania filmu; obiekt umieszczony na scenie trafia do klatki kluczowej; usunięcie klatki kluczowej powoduje skasowanie całej jej zawartości. Na klatki kluczowe może składać się od 1 do kilkuset zwykłych klatek. Klatki te umożliwiają zmianę zawartości warstwy. Początek klatki kluczowej wskazuje czarne kółko – koniec, w przypadku więcej niż jednej klatki, wskazuje pusty prostokąt.
27
27 Rodzaje klatek (2) Puste klatki kluczowe – umożliwiają rozpoczęcie sekwencji, w której nie będzie zawartości poprzedniej klatki.
28
28 Typy animacji Animacja poklatkowa (frame by frame) Animacja ruchu (motion tween) Animacja kształtu (shape tween) Sekwencje statyczne.
29
29 Reprezentacja animacji Klatki kluczowe zawierające animację ruchu Klatki kluczowe zawierające animację kształtu Klatki kluczowe zawierające animację ruchu, lecz bez klatki końcowej Klatki kluczowe zawierające nie zmieniony obiekt (bez animacji ruchu lub kształtu) Klatka z literą a zawiera akcję dodaną za pomocą panelu Actions Czerwona flaga oznacza, że klatka zawiera etykietę lub komentarz
30
30 Obiekt wektorowy Kontur (kolor, grubość, styl) Tło (obszar, kolor, typ wypełnienia)
31
31 Właściwości wypełnienia Narzędzie „wypełnienie” z Przybornika Dokery „Color Mixer” i „Color Swatches” Okno dokowane „Properties”
32
32 Właściwości konturu Narzędzie „wypełnienie” z Przybornika Okno dokowane „Properties” Dokery „Color Mixer” i „Color Swatches”
33
33 Zaznaczanie obiektów Obiekt nie zaznaczony Zaznaczony kontur Zaznaczone wypełnienie Zaznaczone wypełnienie i kontur Zaznaczona grupa obiektów Zaznaczenie części konturu
34
34 Modyfikacja obiektów Paleta „Info”Paleta „Transformacja” Położenie, wymiary Skalowanie, Obrót Pochylenie
35
35 Narzędzia Zaznaczanie obiektów, przenoszenie, modyfikacja kształtu Skalowanie obiektów, modyfikacja wypełnienia gradientowego Linia, lasso Krzywe, Tekst Kształty podstawowe Ołówek, pędzel Kolor obramowania, wypełnianie (kałamarz, wiadro) Pipeta, gumka Nawigacja i powiększenie Kolor konturu Kolor wypełnienia Ustawienia Właściwości aktywnego narzędzia
36
36 Właściwości tekstu
37
37 Animacja ruchu Aby utworzyć automatyczną (interpolowaną) animację ruchu lub kształtu należy określić stan początkowy i końcowy, pomiędzy którymi Flash sam wygeneruje animację. W praktyce oznacza to zdefiniowanie dwóch klatek kluczowych. Należy tworzyć po jednej animacji na warstwie: - Zwiększa to czytelność listwy czasowej - Tworzenie kilku animacji na warstwie może być niemożliwe! Należy tworzyć po jednej animacji na warstwie: - Zwiększa to czytelność listwy czasowej - Tworzenie kilku animacji na warstwie może być niemożliwe!
38
38 Animacja ruchu Animacja wykonywana jest na symbolach – jeśli obiekty nie są symbolami, Flash dokona automatycznej konwersji. Rodzaje animacji ruchu: przesunięcie, obrót, pochylenie, przerzucenie, zmiana rozmiaru, zmiana koloru. Wszystkie te zmiany mogą nastąpić w jednym obiekcie jednocześnie.
39
39 Animacja ruchu Najszybciej jest narysować obiekt, a następnie zaznaczyć klatkę kluczową i z menu podręcznego wybrać polecenie Create Motion Tween. Wstawienie końcowej klatki kluczowej (F6) spowoduje pojawienie się niebieskich klatek na listwie czasowej. Klatka 1 Klatka 20
40
40 Ustawienia animacji
41
41 Animacja po ścieżce Dodanie warstwy prowadzącej Charakterystyczne wcięcie warstwy prowadzonej
42
42 Animacja po ścieżce Klatka 1Klatka 20
43
43 Przejście kształtu Shape hints
44
44 Efekty kolorów Brightness - rozjaśnienie Tint – zmiana koloru Alpha – przezroczystość
45
45 Efekt maski Maski tworzy się przede wszystkim w celu tworzenia efektu reflektora. Potrzebne są trzy warstwy: Tło Obraz odsłaniany Obraz (warstwa) będący maską
46
46 Układ warstw w efekcie maski Warstwa maskująca i maskowana są łączone automatycznie
47
47 Bitmapa – obraz wektorowy Flash posiada doskonałe narzędzie do przekształcania bitmap w obiekty wektorowe. Dzięki temu można zrezygnować z tworzenia samemu fotorealistycznych scen filmu, a posłużyć się obrazami trasowanymi. Narzędzie to znajduje się w menu Modify, gdzie wybieramy opcję – Bitmap – a potem - trace bitmap.
48
48 Opcje trasowania bitmapy Wartość progu (color treshold) = 1-500 (im większy próg, tym mniejsza liczba kolorów). Jeżeli różnica wartości kolorów RGB porównywanych dwóch pikseli jest mniejsza niż zadany próg, to uznaje się, że te dwa piksele mają tę samą barwę. Maska (minimum area) = 1-1000. Liczba sąsiadujących pikseli branych pod uwagę przy określaniu koloru danego piksela. Dopasowanie krzywych (curve fit). Wygładzanie (corner treshold) – próg narożników – wyrównywanie nierówności; im więcej narożników wyrównano, tym mniejsze podobieństwo do oryginały ale i mniejszy plik.
49
49 Próg RGB = 100 Maska = 8 Próg RGB = 200 Maska = 50 Próg RGB = 50 Maska = 10 Obraz oryginalny
50
50 Rezultat
51
51 Część II Symbole Grafika (Graphic) Przycisk (Button) Klip (Movie Clip) Biblioteka Action Script Importowanie dźwięków Obsługa dźwięków
52
52 Kształty i wypełnienia Jeżeli kilka niezgrupowanych kształtów zostanie umieszczonych na tej samej warstwie będą one w różny sposób oddziaływały na siebie. Gdy na jakimś kształcie zostanie zastosowane nowe wypełnienie, to zastąpi ono już istniejące wypełnienie i kontur.
53
53 Kształty i wypełnienia (2) Gdy identyczne wypełnienia zostaną umieszczone razem lub będą nachodzić na siebie, zostaną scalone i staną się jednym wypełnieniem. Aby przenosić kształty bez obawy, że zostaną one w jakiś sposób zdeformowane można: Pogrupować je; Umieścić każdy kształt na oddzielnej warstwie.
54
54 Symbole W filmach programu Flash symbole służą do: Optymalizacji rozmiaru pliku, Tworzenia i łączenia automatycznych animacji, Tworzenia interaktywnych filmów, Organizowania elementów używanych w filmach.
55
55 Symbole (2) Symbole są przechowywane w bibliotece. Za każdym razem, gdy symbol jest umieszczany w filmie, oznacza to utworzenie jego wystąpienia (instance). Stosowanie symboli i wystąpień powoduje zmniejszenie rozmiaru plików wynikowych – symbol jest wczytywany do pamięci tylko raz, natomiast w poszczególnych wystąpieniach są przechowywane tylko jego charakterystyki wyświetlania i skrypty. Wystąpienia symboli często są w różny sposób formatowane – mogą się różnić kształtem i kolorem oraz zawierać odmienne skrypty.
56
56 Tworzenie symbolu Przejście do rejestracji symbolu następuje automatycznie.
57
57 Okno rejestracji Movie Clip
58
58 Przekształcenie w symbol
59
59 Przycisk – listwa czasowa Klatki reprezentują stany przycisku: Up – gdy przycisk jest wyciśnięty Over – gdy najechaliśmy na przycisk myszką Down – gdy przycisk jest wciśnięty Hit – pole reakcji
60
60 Stany przycisku Przetestowanie przycisku umieszczonego na scenie umożliwia opcja Enable Simple buttons
61
61 Stany przycisku Przetestowanie przycisku umieszczonego na scenie umożliwia opcja Enable Simple buttons
62
62 Biblioteka filmu Do biblioteki trafiają wszystkie symbole stworzone w filmie, a także zaimportowane zdjęcia i dźwięki. Elementy z biblioteki można wstawiać do sceny filmu za pomocą metody „przeciągnij i upuść”.
63
63 Organizacja biblioteki Podgląd Organizacja za pomocą folderów i podfolderów Sortowanie alfabetyczne Lista opcji Dodatkowe ikonki – wstaw symbol, wstaw folder, usuń symbol/folder
64
64 Biblioteka ogólna W bibliotece ogólnej (Common library) przechowywane są elementy dostępne dla każdego filmu. Pogrupowane są w grupy podobnych symboli. Aby utworzyć nową bibliotekę ogólną należy stworzyć nowy film i jego bibliotekę (z symbolami, które chcemy upowszechnić), a następnie zapisujemy film w katalogu programu Flash, podkatalogu Libraries. Aby usunąć bibliotekę ogólną należy skasować stosowny plik we wspomnianym katalogu.
65
65 Instancja symbolu Instancja to wystąpienie symbolu w filmie. Można zmieniać rozmiar wystąpienia, kolor: Zmiany zastosowane w wystąpieniu nie odnoszą się do samego symbolu.
66
66 Struktura filmu - sceny Scena jest sekwencją o określonej nazwie i własnej osi czasu. Może mieć od jednej do tysięcy klatek. Zaznaczona scena staje się aktywna powielenie dodanie usunięcie sceny Jeśli nie są stosowane skrypty, sceny są odtwarzane w kolejności, w jakiej występują na palecie Scene.
67
67 Movie Explorer Służy do przeglądania scen i zagnieżdżonych animacji – dzięki niemu można edytować obiekty i należący do filmu kod ActionScript.
68
68 Action Script - Dodawanie kodu Argumenty poleceń pojawiają się na rozwijanej liście Język skryptowy podobny w budowie do JavaScript
69
69 Index – spis poleceń Najważniejsze polecenia ActionScript zebrane są w postaci alfabetycznej listy, w folderze Index.
70
70 Najważniejsze akcje gotoAndPlay Powoduje przeskok wskaźnika odtwarzania do innej klatki na osi czasu bieżącej lub innej sceny. Treść tej instrukcji zmienia się w zależności od wybranych parametrów (nazwy sceny, numeru klatki lub etykiety klatki): gotoAndPlay("newFrame"); gotoAndPlay("sceneTwo", 1); gotoAndPlay(5);
71
71 Najważniejsze akcje (2) gotoAndStop Powoduje przeskok wskaźnika odtwarzania do innej klatki na osi czasu bieżącej lub innej sceny i zatrzymanie odtwarzania filmu w tej klatce. gotoAndStop("newFrame"); gotoAndStop("sceneTwo", 1); gotoAndStop(5);
72
72 Najważniejsze akcje (3) stopAllSounds Powoduje zatrzymanie odtwarzania wszystkich dźwięków Akcję można wstawić do klatki lub powiązać z przyciskiem
73
73 Najważniejsze akcje (4) Stop() Zatrzymuje odtwarzanie filmu. Może nyć na przykład stosowana do zezwalania na cykliczne wykonywanie symboli klipów filmowych. W połączeniu z akcjami Play() i GoTo() użytymi do przycisków umożliwoa zdefiniowanie mechanizmu odtwarzania filmu na życzenie użytkownika.
74
74 Najważniejsze akcje (5) Play() Służy do odtwarzania, ponownego uruchamiania.
75
75 Najważniejsze akcje (6) loadMovie Służy do wczytywania innych filmów w formacie.swf, a także plików graficznych JPEG, GIF (statyczne) i PNG. do bieżącego filmu. Ponadto, pozwala na wielodostęp podczas wczytywania. loadMovie("circle.swf", mySquare); loadMovie("circle.swf", this); loadMovie("image1.jpg", logo_mc); loadMovieNum() – wczytanie na określony poziom.
76
76 Najważniejsze akcje (6) duplicateMovieClip Akcja służy do duplikowania wystąpień klipów. duplicateMovieClip ("1", "2", „3”); 1 – nazwa wystąpienia powielanego klipu, 2 - nowa nazwa skopiowanego klipu, 3 - Poziom kopiowania klipu
77
77 Najważniejsze akcje (7) on (event); Pozwala powiązać inne akcje z działaniem wykonywanym myszką lub przyciskiem. on (keyPress „8”) on (rollOver) on (rollOut) on (press) on (relase)
78
78 Dźwięki Format.mp3 daje najkorzystniejszy stosunek rozmiaru pliku do jakości. Aby użyć dźwięki w filmach należy je zaimportować, a następnie dobrać odpowiednie właściwości dźwięku.
79
79 Dźwięki StopAllSounds(); Akcja zatrzymuje wszystkie dźwięki
Podobne prezentacje
© 2024 SlidePlayer.pl Inc.
All rights reserved.