1. Základní informace o projektu

Název

Tvorba mobilní Android aplikace založené na animaci

Anotace programu/zaměření/hlavní cíl

Cílem projektu je postupně zvládnout tvorbu mobilní Android aplikace s využitím programů založených na animaci, jako je např. Adobe Flash Professional nebo Stencyl.

Cílová skupina

Žáci 1. až 3. ročníků středních škol a odpovídajících ročníků gymnázií.

Organizační podmínky

Pomůcky

Osobní počítač (popř. notebook); Adobe Flash Professional s podporou jazyka ActionScript 3.0 (tzn. Adobe Flash CS3 a vyšší); aplikace Stencyl; tablet nebo mobilní telefon s operačním systémem Android (případně emulátor pro OS Android); digitální fotoaparát.

Časová náročnost (popř. jak je možné program rozložit – jedná- li se o celoroční program)

Vazba na RVP

• RVP pro Gymnázia: Vzdělávací oblast Informatika a informační a komunikační technologie,
• RVP pro střední odborné vzdělávání se vzdělávací oblastí: Vzdělávání v informačních a komunikačních technologiích (jejichž koncepce ŠVP zahrnuje tematické vyučovací celky orientované na rastrovou, vektorovou grafiku a základy algoritmizace.

Mezipředmětové vazby

V závislosti na jednotlivých aktivitách.

Fáze projektu

1. Seznámení se s možnostmi realizace Android aplikací bez nutnosti hluboké znalosti programovacího jazyka.
2. Příprava prostředí Adobe Flash Professional a instalace platformy Adobe AIR pro vývoj Android aplikací a jejich spouštění.
3. Tvorba Android aplikací a jejich následné publikování do zařízení s OS Android.
4. Prezentace vlastních aplikací.
5. Hodnocení.

2. Motivační rámec projektu

Odkud se berou aplikace pro tablety a mobilní telefony?

Jistě už některé z vás napadla myšlenka, že by bylo skvělé vytvořit si vlastní aplikaci pro tablet nebo dotykový telefon s operačním systémem Android. Také jste možná přemýšleli o tom, odkud se bere to nepřeberné množství všech těch aplikací a her např. na Google play. Možná tomu nebudete věřit, ale hry a aplikace nevyrábí jen společnosti jako Gameloft nebo Glu, ale také jednotlivci nebo malé několikačlenné skupiny, jako třeba vy a vaši kamarádi (spolužáci apod.), tak proč se nepokusit realizovat vlastní aplikaci pro mobilní zařízení?

Android aplikace bez nutnosti rozsáhlých znalostí programovacích jazyků?

Někteří z vás si jistě řeknou, že bez znalosti programovacího jazyka, jakým je např. Java, C# nebo Python (a dalších rozšiřujících balíčků k těmto jazykům) snad ani není možné mobilní aplikaci vytvořit, ale opak je pravdou. Abyste vytvořili pěknou uživatelsky přívětivou aplikaci nebo hru, nemusíte v současnosti znát ani jeden z výše uvedených jazyků, protože existují nástroje, které vám mohou vývoj vaší aplikace usnadnit a váš sen o vlastní mobilní aplikaci uskutečnit.

Pokud patříte k těm, kteří vždy chtěli vytvořit aplikaci pro mobilní zařízení (s OS Android) a učit se programovat až potom, pak právě pro Vás je určen tento projekt. A nejen pro vás.

Doporučený multimediální materiál

Ilustrativní fotografie.

Motivační video.

Odkazy do internetu k dalším motivačním materiálům a zdrojům.

Odkazy na 30denní zkušební verzi Adobe Flash Professional CC

Odkaz na aplikaci STENCYL

Odkaz na aplikaci GameSalad Creator

3. Poznámky k využití přístrojů a nástrojů

Bez čeho se při vývoji aplikací animačními technikami neobejdeme?

Ani v dnešní době se většina vývojářů nejrůznějších počítačových programů a aplikací neobejde bez svého osobního počítače, notebooku (laptop, 2 v 1) nebo jiného zařízení s dostatečně velkým zobrazovacím panelem (monitorem) a operačním systémem s podporou celé řady prostředí pro vývoj aplikací.

PC                                                            Notebook

Při grafickém návrhu vzhledu aplikace si jistě člověk vystačí pouze s myší, ale vždy pomůže a celou práci ještě více usnadní co největší plocha dotykového zobrazovacího panelu. Bohužel takové zařízení bývá i v dnešní době finančně nákladné, a tak si člověk, který není zvyklý při kreslení používat myš, musí vystačit např. s tabletem a pro přesnější práci spolu s ním může použít stylus. Tablet nebo mobilní telefon s dotykovým displejem a operačním systémem Android zároveň využijeme ke spouštění našich vytvořených aplikací.

Tablet

Vývojářské nástroje

K vývoji aplikací založených na animaci není nutné znát syntaxi konkrétních programovacích jazyků, často stačí jen aplikovat logické postupy v programech, které podporují tento způsob vývoje Android nebo také iOS aplikací. Mezi takové můžeme zařadit např. programy GameSalad nebo Stencyl, které jsou primárně určeny pro vývoj her a jejich nespornou výhodou je především jejich cena (obě jsou volně dostupné ke stažení a užívání).

Speciální výjimku tvoří dlouhá léta vyvíjený a zdokonalovaný nástroj Flash Professional od firmy Adobe. Tento nástroj také umožňuje realizovat aplikace založené na technikách animace a zároveň nabízí plnou podporou programovacího jazyka ActionScript s implementací pokročilých objektově orientovaných programovacích technik. Jeho nevýhodou může být cena, která se pohybuje v řádu několika tisíc korun. Společnost Adobe však často nabízí (aktuálně v rámci služby Creative Cloud) i zvýhodněné programové "balíky" pro školy nebo studující jednotlivce.

Aplikace vyvinuté v prostředí Adobe Flash Professional potřebují ke svému spuštění na různých zařízeních platformu Adobe AIR, která vývojářům umožňuje používat osvědčené webové technologie k tvorbě internetových aplikací a implementovat tyto technologie tak, aby se daly snadno používat a uživatel je měl stále při ruce.

Emulátory

V případě, že nevlastníme nebo po dobu vývoje nemáme k dispozici tablet nebo telefon s dotykovým displejem a s operačním systémem Android, přichází v úvahu efektivní řešení v podobě Android emulátoru, kterých existuje celá řada a zvládnou po všech stránkách (snad kromě telefonování ☺) zastoupit fyzické zařízení. Často mají tu výhodu, že podporují speciální funkce pro vývojáře a většina z nich je volně dostupná. Mezi nejznámější emulátory patří např. BlueStacks, YouWave, Jar Of Beans, GenyMotion.

4. Informační tablo naší třídy jako aplikace v mobilu (tabletu)

Doporučený multimediální materiál

1. Příprava pozadí aplikace, nadpisu a manipulace s pracovní plochou prostředí Adobe Flash Professional:

2. Import fotografií a obrázků do knihovny v Adobe Flash Professional:

3. Vkládání fotografií a obrázků (importovaných do knihovny) na pracovní plochu v Adobe Flash Professional, základní transformace obrázků a fotografií a jejich umístění na ploše:

4. a) Převod obrázku či fotografie na tlačítko, tvorba vlastního obrázkového tlačítka:

    b) Vkládání nových klíčových snímků na časové ose projektu a zvýšení počtu pracovních ploch v připravované aplikaci:

