Pobieranie prezentacji. Proszę czekać

Pobieranie prezentacji. Proszę czekać

GRAFIKA ANIMACYJNA 1. 2 Grafika Animacyjna w Technice Flash semestr II Wykład dla Studiów Podyplomowych GRAFIKA KOMPUTEROWA I TECHNIKI MULTIMEDIALNE Rok.

Podobne prezentacje


Prezentacja na temat: "GRAFIKA ANIMACYJNA 1. 2 Grafika Animacyjna w Technice Flash semestr II Wykład dla Studiów Podyplomowych GRAFIKA KOMPUTEROWA I TECHNIKI MULTIMEDIALNE Rok."— Zapis prezentacji:

1 GRAFIKA ANIMACYJNA 1

2 2 Grafika Animacyjna w Technice Flash semestr II Wykład dla Studiów Podyplomowych GRAFIKA KOMPUTEROWA I TECHNIKI MULTIMEDIALNE Rok akademicki 2013/2014 opracowanie: dr Joanna Sekulska-Nalewajko

3 GRAFIKA ANIMACYJNA 3 ActionScript Język wewnętrzny Flasha Bazuje na modelu języka skryptowego Ukształtowany do wersji 2.0 we Flash 5 Model obiektowy we Flash MX ActionScript 3.0 od Flash CS

4 GRAFIKA ANIMACYJNA 4 ActionScript  Służy do: Tworzenia i zarządzania grafiką, Sterowania animacją, Interakcji z użytkownikiem, w tym rozpoznania i obsłużenia gestów dotyku w urządzeniach dotykowych, Dodawania linków i nawigacji w filmie, Obliczeń... i wzmocnienia efektów wizualnych, Tworzenia formularzy, odtwarzaczy dźwięku i wideo, Wczytywania i obsługi plików graficznych, tekstowych i multimedialnych

5 GRAFIKA ANIMACYJNA ActionScript 3.0  Lepsza obsługa zdarzeń  Możliwość dynamicznego tworzenia przycisków  Lepsza obsługa surowej grafiki  Skrypty umieszczane na linii czasowej  Nowe klasy AS (Sprite, Shape, Loader...) – Sprite to lekki element składowy, podobny do klasy MovieClip, ale lepiej przystosowany do użycia w charakterze podstawowego składników interfejsu (gdy nie potrzebujemy odrębnej listwy czasowej). – Shape reprezentuje surowe kształty wektorowe. 5

6 GRAFIKA ANIMACYJNA ActionScript 3.0  Sercem języka ActionScript są obiekty i klasy Obiekt jest typem danych, który wykorzystujemy do kontrolowania filmu. Obiektami są np: –wartość liczbowa, (klasa Numer, int, uint) –tekst, (klasa String) –data, (klasa Date) –tablica (zbiór danych) (klasa Array) –dźwięk, (klasa Sound) –grafika, (klasa Shape) –klip filmowy, (klasa MovieClip) –kontener. (klasa Loader) 6

7 GRAFIKA ANIMACYJNA ActionScript 3.0  Wszystkie tworzone obiekty należą do większej zbiorczej grupy zwanej Klasą. Np. –klasa Sound - (obiekt „dźwięk”) –klasa Video - (obiekt „film”) –klasa Array - (obiekt „tablica”) –klasa Math - (obiekt „stała PI”)  Obiekty tworzony w danej klasie jest egzemplarzem danej klasy. 7

8 GRAFIKA ANIMACYJNA ActionScript 3.0  Instancje (egzemplarze) klas można tworzyć za pomocą operatora new i w dowolnym momencie dynamicznie zmieniać ich zawartość i właściwości. Stąd ich nazwa „ zmienne ”.  Nauka programowania sprowadza się więc do poznania możliwości obiektów i ich klas oraz do wykorzystania ich do współdziałania i interakcji z użytkownikiem. 8

9 GRAFIKA ANIMACYJNA ActionScript 3.0  Obiekty z jednej klasy mogą różnić się między sobą właściwościami  We Flashu każda z klas ma predefiniowany zestaw właściwości np. klasa Sound ma właściwość length określającą czas trwania dźwięku (w ms) klasa MovieClip ma właściwość height, width, x, y, rotation, które określają wymiary, położenie... 9

