GRAFIKA ANIMACYJNA 1

Transkrypt

1 1

2 Dynamiczna Animacja Komputerowa Rok akademicki 2015/2016 opracowanie: dr Joanna Sekulska-Nalewajko 2

3 Plan wykładu cz. I Podstawy ActionScript Obiekt i jego obsługa Klasy Operatory i znaki specjalne 3

4 ActionScript 3.0 Sercem języka ActionScript są obiekty i klasy Obiekt jest typem danych, który wykorzystujemy do kontrolowania filmu. Obiektami są np: dźwięk, tekst, grafika, klip filmowy wartość liczbowa, data, tablica (zbiór danych) 4

5 ActionScript 3.0 Wszystkie tworzone obiekty należą do większej zbiorczej grupy zwanej Klasą. Np. klasa Sound //dźwięk klasa Video //obraz wideo klasa Array //tablica klasa Math //funkcje i stałe matematyczne klasa MovieClip //klip filmowy klasa SimpleButton //przycisk Obiekty tworzony w danej klasie jest egzemplarzem danej klasy. 5

6 Konstruktor klasy Tworzenie obiektu przy użyciu operatora new jest często nazywane wywołaniem konstruktora klasy. var circle:sprite = new Sprite(); 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); 6

7 Przykłady 7

8 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

9 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

10 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(); 11

11 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; } 12

12 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. 13

13 Komentarz // - komentuje jedną linie kodu /*... */ - komentuje fragment kodu /* function dothis(event:mouseevent):void { pierwszy_mc.stop(); pierwszy_mc.rotation = 45; } */ 14

14 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 = 43-32; 15

15 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 = ; //55 16

16 Operatory multiplikatywne E=mc 2 var energy:number = mass * speedoflight * speedoflight; 17

17 Operatory jednorgumentowe operator inkrementacji (++) operator dekrementacji (--) - przyjmują tylko jeden operand. zmienna1 ++ lub ++ zmienna1 zmienna2 -- lub -- zmienna2 zmienna3 += 5 zmienna4 -=10 18

18 Operatory porównania //true lub false 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. 19

19 Operatory logiczne Operatory logiczne mają dwa operandy i zwracają wynik typu Boolean (prawda, fasz) Logiczne AND if(scoreright==0 && scoreleft==0){ scorel.text="score of Player 2:" + scoreleft; scorep.text="score of Player 1:" + scoreright;} 20

20 Instrukcja warunkowa 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. 21

21 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. 22

22 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. Zamiast sprawdzać wartość logiczną warunku, instrukcja switch oblicza wartość wyrażenia i na podstawie wyniku wybiera jeden z bloków kodu do wykonania. 24

23 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; } 26

24 Pętle Instrukcje pętli umożliwiają wielokrotne wykonywanie określonego bloku kodu z różnymi wartościami lub zmiennymi. blok kodu należy ujmować w nawiasy sześcienne ({ }). Nawiasy te można pominąć, jeśli kod zawiera tylko jedną instrukcję. 27

25 For Pętla działa poprzez iteracyjną zmianę wartości zmiennej w ramach określonego przedziału wartości znana jest liczba wykonań pętli. W nawiasie 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. var i:int; for (i = 0; i < 5; i++) { } trace(i); //funkcja trace wyświetla wartość w oknie Informacje wyjściowe 28

26 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++; } ile razy wykonała sie ta pętla? 29

27 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 ile razy wykonała sie ta pętla? 30

28 Plan wykładu Obsługa zdarzeń Klasa Loader Klasa URLLoader Klasa Timer Klasa Video, NetConnection, NetStream Detekcja kolizji 31

29 Zdarzenia Każda taka interakcja użytkownika z plikiem SWF jest traktowana jako zdarzenie. Zdarzenia mogą również występować bez bezpośredniej interakcji użytkownika. Przykłady zdarzeń: wprowadzenie danych przez użytkownika kliknięcie przycisku załadowanie obrazu odtwarzanie klatki. 32

30 Obsługa zdarzeń Pisząc kod obsługujący zdarzenia, musimy brać pod uwagę trzy ważne elementy: Źródło zdarzenia: na przykład, który przycisk zostanie kliknięty lub który obiekt Loader ładuje obraz. 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ń. Reakcja: jakie operacje chcemy wykonać, gdy zajdzie zdarzenie? 33

