Osvědčené postupy – Tipy pro vytváření obsahu pro mobilní zařízení

Naposledy aktualizováno 24. 5. 2023

Vytváření obsahu v aplikaci Animate pro použití na mobilních zařízení

Chcete-li v aplikaci Animate vytvářet obsah pro mobilní zařízení, dodržujte několik základních principů. Například vývojáři, kteří pracují v aplikaci Animate, se často snaží vyhnout příliš složitým kresbám a nadměrnému používání funkcí doplnění pohybu a průhlednosti.

Flash Lite vývojáři čelí dalším výzvám, protože výkon na mobilních zařízeních se velmi liší. Pokud je nutné obsah publikovat na mnoha různých zařízeních, vývojáři někdy musí vytvořit co nejnižší společný jmenovatel.

Optimalizace mobilního obsahu vyžaduje kompromisy. Například jedna technika může zlepšit vzhled obsahu, zatímco jiná vede k lepšímu výkonu. Při hodnocení těchto kompromisů budete opakovaně postupovat mezi zkoušením v emulátoru a testováním na cílovém zařízení. Aby bylo možné vyhodnotit pravdivost barev, čitelnosti textu, fyzických interakcí, odezvy uživatelského rozhraní a dalších aspektů reálného mobilního prostředí, je nutné váš obsah vidět na samotném zařízení.

 Obsah týkající se aplikace Flash Lite nelze použít pro aplikaci Flash CC a vyšší verze.

Pravidla Flash Lite pro animace na mobilních zařízeních

Při vytváření animovaného obsahu pro mobilní zařízení mějte vždy na paměti omezení daná procesorem mobilního zařízení. Dodržováním následujících pravidel můžete předejít pomalému přehrávání obsahu Flash Lite:

  • Při vytváření nového souboru Flash Lite zkontrolujte, že je dokument správně nastaven. Přestože velikost souborů Animate lze plynule měnit, může dojít k omezení výkonu, pokud soubor nebude spuštěn s původní velikostí plochy a přehrávač bude muset změnit jeho velikost. Pokuste se nastavit velikost plochy dokumentu tak, aby odpovídala rozlišení cílového zařízení. Nastavte také přehrávač Flash Player na správnou verzi prostředí Flash Lite.

  • Flash Lite dokáže vykreslovat vektorovou grafiku v nízké, střední a vysoké kvalitě. Čím vyšší je kvalita vykreslování, tím plynuleji a přesněji Flash Lite vykresluje vektorovou grafiku a tím větší je potřeba na procesoru zařízení. Chcete-li poskytnout komplexní animaci, experimentujte se změnou nastavení kvality přehrávače a pak soubor SWF důkladně otestujte. Chcete-li ovládat kvalitu vykreslení souboru SWF, použijte vlastnost _quality nebo příkaz SetQuality. Platné hodnoty pro vlastnost _quality jsou LOW, MEDIUM a HIGH.

  • Omezit počet simultánních doplnění. Snižte počet doplnění nebo animaci seskupte tak, aby začínala od konce.

  • Efekty průhlednosti (alfa) můžete na symboly použít jen málo, protože jsou náročné na CPU. Předejděte zejména doplnění symbolů s hladinami alfa, které nejsou zcela neprůhledné (méně než 100 %).

  • Vyhněte se vizuálním efektům náročným na výkon procesoru, jako jsou velké masky, rozsáhlý pohyb, prolnutí alfa, široké přechody a složité vektory.

  • Snažte se dosáhnout co nejefektivnějších výsledků experimentováním s kombinacemi doplnění pohybu, animací s klíčovými snímky a pohybů řízených pomocí skriptu jazyka ActionScript.

  • Vykreslování vektorových elips a kruhů je mnohem náročnější na paměť než vykreslování čtyřúhelníků. Použití kulatých a oválných tahů také výrazně zvyšuje využití CPU.

  • Často testujte animace na skutečných koncových zařízeních.

  • Když aplikace Animate vykresluje oblast s animací, definuje kolem ní obdélníkový ohraničovací rámeček. Optimalizujte vykreslování tím, že bude tento obdélník co nejmenší. Vyhněte se překrývání doplnění pohybu, protože Animate interpretuje takto sloučené plochy jako jeden obdélník a tím vznikne větší celková oblast. K optimalizaci animace v aplikaci Animate použijte funkci Zobrazit překreslované oblasti.

  • Nepoužívejte _alpha = 0 a _visible = false k skrytí filmových klipů na obrazovce. Pokud jednoduše vypnete viditelnost filmového klipu nebo změníte jeho hodnotu alfa na nulu, bude stále zahrnuta do výpočtů vykreslování řádků, které mohou ovlivnit výkon.

  • Podobně se nesnažte skrýt filmový klip jeho zastíráním za jinou kresbu. Stále bude zahrnuta do kalkulací hráče. Místo toho filmové klipy zcela přesuňte mimo vymezenou plochu nebo je odeberte voláním deleteMovieClip.

