Wydrukuj Pobierz materiał do PDF Pobierz materiał do EPUB Pobierz materiał do MOBI Zaloguj się, aby skopiować i edytować materiał Zaloguj się, aby udostępnić materiał Zaloguj się, aby dodać całą stronę do teczki

W tym materiale zapoznasz się z procesem tworzenia swojej pierwszej animacji przy użyciu języka Scratch. Realizując ćwiczenia dowiesz się w jaki sposób spowodować, aby duszek się poruszał.

Ważne!

Poniższe ćwiczenie wymaga znajomości środowiska Scratch. Chcąc zapoznać się z podstawami tworzenia skryptów zajrzyj do materiału Wprowadzenie do środowiska ScratchP9AYGQXHJWprowadzenie do środowiska Scratch.

Pierwsza animacja: Duszek na spacerze

Ten materiał pomoże ci przygotować twoją pierwszą animowaną historyjkę w środowisku Scratch. Duszek będzie spacerował po pomoście na tle jeziora. Gdy dojdzie do końca sceny, zawróci i zacznie iść z powrotem. Spacer rozpocznie po uruchomieniu programu zieloną flagą, a gdy go zatrzymasz wybierając przycisk stop, duszek zakończy spacer.

Skorzystaj z dołączonego notatnika do zapisania wszelkich uwag.

R15FiCHqrI6nm
Źródło: GroMar, licencja: CC BY 3.0.

Zmiana tła sceny

Realizację zadania rozpoczniemy od zmiany domyślnego tła.

1
Ćwiczenie 1

Wybierz z galerii tło, które jest podpisane Boardwalkma7b4c8881bf1197c_d532e200Boardwalk i przedstawia pomost nad jeziorem. Pomoże Ci w tym poniższy film.

R8UfIUGRl4GgU
Film przedstawia najechanie na przycisk do ustawienia tła sceny i wybranie opcji "Wybierz tło" z rozwijanej listy. Po kliknięciu tej opcji następuje otworzenie nowego okna z dostępnymi grafikami. Następnie narrator najeżdża kursorem na tło "Boardwalk" i zatwierdza wybór kliknięciem myszy.

Dodawanie i usuwanie duszków

Kotek oczywiście może spacerować nad jeziorem. Spróbujmy  jednak dobrać inną postać, np. dziewczynkę.

1
Ćwiczenie 2

Dodaj z galerii nowego duszka przedstawiającego spacerującą dziewczynkę. Jest podpisana jako Avery Walkingma7b4c8881bf1197c_d532e299Avery Walking.

Przesuń duszka dziewczynki na lewą stronę sceny – pomostu.

1
Ćwiczenie 3

Usuń niepotrzebnego duszka - kotka.

Budujemy skrypty dla duszka - dziewczynki

Możesz teraz przesuwać duszka o określoną liczbę kroków, na przykład po naciśnięciu klawisza spacji. Jeśli nie zastosujesz polecenia jeżeli na brzegu, odbij się, duszek wyjdzie poza scenę. Dodatkowo, możesz wyświetlać informacje w dymku komiksowym.

Spróbuj teraz zautomatyzować zachowanie dziewczynki. Niech po kliknięciu w zieloną flagę wyświetli informację, że zaraz rozpocznie spacer i zacznie samodzielnie chodzić aż do momentu, w którym naciśniesz przycisk stop na pasku narzędziowym. Po dojściu do krawędzi sceny dziewczynka powinna się obrócić i pójść w przeciwną stronę.

2
Ćwiczenie 4

Przygotuj skrypt dla dziewczynki realizujący samodzielny spacer nad jeziorem.

2
Ćwiczenie 5

Zapewne podczas testowania skryptu, wykonanego w poprzednim zadaniu, zwrócił twoją uwagę fakt, że dziewczynka po zmianie kierunku idzie „do góry nogami”. Dzieje się tak, ponieważ duszek, obracając się, kręci się dookoła swojego domyślnego środka. Spróbuj odnaleźć i dodać do skryptu odpowiedni blok, który spowoduje, że duszek będzie obracał się tylko w prawą lub w lewą stronę. Zastanów się, gdzie i dlaczego ten blok powinien zostać wstawiony do skryptu, który już istnieje.

Duszek - dziewczynka porusza się już samodzielnie na scenie; możesz dodać jeszcze do projektu animację. Spacerując, dziewczynka powinna poruszać nogami.

Ważne!

Animować można duszki, które mają więcej niż jeden kostium. Wybierając zakładkę Kostiumy, sprawdzisz, ile kostiumów ma dany duszek. Spacerująca dziewczynka w tym projekcie ma cztery kostiumy, które możesz cyklicznie zmieniać (następnym kostiumem po ostatnim jest ponownie pierwszy).

R15bSM37m1M4e
Kostiumy animowanego duszka.
Źródło: GroMar, licencja: CC BY 3.0.

Animację ruszania nogami dodamy poprzez rozbudowę skryptu, który wprawił naszego duszka w ruch.

2
Ćwiczenie 6

Przygotuj skrypt animujący duszka w taki sposób, że zmieniając swoje położenie (tak jak w poprzednim skrypcie), będzie sprawiał wrażenie poruszania nogami. Uwzględnij blok czekaj przy zmianie kostiumu oraz zmień liczbę kroków na 6, aby animacja przebiegała płynniej. W tym celu utwórz nowy projekt w Scratch i nazwij go „Spacer nad jeziorem”.

