Koristni nasveti

Kako je ustvarjena flash animacija za spletno mesto?

Pin
Send
Share
Send
Send


Cilji lekcije:

Izobraževalni:

  • utrjevanje delovnih veščin v okolju Macromedia Flash,
  • Učenje novega koncepta pasice.

Izobraževalni:

  • negovanje občutka odgovornosti za rezultat dela,
  • oblikovanje in razvoj veščin za pravilno vedenje pri razpravljanju o vprašanjih,
  • spodbujanje spoštovanja do računalniške tehnologije.

Razvoj:

  • razvoj ustvarjalnih sposobnosti,
  • oblikovanje veščin za govor pred občinstvom,
  • oblikovanje in razvoj sposobnosti za kratek in natančen odgovor na vprašanje

Načrt lekcije

  1. Organizacijski trenutek (2 min.)
  2. Nov material (10 min.)
  3. Ustno delo (8 min)
  4. Ustvarjanje pasice v računalniku (20 min)
  5. Ogled pasic (5 min)
  6. Domača naloga (2 min)

Ta lekcija vključuje naslednje elemente: organizacijski del, predstavitev novega gradiva, utrjevanje novega znanja in navodila o domačih nalogah.

1. Organizacijski trenutek.

Učitelj (Pedagoške instalacije za delo). Danes bomo še naprej preučevali program Macromedia Flash in izvedli praktično delo pri ustvarjanju pasic v tem programu.

Učiteljb Kakšne povezave ima besedna pasica za vas?

Študentje Internet, oglaševanje, pravokotnik.

2. Novo gradivo (predstavitev "Koncept transparenta").

Pripombe Celotno zgodbo spremlja predstavitev. (Dodatek 1)

Pasica je pravokotna grafična slika, ki oglašuje spletno mesto, izdelke ali storitve in vsebuje povezavo do tega spletnega mesta. Informativne so tudi pasice, ki poročajo o vsakem dogodku. (Slide 2)

Ko se je začelo oglaševanje s pasicami, je težko reči. Pojavila se je, ko se je na spletu začela razvijati trgovina. Lastniki spletnih strani so morali oglaševati njihove storitve na spletu. Da, in sama spletna mesta so potrebovala oglaševanje.

Enciklopedija Wikipedije trdi, da je bil prvi modul grafičnih oglasov na internetu, ki ga je mogoče klikniti za dostop do informacij o oglaševalcih, prodanih leta 1993 na spletnem mestu Global Network Navigator v lasti ameriškega založnika računalnikov O'Reilly. (Slide 3) Vendar pa je treba rojstni dan pasice šteti za 25. oktober 1994, ko je bil na spletni strani Hotwired (v lasti najbolj znane ameriške tehnološke revije Wired) postavljen transparent AT&T, ki je bil videti grozno, a je bil inovacija. (Diapozitiv 4) Velikost pasice - 468x60 - je kasneje postala najbolj znan standard v internetnem oglaševanju, čeprav so ga 10 let pozneje nadomeščali večji formati.

Spodnja slika prikazuje pasico, ki naj bi veljala za prvo na internetu. Nastopil je leta 1994. (Slide 5)

Pasica ima lahko poljubno velikost navpično in vodoravno - to je samo reklamna slika! Tako kot vse na svetu je tudi ta velikost doživela standardizacijo, zaradi katere je mogoče razlikovati več glavnih vrst.

Najpogostejše so pasice velikosti 468? 60. Zaradi uspešne izbire velikosti strank imajo takšne oglaševalske slike dober odziv in se poleg tega odlično prilegajo v glave večine internetnih strani. Poleg tega je prvi format na internetu. (Slide 6)

Velikosti 125 * 125, 120 * 90, 120 * 60 so najpogosteje na straneh na levi ali desni strani v stolpcu v meniju spletnega mesta.

Gumbi 88 * 31 so običajno vneseni na dnu strani.

V RuNetu so oglaševalci zelo priljubljeni z velikostmi od 100 do 100, pa tudi od 150 do 80, kljub dejstvu, da niso standardizirani.

Pogosto se ustvari cela vrsta pasic, ki imajo isti slog, vendar različnih velikosti. (Slide 8)