5. Volání události tlačítka po stisknutí s odkazem na definovaný klíčový snímek:

• přechod na další "obrazovku":

• přechod na informace o spolužácích:

Sami zkuste vytvořit nové klíčové snímky, kdy každý z těchto snímků bude sloužit jako jednoduchý profil pro jednotlivé vaše spolužáky (do všech "profilů" nezapomeňte vložit větší fotografii se spolužákem a základní textové informace, které o spolužákovi máte). Z malých fotografií (náhledů na úvodních obrazovkách), které jste si připravili jako symboly tlačítek, vytvořte interaktivní tlačítka s odkazy na jednotlivé profily spolužáků.

6. Publikování finální aplikace a její spuštění v operačním systému Android.

Před publikováním (exportováním a spuštěním aplikace na vašem mobilním zařízení nebo v emulátoru) je nutné vytvořit 3 vzhledově stejné rastrové ikony, které budou vaši aplikaci reprezentovat na příslušném zařízení. Fantazii při návrhu ikon se meze nekladou, je však nutné respektovat několik pravidel, bez kterých by výslednou aplikaci nebylo možné publikovat:

1. rastrové obrázky ikon musí být ve formátu PNG (výhodou je podpora průhlednosti);
2. rastrové obrázky ikon musí být ukládány (exportovány) ve velikostech "opsaného čtverce" (v pixelech): 36 x 36, 48 x 48, 72 x 72.

Podobné aplikace v podobě interaktivní prezentace mohou být koncipovány k nejrůznějším účelům, nejen jako tablo prezentující žáky, ale podobně může být princip takové aplikace využit při tvorbě sbírky vzorečků nebo krátkých poznámek k nejrůznějším předmětům či jako prezentace školy, sborník nejrůznějších oblíbených fotografií, restaurací, jídel, nápojů, receptů nebo jiných postupů. Se spolužáky zkuste vymyslet i další koncepční využití takové aplikace.