Bitmapové a vektorové grafiky Flash Lite v mobilních zařízeních

Aplikace Flash Lite umí vykreslovat vektorové i bitmapové grafiky. Každý typ grafiky má své výhody i nevýhody. Důvody pro použití vektorové grafiky místo bitmapové nejsou vždy jednoznačné a rozhodnutí často závisí na více faktorech.

Vektorové grafiky jsou v souborech SWF kompaktně vyjádřené v podobě matematických rovnic a vykreslují se za běhu v přehrávači Flash Lite. Bitmapové grafiky jsou naproti tomu vyjádřené jako pole obrazových prvků (obrazových bodů), která vyžadují více bytů dat. Proto použití vektorových grafik v souboru může pomoci zmenšit velikost souboru a využití paměti.

Vektorové grafiky si také při změně velikosti zachovají plynulé tvary. Bitmapové obrazy se mohou při změně velikosti zobrazovat hrubě čtverečkované nebo rozdělené na jednotlivé obrazové body.

Ve srovnání s bitmapami vyžadují vektorové grafiky větší výkon při vykreslování, obzvláště pokud obsahují mnoho složitých tvarů a výplní. V důsledku toho může široké využití vektorových tvarů někdy snížit celkový výkon pro soubor. Protože bitmapové grafiky nevyžadují tolik času na vykreslení jako vektorové grafiky, představují pro některé soubory lepší volbu. Příkladem může být složitá automapa, která se bude animovat a posouvat na displeji mobilního telefonu.

Mějte na paměti následující pravidla:

  • Nepoužívejte obrysy u vektorových tvarů. Obrysy mají vnitřní a vnější okraj (výplně mají pouze jeden obrys) a jsou dvojnásobkem vykreslené práce.

  • Vykreslování rohů je jednodušší než vykreslování křivek. Pokud je to možné, použijte ploché okraje, zejména s velmi malými vektorovými tvary.

  • Optimalizace je užitečná zejména u malých vektorových tvarů, jako jsou ikony. Složité ikony mohou při vykreslování ztratit detaily a práce na vykreslení detailů se promrhá.

  • Obecně platí, že bitmapy jsou vhodné pro malé, složité obrazy (například pro ikony) a vektorové grafiky pro větší a jednodušší obrazy.

  • Importujte bitmapové grafiky ve správné velikosti; neimportujte velké grafiky a nezmenšujte je v aplikaci Animate, protože byste zbytečně zvětšovali velikost souboru a nároky na paměť za běhu.

  • Přehrávač Flash Lite nepodporuje vyhlazování bitmap. Pokud změníte velikost nebo otočíte bitmapu, bude mít vratký vzhled. Pokud je nutné změnit velikost nebo otočit grafiku, zvažte použití vektorové grafiky.

  • Text je v podstatě jen velmi složitý vektorový tvar. Text je samozřejmě často kritický, takže se mu lze jen zřídkakdy úplně vyhnout. Když potřebujete text, vyvarujte se jeho animace nebo ho umístěte nad animaci. Zvažte použití textu jako bitmapy. U víceřádkového dynamického a vstupního textu se zalomení řádku textového řetězce neukládá do mezipaměti. Animate zalamuje řádky za běhu a přepočítává tato zalomení vždy, když je nutné textové pole překreslit. Statická textová pole nejsou problematická, protože zalomení řádků je předem vypočteno při kompilaci. U dynamického obsahu je nevyhnutelné použít dynamická textová pole, ale pokud je to možné, zvažte raději použití statických textových polí.

  • Minimalizujte používání průhlednosti v souborech PNG; Animate musí vypočítat překreslení i pro průhledné části bitmapy. Například s průhledným souborem PNG, který představuje prvek popředí, exportujte průhledný PNG v plné velikosti obrazovky. Místo toho ho exportujte ve skutečné velikosti elementu popředí.

  • Zkuste seskupit bitmapové vrstvy dohromady a vektorové vrstvy dohromady. Animate musí použít odlišné vykreslovače pro bitmapový a vektorový obsah a přepínání mezi vykreslovači vyžaduje čas.