31 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 { // instrukcje do wykonania. } eventsource.addeventlistener(eventtype.event_name, eventresponse); 34

32 Obsługa zdarzeń function showhello(event:mouseevent):void{ if (powitanie_mc.currentlabel=="goout"){ powitanie_mc.gotoandplay("goin");} } start_btn.addeventlistener(mouseevent.click, showhello); 35

33 Przyciski interaktywne function showhello(event:mouseevent):void{ if (powitanie_mc.currentlabel=="goout"){ powitanie_mc.gotoandplay("goin");} } start_btn.addeventlistener(mouseevent.click, showhello); 36

34 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 37

35 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 38

36 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); 39

37 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... 40

38 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 41

39 Dynamiczne tworzenie grafiki var rect:sprite = new Sprite(); //kwadrat rect.graphics.beginfill(0xff0000); rect.graphics.drawrect(50,50,100,100); rect.graphics.endfill(); var circle:sprite = new Sprite(); //koło circle.graphics.beginfill(0xff4000); circle.graphics.drawcircle(100,100,10); circle.graphics.endfill(); klasa Shape lub Sprite 42

40 Grafika do animacji var circle:sprite = new Sprite(); circle.graphics.beginfill(0x990000); circle.graphics.drawcircle(50, 50, 50); circle.graphics.endfill(); addchild(circle); import flash.display.sprite; import flash.events.event; import flash.events.mouseevent; circle.addeventlistener(mouseevent.click, startanimation); function startanimation(event:mouseevent):void{ circle.addeventlistener(event.enter_frame, fadecircle);} function fadecircle(event:event):void{ circle.alpha -=.05; if (circle.alpha <= 0){ circle.removeeventlistener(event.enter_frame, fadecircle);} } 43

41 Klasa Graphics Klasa GRAPHICS udostępnia wiele metod rysowania i wypełniania obiektów: linestyle Definiuje styl linii linegradientstyle Wypełnienie linii gradientem beginfill Zdefiniowanie koloru wypełnienia jednolitego begingradientfill Zdefiniowanie wypełnienia gradientowego beginbitmapfill Wypełnia obszar rysunkowy obrazem bitmapowym beginshaderfill Określa wypełnienie cieniowane, endfill Koniec danego wypełnienia clear Resetuje wypełnienia i style linii moveto Zmienia położenie kursora rysowania na (x, y) lineto Rysuje linię z obecnej pozycji rysowania do (x,y) curveto Rysuje krzywą Beziera drawcircle Rysuje okrąg drawellipse Rysuje elipsę drawrect Rysuje prostokąt drawroundrect Rysuje zaokrąglony prostokąt 44

42 Dynamiczne tworzenie przycisku 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) 45

43 Dynamiczne tworzenie przycisku 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 46

44 Dynamiczne tworzenie klipów Klip można utworzyć z poziomu ActionScript w klasie MovieClip lub Sprite: 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; 47

45 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 48

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

47 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: var movieloader:loader = new Loader(); var movieurl:string = "galeria.swf"; var movieurlreq:urlrequest = new URLRequest(movieURL); movieloader.load(movieurlreq); this.addchild(movieloader); 50

48 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. 51

49 Monitorowanie postępu ładowania W celu uzyskania dostępu do ładowanej treści należy dodać do obiektu LoaderInfo detektor zdarzeń 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; } 52

50 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)+"%"; } 54

51 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(); import flash.display.*; addchild(container); import flash.net.urlrequest; var pictldr:loader = new Loader(); import flash.events.event; var picturlreq:urlrequest = new URLRequest("banana.jpg"); pictldr.load(picturlreq); pictldr.contentloaderinfo.addeventlistener(event.complete, imgloaded); function imgloaded(event:event):void{ } container.addchild(pictldr.content); 55

52 Obsługa danych i tekstu dynamicznie Klasa URLLoader udostępnia odrębny mechanizm ładowania tekstu i danych binarnych w aplikacjach zorientowanych na manipulowanie danymi. 56

53 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); 57

