Užitočné tipy

Ako sa vytvára flash animácia pre web?

Pin
Send
Share
Send
Send


Ciele lekcie:

vzdelávacie:

  • upevnenie pracovných zručností v prostredí Macromedia Flash,
  • Učíme sa nový koncept banner.

vzdelávacie:

  • podpora pocitu zodpovednosti za výsledok práce,
  • formovanie a rozvoj zručností pre správne správanie pri diskusiách o problémoch,
  • podpora rešpektovania počítačovej technológie.

rozvíjanie:

  • rozvoj tvorivých schopností,
  • formovanie zručností hovoriť pred publikom,
  • formovanie a rozvoj schopnosti stručne a presne odpovedať na otázku

Učebný plán

  1. Organizačný moment (2 min.)
  2. Nový materiál (10 min.)
  3. Ústna práca (8 min)
  4. Vytvorenie bannera na počítači (20 min)
  5. Prezeranie bannerov (5 min)
  6. Domáca úloha (2 min)

Táto hodina obsahuje nasledujúce prvky: organizačná časť, prezentácia nového materiálu, konsolidácia nových poznatkov a výučba domácich úloh.

1. Organizačný moment.

učiteľ (Pedagogické zariadenia pre prácu). Dnes budeme pokračovať v štúdiu programu Macromedia Flash a robiť praktické práce na vytvorení bannera v tomto programe.

učiteľs Aké asociácie pre vás má slovo banner?

študentov Internet, reklama, obdĺžnik.

2. Nový materiál (prezentácia „Koncept bannera“).

Komentáre. Celý príbeh je sprevádzaný prezentáciou. (Dodatok 1)

Banner je obdĺžnikový grafický obrázok, ktorý inzeruje webovú stránku, produkty alebo služby a obsahuje odkaz na túto webovú stránku. Bannery sú tiež informačné, ktoré informujú o každej udalosti. (Snímka 2)

Keď sa začala bannerová reklama, je ťažké povedať. Objavila sa, keď sa obchod začal rozvíjať na webe. Bolo potrebné inzerovať ich služby na webe vlastníkom stránok. Áno, a stránky samotné potrebovali reklamu.

Encyklopédia Wikipedia tvrdí, že prvý grafický reklamný modul na internete, na ktorý bolo možné kliknúť, aby získal prístup k informáciám o inzerentovi, bol predaný v roku 1993 na webovej stránke Global Network Navigator, ktorú vlastní americký vydavateľ počítačov O'Reilly. (Snímok 3) O narodeninách tohto bannera by sa však malo uvažovať 25. októbra 1994, keď bol na webovú stránku Hotwired (vo vlastníctve najslávnejšieho amerického technologického časopisu Wired) umiestnený banner AT & T, ktorý vyzeral strašne, ale bol inováciou. (Slide 4) Veľkosť bannera - 468x60 - sa následne stala najznámejším štandardom v internetovej reklame, o 10 rokov neskôr ju však nahradili väčšie formáty.

Na nasledujúcom obrázku je banner, ktorý sa údajne považuje za prvý na internete. On sa objavil v roku 1994. (Snímka 5)

Banner môže mať akúkoľvek veľkosť vertikálne aj horizontálne - je to len reklamný obrázok! Ale, rovnako ako všetko na tomto svete, aj tieto veľkosti prešli štandardizáciou, v dôsledku čoho je možné rozlíšiť niekoľko hlavných typov.

Najbežnejšie sú veľkosti bannerov 468 - 60. Vďaka úspešnému výberu veľkosti strán majú takéto reklamné obrázky dobrú odozvu a navyše sa perfektne zmestia do hlavičiek väčšiny internetových stránok. Okrem toho je to prvý formát na internete. (Snímka 6)

Veľkosti 125 * 125, 120 * 90, 120 * 60 sa najčastejšie nachádzajú na stránkach vľavo alebo vpravo v stĺpci ponuky stránok.

Tlačidlá 88 * 31 sa zvyčajne zadávajú v dolnej časti stránky.

V sieti RuNet sú inzerenti veľmi obľúbení vo veľkostiach 100 - 100, ako aj 150 - 80, napriek tomu, že nie sú štandardizované.

Často sa vytvára celá séria bannerov, ktoré majú rovnaký štýl, ale rôzne veľkosti. (Snímka 8)