10 GRAFIKA ANIMACYJNA ActionScript 3.0  Obiekty mogą wykonywać też pewne czynności, które nazywa się metodami  Każda klasa ma własny zestaw metod np.: klasa MovieClip posiada metodę gotoAndStop(), która zmienia aktywną klatkę klasa Date posiada metodę getDay(), która pobiera bieżący dzień tygodnia.  Mówimy, że dana metoda jest wywoływana przez obiekt albo, że obiekt wywołuje metodę 10

11 GRAFIKA ANIMACYJNA ActionScript 3.0  Z obiektami związane są też zdarzenia, czyli działania które Flash potrafi rozpoznać.  Zdarzenia są po to, aby w razie potrzeby na nie odpowiedzieć, czyli posłużyć się nimi do zarządzania filmem.  jest do tego specjalny mechanizm zwany obsługą zdarzeń. 11

12 GRAFIKA ANIMACYJNA Zestaw właściwości klasy Sound  ActionScript ® 3.0 — dokumentacja dla platformy Adobe ® Flash ®  12

13 GRAFIKA ANIMACYJNA Zestaw metod klasy Sound 13

14 GRAFIKA ANIMACYJNA Zestaw zdarzeń klasy Sound 14

15 GRAFIKA ANIMACYJNA ActionScript 3.0  Notacja kropkowa – umożliwia łączenie obiektów, ich właściwości i metod w instrukcje:  pierwszy_mc.width = 155;  drugi_mc.rotation = 45;  trzeci_mc.gotoAndStop(10);  czwarty_mc.scaleX = 1.5;  Mouse.hide(); 15

16 GRAFIKA ANIMACYJNA Znaki specjalne  Znaki interpunkcyjne : ; - (średnik) – kończy wiersz instrukcji { } - (nawias klamrowy) – grupuje instrukcje, które mają być wykonane razem np. wewnątrz funkcji function doThis(event:MouseEvent):void { pierwszy_mc.stop(); pierwszy_mc.rotation = 45; } 16

17 GRAFIKA ANIMACYJNA Znaki specjalne  Znaki interpunkcyjne :, - (przecinek) – oddziela parametry przekazywane do metod pierwszy_mc.gotoAndStop(„Scene 1”,20);  Wielkie i małe litery AS rozróżnia wielkość liter. 17

18 GRAFIKA ANIMACYJNA Komentarz  // - komentuje jedną linie kodu  /*... */ - komentuje fragment kodu /* function doThis(event:MouseEvent):void { pierwszy_mc.stop(); pierwszy_mc.rotation = 45; } */ 18

19 GRAFIKA ANIMACYJNA Operatory  Operatory to specjalne symbole (a niekiedy słowa) służące do wykonywania obliczeń. –Używane są do wykonywania operacji matematycznych: Operator dodawania (+) Operator odejmowania(-) var sum:Number = ; var roznica:Number = ; 19

20 GRAFIKA ANIMACYJNA Operatory  Operator dodawania (+) Jeśli oba operandy są ciągami znaków, operator dodawania zwraca ciąg znaków będący konkatenacją obu operandów. var liczba:String = „5” + „5”; //55 20

21 GRAFIKA ANIMACYJNA Operatory multiplikatywne var energy:Number = mass * speedOfLight * speedOfLight; 21 E=mc 2

22 GRAFIKA ANIMACYJNA Operatory jednorgumentowe  operator inkrementacji (++)  operator dekrementacji (--) –- przyjmują tylko jeden operand. zmienna1++ zmienna2 -- zmienna3 += 5 zmienna4 -=10 22

23 GRAFIKA ANIMACYJNA Operatory jednorgumentowe  Operator przyrostkowy, inkrementacja lub dekrementacja jest wykonywana po zwróceniu wartości wyrażenia.  Operator przedrostkowy - inkrementacja lub dekrementacja jest wykonywana przed zwróceniem wartości wyrażenia. 23 var xNum:Number = 0; trace(xNum++); // 0 trace(xNum); // 1 var xNum:Number = 0; trace(++xNum); // 1 trace(xNum); // 1

24 GRAFIKA ANIMACYJNA Operatory jednorgumentowe 24