5. Tvoříme hru pro Android

Doporučený multimediální materiál

1. Poslední verzi programu Stencyl je možné stáhnout přímo z webových stránek produktu na www.stencyl.com/download/. Startovací verze programu (Starter) je zdarma, avšak placené verze (Indie a Studio), jak už to tak bývá, nabízejí další rozšíření. Nejdražší verze Studio pak zahrnuje vše, co verze Indie, další podporu uvedenou níže v tabulce.

2. Instalace a spuštění programu Stencyl

• Instalace programu probíhá standardním způsobem (postupnými kroky se zobrazováním dialogových oken s umístěním instalované aplikace na lokálním disku) jako u většiny aplikací, proto komukoliv, kdo někdy nějaký program instaloval, nebude cizí ani postup instalace tohoto programu.
• Po prvním spuštění programu se objeví dialogové okno s možností vytvoření uživatelského účtu (obrázek 1a), které po zadání identifikačních informací o uživateli (obrázek 1c) umožňuje ukládat realizované projekty vytvořené v aplikaci prostřednictvím cloudového úložiště. Registrace může být odložena tlačítkem připomenout později (obrázek 1b).

• Registraci lze provést také přímo na webové stránce produktu Stencyl: www.stencyl.com/register

3. Vytvoření (založení) nové hry

• Možností, jak vytvořit (založit) projekt s novou hrou, je hned několik. Zeleným tlačítkem (obrázek 2a), kliknutím do oblasti ohraničené čárkovanou čarou uprostřed pracovní plochy (obrázek 2b) - v takovém případě je nutné mít označenou položku Games v levé nabídce My products. Nebo je možné projekt s novou hrou vytvořit klasicky prostřednictvím hlavní lišty položkou File → Create New → Game (obrázek 2c).

• V úvodu vytvoření projektu s novou hrou je možné tlačítkem Get Simple Games / Kits vybrat z již hotových volně dostupných herních projektů, které byly realizovány komunitou Stencylvybrat nebo vytvořit prázdný projekt s hrou Blank Game od začátku a pokračovat (obrázek 3a).
• V dalším kroku po výběru prázdného projektu je vyžadováno vyplnění položek s názvem hry (obrázek 3b) a nastavení rozměrů (šířky a výšky) herní obrazovky (obrázek 3c).
• Tlačítem Create se vytvoří projekt s dříve nastavenými základními parametry hry.

4. Příprava pozadí hry

• K vytvoření pozadí ve hře je nutné si připravit vhodný obrázek nebo barevnou plochu, na které dobře vyniknou (budou v kontrastu) ostatní herní prvky, jako hlavní hrdina, herní bloky (reprezentující zem, po které se bude hrdina pohybovat) a bonusy, které bude hrdina sbírat.
• Příprava položky reprezentující obrázek na pozadí může být provedeno tlačítkem (obrázek 4a) nebo kliknutím do oblasti ohraničené čárkovanou čarou uprostřed pracovní plochy (obrázek 4b) - v takovém případě je nutné mít označenou položku Backgrounds v levé nabídce Resources.
• Při pojmenování položky reprezentující pozadí (obrázek 4c) stejně jako i další položky v rámci projektu musí být pojmenovány bez diakritiky.

• Snímek herního pozadí může být přidán kliknutím do oblasti ohraničené čárkovanou čarou v levé části pracovního okna (obrázek 5a) nebo tlačítkem s ikonou ozubeného kola v pravém dolním rohu pracovního okna (obrázek 5b) a následně volbou Add Frame. V dialogovém okně s názvem Add Frame pomocí tlačítka Choose Image (obrázek 5c) se otevře okno s možností procházení souborů na lokálním disku a dohledat připravený obrázek pozadí už bude snadné.
• Po výběru připraveného obrázku pozadí se rozsvítí tlačítko Add v pravém dolním okraji dialogového okna. Tím se obrázek přidá jako snímek, který pak bude viditelný v pracovním okně nejen na pozici 5a, ale také bude evidován pod položkou levé postranní nabídky Backgrounds na záložce Dashboard.

5. Realizace herního prostředí