54 Dynamiczne ładowanie tekstu 58

55 Klasa Timer Obiekt Timer służy do odliczania czasu według zadanych odstępów czasowych, dzieki temu można wykonywać zadania cyklicznie lub opóźniania wykonania pewnych czynności. Poniższy przykładowy kod tworzy instancję klasy Timer, która wywołuje zdarzenie co sekundę, przez 60 sekund: var oneminutetimer:timer = new Timer(1000, 60); 59

56 Klasa Timer Główne metody klasy Timer: oneminutetimer.start() oneminutetimer.stop() do zliczania odmierzonych okresów można wykorzystać właściwość event.target.currentcount 60

57 Klasa Timer Obiekt Timer wywołuje obiekt zdarzenia TimerEvent za każdym razem po upływie zadanego przedziału czasu. Typem zdarzenia skojarzonym z obiektem TimerEvent jest timer (typ zdefiniowany przez stałą TimerEvent.TIMER). 61

58 Klasa Timer Jeśli dla instancji klasy Timer zostanie określona liczba okresów, to po odliczeniu ostatniego okresu wywołane zostanie zdarzenie timercomplete zdefiniowane przez stałą TimerEvent.TIMER_COMPLETE 62

59 Klasa Timer 63

60 Klasa Video klasa tworzy obiekt Video, który odtwarza: zarejestrowane pliki wideo zapisane na serwerze lub lokalnie wideo przechwycone na żywo przez użytkownika. Obiekt Video jest obiektem wyświetlanym na liście wyświetlania aplikacji i reprezentuje obszar ekranu, na którym wyświetlany jest obraz wideo w interfejsie użytkownika. 64

61 Akceptowany format wideo FLV Formaty wideo dodatkowo: dane wideo zakodowane w ramach standardowych formatów plików MPEG-4. Formaty te umożliwiają strumieniowe przesyłanie wideo o wysokiej jakości przy mniejszej szybkości transmisji. 65

62 Wczytywanie wideo Wczytywanie wideo przy użyciu jest procesem wieloetapowym. Odbywa się za pomocą klas Video NetConnection NetStream 66

63 Etapy wczytywania wideo -1 Tworzenie obiektu Video przeznaczonego do wyświetlania wideo i dodanie go do listy wyświetlania stołu montażowego. var vid:video = new Video(); addchild(vid); 67

64 2 - Klasa NetConnection tworzy dwukierunkowe połączenie między klientem a serwerem. Aby nawiązać połączenie, należy wywołać metodę NetConnection.connect() przekazanie wartości null do metody connect() odtworzy plik spod adresu HTTP (serwera www) lub z dysku lokalnego. var nc:netconnection = new NetConnection(); nc.connect(null); 68

65 3 - Klasa NetStream Klasa NetStream otwiera jednokierunkowy kanał transmisji strumieniowej przez połączenie NetConnection. Tworząc obiekt NetStream, należy przekazać obiekt NetConnection jako argument do konstruktora. var ns:netstream = new NetStream(nc); 69

66 3 - Klasa NetStream Wywołanie metody NetStream.play() służy do odtworzenia pliku. jako argument podajemy adres URL pliku wideo. Następujący kod wczytuje i odtwarza plik wideo o nazwie video.mp4 znajdujący się w tym samym katalogu co plik SWF: ns.play("video.mp4"); 70

67 Etapy wczytywania wideo - 4 Przyłączanie obiektu NetStream do obiektu Video przy użyciu metody attachnetstream() obiektu Video. vid.attachnetstream(ns); 71

68 Wczytywanie wideo - kod var vid:video = new Video(); addchild(vid); var nc:netconnection = new NetConnection(); nc.connect(null); var ns:netstream = new NetStream(nc); ns.play("video.mp4"); vid.attachnetstream(ns); 72

69 Detekcja kolizji obj1.hittestobject(obj2) // true, false wyznacza prostokąt ograniczający obiekt wyświetlany w celu sprawdzenia, czy zachodzi on lub przecina się z prostokątem ograniczającym obiektu wyświetlanego obj. if(ball_mc.hittestobject(graczl_mc)){ stopdragobstacle(graczl_mc);} 73