Nastavení komprese bitmap Flash Lite pro mobilní zařízení

Při používání bitmap můžete nastavit volby komprese obrazu (pro jednotlivé obrazy nebo globálně pro všechny bitmapové obrazy), které zmenšují velikost souboru SWF.

Nastavení voleb komprese pro jednotlivé bitmapové soubory

Spusťte aplikaci Animate a vytvořte dokument.

Vyberte bitmapu v okně Knihovna.
Klikněte pravým tlačítkem (Windows) nebo se stisknutou klávesou Ctrl (Macintosh) na ikonu bitmapy v okně Knihovna, z kontextové nabídky vyberte Vlastnosti a tím otevřete dialogové okno Vlastnosti bitmapy.
V rozbalovací nabídce Komprese vyberte jednu z následujících voleb:
  • Vyberte volbu Fotografie (JPEG) pro obrazy se složitými gradacemi barev nebo tónů, jako jsou fotografie nebo obrazy s výplněmi používajícími přechody. Tato volba vytvoří soubor JPEG. Pokud chcete použít výchozí kvalitu komprese, určenou pro importovaný obraz, zaškrtněte pole Použít importovaná data JPEG. Chcete-li určit nové nastavení kvality komprese, zrušte zaškrtnutí pole Použít importovaná data JPEG a do textového pole Kvalita zadejte hodnotu mezi 1 a 100. Vyšší nastavení vytvoří obraz s vyšší kvalitou, ale také větší soubor, takže hodnotu nastavte podle potřeby.

  • Vyberte volbu Bezeztrátová (PNG/GIF) pro obrazy s jednoduchými tvary a s málo barvami. Tato možnost komprimuje obraz pomocí bezeztrátové komprese, která nezpůsobuje ztrátu dat.

Klikněte na Testovat, pokud chcete posoudit výsledky komprese souboru.

Porovnejte velikost původního souboru s velikostí komprimovaného souboru a rozhodněte se, zda je vybrané nastavení komprese přijatelné.

Nastavení komprese pro všechny bitmapové obrazy

Vyberte Soubor > Nastavení publikování a pak kliknutím na záložku Flash zobrazte volby komprese.
Nastavte posuvníkem kvalitu obrazu JPEG nebo zadejte hodnotu. Vyšší hodnota kvality JPEG vytvoří obraz s vyšší kvalitou, ale také větší soubor SWF. Nižší kvalita obrazu vytvoří menší soubor SWF. Zkuste různá nastavení a určete nejvýhodnější kompromis mezi velikostí a kvalitou.

Optimalizace snímků Flash Lite pro mobilní zařízení

  • Většina zařízení podporujících formát Flash Lite přehrává obsah rychlostí asi 15 až 20 snímků za sekundu (fps). Kmitočet snímků může být až 6 fps. Během vývoje nastavte kmitočet snímků dokumentu tak, aby se přiblížila rychlost přehrávání cílového zařízení. To ukazuje, jak bude obsah fungovat na zařízení s omezeným výkonem. Před publikováním konečného souboru SWF nastavte kmitočet snímků dokumentu nejméně 20 fps nebo vyšší, aby se zabránilo omezení výkonu v případě, že zařízení podporuje vyšší kmitočet snímků.

  • Při použití funkce gotoAndPlay si uvědomte, že každý snímek mezi stávajícím a požadovaným snímkem se musí inicializovat předtím, než Animate přehraje požadovaný snímek. Pokud mnohé z těchto snímků obsahují jiný obsah, mohlo by být efektivnější použít jiné filmové klipy místo použití časové osy.

  • I když preloading veškerý obsah jeho umístěním na začátek souboru dává smysl na počítači, preloading na mobilním zařízení může zdržovat spuštění souboru. Umístěte obsah do celého souboru, aby se filmové klipy při použití inicializovaly.