Izvajate lahko različne razvrstitve pasic.

Pasice so razdeljene na statične in animirane. Statični transparenti so običajne slike. To so predvsem logotipi. Realni oglasi s pasicami so animirani. (Slide 9)

Razlikovati pasice za slike, klike in informacije. Prvi, kot pove že ime, tvorijo podobo podjetja, blagovne znamke, drugi pa poskušajo privabiti potencialne kupce na svojo spletno stran, drugi pa o kakršnem koli dogodku (diapozitivi 10-13)

Pasice se lahko razlikujejo tudi v tehnologiji izdelave. Najpogostejši format je GIF. Primeren je za neanimirane ali preproste animirane pasice. Pri uporabi formata GIF je njegova velikost zelo majhna, in to je dobro, saj potem povečuje verjetnost, da bo uporabnik do konca naložil pasico. (Slide 14)

Pasice GIF so narisane v različnih rastrskih ali vektorskih grafičnih urejevalnikih. V te namene se uporabljajo posebni programi, kot sta Ulead GIF Animator ali Adobe ImegeReady. (Slide 15)

Flash pasice, ustvarjene v Macromedia Flash, so že nekaj let posebej priljubljene. Te pasice imajo prednosti pred pasicami GIF: (Slide 16)

  • lahko izvajajo bolj zapletene animacije,
  • so manjši
  • naložijo tudi, ko je uporabnik onemogočil funkcijo refleksije grafike v svojem brskalniku.

Obstaja tudi tretji, najredkejši standard, tako imenovani interaktivni pas. Takšni pasovi so ustvarjeni s pomočjo tehnologije CGI, Java ali VBS, pa tudi HTML in Flash animacijskih elementov. (Slide 17)

Torej, pasica je povabilo na vaše spletno mesto. Seveda bi moral biti izviren, opazen, nenavaden, a hkrati preprost in razumljiv. Dober transparent je ideja, ki bi morala obiskovalca zanimati in sprožiti željo po nadaljnji povezavi.

Glavne naloge, ki jih mora rešiti pasica:

  • Privabite obiskovalce
  • Različno od drugih pasic
  • Ujemite temo spletnega mesta

Pri merjenju učinkovitosti pasic se uporablja izraz CTR (Click Through Ratio), merjen v odstotkih in izraža razmerje med številom prikazov pasic in številom klikov nanj. Za navadne pasice se giblje od 0,5 do 1,5%. Obstajajo tudi drugi bolj zapleteni izračuni uspešnosti pasic.

Obiskovalec spletnega mesta porabi največ 3-5 sekund za ogled pasice. Zato je treba misel na transparentu izraziti jasno in figurativno. Glavni elementi pasice so slogan in vizualna podoba. Do razvoja obeh je treba nadaljevati po razumevanju ciljev zastave. Sestavljanje dobrega slogana je zelo pomembno. Slaba fraza lahko pokvari najlepšo podobo. (Tagline - moto ali kratka fraza, ki izraža glavno idejo oglasnega sporočila). Na področju oglaševanja potekajo natečaji za slogan, tako da je konec leta 2006 zmagal slogan Yandex "Najdi vse" (iskalnik). Zmaga je bila nad sloganom "Drive the Dream" (Toyota). (Slide 18)

Ko je zasnoval slogan, lahko izberete grafično sliko, ki ponazarja.

Pri ustvarjanju pasice morate upoštevati, da si jo bo ogledal v tujem okolju, o strani, na kateri se pojavlja, pa ne bomo vedeli ničesar, zato ne bomo mogli zagotoviti barvne sheme. Zato je treba jasno navesti meje pasice - vzdolž njenega oboda. Poleg tega transparent ne bi smel imeti preglednega ozadja - vedno trden (ni pa nujno navaden).

Na transparentu mora biti nekakšna ideja, sicer bo neprivlačna, ne bo imela ničesar, kar bi pritegnilo, spletkalo, zanimalo obiskovalca. Dober pas se lahko primerja s sestavljanko - ni takoj rešen, toda po iskanju odgovora obiskovalec prejme pozitivna čustva in si ga zapomni.