• Prostředím hry jsou myšleny především nejrůznější plochy, překážky a bariéry v popředí, po kterých se může herní postava pohybovat nebo kterým se má vyhýbat. Stejně jako v případě obrázku na pozadí, tak i objekty herního prostředí je nutné do projektu vložit. V případě přípravy zcela vlastní hry bude nutné vyvtvořit v nějakém grafickém editoru rastrové obrázky reprezentující herní prostředí. Pokud při prvotním návrhu obrázků na nějaké prvky herního prostředí člověk zapomene, vždy se dají přidávat další.
• Do projektu hry se položky herního prostředí vkládají obdobně jako v případě herního pozadí a jiných herních prvků, tedy tlačítkem (obrázek 6a) nebo kliknutím do oblasti ohraničené čárkovanou čarou uprostřed pracovní plochy (obrázek 6b) - v obou případech je nutné mít označenou položku Tilesets v levé nabídce Resources.
• Jako u jiných položek, tak i zde je nutné položku projektu pojmenovat bez diakritiky (obrázek 6c).

• Nyní je možné z lokálního disku vybrat připravený obrázek s herními prvky prostředí (obrázek 7a) a pomocí tlačítka Add přidat vytvořenou položku.
• Před návratem na hlavní stránku projektu se může s obrázkem herního prostředí dále pracovat a mohou být nastaveny jeho vlastnosti, jako např. tvar oblasti kolize s objektem (obrázek 7c). Oblast kolize je důležitý herní aspekt, který je nastavován nejen u herního prostředí, ale také u herních postav. Určuje reakční oblast daného objektu, tedy v případě prostředí musí být určena oblast, po které se herní postava pohybuje (případně do které herní postava naráží).
• Další možnosti práce s obrázky prostředí jsou např. přidávání dalších obrázků prostředí v rámci jedné položky tlačítkem Import Frames (obrázek 7d) či tlačítkem s ikonou ozubeného kola (obrázek 7b) a pak položkou Add Tiles, dále je možné editovat (popř. odstraňovat) stávající obrázky prostředí jako celek nebo jen jednotlivé dílky (obrázek 7e).
• Uložení všech úprav se provede automaticky po zavření záložky s obrázky herního prostředí (obrázek 7f).

6. Realizace herních postav

• Na podobném principu vytváření položek připravených obrázků (uložených na lokálním disku) fungují také další herní prvky, jako herní postavy Actor Types.
• Úkol: Zamyslete se nad tím, jak se budou jednotlivé herní postavy (hrdina, se kterým pohybuje hráč, a záporné postavy) pohybovat (směry pohybu, výskoky apod.), vytvořte obrázky těchto postav v různých polohách (pohled postav podle směru pohybu, pohyb, výskok apod.) a vložte svoje obrázky do herního prostředí k jednotlivým postavám. Jednotlivé typy postav by v projektu měly být vidět jako položky. Také si uvědomte, že případné bonusy, které bude "hrdina" sbírat, jsou také jedním typem herní postavy.

7. Realizace herní scény

• Dříve navržené herní prvky (pozadí, prostředí a postavy) bude možné zkombinovat v prostředí herní scény.
• Úkol: Vytvořte položku herní scény s názvem Level01 a navrhněte prostředí 1. kola hry tím, že vložíte dříve připravené herní prvky do scény (prvky najdete v sekcích návrhu scény nazvaných jako Tiles a Actors). Pozadí hry vložte jako novou vrstvu umístěnou zcela dole. Připravenou scénu otestujte na platformě Flash (Player) tlačítkem Test Scene.

6. Závěrečné poznámky a zdroje

Zdroje multimediálního materiálu

Obrázky:

Kapitola 3:

Obrázek stolního PC pod CC0 public domain licencí použit ze zdroje: http://pixabay.com/en/computer-desktop-modern-device-154114/

Obrázek notebooku pod CC0 public domain licencí použit ze zdroje: http://pixabay.com/en/laptop-notebook-mobile-computer-154091/

Obrázek tabletu byl vytvořen autorem kurzu.

Loga jednotlivých aplikací a vývojových prostředí byla získána z oficiálních stránek jednotlivých popisovaných produktů.

Kapitola 5:

Obrázky demonstrující postup práce byly autorem kurzu nasnímány a doplněny o popisky ve volně dostupných grafických editorech.

Videa:

Kapitola 2:

Motivační videa demonstrující přípravu principiálně podobné Android aplikace ve třech různých prostředích byla použita z video-serveru youtube:

Flash projekt: https://www.youtube.com/watch?feature=player_embedded&v=_jZBe1KGhnc

Stencyl projekt: https://www.youtube.com/watch?feature=player_embedded&v=CCt-8i4Cnqk

GameSalad projekt: https://www.youtube.com/watch?feature=player_embedded&v=xlIabLJf8To

Kapitola 4:

Videa demonstrující postup práce a ukázky finálních produktů byla zaznamenána autorem pomocí programu Adobe Captivate dostupného na katedře výpočetní a didaktické techniky na FPE ZČU v Plzni pouze pro účely tohoto kurzu.