25 GRAFIKA ANIMACYJNA Operatory porównania  Operator równości (==) sprawdza, czy dwie wartości są równe, i daje w wyniku jedną wartość prawda albo fałsz (Boolean): if (dayOfWeek == "Wednesday"){ takeOutTrash(); } –operatory „porównań” najczęściej używane są z instrukcją if w celu ustalenia, czy określone instrukcje powinny być wykonane, czy nie. 25

26 GRAFIKA ANIMACYJNA Operatory porównania 26

27 GRAFIKA ANIMACYJNA Operatory relacyjne  operator mniejszości( ) mają ten sam priorytet. Jeśli oba operatory zostaną użyte w tym samym wyrażeniu, operator po lewej stronie zostanie przetworzony jako pierwszy, ponieważ oba operatory są lewostronne. trace(3 > 2 < 1); // false trace((3 > 2) < 1); // false trace(3 > (2 < 1)); // true 27

28 GRAFIKA ANIMACYJNA Operatory relacyjne 28

29 GRAFIKA ANIMACYJNA Operatory logiczne  Operatory logiczne mają dwa operandy i zwracają wynik typu Boolean. Operatory logiczne mają różne priorytety i zostały wymienione w poniższej tabeli w kolejności malejących priorytetów: 29 Logiczne AND

30 GRAFIKA ANIMACYJNA Operatory podstawowe 30

31 GRAFIKA ANIMACYJNA Operatory przesunięcia bitowego  mają dwa operandy i przesuwają bity pierwszego operandu o liczbę pozycji określoną przez drugi operand. 31

32 GRAFIKA ANIMACYJNA ActionScript 3.0  Dostęp do obiektów i operacje na nich wykonuje się za pomocą zmiennych. Zmienne można tworzyć, zmieniać ich wartość i usuwać w dowolnej chwili.  Tworzenie zmiennej to jej deklarowanie : var myNumber:Number; var someNumber:Number = 6.33; var someNumber:Number = new Number(6.33); var myBirthday:Date = new Date(); var myMusic:Sound = new Sound();  tworzymy zmienną, nadajemy jej nazwę i ustalamy typ danych, jakie przechowuje 32

33 GRAFIKA ANIMACYJNA Zasady nazewnictwa (zmienne, funkcje)  Nie stosujemy spacji ani znaków interpunkcyjnych  Nazwy nie mogą zaczynać się cyfrą. Dozwolone: mojaZmienna2 moja_Zmienna_3  Nie można stosować słów kluczowych (np. case, break, true, public, dynamic, final, return, static....)  Nazwa powinna informować o obiekcie: var myScore var myVariable X  Wewnątrz nazwy stosujemy wielkie litery, nigdy na początku 33

34 GRAFIKA ANIMACYJNA Zasady nazewnictwa (zmienne)  Pomocne jest dodawanie do nazw zmiennych odpowiednich przyrostków, określających typ obiektu: myClipRotatedCircle_mc playButton_btn  Dzięki temu często Flash rozpoznaje typ danych i wyświetla podpowiedzi do kodu w oknie Operacje 34

35 GRAFIKA ANIMACYJNA Konstruktor klasy  Tworzenie obiektu przy użyciu operatora new jest często nazywane „ wywołaniem konstruktora klasy ”.  Operatora new można używać nawet do tworzenia instancji obiektów należących do typów danych, które dopuszczają tworzenie instancji na podstawie wyrażeń literałowych. var someNumber:Number = 6.33; var someNumber:Number = new Number(6.33); 35

36 GRAFIKA ANIMACYJNA Konstruktor klasy  Większość klas posiada metodę konstruktora, czyli specjalną funkcję, która tworzy egzemplarz danej klasy za pomocą operatora new.  Głownie są to klasy, których instancje nie mają swojej reprezentacji wizualnej (nie da się utworzyć jego instancji poprzez umieszczenie elementu na stole montażowym programu Flash). 36

37 GRAFIKA ANIMACYJNA Operacje – przykład 1 37 Istnieje pole tekstowe na stole montażowym (nazwa myTextBox_txt) Wynik:

38 GRAFIKA ANIMACYJNA Operacje – przykład 2 38 Tworzymy pole tekstowe konstruktorem new