Môžete vykonávať rôzne klasifikácie bannerov.

Bannery sú rozdelené na statické a animované. Statické bannery sú bežné obrázky. Ide najmä o logá. Skutočné bannerové reklamy sú animované. (Snímka 9)

Rozlišujte bannery s obrázkami, kliknutiami a informáciami. Prvý názov, ako už názov napovedá, vytvára obraz spoločnosti, značky a druhý sa snaží prilákať potenciálnych zákazníkov na svoju vlastnú webovú stránku, zatiaľ čo ostatní informujú o každej udalosti. (Prezentácie 10-13)

Bannery sa môžu líšiť aj vo výrobnej technológii. Najbežnejším formátom je GIF. Je vhodný pre neanimované alebo jednoduché animované bannery. Pri použití formátu GIF je jeho veľkosť veľmi malá, a to je dobré, pretože potom zvyšuje pravdepodobnosť, že používateľ načíta banner až do konca. (Slide 14)

Bannery GIF sú nakreslené v rôznych rastrových alebo vektorových grafických editoroch. Na tieto účely sa používajú špeciálne programy ako Ulead GIF Animator alebo Adobe ImegeReady. (Slide 15)

Bannery typu Flash vytvorené v programe Macromedia Flash sú obľúbené už niekoľko rokov. Tieto bannery majú oproti banerom GIF výhody: (Slide 16)

  • môžu implementovať zložitejšie animácie,
  • sú menšie
  • načítať, aj keď používateľ v prehliadači zakázal funkciu odrazu grafiky.

Existuje tiež tretí, najvzácnejší štandard, tzv. Interaktívny banner. Takéto transparenty sa vytvárajú pomocou technológie CGI, Java alebo VBS, ako aj prvkov animácie HTML a Flash. (Slide 17)

Banner je teda pozvanie na váš web. Malo by to byť samozrejme originálne, nápadné, nezvyčajné, ale zároveň jednoduché a zrozumiteľné. Dobrý banner je nápad, ktorý by mal zaujať návštevníka a vyvolať túžbu nasledovať odkaz.

Hlavné úlohy, ktoré by mal banner riešiť:

  • Priťahujte návštevníkov
  • Odlišné od ostatných bannerov
  • Prispôsobte tému stránky

Pri meraní efektívnosti bannerov sa používa pojem MP (Click Through Ratio), meraný v percentách a vyjadrujúci pomer počtu zobrazení bannerov k počtu kliknutí naň. Pre bežné bannery sa pohybuje od 0,5 do 1,5%. Existujú aj ďalšie zložitejšie výpočty výkonnosti bannerov.

Návštevník stránok strávi na zobrazenie bannera najviac 3 - 5 sekúnd. Preto by sa myšlienka na transparente mala vyjadrovať jasne a obrazne. Hlavnými prvkami bannera sú slogan a vizuálny obraz. K rozvoju oboch by sa malo postupovať po pochopení cieľov banneru. Veľmi dôležité je prísť s dobrým sloganom. Zlá fráza môže zničiť najkrajší obraz. (heslo - motto alebo krátka veta vyjadrujúca hlavnú myšlienku reklamnej správy). V oblasti reklamy sa konajú súťaže o slogan, takže podľa výsledkov z roku 2006 sa víťazom stal vyhľadávač Yandex s názvom „Nájsť všetko“ (vyhľadávací nástroj). Víťazstvo sa zvíťazilo nad heslom „Drive the Dream“ (Toyota). (Snímka 18)

Po príchode sloganu si môžete vybrať grafický obrázok, ktorý ho ilustruje.

Pri vytváraní transparentu musíte tiež zvážiť, že sa bude zobrazovať v mimozemskom prostredí a nebudeme vedieť nič o stránke, na ktorej sa objaví, a nebudeme schopní zabezpečiť farebnú schému. Preto je potrebné jasne vyznačiť hranice bannera - po jeho obvode. Okrem toho by banner nemal mať priehľadné pozadie - vždy solídne (ale nie nevyhnutne obyčajné).

Banner musí niesť nejaký nápad, inak to nebude neatraktívne, nebude mať nič, čo by pritiahlo, zaujalo a zaujalo návštevníka. Dobrý banner možno prirovnať k hádance - nie je to okamžite vyriešené, ale po nájdení odpovede dostane návštevník pozitívne emócie a zapamätá si ho.