Optimalizace ActionScriptu pro obsah Flash Lite na mobilních zařízeních

Vzhledem k omezené rychlosti zpracování a omezené paměti většiny mobilních zařízení dodržujte při vývoji ActionScriptu pro obsah Flash Lite používaný v mobilních zařízeních následující pravidla:

  • Udržujte soubor a jeho kód co nejjednodušší. Odstraňte nepoužité filmové klipy, odstraňte nepotřebné smyčky snímků a kódu a vyhněte se příliš mnoha snímkům nebo vnějším snímkům.

  • Používání smyček FOR může být drahé kvůli režii, která nastala, když se stav kontroluje s každou iterací. Pokud jsou náklady iterace a režie smyčky srovnatelné, provádějte více operací jednotlivě místo použití smyčky. Kód může být delší, ale výkon se zlepší.

  • Jakmile není opakování založené na snímcích potřeba, zastavte ho.

  • Pokud to je možné, vyhněte se zpracování řetězců a polí, protože je náročné na výkon procesoru.

  • Vždy se pokoušejte přistupovat k vlastnostem přímo, namísto používání metod jazyka ActionScript pro získání a nastavení hodnoty, které mají větší režii než volání ostatních metod.

  • Spravujte události moudře. Udržujte kompaktní pole posluchače událostí pomocí podmínek, které kontrolují, zda existuje naslouchací server (není null) před jeho voláním. Vynulujte všechny aktivní intervaly voláním clearInterval a odeberte všechny aktivní posluchače voláním deleteListener před odstraněním obsahu pomocí unloadapplication nebo {66odeClip 7}. Animate neuvolní paměť pro data SWF (například z intervalů a posluchačů) pokud některé funkce ActionScriptu při odstraňování filmového klipu z paměti ještě stále odkazují na data SWF.

  • Když již proměnné nejsou potřeba, odstraňte je nebo je nastavte na null, což je označuje pro čištění odpadků. Odstranění proměnných pomáhá optimalizovat využití paměti během běhu, protože nepotřebné datové zdroje se ze souboru SWF odstraní. Je lepší odstranit proměnné než je nastavit na null.

  • Před vyčištěním paměti explicitně odstraňte z objektů posluchače tím, že zavoláte funkci removeListener.

  • Pokud je funkce volaná dynamicky a předává pevnou sadu parametrů, použijte call místo apply.

  • Zkompaktněte jmenné prostory (například cesty) a zkraťte tak čas spuštění. Každá úroveň v balíčku se zkompiluje s prohlášením IF a způsobuje nové volání Object , takže méně úrovní v cestě šetří čas. Například cesta s úrovněmi com.xxx.yyy.aaa.bbb.ccc.funtionName způsobí, že objekt bude inicializován pro com.xxx.yyya. bbb.ccc. Někteří vývojáři programu Flash používají předprocesorový software ke snížení cesty k jedinečnému identifikátoru, například 58923409876.functionName, před kompilací kódu SWF.

  • Pokud je soubor tvořen několika soubory SWF, které používají stejné třídy jazyka ActionScript, vylučte tyto třídy během kompilace z vybraných souborů SWF. To může pomoci zkrátit čas stažení souboru a snížit nároky na paměť za běhu.

  • Vyhněte se používání funkcí Object.watchObject.unwatch, protože každá změna vlastnosti objektu vyžaduje, aby přehrávač určil, zda je nutné odeslat oznámení o změně.

  • Pokud kód ActionScript prováděný v klíčovém snímku na časové ose vyžaduje k provedení více než 1 sekundu, zvažte rozdělení tohoto kódu tak, aby byl prováděn v několika klíčových snímcích.

  • Při publikování souboru SWF odeberte trasování konstruktů z kódu. Chcete-li tak učinit, zaškrtněte políčko Vynechat akce vektorizace na kartě Flash v dialogovém okně Nastavení publikování.

  • Dědičnost zvyšuje počet volání metod a využívá více paměti: třída, která zahrnuje všechny funkce, které potřebuje, je za běhu efektivnější než třída, která zdědí část svých funkcí z nadřazené třídy. Proto možná budete muset vytvořit kompromis mezi rozšiřitelností tříd a účinností kódu.

  • Když jeden soubor SWF načítá jiný soubor SWF, který obsahuje speciální třídu jazyka ActionScript (například foo.bar.VlastníTřída) a pak soubor SWF uvolní, definice této třídy zůstane v paměti. Chcete-li paměť uložit, explicitně odstraňte všechny vlastní třídy v nenačtených souborech SWF. Použijte příkaz delete a zadejte plně kvalifikovaný název třídy, například: odstranit soubor foo.bar.CustomClass.

  • Omezte používání globálních proměnných. Protože při odebrání filmového klipu, který je definoval, nejsou při čištění paměti označeny k uvolnění.

  • Nepoužívejte standardní komponenty uživatelského rozhraní (dostupné na panelu Komponenty v programu Flash). Tyto komponenty jsou určeny pro spouštění na počítačích a nejsou optimalizovány pro spouštění na mobilních zařízeních.

  • Vyhýbejte se co nejvíce hluboce vnořeným funkcím.

  • Odkazujte na neexistující proměnné, objekty nebo funkce. Ve srovnání s verzí desktopu Flash Playeru Flash Lite 2 pomalu vyhledává odkazy na neexistující proměnné, což může významně ovlivnit výkon.

  • Nedefinujte funkce pomocí anonymní syntaxe. Například myObj.eventName = function{ ...}. Explicitně definované funkce jsou efektivnější, například funkce myFunc {..}; my Obj.eventName = myFunc;

  • Minimalizujte používání matematických funkcí a čísel s desetinnou čárkou. Výpočet těchto hodnot zpomaluje výkon. Pokud musíte použít matematické rutiny, zvažte předvýpočet hodnot a jejich uložení v poli proměnných. Načítání hodnot z tabulky dat je mnohem rychlejší než jejich výpočet v čase běhu aplikací Flash.