39 GRAFIKA ANIMACYJNA Proste typy danych  Number – wartość liczbowa  int – liczba całkowita  uint – dodatnia liczba całkowita var myTemp:Number = 98.6 var myScore:int = -100 var myCode:uint = Przypisanie wartości do zmiennej to jej inicjalizowanie 39

40 GRAFIKA ANIMACYJNA Proste typy danych  String – ciąg liter lub symboli  Boolean – wartość prawda lub fałsz var myName:String = „Joanna”; var myStatus:Boolean = true; var yourStatus:Boolean = false; 40

41 GRAFIKA ANIMACYJNA Złożone typy danych  Date – reprezentuje datę  Array – reprezentuje tablicę var myBirthday:Date = new Date(2006, 7, 9); var currentDate:Date = new Date(); var seasons:Array =["spring","summer","autumn","winter"]; 41

42 GRAFIKA ANIMACYJNA Złożone typy danych  Literalna wartość XML –(wartość zmiennej, czyli kod XML należy wpisać bezpośrednio): var employee:XML = Harold Webster ; 42

43 GRAFIKA ANIMACYJNA Złożone typy danych  MovieClip – symbol klipu filmowego;  TextField – dynamiczne lub wejściowe pole tekstowe;  SimpleButton – symbol przycisku; var raceCar:MovieClip = new MovieClip(); var myTextBox:TextField = new TextField(); 43

44 GRAFIKA ANIMACYJNA Funkcje  grupują pokrewne instrukcje w celu wykonania określonego zadania 44

45 GRAFIKA ANIMACYJNA Funkcje parametryczne  Zastosowanie funkcji eliminuje czynność ręcznego powielania fragmentów kodu: 45

46 GRAFIKA ANIMACYJNA Funkcje parametryczne 46

47 GRAFIKA ANIMACYJNA Zdarzenia  Obsługa zdarzeń to mechanizm składający się zarówno z nasłuchiwania zdarzeń obiektów jak i decydujący o tym, które instrukcje komputer wykona po wykryciu zdarzenia. Przykłady zdarzeń: –wprowadzenie danych przez użytkownika –ładowanie lub załadowanie obrazu –kliknięcie przycisku –odtwarzanie klatki. 47

48 GRAFIKA ANIMACYJNA Obsługa zdarzeń  Pisząc kod obsługujący zdarzenia, musimy brać pod uwagę trzy elementy:  (1) Źródło zdarzenia : na przykład przycisk lub Loader.  (2) Zdarzenie : co takiego ma się stać i na co będziemy reagować? Identyfikacja zdarzenia jest ważna, ponieważ w wielu obiektach może zachodzić więcej niż jeden rodzaj zdarzeń.  (3) Reakcja : jakie operacje chcemy wykonać, gdy zajdzie zdarzenie? 48 event sourceevent typeevent response