Ważne!

Pamiętaj o zapisaniu programu.

ma7b4c8881bf1197c_d532e201
ma7b4c8881bf1197c_d532e211
ma7b4c8881bf1197c_d532e220
ma7b4c8881bf1197c_d532e229
ma7b4c8881bf1197c_d532e238
ma7b4c8881bf1197c_d532e253
ma7b4c8881bf1197c_d532e418
ma7b4c8881bf1197c_d532e307

Zadania uzupełniające

Ciekawostka

Ponieważ komputer może wykonywać jednocześnie wiele poleceń, możliwe jest przygotowanie dla niego kilku zadań w postaci oddzielnych skryptów. Dla przykładu, mając skrypt, który powoduje, że duszek porusza się na scenie, można dodać drugi skrypt, który spowoduje, że dzięki zmianie kostiumów duszek będzie animowany. Oba skrypty będą działały jednocześnie.

1
Ćwiczenie 7

Dopisz drugi skrypt do projektu Scratch Spacer nad jeziorem. Po kliknięciu w duszka wyświetli się w dymku informacja, że za chwilę (np. po dwóch sekundach) duszek zakończy spacer i zatrzyma się.

2
Ćwiczenie 8

Stwórz nowy projekt w Scratch o nazwie „Spacer kotka nad jeziorem”. Twoim zadaniem będzie zaprogramowanie duszka, aby poruszał się po scenie w animowany sposób. Aby rozpocząć spacer, wystarczy kliknąć na duszka. Po kliknięciu, duszek będzie zmieniać swoje kostiumy w sposób animowany, a na ekranie wyświetli się komunikat „Zaraz rozpocznę spacer nad jeziorem.”. Ten komunikat pozostanie widoczny przez 2 sekundy. Jeśli ponownie klikniesz na duszka, skrypt zostanie zatrzymany po 2 sekundach, a na ekranie pojawi się komunikat „Zaraz zakończę spacer”.

Twoje cele

Wybierz tło Boardwalkma7b4c8881bf1197c_d532e200Boardwalk z galerii obrazów jako tło dla swojej sceny. W ten sposób stworzysz atmosferę spaceru nad jeziorem.

Ważne!

Należy zaprogramować duszka tak, aby odbijał się od krawędzi sceny, gdy do niej dotrze. Dzięki temu duszek będzie unikał wychodzenia poza obszar sceny.

RpqGDXWjIMoyp
Film przedstawia działanie aplikacji. Widoczna jest scena programu ustawiona na molo z morzem w tle. Na pierwszym planie widoczny jest duszek - kotek. Po kliknięciu zielonej flagi wyświetla on komunikat "Zaraz rozpocznę spacer nad jeziorem." przez 2 sekundy. Po tym czasie duszek zaczyna się poruszać przełączając na zmianę między dwoma kostiumami. Po kliknięciu duszka pojawia się komunikat "Zaraz zakończę spacer.". Widoczny jest on przez 2 sekundy i zatrzymuje poruszanie duszka.
2
Ćwiczenie 9

Stwórz nowy projekt pt. „Pływająca rybka w akwarium”, w którym rybka będzie poruszać się we wszystkich kierunkach na tle podwodnej scenerii. Ustaw tło sceny na jedno z dostępnych opcji Underwaterma7b4c8881bf1197c_d532e311Underwater oraz użyj duszka Fishma7b4c8881bf1197c_d532e312Fish z wybranym przez ciebie kostiumem. W przykładzie został użyty domyślny kostium dla rybki. Po uruchomieniu skryptu, rybka będzie poruszać się o 3 kroki i odbijać od brzegu. Kliknięcie na rybkę spowoduje zmianę jej kierunku na przeciwny. Wciśnięcie klawisza o na klawiaturze spowoduje obrót rybki w prawo w zakresie od 1 do 350 stopni. Skrypt zakończy się po naciśnięciu klawisza s.

RNYIiJiQ5smpe
Film przedstawia aplikację programu Scratch z podwodną scenerią i duszkiem rybką poruszającą się wewnątrz obszaru.
2
Ćwiczenie 10

Przygotuj nowy projekt w Scratch w celu stworzenia własnej animacji. Samodzielnie przygotuj duszka oraz tło. Aby stworzyć duszka, wybierz opcję Maluj podczas wyboru nowego duszka, a następnie użyj edytora, aby zaprojektować swoją postać. Postępuj podobnie, wybierając opcję Maluj przy tworzeniu nowej sceny, aby zaprojektować swoje własne tło. Zasada działania programu może być podobna do poprzedniego ćwiczenia, gdzie duszek zmienia kierunek po dotknięciu krawędzi okna.

Ważne!

Scena ma stałe wymiary: szerokość 480 punktów i wysokość 360 punktów. Jeśli wykorzystujesz zdjęcie jako tło, pamiętaj, aby je wcześniej przyciąć (przekształcić) w dowolnym edytorze graficznym do wymiarów 480 na 360 pikseli.

ma7b4c8881bf1197c_d532e298
ma7b4c8881bf1197c_d532e338
ma7b4c8881bf1197c_d532e299
ma7b4c8881bf1197c_d532e200
ma7b4c8881bf1197c_d532e311
ma7b4c8881bf1197c_d532e312