Domnevamo lahko, da je vsaka pasica sestavljena iz naslednjih delov: (Slide 19)

  1. Slogan
  2. Vizualni objekt, ki ponazarja slogan (pogosto logotip).
  3. Barve (pri slikovnih pasicah barve pogosto sovpadajo z barvo oglaševalske strani)
  4. Dodatne informacije (naslov spletne strani, pojasnilo)
  5. Dodatni oblikovalni elementi, ki poudarjajo glavno idejo in slog pasice. Pri slikovnih pasicah je zelo priročno narediti eno predlogo in, nadomestiti različne slogane in vizualne predmete, dobiti celo vrsto pasic.

Ustvariti dober transparent je zelo težko. Kot pravijo vaditelji: "Spomniti se morate enega pravila - če vam ne bo všeč ustvarjena pasica, je verjetno, da ji bodo drugi všeč."

Pripombe Študenti izdali Dodatek 2. V oklepajih so zapisani pravilni odgovori naloge.

1. Poimenujte podjetja, ki uporabljajo naslednje slogane:

  1. "Na koga zdaj razmišljate?" (MTS)
  2. »Zaupajte roza barvi in ​​ni nobenih madežev« (Vanish)
  3. "C" ... "je bolj zabaven. Hiša je čista dvakrat hitreje. "(Mr. Proper)
  4. "Vozi sanje" (Toyota)
  5. "Imuniteta se ne zgodi veliko" (Imuneli)
  6. "Hranjenje energičnih mačk" (KiteKat)
  7. "Vse, kar človek potrebuje" (čokolada Alenka)
  8. "Svoboda biti sam" (Savage)
  9. Gradite svojo komunikacijo "(MegaFon)
  10. "Živite na svetli strani" (Beeline)
  11. "Sreča je lahka" (sadovnjak)
  12. "Združevanje generacij" (piškotki "Jubilejni")

2. Naredite slogan (več) za pasico spletnega mesta o živalih (o mestu).

3. Katera 2-3 podjetja, katerih logotip vsebuje določen predmet, ki ponazarja njegovo blagovno znamko:

Jajce - MTS,
Čebela - Beeline,
Profil osebe - megafon.

Mnoge blagovne znamke in podjetja za svoje logotipe uporabljajo dve do tri barve.

4. Poimenujte 2-3 podjetja, v logotipu katerih sta dve barvi:

Beeline (črna in rumena),
MTS (rdeča in bela),
Severstal (modra in rdeča).

Praktično delo je opisano v fazah v Dodatek 3. Rezultat izvedbe Dodatek 4

Pripombe Vse ustvarjene pasice lahko s programom Macromedia Dreamweaver prenesete v učiteljev računalnik in jih vstavite v dokument HTML ter prikažete preko projektorja.

6. Domača naloga.

Razmislite o dizajnu, sloganu in izberite slike za transparent, ki oglašuje vaš bodoči poklic.

Literatura

1. Smirnova I.E. "Začetek spletnega oblikovanja", St. Petersburg, "BHV-Petersburg", 2003

Flash tehnologija

Multimedijski okvir je razvil Macromedia. Toda po njegovi absorpciji (združitvi) so vse pravice do tehnologije prešle na novega lastnika - podjetje Adobe Systems.

Obseg sodobne uporabe Adobe Flash:

  • Ustvarjanje spletnih aplikacij je dokaj nova smer. Vključuje popolno ali delno uporabo Flasha za ustvarjanje spletnih mest. Delna uporaba te tehnologije ustvarja ločene elemente oblikovanja: različne interaktivne menije, animirane gumbe itd.

V primerjavi z običajnimi viri, ki temeljijo na html-ju, imajo spletna mesta flash nekatere funkcije, ki omejujejo njihovo uporabo. Ti vključujejo velike stroške razvoja, zahtevne vire strežnikov, dolge čase prenosa s počasno internetno povezavo in nekatere druge vidike:

  • Realizacija večpredstavnostnih zmogljivosti - predstavitveni predvajalniki, ustvarjeni na podlagi Flash, se pogosto uporabljajo za poslušanje zvoka in predvajanje videoposnetkov na spletnih mestih. Njihov razvoj vključuje uporabo enega od skriptnih jezikov (pogosto JavaScript):

  • Pri sredstvih spletnega oglaševanja - najpogosteje se tehnologija uporablja za ustvarjanje animiranih pasic. Ne vključujejo le predvajanja večpredstavnostnih oglasov, temveč tudi nekaj interakcij z uporabnikom na igralni osnovi.

