Grafika Animacyjna wykład 3

Slides:



Advertisements
Podobne prezentacje
Tworzenie stron internetowych
Advertisements

Programowanie obiektowe
FLASH - INTERAKCJA Interaktywne dokumenty WWW.
HTML.
-Microsoft PowerPoint -Microsoft Word -Microsoft Excel
Klawiatura i urządzenia wskazujące
Tworzenie prezentacji w programie PowerPoint
1 Języki i techniki programowania prowadzący dr Grzegorz Filipczyk.
C# Windows Forms Zastosowania Informatyki Wykład 3
System webowy do tworzenia kolektywnych prototypów aplikacji sieciowych i mobilnych Łukasz Przywarty
Tworzenie prezentacji w programie PowerPoint
Projektowanie Stron WWW
Wprowadzanie opisu przedmiotu po stronie USOSweb (według sylabusa zgodnego z załącznikiem 1 do Zarządzenia nr 11 Rektora UW z dnia 19 lutego 2010) DAK.
Tadeusz Ziębakowski Zachodniopomorski Uniwersytet Technologiczny.
A. Jędryczkowski - marzec 2005 r. ©
ANNA BANIEWSKA SYLWIA FILUŚ
Program do tworzenia prezentacji - uruchamianie i opis okna programu
Różne obiekty w prezentacji oraz łącza.
O B J A Ś N I E N I E D O P R O G R A M U X A R A 3 D Z I E L O N A G Ó R A 2006.
Konfiguracja systemu Windows
TECHNOLOGIE INFORMATYCZNE Tydzień 6
Wzorce slajdów, animacje, różne orientacje slajdów
Programowanie obiektowe Wykład 3 dr Dariusz Wardowski, Katedra Analizy Nieliniowej, WMiI UŁ 1/21 Dariusz Wardowski.
Aktywna mapa Puszczy Bydgoskiej
Tworzenie prezentacji
Tytuł:Poradnik do programu PowerPoint?
Tworzenie komiksu MS PowerPoint Beata Sanakiewicz.
Na pasku komunikatów kliknij przycisk Włącz edytowanie,
ARKUSZ KALKULACYJNY EXCEL wiadomości wstępne
Ujarzmić Worda Agnieszka Terebus.
Przygotowanie elementów grafiki do tworzenia stron WWW
Projektowanie stron WWW
GRAFIKA ANIMACYJNA 1. 2 Grafika Animacyjna wykład 4 Wykład dla Studiów Podyplomowych GRAFIKA KOMPUTEROWA I TECHNIKI MULTIMEDIALNE Rok akademicki 2011/2012.
Podstawy grafiki animacyjnej
Grafika Animacyjna w Technice Flash semestr II
Wzorce slajdów programu microsoft powerpoint
Dofinansowano ze środków Ministra Kultury i Dziedzictwa Narodowego
Aplikacje internetowe
Animacja na stronie internetowej
Wprowadzenie do spisów treści j a następnie naciśnij klawisz F5 lub kliknij pozycję Pokaz slajdów > Od początku, aby rozpocząć kurs. Na pasku komunikatów.
MS Office MS PowerPoint 2007
Praca z wzorcami materiałów informacyjnych j następnie naciśnij przycisk F5 lub kliknij pozycję Pokaz slajdów > Od początku w celu rozpoczęcia kursu. Na.
PULPIT WINDOWS.
Informatyka +.
Ilustrowanie dokumentów w edytorze elementami graficznymi
Temat 9: Obrazy i multimedia
prezentacja multimedialna
Wzorce slajdów, animacje, różne orientacje slajdów
Beata Sanakiewicz. Spis treści  Łączenie dokumentów Łączenie dokumentów  Mechanizm OLE Mechanizm OLE  Obiekt osadzony Obiekt osadzony  Obiekt połączony.
JabTalk - instrukcja. Przyciski paska wypowiedzi – odtwarzanie i czyszczenie Pasek wypowiedzi – wyświetla wybrane symbole i pozwala na ich odtworzenie.
Beata Sanakiewicz. Spis treści  Pierwsze spotkanie Pierwsze spotkanie  Ustawienia witryny Ustawienia witryny  Tło strony Tło strony  Teksty na stronie.
Formatowanie dokumentów
Grafika animacyjna w Macromedia Flash ACTION SCRIPT Joanna Sekulska-Nalewajko Katedra Informatyki Stosowanej Politechnika Łódzka 2006/2007.
Grafika animacyjna w Macromedia Flash Joanna Sekulska-Nalewajko Katedra Informatyki Stosowanej Politechnika Łódzka 2006.
Prezentacja multimedialna
Wykład 4 Dr Aneta Polewko-Klim Dr Aneta Polewko-Klim
Informatyka – szkoła gimnazjalna – Scholaris - © DC Edukacja Tworzenie stron WWW w programie Microsoft FrontPage Informatyka.
Wykład 2 Programowanie obiektowe. Programowanie obiektowe wymaga dobrego zrozumienia działania funkcji definiowanych przez użytkownika, w ten sposób będziemy.
Multimedia w HTML5 Statyczne witryny internetowe 2TIa Marek Kwiatkowski.
Temat: Edytor tekstu Word – redagowanie tekstu. Szukanie i zamiana tekstu Znajdowanie tekstu w dokumencie Znajdowanie tekstu i jego zamiany dokonujemy.
Podstawowe zadania w programie Excel 2010 Klasa 2 TOR.
 1. Logujemy się do YouTube i przesyłamy film na serwer (klikamy na Prześlij film ). W czasie przetwarzania pliku możemy uzupełnić informacje o wideo.