49 GRAFIKA ANIMACYJNA Obsługa zdarzeń  Kod obsługi zdarzeń w języku ActionScript zawsze będzie zawierał wymienione wyżej trzy elementy. Oto podstawowa struktura takiego kodu: function eventResponse(eventObject:EventType):void { // Actions performed in response to the event go here. } eventSource.addEventListener(EventType.EVENT_NAME, eventResponse); 49

50 GRAFIKA ANIMACYJNA Obsługa zdarzeń 50 function showHello(event:MouseEvent):void{ if (powitanie_mc.currentLabel=="goout"){ powitanie_mc.gotoAndPlay("goin");} } start_btn.addEventListener(MouseEvent.CLICK, showHello);

51 GRAFIKA ANIMACYJNA Przyciski interaktywne 51 function showHello(event:MouseEvent):void{ if (powitanie_mc.currentLabel=="goout"){ powitanie_mc.gotoAndPlay("goin");} } start_btn.addEventListener(MouseEvent.CLICK, showHello);

52 GRAFIKA ANIMACYJNA Zdarzenia myszy  Zdarzenia myszy obsługiwane przez klasę obiektów MouseEvent : – MOUSE_OVER – kursor myszy nad obiektem – MOUSE_DOWN – przycisk myszy jest wciśnięty – MOUSE_UP – przycisk myszy nie jest wciśnięty – MOUSE_MOVE – przesunięcie myszy kursora po ekranie – MOUSE_OUT – kursor opuszcza obszar obiektu docelowego – MOUSE_WHEEL – kółko myszy obraca się – CLICK – naciśnięcie i zwolnienie przycisku myszy – DOUBLE_CLICK – szybkie dwukrotne naciśnięcie i zwolnienie przycisku myszy 52

53 GRAFIKA ANIMACYJNA Odbiorniki zdarzeń myszy  Flash może nasłuchiwać zdarzeń myszy w obrębie każdego obiektu należącego do klasy InteractiveObject : przyciski pola tekstowe obiekty z klasy Loader obiekty z klasy Sprite klipy filmowe scena filmu 53

54 GRAFIKA ANIMACYJNA Zdarzenia filmu i obiektów  ENTER_FRAME – każdy obiekt wyświetlany zawiera to zdarzenie wywoływane zgodnie z liczbą klatek na sekundę pliku SWF – jedno zdarzenie na jedną klatkę sposób na powtarzanie określonych operacji w czasie this.addEventListener(Event.ENTER_FRAME, onEnterFrame); 54

55 GRAFIKA ANIMACYJNA Zdarzenia pól tekstowych var myTextBox:TextField = new TextField(); var myOutputBox:TextField = new TextField(); var myText:String = "Type your text here."; function captureText():void{ myTextBox.type = TextFieldType.INPUT; myTextBox.background = true; addChild(myTextBox); myTextBox.text = myText; } myTextBox.addEventListener(TextEvent.TEXT_INPUT, textInputCapture); function textInputCapture(event:TextEvent):void{ var str:String = myTextBox.text; createOutputBox(str); } function createOutputBox(str:String):void

56 GRAFIKA ANIMACYJNA Instrukcje warunkowe  W ActionScript 3.0 istnieją trzy instrukcje warunkowe if....else if....else if switch 56

57 GRAFIKA ANIMACYJNA if...else  Instrukcja warunkowa if..else umożliwia sprawdzenie warunku i wykonanie jednego bloku kodu, jeśli warunek jest spełniony, albo innego bloku kodu, jeśli warunek nie jest spełniony. if (x > 20){ trace("x is > 20");} else{ trace("x is <= 20");} Jeśli nie chcemy wykonywać alternatywnego bloku kodu, możemy użyć instrukcji if bez instrukcji else. 57

58 GRAFIKA ANIMACYJNA if...else if  Korzystając z instrukcji warunkowej if..else if, można sprawdzać więcej niż jeden warunek. if (x > 20){ trace("x is > 20");} else if (x < 0){ trace("x is negative");} Jeśli po instrukcji if lub else następuje tylko jedna instrukcja, nie trzeba jej ujmować w nawiasy sześcienne. 58

59 GRAFIKA ANIMACYJNA if...else if //błąd – brak nawiasów var x:int; var positiveNums:int = 0; if (x > 0) trace("x is positive"); positiveNums++; trace(positiveNums); // 1 Jeśli nie użyjemy nawiasów przy większej niż jedna liniach instrukcji błąd ten może doprowadzić do nieoczekiwanego zachowania programu. W przykładzie wartość positiveNums jest zwiększana o 1 niezależnie od tego, czy wartością warunku jest true: 59

60 GRAFIKA ANIMACYJNA switch  Instrukcja switch jest użyteczna, jeśli mamy kilka możliwych ścieżek wykonania, a wybór jednej z nich zależy od wartości tego samego wyrażenia warunkowego.  Oferuje ona funkcjonalność podobną do długiego szeregu instrukcji if..else if, ale jest nieco bardziej czytelna.  Zamiast sprawdzać wartość logiczną warunku, instrukcja switch oblicza wartość wyrażenia i na podstawie wyniku wybiera jeden z bloków kodu do wykonania. 60

61 GRAFIKA ANIMACYJNA switch  Bloki kodu rozpoczynają się od instrukcji case i kończą instrukcją break.  Poniższa instrukcja switch wyświetla nazwę dnia tygodnia na podstawie numeru dnia zwróconego przez metodą Date.getDay(): 61

62 GRAFIKA ANIMACYJNA switch var someDate:Date = new Date(); var dayNum:uint = someDate.getDay(); switch(dayNum){ case 0: trace("Sunday"); break; case 6: trace("Saturday"); break; default: trace("Out of range"); break; } 62

63 GRAFIKA ANIMACYJNA Pętle  Instrukcje pętli umożliwiają wielokrotne wykonywanie określonego bloku kodu;  Zaleca się, aby zawsze ujmować blok kodu w nawiasy sześcienne ({ }). Mimo że nawiasy te można pominąć, jeśli kod zawiera tylko jedną instrukcję, 63

64 GRAFIKA ANIMACYJNA For  Pętla for umożliwia iteracyjną zmianę wartości zmiennej w ramach określonego przedziału wartości.  W instrukcji for należy podać trzy wyrażenia: zmienną z przypisaną wartością początkową, instrukcję warunkową, która decyduje o zakończeniu pętli, wyrażenie zmieniające wartość zmiennej w każdej iteracji. 64

65 GRAFIKA ANIMACYJNA For  pętla jest wykonywana pięć razy. Zmienna i ma na początku wartość 0, a na końcu wartość 4; wynikiem wykonania pętli będą liczby od 0 do 4 var i:int; for (i = 0; i < 5; i++) { trace(i); } 65

66 GRAFIKA ANIMACYJNA for..in  Pętla iteracyjnie przegląda właściwości obiektu. –(jednak właściwości obiektu nie są przechowywane w żadnym z góry określonym porządku, dlatego mogą pojawiać się w pętli w pozornie przypadkowej kolejności): var myObj:Object = {x:20, y:30}; for (var i:String in myObj){ trace(i + ": " + myObj[i]); } // x: 20 // y: 30 66

67 GRAFIKA ANIMACYJNA for..in  Możliwe jest także iteracyjne przeglądanie elementów tablicy : var myArray:Array = ["one", "two", "three"]; for (var i:String in myArray) { trace(myArray[i]); } // one // two // three 67

68 GRAFIKA ANIMACYJNA for each..in  Pętla iteracyjnie przegląda elementy kolekcji, które mogą być: znacznikami w obiekcie XML lub XMLList, wartościami zapisanymi we właściwościach obiektu, elementami tablicy. 68

69 GRAFIKA ANIMACYJNA for each..in  inaczej niż w pętli for..in, zmienna sterująca pętli for each..in zawiera wartość przechowywaną we właściwości, a nie nazwę właściwości: var myObj:Object = {x:20, y:30}; for each (var num in myObj) { trace(num); } // 20 // 30 69

70 GRAFIKA ANIMACYJNA for each..in var myXML:XML = Jane Susan John ; for each (var item in myXML.fname) { trace(item); } //Jane //Susan //John 70

71 GRAFIKA ANIMACYJNA while  Pętla while działa jak instrukcja if powtarzana tak długo, jak długo warunek jest spełniony (true). Poniższy przykładowy kod generuje te same wyniki, co wcześniejszy przykład z pętlą for: var i:int = 0; while (i < 5) { trace(i); i++; } 71 var i:int; for (i = 0; i < 5; i++) { trace(i); }

72 GRAFIKA ANIMACYJNA do...while  Pętla do..while jest to pętla while, w której blok kodu zostanie zawsze wykonany co najmniej jeden raz, ponieważ warunek jest sprawdzany po wykonaniu bloku kodu. var i:int = 5; do { trace(i); i++; } while (i < 5); // output: 5 72

73 GRAFIKA ANIMACYJNA Dynamiczność projektów  Dynamiczne tworzenie grafiki, instancji klipów, przycisków i pól tekstowych  Dynamiczne tworzenie masek  Dynamiczne animacje  Dynamiczne wprowadzanie tekstu  Dynamiczne ładowanie treści graficznych (obrazów rastrowych i plików.swf)  Dynamiczne ładowanie filmów i dźwięków  Obliczenia matematyczne na zmiennych liczbowych  inne działania na zmiennych 73

74 GRAFIKA ANIMACYJNA Obsługa danych i treści dynamicznych  Język ActionScript 3.0 zawiera intuicyjne i spójne w całym interfejsie API mechanizmy służące do ładowania i obsługi zasobów oraz danych w aplikacji.  Nowa klasa Loader udostępnia jednolity mechanizm ładowania plików SWF i obrazów oraz zapewnia dostęp do szczegółowych informacji o załadowanej treści. 74

75 GRAFIKA ANIMACYJNA Obsługa danych i treści dynamicznych  Klasa URLLoader udostępnia odrębny mechanizm ładowania tekstu i danych binarnych w aplikacjach zorientowanych na manipulowanie danymi.  Klasa Socket oferuje mechanizmy odczytywania i zapisywania danych binarnych w gniazdach serwera, w dowolnym formacie. 75

76 GRAFIKA ANIMACYJNA Dynamiczne tworzenie grafiki //kwadrat graphics.beginFill(0xFF0000); graphics.drawRect(50,50,100,100); graphics.endFill(); //koło graphics.beginFill(0xff4000); graphics.drawCircle(100,100,10); graphics.endFill(); 76 klasa Shape lub Sprite

77 GRAFIKA ANIMACYJNA Grafika do animacji var circle: Sprite = new Sprite() ; circle.graphics.beginFill(0x990000); circle.graphics.drawCircle(50, 50, 50); circle.graphics.endFill(); addChild(circle); function fadeCircle(event:Event):void{ circle.alpha -=.05; if (circle.alpha <= 0){ circle. removeEventListener (Event.ENTER_FRAME, fadeCircle);} } function startAnimation(event:MouseEvent):void{ circle.addEventListener(Event.ENTER_FRAME, fadeCircle);} circle. addEventListener (MouseEvent.CLICK, startAnimation); 77 import flash.display. Sprite ; import flash.events.Event; import flash.events.MouseEvent;

78 GRAFIKA ANIMACYJNA Dynamiczne tworzenie przycisku 78  Przycisk można utworzyć za pomocą ActionScript. Należy w tym celu: posłużyć się konstruktorem obiektu klasy SimpleButton() zdefiniować cztery klatki kluczowe przycisku za pomocą właściwości: upState, overState, downState, oraz hitTestState przechwycić grafikę do stanów przycisku (może być to dowolny obraz, klip, dynamicznie stworzona grafika klasy Shape lub Sprite, pole tekstowe)

79 GRAFIKA ANIMACYJNA Dynamiczne tworzenie przycisku 79 Importowanie klas tworzonych obiektów Zdefiniowanie grafiki dla stanu Up przycisku Zdefiniowanie grafiki dla stanu Over przycisku Konstruktor nowego obiektu typu przycisk Zdefiniowanie zawartości klatek kluczowych przycisku Dodanie przycisku do listy wyświetlania

80 GRAFIKA ANIMACYJNA Dynamiczne tworzenie klipów  Klip można utworzyć z poziomu ActionScript w klasie MovieClip lub Sprite: 80 var myClip:MovieClip = new MovieClip();....//definiowanie grafiki lub inne czynności var myMask:Sprite = new Sprite();....//definiowanie grafiki addChild(myClip); addChild(myMask); myClip.alpha = 50; myMask.buttonMode = true;

81 GRAFIKA ANIMACYJNA Dynamiczne ładowanie treści  Do aplikacji Flash można załadować dynamicznie: –Plik SWF utworzony w języku ActionScript 3.0 –Plik SWF zapisany w języku ActionScript 1.0 lub 2.0. –Plik obrazu — JPG, PNG i GIF. –tekst –film –dźwięk –zmienne 81

82 GRAFIKA ANIMACYJNA Dynamiczne ładowanie obrazów  Do ładowania plików graficznych oraz plików.swf służy klasa Loader. 82 Plik będący kontenerem, zawiera kod AS ładujący plik SWF Zewnętrzny plik SWF ładowany do kontenera

83 GRAFIKA ANIMACYJNA Dynamiczne ładowanie obrazów  należy stworzyć obiekt Loader, wskazać podrzędny obiekt wyświetlany (np. plik.swf), a następnie dodać obiekt Loader do listy wyświetlania: 83 var movieLoader:Loader = new Loader(); var movieURL:String = "galeria.swf"; var movieURLReq:URLRequest = new URLRequest(movieURL); movieLoader.load(movieURLReq); this.addChild(movieLoader);

84 GRAFIKA ANIMACYJNA Przenoszenie załadowanej treści  Po załadowaniu pliku SWF lub obrazu możliwe jest przesunięcie załadowanego obiektu wyświetlanego do innego kontenera: var container:Sprite = new Sprite(); addChild(container); var pictLdr:Loader = new Loader(); var pictURL:String = "banana.jpg" var pictURLReq:URLRequest = new URLRequest(pictURL); pictLdr.load(pictURLReq); pictLdr. contentLoaderInfo.addEventListener( Event.COMPLETE, imgLoaded); function imgLoaded(event:Event):void{ container.addChild(pictLdr.content); } 84 import flash.display.*; import flash.net.URLRequest; import flash.events.Event;

85 GRAFIKA ANIMACYJNA Monitorowanie postępu ładowania  Po rozpoczęciu ładowania pliku następuje utworzenie obiektu LoaderInfo.  Obiekt ten zawiera informacje, takie jak: –postęp ładowania, –adresy URL modułu ładującego –adresy URL treści ładowanej, –sumaryczna liczba bajtów dla nośnika, –a także nominalna wysokość i szerokość nośnika.  Obiekt LoaderInfo wywołuje również zdarzenia dla monitorowania postępu ładowania. 85

86 GRAFIKA ANIMACYJNA Monitorowanie postępu ładowania  W celu uzyskania dostępu do ładowanej treści należy dodać do obiektu LoaderInfo detektor zdarzeń 86 var ldr:Loader = new Loader(); var urlReq:URLRequest = new URLRequest("Circle.swf"); ldr.load(urlReq); ldr. contentLoaderInfo.addEventListener( Event.COMPLETE, loaded); addChild(ldr); function loaded(event:Event):void{ var content:Sprite = event.target.content ; content.scaleX = 2; }

87 GRAFIKA ANIMACYJNA Monitorowanie postępu ładowania  Właściwość loaderInfo załadowanego obiektu wyświetlanego dotyczy tego samego obiektu LoaderInfo, co właściwość contentLoaderInfo obiektu Loader 87

88 GRAFIKA ANIMACYJNA Monitorowanie postępu ładowania movieLoader. contentLoaderInfo.addEventListener( ProgressEvent.PROGRESS, progressHandler); function progressHandler(myevent: ProgressEvent ):void{ var myprogress:Number= myevent.target.bytesLoaded/myevent.target.bytesTotal; bar_mc.scaleX = myprogress; myTextField_txt.text=Math.round(myprogress*100)+"%"; } 88

89 GRAFIKA ANIMACYJNA Dynamiczne ładowanie tekstu  Do ładowania tekstu i zmiennych z zewnętrznych plików tekstowych służy klasa URLLoader : var textLoader: URLLoader = new URLLoader() ; var textURLRequest:URLRequest = new URLRequest("mapa.txt"); textLoader. load (textURLRequest); textLoader.addEventListener( Event.COMPLETE, dataOK ); var mytextField:TextField=new TextField(); addChild(mytextField); 89

90 GRAFIKA ANIMACYJNA Dynamiczne ładowanie tekstu 90

91 GRAFIKA ANIMACYJNA Import plików PSD  Flash zezwala na importowanie plików PSD i zachowanie, a potem edycję istniejących tam warstw.  Możemy więc przygotować całkowicie projekty graficzne w programie Adobe Photoshop, a potem we Flashu tylko dodać efekty animacji. 91

92 GRAFIKA ANIMACYJNA Photoshop vs Flash 92 Projekt wykonany w Adobe Photoshop i zapisany jako plik PSD Importowanie projektu do środowiska Flash

93 GRAFIKA ANIMACYJNA 93 Opcje wczytywania warstw

94 GRAFIKA ANIMACYJNA 94 Opcje wczytywania warstw tekstowych

95 GRAFIKA ANIMACYJNA 95 Opcje wczytywania warstw z grafiką

96 GRAFIKA ANIMACYJNA Projekt po wczytaniu do Flasha 96

97 GRAFIKA ANIMACYJNA KONIEC 97


Pobierz ppt "GRAFIKA ANIMACYJNA 1. 2 Grafika Animacyjna w Technice Flash semestr II Wykład dla Studiów Podyplomowych GRAFIKA KOMPUTEROWA I TECHNIKI MULTIMEDIALNE Rok."

Podobne prezentacje


Reklamy Google