Osnove in orodja za razvoj Flash

Za ustvarjanje flash animacij najpogosteje uporabljate tradicionalna orodja Adobe:

  • Adobe Flash Professional - program za ustvarjanje interaktivne animacije (animator),
  • Adobe Flash Builder - okolje za ustvarjanje vmesnika spletne aplikacije,
  • Adobe Flash Player - predvajalnik za predvajanje Flash-ja.

Poleg njega lahko številne druge aplikacije predvajajo večpredstavnostne vsebine te vrste. Najbolj priljubljeni med njimi so Gnash, QuickTime in nekateri drugi:

Glavni standard datotek Flash je razširitev SWF. Kratica pomeni Small Web Format. Video, posnet v Flashu, ima razširitve datotek FLV, F4V.

Interaktivna flash animacija temelji na vektorski grafiki. Zahvaljujoč temu je bilo mogoče uresničiti podporo multimedijski platformi in neodvisnost kakovosti animacije od ločljivosti zaslona.

Velikost datoteke aplikacije Flash je enaka za vse uporabnike, ne glede na tehnične značilnosti zaslona (ločljivost).

Interaktivna animacija na Flash temelji na morfiranju (vektorska vrsta), v katerem je počasen pretok med ključnimi okviri. Za predvajanje podatkov se uporablja predvajalnik flash, katerega delovanje je v veliki meri podobno delovanju navideznega stroja JavaScript. Programska komponenta tehnologije se izvaja z jezikom ActionScript.

Pomanjkljivosti tehnologije vključujejo naslednje točke:

  • Močna obremenitev centralnega procesorja odjemalca. To je posledica nizke učinkovitosti bliskovnega virtualnega stroja, ki je vgrajen s predvajalnikom v uporabnikov brskalnik,
  • Velika verjetnost napak - predvajanje flash animacij se lahko zgodi z veliko verjetnostjo napak. Poleg tega napake pri predvajanju Flash negativno vplivajo na delovanje celotne odjemalske aplikacije (brskalnika). To je posledica nezadostnega nadzora odstopanja programske kode pri ustvarjanju bliskovnih aplikacij,
  • Nezmožnost indeksiranja - vsa besedilna vsebina, prikazana v Flash-vsebini, ni vključena v postopek indeksiranja. Ta omejitev je še posebej problematična za tiste vire, ki temeljijo na tej tehnologiji.

Pregled programske opreme za ustvarjanje bliskavice drugih proizvajalcev

Sothink SWF Quicker je bil vzet kot prototipna aplikacija, na kateri bomo prikazali osnove ustvarjanja Flash-a. Po mnenju mnogih strokovnjakov je program najbolj razumljiv in najlažji za učenje.

Poleg ustvarjanja in urejanja bliskavice urejevalnik "ve, kako" deluje z vsemi drugimi vrstami spletnih animacij (GIF, HTML in drugi standardi):

Da bi razumeli, kako narediti flash animacijo v tej aplikaciji, uporabljamo vgrajene predloge. Po zagonu programa se takoj po zagonu programa prikaže pogovorno okno »Novo od predloge«. Poleg tega ga je mogoče priklicati prek elementa glavnega menija "Datoteka". Med predlaganimi možnostmi smo se odločili za izdelavo pasice:

  • SwishMAX,
  • Aligator Flash Designer.

Na koncu želim poudariti, da je izbira programa pomembna, ne pa glavni vidik. Če želite ustvariti Flash, ne potrebujete le preverjene in zanesljive aplikacije, temveč tudi znanje o osnovah spletnega programiranja. Najprej morate "pridobiti" pravo bazo znanja in šele nato začeti z izbiro specializirane programske opreme.

Oglejte si video: The Choice is Ours 2016 Official Full Version (September 2020).

Pin
Send
Share
Send
Send