Zmiany

Skocz do: nawigacji, wyszukiwania

Animacja poklatkowa: wzrost kwiatka

Dodane 290 bajtów, 09:52, 5 maj 2017
[[Category:Scenariusze Scratch]] [[Category:Mistrzowie Kodowania]]
'''Materiały stworzone przez Fundację Coder Dojo Polska w ramach Programu „Mistrzowie Kodowania” finansowanego przez Samsung Electronics Polska, objęte licencją CC BY 3.0 PL "Creative Commons Uznanie Autorstwa 3.0 Polska".'''
animacja powstała według scenariusza: http://scratch.mit.edu/projects/26076718/
aplikacja z samą grafiką: http://scratch.mit.edu/projects/26076730/
== Cel ==
Stworzenie animacji poklatkowej przy pomocy Scratcha.
<small>Czas na realizację tej części: ok 70 min</small>
Zaczynamy od stworzenia nowego duszka. Tym razem narysujemy go samodzielnie. Klikamy w drugą ikonkę spośród ikonek umożliwiających stworzenie nowego duszka:
[[Plik:Ikona2.png|Opcje wstawienia nowego duszka, od lewej: wybór z galerii, stworzenie nowego od podstaw, załadowanie duszka z pliku, wykonanie fotografii przez kamerę laptopa]]
Po stworzeniu nowego duszka można skasować podstawowego kotka. W tym celu klikamy prawym przyciskiem myszy na kota i wybieramy usuń.
[[Plik:duszek_opcjeMotyl1.png|Menu kontekstowe duszka umożliwiające m.in. jego usunięcie]]
W nowym duszku nie ma jeszcze "kostiumów", dlatego jest na razie niewidoczny (przezroczysty). Aby dodać duszkowi kostiumy przełączamy się w tryb edycji kostiumów duszka (zakładka '''kostiumy''').
Edytor kostiumów Scratch ma dwa tryby pracy:
* [//pl.wikipedia.org/wiki/Grafika_wektorowa wektorowy]
* [//pl.wikipedia.org/wiki/Grafika_rastrowa rastrowybitmapowy]
[[Plik:Edytor1.png|350px|wektorowy]] i [[Plik:Edytor2.png|350px|bitmapa]]
Upraszczając'''Wskazówka: ''' jeśli malujemy coś sami (tak jak teraz) to lepiej używać trybu wektorowego. Nasza grafika wygląda w tym trybie dobrze niezależnie od tego, jak bardzo ją powiększymy. Grafika bitmapy będzie pomocna, gdy będziemy chcieli skorzystać z samodzielnie wykonanych zdjęć.
Wybieramy tryb wektorowy (prawy dolny róg ekranu - '''przekształć w wektor''').
Tuż nad guzikiem przełączającym tryb pracy wektor-bitmapa mamy regulator powiększenia, który pozwoli wygodniej pracować z grafiką.
Nasza praca będzie polegała na narysowaniu kolejnych kostiumów duszka -klatek animacji. Każdą nową pozę klatkę naszego duszka dodajemy za pomocą ikonki [[Plik:Ikona1.png|nowy kostium]] w zakładce '''kostiumy'''. Pamiętać musimy przy tym, aby mieć aktywnego będziemy tworzyli poprzez skopiowanie klatki poprzedniej (podświetlonegoklikamy prawy przycisk myszy i wybieramy opcję duplikuj) naszego duszka i dorysowanie w oknie '''Duszki'''niej nowych elementów. Im więcej ruchów naszego duszka będziemy chcieli pokazać w animacji, tym więcej kostiumów musimy stworzyć.W nowym duszku nazwanym np.: '''kwiatek''' tworzymy pierwszy kostium: zalążek rośliny. Duplikujemy pierwszy kostium i dorysowujemy kolejną część, np.: łodyżkę wychodzącą z zalążka rośliny.
[[Plik:Nowy_kostium.png|Nowy kostium tworzymy za pomocą ikonki identycznej, jak te służące do tworzenia nowego duszka(pędzelek), ale umieszczonej w innej sekcji'''nowy kostium''']]
==== przykład: wzrost kwiatka - kostiumy ====
W nowym duszku nazwanym np.: '''kwiatek''' tworzymy pierwszy kostium: zalążek rośliny. Duplikujemy pierwszy kostium i dorysowujemy kolejną część, np.: łodyżkę wychodzącą z zalążka rośliny. Następnie duplikujemy drugi kostium i dorysowujemy nowe fragmenty naszego kwiatka. Czynność powtarzamy tak długo, aż dostaniemy w pełni rozwiniętego kwiatkarozwiniętą roślinę.
[[Plik:Okno10.png|700px|tworzenie kolejnych kostiumów do animacji]]
Mamy już gotowego bohateraduszka. Zaproponujmy uczniom stworzenie dla niego odpowiedniego tła na scenie. W tym celu należy przejść do zakładki sceny w dolnym lewym rogu , a następnie aktywować jej tła. Tło uczniowie mogą wybrać z biblioteki lub narysować samodzielnie. Tworzy się je analogicznie do kolejnych kostiumów duszka.
=== Z użyciem kamery laptopa ===
[[Plik:Klocek10.png|powtarzaj ciągle]] robić dwie rzeczy:
# Zmienia kostium na następny
# Czeka krótki moment, np. pięć setnych (0.05) sekundy - bez tego animacja byłaby zbyt szybka (oczywiście wartość można regulować). Film w telewizji ma zwykle 23 klatki na sekundę, a więc jedna klatka trwa ok. 0.04 sekundy. Przypominamy uczniom klocek [[Plik:Klocek3.png|wstrzymanie czasu]]
Przykładowy skrypt animacji może wyglądać tak:
Podstawową aplikację można rozszerzyć o:
# dźwięk - odstęp czasowy pomiędzy klatkami w tym przykładzie jest stały i wynosi 0.05 sekundy, stąd łatwo obliczyć kiedy konkretna klatka się wyświetli (numer duszka * 0.05s) - w ten sposób równolegle do kodu animacji może biec kod ścieżki dźwiękowej
# lista dialogowa listę dialogową - podobnie film można wzbogacić o dymki - wypowiedzi aktorów , podobnie jak w niemych filmach, wówczas . Wówczas kostium z zapisanymi dialogami wyświetlamy przez dłuższy czas, np. 2 sekundy
1495
edycji