Edytor tekstu Word – możliwości graficzne
Wykład 4 Dr Aneta Polewko-Klim Dr Aneta Polewko-Klim
Wyższa Szkoła Bankowa, Poznań, dr inż. mirosław Loręcki
Wykład 4 Dr Aneta Polewko-Klim
T. 18. E Proces DGA - Działania (operatorka).
Tworzenie stron WWW w programie Microsoft FrontPage
Przeczytaj wszystko na temat wiadomości programu Microsoft SharePoint
Najważniejsze informacje dotyczące programu Sway.
Zapis prezentacji:

Grafika Animacyjna wykład 3 opracowanie: dr Joanna Sekulska-Nalewajko Wykład dla Studiów Podyplomowych GRAFIKA KOMPUTEROWA I TECHNIKI MULTIMEDIALNE Rok akademicki 2011/2012

Symbole Grafika Klip filmowy Przycisk Biblioteka Egzemplarze symboli =klony, =wystąpienia, =instancje Biblioteka

Definicja i istota symbolu Symbol to element przechowywany w bibliotece z myślą o jednokrotnym lub wielokrotnym zastosowaniu go w filmie. Zaletą symboli jest zmniejszenie rozmiaru plików symbol jest wczytywany do pamięci tylko raz, natomiast w poszczególnych wystąpieniach są przechowywane tylko jego charakterystyki wyświetlania i skrypty. oraz łatwość dokonywania zmian.

Definicja i istota symbolu Symbole umożliwiają: Tworzenie i łączenie automatycznych animacji, Tworzenie interaktywnych filmów, Organizowanie elementów używanych w filmach (wielopoziomowe zagnieżdżenia). grafika przycisk klip

Tworzenie instancji symbolu Za każdym razem, gdy symbol jest umieszczany w filmie, oznacza to utworzenie jego wystąpienia (klonu, instancji).

Instancje symbolu Zmiana oryginału symbolu zostanie odzwierciedlona we wszystkich jego wystąpieniach w filmie. Natomiast zmiana instancji nie ma wpływu na wygląd oryginału w bibliotece

Zmiany wystąpień symboli Sposoby dostosowania wyglądu symboli i ich zachowania w filmie bez zmian obiektu źródłowego w bibliotece. Można zmieniać np.: rozmiar wystąpienia, Kolor, Widoczność Obrót Pochylenie Dodawać filtry

Nazwy instancji

Wstawianie symbolu Wstaw > Nowy symbol lub Ctrl+F8

Konwertowanie do symbolu Gdy mamy gotowy element na stole montażowym Modyfikuj > Konwertuj na symbol lub F8

Oś czasu symbolu Każdy symbol ma własną oś czasu, która może przechowywać inne symbole, tekst, wideo i grafikę. Sposób działania osi czasu zależy od typu utworzonego symbolu

Symbol GRAFIKA Może zawierać wiele klatek i warstw oraz animacje Ale oś czasu jest zsynchronizowana z główną listwą czasową (nie odtwarza się, gdy nie jest odtwarzana oś czasu sceny)

Symbol GRAFIKA Są to najczęściej statyczne bitmapy Nie zawierają „zagnieżdżonych animacji” Nie posiadają nazw instancji więc nie można nimi sterować z poziomu kodu ActionScript Nie można dodawać skryptów na osi czasu Nie można do nich stosować filtrów Nie można stosować wygładzania Można stosować efekty kolorów Można je tworzyć z poziomu ActionScript

Okno rejestracji grafiki Pasek edycji wskazujący na aktywny element i zagnieżdżenie symboli Krzyżyk na środku sceny ma współrzędne: x=0 i y=0 Ważne jest wyrównanie kształtów w obrębie symbolu. Kiedy zaczniemy operować symbolami na scenie, okaże się że działanie rotacji i pewnych technik skalowania zależy od tego, gdzie znajduje się środek symbolu.