Správa paměti souboru Flash Lite pro mobilní zařízení

Aplikace Flash Lite pravidelně odstraňuje z paměti všechny objekty a proměnné, na které již soubor neodkazuje. Říká se tomu čištění paměti (garbage collection). Aplikace Flash Lite spouští proces čištění paměti každých 60 sekund nebo vždy, když se využití paměti souboru náhle zvýší o 20 % nebo více.

Přestože nemůžete kontrolovat, jak ani kdy aplikace Flash Lite toto čištění paměti provádí, můžete část nepotřebné paměti uvolnit sami záměrně. Pro proměnné časové osy a globální proměnné použijte k uvolnění paměti, kterou objekty jazyka ActionScript používají, příkaz delete. Pro místní proměnné, například proměnné definované v rámci definice funkce, nemůžete k uvolnění paměti objektu použít příkaz delete, ale můžete proměnnou, která na objekt odkazuje, nastavit na null. Za předpokladu, že na tento objekt neexistují žádné další odkazy, se tím uvolní paměť, kterou tento objekt používá.

Následující dva příklady kódu ukazují, jak lze odstraněním proměnné, která odkazuje na objekty, uvolnit paměť, kterou tyto objekty používají. Příklady jsou totožné, kromě toho, že první příklad vytvoří proměnnou časové osy a druhý vytvoří globální proměnnou.

// První případ: proměnná připojená k filmu nebo
časová osa filmového klipu