Môžeme predpokladať, že každý banner sa skladá z nasledujúcich častí: (Snímka 19)

  1. heslo
  2. Vizuálny objekt zobrazujúci slogan (často logo).
  3. Farby (pre obrázkové bannery sa farby často zhodujú s farbou reklamného webu)
  4. Doplňujúce informácie (adresa webovej stránky, vysvetľujúci text)
  5. Ďalšie prvky dizajnu, ktoré zdôrazňujú hlavnú myšlienku a štýl bannera. V prípade obrázkových bannerov je veľmi vhodné vytvoriť jednu šablónu a nahradiť rôzne slogany a vizuálne objekty získať celú sériu bannerov.

Vytvorenie dobrého banneru je veľmi ťažké. Ako odborníci hovoria: „Musíte si pamätať jedno pravidlo - ak sa vám vytvorený banner nepáči, je nepravdepodobné, že sa bude páčiť iným.“

Komentáre. Vydaní študenti Dodatok 2, V zátvorkách sú uvedené správne odpovede na úlohy.

1. Pomenujte spoločnosti, ktoré používajú tieto slogany:

  1. "Koho si teraz myslíš?" (MTS)
  2. „Dôverujte ružovej farbe a nie sú tam žiadne škvrny“ (Vanish)
  3. „C“ ... je zábavnejšia. Dom je čistý dvakrát rýchlejšie “(pán Proper)
  4. „Pohnite sen“ (Toyota)
  5. „Imunita sa moc nestane“ (Imuneli)
  6. „Kŕmenie energetických mačiek“ (KiteKat)
  7. „Všetko, čo človek potrebuje“ (čokoláda Alenka)
  8. “Sloboda byť sám sebou” (Savage)
  9. Vybudujte si svoju komunikáciu “(MegaFon)
  10. „Žite na svetlej strane“ (Beeline)
  11. „Šťastie je ľahké“ (Orchard)
  12. „Uniting Generations“ (súbory cookie „Jubilee“)

2. Vytvorte slogan (niekoľko) pre banner stránky o zvieratách (o meste).

3. Aké sú 2 - 3 spoločnosti, ktorých logo obsahuje konkrétny predmet ilustrujúci svoju značku:

Vajec - MTS,
Bee - Beeline,
Profil osoby - megafón.

Mnoho značiek a spoločností používa pre svoje logá dve až tri farby.

4. Pomenujte 2-3 spoločnosti, ktorých logo má dve farby:

Beeline (čierna a žltá),
MTS (červená a biela),
Severstal (modrá a červená).

Praktická práca je opísaná v etapách v roku 2007 Dodatok 3. Výsledok vykonania Dodatok 4.

Komentáre. Všetky vytvorené bannery je možné preniesť do počítača učiteľa a vložiť do dokumentu HTML pomocou programu Macromedia Dreamweaver a zobraziť ich prostredníctvom projektora.

6. Domáce úlohy.

Premýšľajte nad dizajnom, sloganom a vyzdvihnite obrázky pre banner propagujúci vašu budúcu profesiu.

literatúra

1. Smirnova I.E. “Začiatok webdizajnu”, Petrohrad, “BHV-Petersburg”, 2003

Technológia Flash

Multimediálny rámec bol vyvinutý spoločnosťou Macromedia. Po jeho absorpcii (zlúčení) však všetky práva na technológiu prešli na nového majiteľa - spoločnosť Adobe Systems.

Rozsah modernej aplikácie Adobe Flash:

  • Vytváranie webových aplikácií je celkom nový smer. Znamená to úplné alebo čiastočné použitie programu Flash na vytváranie webových stránok. Čiastočné použitie tejto technológie vytvára samostatné dizajnové prvky: rôzne interaktívne ponuky, animované tlačidlá atď.