Sterowanie symbolem Graphic Mimo zsynchronizowania osi czasu symbolu Grafika i braku możliwości zarządzania nim poprzez ActionScript można decydować o tym, od której klatki zacząć odtwarzanie. Służy do tego panel Właściwości

Dlaczego stosować symbol Graphic? Generowanie kształtów w każdej klatce na scenie czasami zajmuje zbyt dużo zasobów i cykli procesora. Zastosowanie egzemplarza symbolu grafiki zużyje mniej zasobów, ponieważ jest to kopia symbolu przechowywanego w bibliotece. W każdej klatce Flash odwoła się do oryginału i wprowadzi tylko zmiany charakterystyczne dla egzemplarza. Z uwagi na prosty charakter tych symboli najlepiej reprezentować nimi statyczną grafikę lub proste animacje.

Przyciski Służą do tworzenia interaktywności – wykonują polecenia kodu ActionScript Posiadają różne stany (Up, Over, Down, Hit) i reagują na zdarzenia myszy lub klawiatury Można stosować do nich filtry i efekty koloru. Do klatek przycisku nie można wstawiać skryptów ActionScript i innych przycisków Można za to wstawiać symbole graficzne i klipy Można je tworzyć dynamicznie z poziomu AS

Listwa czasowa przycisku Klatki reprezentują stany przycisku: W górze – gdy przycisk jest wyciśnięty Over – gdy najechaliśmy na przycisk myszką Down – gdy przycisk jest wciśnięty Hit – pole reakcji (do definiowania obszaru aktywnego nie należy stosować samego tekstu)

Stany przycisku W klatce Over wstawiono animację w postaci klipu

Przycisk przezroczysty Często chcemy, aby jakieś „niewidzialne” elementy były interaktywne, np. tło filmu Należy stworzyć przycisk, który w klatce Hit będzie zawierał obiekt o wielkości interesującego nas pola reakcji. Pamiętamy, że obiekty z klatki Hit nie są wyświetlane w trakcie odtwarzania pliku SWF

Przycisk przezroczysty

Przyciski interaktywne Interaktywny przycisk, to przycisk leżący na stole montażowym (instancja) reagujący na działania myszy i wykonujący kod ActionScript. Skrypty obsługujące przycisk umieszcza się w ramkach osi czasu dokumentu/klipu filmowego. function showHello(event:MouseEvent):void{ if (powitanie_mc.currentLabel=="goout"){ powitanie_mc.gotoAndPlay("goin");} } start_btn.addEventListener(MouseEvent.CLICK, showHello);

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

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

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

Śledzenie przycisku Domyślnie jedno zdarzenie przycisku wpływa na jeden egzemplarz przycisku Możliwe jest także współdziałanie wielu egzemplarzy przycisków, np. w menu rozwijanym

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)

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

Klipy filmowe Są to niezależne od głównej listwy czasowej, najważniejsze składniki filmów Często przypominają małe aplikacje Odtwarzane są nawet wówczas, gdy: odtwarzanie głównego filmu jest zatrzymane przydzielono im w głównym filmie mniej klatek niż same zawierają

Niezależność klipów filmowych Głowna oś czasu zatrzymana akcją stop( ); Oś czasu klipu odtwarzana w pętli

Klipy filmowe Testowanie klipów jest możliwe prawie wyłącznie po wyeksportowaniu filmu do pliku .swf Mogą być sterowane „z zewnątrz” kodem ActionScript i same mogą zawierać kod Można stosować do nich filtry Można z nich wykonać przyciski klipów filmowych (bardziej złożone przyciski) Można je tworzyć dynamicznie z poziomu ActionScript

Sposoby tworzenia klipów Ręczne (Wstaw > Nowy Symbol> Klip ...) Poprzez utworzenie jego instancji z poziomu ActionScript w klasie MovieClip lub Sprite: var myClip:MovieClip = new MovieClip(); ....//definiowanie grafiki var myMask:Sprite = new Sprite(); addChild(myClip); addChild(myMask); myClip.alpha = 50; myMask.buttonMode = true;

Manipulowanie klipami Zmiana właściwości klipów poprzez AS: x – pozioma pozycja klipu filmowego na scenie y – pionowa pozycja klipu filmowego na scenie scaleX – pozioma skala klipu filmowego, reprezentowana procentowo scaleY – pionowa skala klipu filmowego height – wysokość klipu filmowego w pikselach width – szerokość klipu filmowego w pikselach

Manipulowanie klipami alpha – poziom przezroczystości klipu filmowego w skali od 0 do 1 rotation – rotacja klipu filmowego w stopniach visible – wartość logiczna określająca, czy klip jest widoczny (true), czy niewidoczny (false)