// Vytvořte objekt Datum.
var mcDateObject = new Date();
// Vrací současné datum jako řetězec.
trace(mcDateObject);
// Odstranit objekt.
odstranit mcDateObject;
// Vrací undefined.
trace(mcDateObject);
//
Druhý případ: globální proměnná připojená k filmu nebo
časová osa // filmového klipu
//
// Vytvořte objekt Datum.
_global.gDateObject = new Date();
// Vrací současné datum jako řetězec.
trace(_global.gDateObject);
// Odstranit objekt.
delete_global.gDateObject;
// Vrací undefined.
trace(_global.gDateObject);

Jak bylo uvedeno výše, k uvolnění paměti, kterou využívá místní proměnná funkce, nelze použít příkaz delete. Místo toho nastavte odkaz na proměnnou null, která má stejný efekt jako použití delete.

funkce func()

    // Vytvořte objekt Datum. 

    var funcDateObject = new Date(); 

    // Vrací současné datum jako řetězec. 

    trace(funcDateObject); 

    // Odstranění nemá žádný účinek. 

    odstranit funcDateObject; 

    // Stále vrací aktuální datum. 

    trace(funcDateObject); 

    // Nastavte odkaz na objekt na null. 

    funcDateObject = null; 

    // Vrátí hodnotu null. 

    trace(funcDateObject); 

// Zavolá funkci func(). 

func();func();

Načítání dat pro mobilní zařízení ve Flash Lite

Při vytváření souborů pro mobilní zařízení minimalizujte množství dat, která se pokoušíte načíst najednou. Pokud načítáte externí data do souboru Flash Lite (například pomocí souboru XML.load), operační systém zařízení může vygenerovat chybu "paměťová chyba", pokud není pro příchozí data přidělena dostatečná paměť. Tato situace může nastat i v případě, že celkové množství zbývající paměti je dostatečné.

Předpokládejme například, že se některý soubor pokusí načíst soubor XML o velikosti 100 KB, ale operační systém zařízení přidělil pro práci s tímto příchozím datovým tokem jen 30 kB. V takovém případě zobrazí aplikace Flash Lite uživateli chybovou zprávu o nedostatku paměti.

Chcete-li načíst velké objemy dat, seskupte data v menších částech - například v několika souborech XML - a pro každý kousek proveďte několik volání po načítání dat. Velikost jednotlivých dat, a proto počet volání načítání dat, která potřebujete provést, se liší podle zařízení a souboru. K určení vhodné rovnováhy mezi počtem požadavků na data a pravděpodobností selhání paměti testujte soubory na různých cílových zařízeních.

Pro dosažení optimálního výkonu se vyhněte načítání a analýze souborů XML, je-li to možné. Místo toho ukládejte data v jednoduchých dvojicích názvů a hodnot a načtěte data z textového souboru pomocí loadVars nebo z předkompilovaných souborů SWF.

Vyloučení tříd z kompilace pro Flash Lite

Chcete-li zmenšit velikost souboru SWF, zvažte vyloučení tříd z kompilace se zachováním možnosti přístupu k nim a jejich použití pro kontrolu typu. Pokud například vyvíjíte soubor využívající několik souborů SWF nebo sdílených knihoven, zvláště pokud využívají mnoho stejných tříd, zkuste následující postup. Vyloučení tříd pomáhá vyhnout se duplicitě tříd v těchto souborech.

Vytvořte nový soubor XML.
Pojmenujte soubor XML FLA_názevSouboru_exclude.xml, kde FLA_názevSouboru je název souboru FLA bez přípony .fla. Pokud se například soubor FLA jmenuje prodejAkcií.fla, název souboru XML musí být prodejAkcií_exclude.xml.
Uložte soubor do stejného adresáře jako soubor FLA.

Umístěte do souboru XML následující značky:
<resultAssets>
    <asset name="className1" />
    <asset name="className2" />
</vyloučitAssets>

Hodnoty, specifikované pro atributy názvu v tagu <asset> představují názvy tříd, které by měly být vyloučeny ze souboru SWF. Přidejte jich tolik, kolik je pro soubor potřeba. Například následující soubor XML vylučuje třídy mx.core.UIObject a mx.screens.Slide ze souboru SWF:
<resultAssets>
    <asset name="mx.core.UIObject" />
    <asset name="mx.screens.Slide" />
</vyloučitAssets>