Първа анимация - кадър по кадър

Ниво 1 · Урок 5 · Програмиране с MakeCode (micro:bit)

Няколко картинки на светодиодите на micro:bit се редуват една след друга - първата истинска анимация, кадър по кадър.

Част AВъведение

Какво ще направим?

Анимацията е поредица от картинки (кадри), които сменяме бързо. Ще накараме една точка да „подскача“ от единия край на екрана до другия.

Дай на класа минута да предположи как ще стане, преди да продължиш. Целта е да измислят стъпките сами.

Част AАналогия от живота

Флипбук тефтерче

Нарисувай човече на всяка страница малко по-различно и прелисти бързо - то се раздвижва. Анимацията на micro:bit е точно такъв флипбук от кадри.

Аналогията прави абстрактното конкретно - задръж на нея, докато класът я схване.

Част BКак мисли програмата

Как работи?

Разгледай схемата: редът на блоковете е важен - програмата тръгва отгоре надолу.

Филмите и игрите се движат, защото показват много картинки (кадри) една след друга. Окото ги слива в движение. Тук имаме два кадъра - точка отляво и точка отдясно - а блокът „пауза“ ни дава контрол над времето между тях.

Част CСтроим програмата блок по блок - не я преписваме наготово

Кодът стъпка по стъпка

Всяка стъпка добавя по едно нещо и казва защо. Пускай програмата СЛЕД всяка стъпка - детето вижда промяната, вместо да я приема наготово.

Част DЖив симулатор на MakeCode - програмата работи наистина

Пробвай на живо

Пусни симулатора на дъската и покани деца да натискат бутоните. Свържи видяното с кода от предишния дял.

Част EЦъкни отговор - зелено вярно, червено грешно

Въпрос 1 от 2

Какво създава илюзията за движение?

Бърза смяна на кадри
Силен звук
Много цветове
Голям екран

Дай време за мислене. Цъкането оцветява избора; „Покажи верния" показва отговора на дъската.

Част EЦъкни отговор - зелено вярно, червено грешно

Въпрос 2 от 2

Кой блок дава време между кадрите?

пауза
покажи икона
завинаги
изчисти екрана

Дай време за мислене. Цъкането оцветява избора; „Покажи верния" показва отговора на дъската.

Част FГотови решения нарочно няма - търси, греши и пробвай пак

Твой ред да твориш

★ Направи движението по-бавно или по-бързо (смени паузата).
★★ Добави трети кадър - точка в средата.
★★★ Накарай точката да минава през целия екран (повече кадри).

измисли свое Измисли своя анимация: сърце, което бие; човече, което маха; ракета, която излита.

Насърчи промяна и разширяване, не копиране. Звездите са трудност, а „измисли свое" е поканата да излязат извън урока.

За учителяОрганизация на часа

Честа грешка

Не се вижда движение! Без пауза двата кадъра се сменят толкова бързо, че окото вижда само размазано петно.

✓ Добави пауза Сложи „пауза“ между кадрите. Започни с 300-500 ms и намалявай, докато движението стане гладко.

Речник

Кадър (frame) - Една картина от анимацията.

Анимация - Бърза поредица от кадри, която изглежда като движение.

Пауза - Изчакване, което дава време да видим кадъра.

Как върви часът

1. Идея. Класът предполага как ще стане, преди да види кода.

2. Кодът - по един блок. Пускай след всяка стъпка.

3. На живо. Симулаторът свързва кода с резултата.

4. Твой ред. Задачите нямат готови решения - нарочно.

Откъде е урокът: курс „Програмиране с MakeCode" (micro:bit) на stemprojects.eu. Блоковете са наши, на български; програмата се СТРОИ стъпка по стъпка, не се преписва наготово.