V porovnaní s bežnými zdrojmi založenými na html majú stránky typu Flash niektoré funkcie, ktoré obmedzujú ich použitie. Zahŕňajú vysoké náklady na vývoj, náročné na serverové prostriedky, dlhé časy sťahovania s pomalým pripojením na internet a niektoré ďalšie aspekty:

  • Realizácia multimediálnych schopností - prehrávače médií vytvorené na báze Flash sa často používajú na počúvanie zvuku a prehrávanie videa na webových stránkach. Ich vývoj zahŕňa použitie jedného zo skriptovacích jazykov (často JavaScript):

  • V prostriedkoch online reklamy sa technológia najčastejšie používa na vytváranie animovaných bannerov. Zahŕňajú nielen prehrávanie multimediálnych reklám, ale aj určitú interakciu s používateľom na hernom základe.

Základy a nástroje vývoja Flash

Ak chcete vytvoriť flashové animácie, najbežnejšie používané tradičné nástroje spoločnosti Adobe:

  • Adobe Flash Professional - program na vytváranie interaktívnych animácií (animátor),
  • Adobe Flash Builder - prostredie na vytváranie rozhrania webových aplikácií,
  • Adobe Flash Player - prehrávač integrovaný do prehliadača na prehrávanie Flash.

Multimediálny obsah tohto typu môže okrem toho prehrávať množstvo aplikácií tretích strán. Najobľúbenejšie z nich sú Gnash, QuickTime a niektoré ďalšie:

Hlavným štandardom pre súbory Flash je rozšírenie SWF. Skratka znamená Small Web Format. Video zaznamenané vo formáte Flash má prípony súborov FLV, F4V.

Interaktívna flash animácia je založená na vektorovej grafike. Vďaka tomu bolo možné realizovať podporu multimediálnej platformy a nezávislosť kvality animácie od rozlíšenia obrazovky.

Veľkosť súboru aplikácie Flash je rovnaká pre všetkých používateľov bez ohľadu na technické vlastnosti obrazovky (rozlíšenie).

Interaktívna animácia na Flashi je založená na morfovaní (vektorový typ), pri ktorom dochádza k pomalému toku medzi kľúčovými snímkami. Na prehrávanie údajov sa používa prehrávač Flash, ktorého činnosť je do značnej miery podobná prevádzke virtuálneho stroja JavaScript. Softvérová zložka technológie sa implementuje pomocou jazyka ActionScript.

Medzi nevýhody tejto technológie patria nasledujúce body:

  • Silné zaťaženie centrálneho procesora klientskeho počítača. Je to kvôli nízkej účinnosti flashového virtuálneho počítača, ktorý je vložený do prehrávača v prehliadači používateľa,
  • Vysoká pravdepodobnosť chýb - s vysokou pravdepodobnosťou chýb sa môžu vyskytnúť hranie flash animácií. Poruchy pri hraní Flash navyše negatívne ovplyvňujú fungovanie celej klientskej aplikácie (prehliadača). Je to z dôvodu nedostatočnej kontroly odolnosti voči chybám programového kódu pri vytváraní flash aplikácií,
  • Neschopnosť indexovať - ​​všetok textový obsah zobrazený v obsahu Flash sa do procesu indexovania nezapája. Toto obmedzenie je obzvlášť problematické pre zdroje, ktoré sú založené na tejto technológii.

Prehľad softvéru na vytváranie Flash od tretích strán

Sothink SWF Quicker bol vzatý ako prototypová aplikácia, na ktorej ukážeme základy tvorby Flash. Podľa mnohých odborníkov je program najzrozumiteľnejší a najjednoduchší.

Okrem vytvárania a úpravy blesku editor „vie“, ako pracovať so všetkými ostatnými typmi webových animácií (GIF, HTML a ďalšie normy):

Aby sme pochopili, ako vytvoriť flash animáciu v tejto aplikácii, používame vstavané šablóny. Okamžite po spustení programu sa zobrazí dialógové okno „New From Template“. Okrem toho sa dá vyvolať prostredníctvom položky hlavnej ponuky „Súbor“. Z navrhovaných možností sme sa rozhodli vytvoriť banner:

  • SwishMAX,
  • Aligátor Flash Designer.

Na záver by som chcel poznamenať, že výber programu je dôležitý, ale nie hlavný aspekt. Na vytvorenie Flash potrebujete nielen osvedčenú a spoľahlivú aplikáciu, ale aj znalosť základov programovania webu. Najprv musíte „získať“ správnu vedomostnú základňu a až potom zvoliť špecializovaný softvér.

Pin
Send
Share
Send
Send