Meil on bänner ja lugeme klikke. Teiste bännerite, muude tehniliste reiside ja seal, kliki loetakse erinevalt, nüüd kaalume konkreetset näidet.

Konteiner bänneriga

Teistel õppetundidel ma ütlen teile, kuidas luua bänner 100% ekraanilaiusega animatsiooniga ja kuidas luua ja valmistada saidi paigutus paigutada.

Failid õppetundist:

1. Ready Bännerid Täisekraan: klõpsake nuppu

Sõbrad, Tere kõigile. Täna jätkuvalt luua bännerid programmi Google Web. Disainer HTML5 formaadis 3D-efektiga.

Ja see on arusaadav, HTML5 ja CSS3 loodud bännerid kuvatakse igal arvutil, televiisoris ja sisselülitamisel mobiilseadmed. Mida sa ei saa Flash-bännerite kohta öelda.

Lisaks võivad need bännerid olla piisavad, et kasutada ja bänner näeb igal ekraanil suurepärane.

Ja arvestades, et mobiilseadmeid kasutatakse üha enam internetiressursside vaatamiseks, on see väga oluline.

Ma juba ütlesin peamise ja paigutuse kohapeal viimases artiklis. Nii et täna ma pöörama tähelepanu luua 3D efekti ja jalgrattasõidu seaded (re-show). Ja kaaluge ka mitmeid seadeid "sündmuste" jaoks.

Üksikasjalikult maalida kõik see protsess üsna raske, nii et ma tuua oma tähelepanu videoõpetus. Nii et kapten materjali on palju lihtsam. Ja laadige ka arhiiv oma bänneri projektiga visuaalseks näiteks.

Ettevalmistus bänneri loomiseks, millel on 3D-efektiga.

Bänneri tüüp valmis kujul sõltub valmistamise ettevalmistamisest. Google Web Designer Editor võimaldab teil luua realistlikke 3D-efekte ja kõik see kirjutatakse välja hTML-koodSa pead ainult koguma kõik visuaalses redaktoris.

Kvaliteetse 3D-efekti loomiseks peate töödeldava tööotsioone Photoshopisse eelnevalt vähendama, mis tulevikus peate Google Web Designerisse dokkida.

Näiteks valmistasin ma sellised toorikud:

Ma tegin need kangid Photoshopis, kuid internetis on palju sarnaseid pilte. Te ei saa pingutada, vaid võtta valmis võimalusi.

Märkus: Kui olete huvitatud selliste tühikute loomise protsessist, kirjutage see kommentaarides.

Samuti on oluline kaaluda banneri ja skripti üldist koostist. See sõltub sellest, kuidas bänneri tajutakse tervikuna.

3D-objekti loomine Google Web Designeris.

Niisiis, analoogial viimase artikliga käivitate redaktori, looge uue projekti.

3D-efekt tähendab komposiitkujutist, st pildi, mis koosneb mitmest osast, mis asuvad soovitud projektsioonis.

Need mitu pilti tuleb kombineerida kas grupis või kohas div. Ja nii see on õige. Aga see on minu jaoks mugavam töötada külgsuunas.

1. etapp. Div ploki loomine.

Niisiis, luua lahutus, valida vasakul paneel "Tag tööriist (D) ".

Määrake kindlasti identifikaator. Ja pon suurused sektsiooni abil "Properties" paremal paanil.

Nüüd peate ploki esile tõstma. Selleks valige vasakul paanil "Valiku tööriist (V) " Ja topeltklõpsates div ploki raami vasakul hiire vasakut nuppu. See asendab värvi punaselt.

Samm 2. Piltide lukustamine.

Ja nüüd algab kõige valulikum protsess. Sa pead seadistama kõik elemendid ühe pildi.

Minu käsutuses on järgmised elemendid:

- ülemine pool.

- Külg (koosneb kolmest eraldi osast).

Kõigepealt asetame pildi pöörleva (tagumise) poole ja joondage see keskele ja ülemise serva bänneri.

Samamoodi lisage esiküljel. Joondage ja vahetage mööda Z-telge.

Kuna 4px (piksli) külje laiusest nihin esi- ja tagurpidi poole piki Z-telge 2PX ja -2PX-ni. Mis tagab piltide vahe.

Märkus: täpsed nihkeseadmed on Screenshots.

Järgmisena lisage külg, kõik osad eraldi. Kasutage mugavuse huvides tööriistu "3.Tööruumi d pöörlemine " ja "Kaal". Nad aitavad teil kõik üksikasjad veenduda.

Kõigepealt soovitan, ehitab ühelt poolt kõik pildid ja seejärel kopeerige need ja asetab need peegli projektsioonile teisele poole.

Järgmine samm on ülemine vasak nurga ehitamine.

Nüüd keskne osa küljest.

Ja alumine nurk vasakul küljel.

Kõik külje elemendid peavad tingimata joondama Y-telje 90 0-ga.

Nüüd on vaja kopeerida soovitud kihi ja kleepida uuesti, ümbernimetamine ja muutmine asukoha parameetrid, nii et me saame elemendid paremale küljele.

Selleks valige pildi alumises paneelis - vajutate Ctrl + C-klahvi kombinatsiooni ja sisestage Ctrl + V-duplikaat.

Alustame sama, mis põllul ülalt allapoole, kuid ainult paremale.

Ülemine parem kaas.

Ma ei teinud alumist osa, sest see ei ole pildil nähtav.

Suurim töö on lõpetatud. Nüüd saate jätkata animatsiooni seadistamist. Visuaalse meeleavaldusena tehke pildi pöörlemine.

Rotatsiooni mõju loomine Google Web Designeril.

Esiteks peate lahkuma div plokk, kus on kõik pildi elemendid. See tähendab, et töötasime ploki sees konkreetsete piltidega ja nüüd peate samal ajal töötama kõikide piltidega, juhtides div.

Kõigepealt vajutage alumisel paneelil DIV nuppu.

Niisiis, aja jooksul, klõpsates hiire parema nupuga klõpsates kaks klahvi. See peaks töötama sellisena:

Y-skaala lähteraami asukoht on seatud -90 0.

Esimene keyframe (teine \u200b\u200bskoor) näitusel skaalal Y 0 0.

Teine võtmeraam (kolmas konto) näituse skaalal Y 90 0.

Kõik saab kontrollida tulemust. Selle tegemiseks klõpsake nupul Mängi..

Tõsi, meie pilt teeb ainult ühe pöörde. Selleks, et pilt pidevalt või mitu revolutsiooni pöörata, peate tsükliliste parameetrite konfigureerima.

Seadistage tsüklilisuse Google Web Designer.

Programmis saate konfigureerida mitu tsüklilisuse valikut (kordused). Nii saate konfigureerida kordus kõigi bännerielementide või iga elemendi eraldi.

Samuti võib tsüklilisust piirata korduste arvu või teha lõpmatu.

Alumisel paneelil on iga elemendi kõrval sümbolid "Castle", "Eye", "Reverse Arrow".

Niisiis, et seadistada tsüklilisuse peate klõpsama sümbol "Reverse arrow". Ja vali kas piiratud arv kordusi või lõpmatu võimalust.

Valisin lõputu animatsiooni kordumise. Nagu ma tulevikus konfigureerida "Sündmused" Seega peatatakse rotatsiooni, kui hiirekursor on hõljuv ja jätkab pärast kursorit eemaldamist.

Lõpetage pööramine hiirekursori kursori ümberpaigutamisele bännerile.

Esiteks esimesel võtmeraamil (teine \u200b\u200bskoor) paigaldage otsetee. Selle tegemiseks paremale klõpsa paremale hiire nupule ja valige Menüüelement. "Lisa silt". Sisestage otsetee nimi ja klõpsake sisestusklahvi.

Ja järgmises etapis valige vastuvõtjana « Page1. Seal ei ole muid võimalusi seal.

Ja viimane samm, valige esialgses etapis loodud märgis.

Säästa sündmusi ja kontrollige. Bänneri pöörlemine peatub hiire kursori külge, raamil, kus märgis tehti.

Pöörlemise uuendamine pärast hiirekursori juhtimist.

Selleks, et pöörlemiseks jätkata pärast kursori ketast küljele, konfigureerida teise sündmuse.

See on konfigureeritud samamoodi nagu eelmine, ainult kahe erinevusega.

Sündmusena valitakse "Hiir"— « mouseout ».

Sündmus - hiir kollaps

Ja tegevusena "Timeline" — « toggleplay ».

Tegevus - Jätkake

Siin on meie bänneri jaoks valmis 3D-efektiga. Ja te saate selliseid erinevaid mõjusid tulla.

Lihtsalt ärge unustage teha hiireklõpsis sündmust ja avage link. Bänner ei ole ilu loodud ilu huvides, sest nii.

Esialgu võib see protsess tunduda keeruline, kuid paari bänneri valmistamine ei tundu nii.

Mul on täna kõik sõbrad. Soovin teile kõigile edu, oodates teie kommentaari uute artiklite ja videoõpetuste kohtumistele.

Lugupidamisega, Maxim Zaitsev.

Bänner HTML5. - bänner, mis kuvab suvalise HTMLi sisu või pildi. HTML-kood võib olla tavaline HTML-leht stiilide ja skriptidega. See on paigutatud Iframe ja on piiratud ligipääs saidi sisule.

Kasutades "Banner HTML5" malli, saab kahel viisil lisada bännerit:
1. Valmistage ainult pilt. Lingi olemasolu Bännerparameetritele liikumiseks reguleerib pildistavuse.
2. Valmistage HTML loominguline redaktoris juhistes: Or.
Kui bännerile lisatakse HTML-kood ja pilt, kuvatakse HTML-kood.

Parameetrid Reguleeritavad Adfoxi lisamisel:
- Laius, bännerkõrgus.
- Oma CSS-stiilid bänneriga konteineri jaoks.

HTML loominguline areng

1. Loe S. hTML-koodi nõuded

• Maksimaalne lubatud HTML-faili suurus on 65 000 baiti.
• JavaScript ja CSS on eelistatavalt paigutada bänneri HTML-i kooderi sees. Kui lõplik HTML-kood ületab maksimaalse lubatud suuruse, siis on vaja koodi vähendada JavaScripti ja CSS-i eraldi failid:
  - Salvesta JS ja cSS-kood Eraldi failides laiendamisega.js or.css;
  - failid ei tohiks ületada 300kb;
  - Laadige failid alla failide vahekaardile "Failid" reklaamikampaania Ja vastuvõetud lingid failidele on ühendatud HTML-koodiga.

  Näide JS-i ja CSS-failide ühendamise näide:

  HTML-kood ei võimalda failide suhteliste radade kasutamist.

• Projekt võib sisaldada ainult ühte faili laiendamisega.html.
• Maksimaalne lubatud arv projektis on 50;
• Lubatud failitüübid projektis: CSS, JS, HTML, GIF, PNG, JPG, JPEG, SVG, JSON, FLV, MP4, OGV, OGG, Webm, AVI, SWF;
• Iga faili maksimaalne suurus (kehtib ka arhiivi sees olevate failide puhul):
  - 300KB;
  - 1MB videofailide jaoks.
• Failide nimed peavad sisaldama ainult ingliskeelse tähestiku numbreid või tähti, sulgemissümbolit. Vene tähtede faili, ruumide, tsitaatide ja erimärkide nimel ei ole lubatud kasutada;
• Muutujate ja objektide nimede nimedes on Vene tähti võimatu kasutada.
  Erandiks on ainult bänneri tekst.
• Formaat valmis projekt - zip. arhiiv.

Nõuded piltidele

Kasutage pilte kõrgresolutsioonigaSee parandab drastiliselt mobiilseadme bänneri kvaliteeti, kuigi see vähendab bänneri allalaadimiskiirust.

Võite kasutada SVG pilte. Nad on vektor ja seetõttu näevad nad kõigil seadmetel paremaks - mobiil ja dexte. Neil on ka väike faili suurus ja see võib olla animatsiooniga.

Lubatud pildiformaadid: PNG, GIF, JPG, SVG.
Ühe faili maksimaalne kaal: 300KB.

2. Valige redaktor, kus te arendate HTML-i loovust ja klõpsake sobivat lingil. Valmistage arhiiv HTML loovusega vastavalt juhistele:

Adobe Aniate CC redaktor - üks nupp Bänner

Adobe Aniate CC toimetaja - mõned nupud Bänner

1. Laadige mitme nupuga bänneri malli alla

2. Looge HTML5 Canvas projekt Adobe Aniame'is (või avage olemasolev)

3. Nuppe lisamisel (nupud) või stseenisse investeerinud, on oluline neid seadistada näiteks nimi.Nii et saate lisada soovitud nupud. Soovitame kasutada nimesid button1 - Button9..

Vaata ka:

Juhised nupu ja määramise näiteks nimi

Nupp peaas stseenil

1. Looge etapis mõningane objekt, näiteks kasutades ristküliku tööriista.
Seejärel valige see kontekstimenüüs, valige "Teisenda sümboliks ..."

2. Ilmuvale dialoogiboksis valige Tüüp: Nupp, nimi võib jääda muutumatuks, klõpsake nuppu OK.

3. Määrake selle numbri nimi klõpsutamiseks.

4. Lükake selle nupu toimingutele kood:

Aken.

Nestud nupp

1. Oletame, et nupp on teise sümboli sees, näiteks filmiklipi sees.
Selles näites on see filmi klipp määratletud näiteks nimi "NAME"

2. Kõrval topeltklõps Mine nime sees, seal on pesastatud nupp.

3. Tegevuste täpsustamisel, tee sellisele nupule, peate pärast seda lisama objekti nimi objekti nimi, kus see on varjatud:

Aken.

Läbipaistevate nuppude loomise juhised

1. Tõstke soovitud element esile ja teisendage see sümbolile.

2. Määrake nimi ja tükeldage tüüp: nupp

3. Kasutades topeltklõps sümbolil, minge sellele:

4. Tehke sisestada keyframe tabas raami

5. Eemaldage sisu üles, üle, alla

6. Läbipaistev nupp valmis:

4. Lisage projektile projekti tegevusi (me lisame sellele nupud) koodi)

5. Avage koodi kood koodi

Aken.Buttons.push (// valamu nuppe läbi komaga, lisades alguses nupu lõppu); Seddfox ();

Kui nupp on peaas stseenis, siis sisestage näiteks oma näite nimi kohe pärast seda

This.button1

Kui nupp on sees stseeni investeerinud, siis pärast seda imemiseks esimese astme nime stseeni ja siis näiteks nimi nupud:

See.Scene_instance_Name.Button2.

Meetme kihi lõpliku koodi näide:

Aken. Seddfox ();

7. Esimene nupp koodi rea nimetab esimese link Adfox, teine \u200b\u200b- teine \u200b\u200bja nii edasi.

Koos HTML loovusega saatke juht Bänneri lisamiseks Adfoxile, informatsioon nupud ja viitenumbrid.

8. Avage avaldatud seaded ja ühendage mall esimesest elemendist ja avaldage projekti soovitud kataloogi valimise teel.

9. Pärast projekti avaldamist archive seda formaadis.zip. Teie loominguline on allalaadimiseks ADFOX Banner.

Google Web Designer Editor

Selle bänneri koodi võib toimetaja loomisel võtta aluseks.

Mall sisaldab skripti adfox_html5.js. ja parameetrite kogum üleminekide õigeks toimimiseks ja sündmuste loendamiseks:
% Võrdlus%,% User1%,% Eventn %%, kus n on sündmuse number 1 kuni 30.

2. Klõpsake nuppu Töötlemine.

Kõik sündmused on määratud konkreetsetele animatsioonielementidele vahekaardi "Sündmuste" kaudu.

Tegevuste helistamiseks kasutatakse interaktiivset piirkondakomponenti.
Lisage see ja valige Sündmus Interaktiivne ala → Puudutage / vajutage (Või "Puuduta Area\u003e Touch / Click" inglise keeles).

Vahekaardil " Omakood"Määrake clique funktsioonikõne.

2.1 Kui kasutatakse ühte üleminekunuppu:

Callclick ();

2.2 Kui üleminekunupud on mitmed:

Callclick (n);

kus n.

2.3 Kui teil on vaja helistada animatsioonist ilma üleminekuta, kasutage järgmist koodi:

Kallevent (n);

kus n. - sündmuse number.

Tõmmatava (kummi) bänneri rakendamise eripära.

Nii et bänner on joonistanud mahuti laiuses, kus see saidil on paneelil Omadused Sest positsioon ja suurused, täpsustage pikslite asemel protsent.

Kasutage ka võimalusi "Align konteineris" ja "Kummist paigutus" kohta top paneel Tööriistad.
Kui lubate enne mis tahes nivelleeriva tööriistade kasutamist "kummist paigutus", siis muutudes emakonteineri suuruse muutmisel kõik elemendid üksteisega võrdsed ja võrreldes mahuti suurusega.
Sellisel juhul saate samaaegselt kasutada nii elementide suhtelist mõõtmeid protsentides kui ka absoluutses pikslites.

4. Projekti avaldamine.

Bänneri lisamisel Adfoxis peab juht teadma nuppe ja sündmuste numbrite vastavust. Iga sündmuse haldur kirjutab oma lingi vahetamiseks, mis muutuja kasutamine kantakse seejärel bänneri koodile.

Pärast projekti avaldamist arhiiv selle vormingus .zip.. Teie loominguline on allalaadimiseks ADFOX Banner.

Muud toimetajad

1. Lugemise klikkide bänneri

Selleks, et ADFOX-i bänneriks on STATISTIKA STATISTIKA SAGI JA HREF-i atribuutide jaoks, et registreerida muutuja:

% banner.reference_user1%

Ka linkide jaoks kasutage sihtmärgi atribuutilt atribuutiväärtuses% bännerist.
Kui atribuut puudub, avaneb link Iframe sees, see tähendab, et reklaamitud sait avaneb bänneri kohas.

Näide HTML-koodist bänneri klikkide loendamiseks:

Saidi reklaamija

Mobiilirakendustesse paigutatud bännerite HTML-koodis kasutage kontode kontole makro:% - reereference%@%banner.user1%

2. Lugemise klõpsuga mitu linki bänneris

Oletame, et bänneril on mitmeid linke ülemineku jaoks erinevad leheküljed Reklaamitud sait ja igaühe jaoks on vaja saada üleminekute arvu.

Esimese lingi teine \u200b\u200blink

Vahetage hrefi väärtuse atribuudi väärtuse muutujatele massruquest.reference%@%banner.eventn%Kus n asemel peaks olema sündmuse number 1 kuni 28.
Näiteks:

Esimese lingi teine \u200b\u200blink

Viitete ja muutujate järgimine peab olema Adfoxis bänneri lisamiseks informant. Kuna bänneri lisamisel peate täpsustama sündmuse vahekaardil "Sündmuste" esimene link ja sündmus 2 - teine \u200b\u200blink.

Bänneri lisamine ADFOXis

Bänneri lisamine ADFOXis Valige soovitud bänneri tüüp ja mall "Bänner HTML5".

Määrake bänneriparameetrid:

Arhiiv HTML5 loominguga - Download.zip Arhiiv projektiga, välja "HTML5 loominguline kood" See peab jääma tühjaks (see täidetakse sisuga. HTML-failifailid pärast bänneri lisamist).

HTML5 loominguline kood - Laadige alla ZIP-arhiiv projekti ettevalmistatud projektiga HTML-toimetajad Või sisestage HTML-kood.

Kui bänneril on mitu linke, lisage need vahekaardile. Sündmused Bänner, ülemineku URL-i valdkonnas.
Viitenumbrite ja sündmuste vastavus määrata loomingulised HTML-arendajad.

Link pesemispiksliga - Vaikimisi Pixel Adfox //banners.adfox.Ru/transparent.gif.Vajadusel hoidke dokumentide arvestust kolmanda osapoole süsteemEemaldage Adfox piksli ja määrake teine \u200b\u200blink.

Loov laius (px või%) - Määrake bänneri laius.

Creative kõrgus (px või%) - Määrake bänneri kõrgus.

Pilt - Laadige pilt.
Creative Show tingimused:
- Kuvatakse HTML-kood ja pilt - HTML-kood.
- Lisatud pilt - kuvatakse pilt.
- HTML-kood on lisatud - kuvatakse HTML-kood.

Bännerkonteineri klassi atribuudi nimi - Määrake nimi (või mitu nime all ruumi) klassi atribuut konteineri bänner.

Kasutage Safeframe (jah | ei) - Safeframe on tehnoloogia, mis ümbritseb reklaami spetsiaalsele IFrame'ile, millel on range API. Safeframe ei reklaamita, mis on selles tõmmatud, koguge andmeid ja suhtlevad ülejäänud leheküljega väljaspool safeframe.
jah - võimaldada safeframe'i kasutamist ja keelata juurdepääs veebilehele;
ei - ei sisalda safeframe. Bänneri koodil on juurdepääs veebilehele.

Bänneriploki stiilid - suvalised stiilid ühe reaga bännerkonteineri jaoks. Lisaks stiili: kuva. Näiteks "piir: 1px tahke punane;". Nevalid väärtused visatakse ära brauseri poolt.

Bänner (ENG. Banner - lipp, läbipaistvus) - reklaamimuse graafiline pilt, mis on sarnane reklaami mooduliga ajakirjanduses. See võib olla nii staatiline pilt kui ka isegi tekst ja sisaldavad animeeritud elemente (kuni video- ja interaktiivseid objekte). Reeglina võib see sisaldada hüperlinki reklaamija või lehekülje saidile rohkem informatsiooni. Keenneri ülesanded on järgmised. Esiteks, müües kaupu. Nii - meelitama Külastaja tähelepanu huvi Potentsiaalsed kliendid reklaamitud kaupade või teenus, suruge üleminekut saidile ja indutseerima (Üleskutse toimingule). See on CTA ja on reklaami lõppeesmärk. Ja teiseks ülesandeks bänner on pilt või kaubamärgiga reklaam, mille eesmärk on suurendada brändi teadlikkust Ja tehke brändi kohta positiivne pilt.

Populaarsed reklaamid kohapeal:

• Graafiline - Interneti-reklaami lihtne bänneri tüüp. Koosneb teatud suuruse pildist ja sisaldab linki reklaamiressursile.
• Flash bänner - Sellel on suurepärased animatsiooni funktsioonid, see võimaldab teil teavet paremini edastada vektori ja rasedusgraafiku kombinatsiooni abil.
• HTML5 Banner - HTML-elementide kombinatsioon animatsioonide ja hea visuaalse disaini kasutamine, mis on kohandatud mis tahes seadmetele ja brauseritele.

HTML peamised erinevused teistest bännerite liikidest
Võrreldes teiste bännerite loomise meetoditega annab HTML5 tehnoloogia mitmeid eeliseid, et meelitada ligi publiku ressursile:

• Teated sellises vormingus kuvatakse võrdselt kõikidel seadmetel ilma täiendavate brauseri laiendusteta.
  HTML5 pakub rohkem võimalusi nende integreerimiseks reklaamiteated Vormid, nupud sotsiaalsed võrgustikud, kalendrid, kaardid ja muud rakendused.
• Väiksemate ressursside madal kaalu ja kasutamine ei mõjuta brauseri lehekülgede allalaadimise kiirust. Flash-tehnoloogia ei võimalda sellist tulemust saavutada.
• Et hinnata bännerite tõhusust HTML5, saate vaadata statistikat Google Analytics.. Linkide külaliste ja üleminekute kohta on erinev teave.

Flash-tehnoloogiate märkimisväärne puudus on muutunud suurte ettevõtete, näiteks Apple'i, Mozilla ja Amazon järkjärguliseks keeldumiseks. Flashi kadumise peamine hoogus oli Google. Esiteks keelavad nad flash-animatsiooni Google Chrome.Ja seejärel keeldus nende otsingureklaamide väljalendusreklaamidele, eelistades HTML5.

Kuidas luua HTML-bännerid
Bänneri arendamine algab eraldi lehe loomisega ja kohapeal sisseehitatud "IFRAME" kaudu. Seal on mitmeid meetodeid arendamiseks reklaami bännerid saidile, me vaatame kõige populaarsem.

1. raami loomine CSS3 ja JavaScripti abil
Raam võimaldab teil üles laadida kõik sõltumatud dokumendid määratud suuruste pindalale. See võib olla erinev HTML-kood, mis kasutab disaini stiilide ja skripte. Bänner on võimalik ka "lõuendi" ala kaudu, kus animatsioone, jooniseid, graafika ja isegi mänge töötatakse välja JavaScripti abil. Arengu kiirendamiseks on lubatud kasutada kolmanda osapoole raamatukogusid, nagu Createjs.

Kasu:

• Funktsionaalsus ei piirdu mis tahes programmidega, saate midagi realiseerida.

Puudused:

• Selline protsess on üsna keeruline ja nõuab spetsiaalseid paigutusoskusi.
• Suured tööjõukulud muul viisil.

2. Adobe Edge Animate
Need, kes teavad Adobe Järelmõjud.Adobe Edge Animate programmi liides tundub väga tuttav. Adobe Edge Aniate'il on suurem funktsionaalsus, mille eesmärk on arendada lihtsat animeeritud sisu, kasutades HTML5, JavaScripti ja CSS3. Programm toetab selliste vormingute importi AS-i .svg, .png, .jpeg, .gif, HTML; Toetage video- ja helivorminguid.

Seal on rohkem kui 30 varjatud mõju, mis lihtsustab aega luua kõrge kvaliteediga animatsiooni mitu korda:

Kasu:

• Paljud kättesaadavad videoõpetused võrgu kasutamiseks.
• Lihtne funktsionaalsus, enamik protsesse on automatiseeritud.
• Programm ei nõua HTML5, JavaScripti ja CSS3 teadmisi3.
• Töö lõpus saame kõik vajalikud dokumendid kohapeal asuva bänneri mahutamiseks. Pildid - kaust graafiliste elementide bänner, mitu javaScripti failid, HTML ja vorming - hiljem toimiku redigeerimiseks programmis.
• Valmis Banner toetab kõik kaasaegsed brauserid ja mobiilsed rakendusedVastab kõigile reklaamikampaaniate tehnilistele nõuetele Yandexis ja Google'is.

Puudused:

• Liidese ainult inglise keeles.
• Alates 2015. aastast on Adobe peatanud Adobe Edge Aniate'i projekti arendamise, programmi ei ole sellest ajast ajakohastatud ja jõudnud oma arengupiirini. Edge Aniate on loomingulise pilvaarhiivide allalaadimiseks saadaval veel allalaadimiseks.

3. Adobe Aniate CC
Aniate CC on ümbernimetatud toode. Adobe Flash. Professionaalne. Hiljuti välklambi tehnoloogia on kaotanud kasutajate usalduse, programmi vajaliku programmi muutmiseks ja mitmete muudatuste muutmiseks. Sisuliselt on see sama flash programm Professional, kuid kus failid on lisaks salvestatud HTML5 ja JavaScripti.

Liides on väga sarnane Flash Professionali, kuid programmide võimalused erinevad.

Kasu:

• Võime luua kolmemõõtmeline graafika. Seal on "kaamera" tööriist, mis võimaldab teil eemaldada selle animatsiooni raami sügavuse.
• Erinevalt Edge Anial Aniate CC programm on suur valik Vector harjad ja võime töötada raster graafika.
• Programm on suhteliselt uus, nii Adobe arendab aktiivselt projekti, vabastab uuendused ja parandab animate CC.
• Seal on vene keele versioon.
• Täiustatud failide ekspordi valikud vormingus: JavaScript / HTML, JPEG, PNG, OAM, SVG, MOV, GIF. Vajutades ühte nuppu, salvestatakse bännerielemendid sprites, vähendades seeläbi bänneri käivitamise aega.

Puudused:

• Programmi uudsus võtab arvesse ka puudusi. Animatsiooni õppetundide loomine animatsioonis CC ei ole palju nagu Adobe Edge Aniate. Seetõttu tuleb mõningate funktsioonide tööd uurida iseseisvalt, mis ei ole lihtne. Programm on iseõppimise jaoks üsna keeruline, kuid saate selle välja mõelda.
• Mõned funktsioonid ei ole automatiseeritud, nagu serva animatsioonis, mis suurendab ka bänneri loomise aega.

4. Google Web Designer
Google rahul vaba toimetajaSpetsiaalselt projekteeritud HTML-bännerite rakendamiseks. Google Web Designer on täielikult teravdatud, et rakendada reklaami, mille peamine kalde on suunatud AdWordsile.

Kui me vaatame uue faili loomise akent, märgime, et reklaami mallide suurus on juba programmi sisseehitatud.

Kasu:

• Lihtne liides.
• Google'i reklaami mallide kättesaadavus.
• Täielikult tasuta programm.
• Vene versiooni olemasolu.
• Paigutatud adaptiivne disain Bännerid, HTML Banner näeb välja suurepärase ekraani eraldusvõimega.

Puudused:

• Google Web Designer funktsionaalsus on üsna kitsas luua meistriteoseid animatsiooni. Programm on mallidega väga piiratud.
• Õppimisprogrammide puudumine. Google'i sertifikaadid ei ole funktsionaalsuse täielikuks harimiseks piisavad.

Kõik eespool esitatud meetodid, mitte uued, kuid need on tõestatud. Seega on garantii, et loodud HTML-bännerid modereeritakse enamiku reklaamipaikade kohta, kuna nende tehnilised nõuded vastavad üldistele standarditele.

HTML5 bännerid

299 rubla.

Hõõruge.

Tellima

Praegu HTML5-bännerid on ainus praegune vorm formaadis täieõigusliku animeeritud bänneri reklaami. See universaalne platvormi vorm vorm tuli asendada flash bännerid, millel oli mitmeid piiranguid ja puudusi.

Sellise keeldumise peamised põhjused on järgmised:

• flash-tehnoloogia kogunenud kaebuste arvuti turvalisuse ja suurenenud tarbimise protsessori võimsuse mobiilseadmete;
• mõned brauserid hakkasid välklambi blokeeringu vaikimisi blokeerima;
• iOS-i mobiilseadmetel (iPhone, iPad), flash show ei andnud tootja poolt;
• bänneri välklambi reklaamide populaarsus;
• keeldumine Flashi tehnoloogia edasisest toetamisest ja arendamisest selle omaniku, Adobe'i poolt.

Animeeritud HTML5 bännerid saab näidata ilma piiranguteta mis tahes brauseris, ekraanil mis tahes seadme, sealhulgas nutitelefonid, tabletid ja meediumitelevisioon. See on nende platvorm ja mitmekülgsus.

Kliendi jaoks tähendab HTML5 bännerite kasutamine esiteks, laiendades publiku katvust ilma kahjumata.

Mida saab HTML5-Banner?

Palju. Lõppude lõpuks on see kõige arenenum formaat, mis meelitab kasutaja tähelepanu ja isegi sellega suheldes (interaktiivne bänner).

Animatsiooni vaatenurgast võib selline bänner näidata vektori animatsiooni (ilma kadumiseta), tähemärkide, fotode, logode, graafikute ja graafikute, teksti ja isegi 3D animatsiooniga animatsioon. Interaktiivsuse seisukohast võib HTML5 bänner vastata kasutaja tegevusele ja pakkuda täiendavat sisu ja võimalusi. Meediaettevõtete vaatenurgast võib HTML5 bänner mängida video, slaidi ja helisalvestamist. Kohandatavuse seisukohast võib HTML5-Banner ulatuda kogu lehe laiusele, avalikustada täiendavad paneelid või avanevad kogu ekraanil.

Kaaluge peamisi tüüpi HTML5 bännerid.

Animeeritud HTML5-Banner fikseeritud suurusega.
Kõige populaarsem formaat enamikus reklaamivõrkudes. Vajalike bännerite laius ja kõrgus valitakse paigutamisele aktsepteeritud loetelu nimekirjast. Me ütleme mulle alati kõige tavalisemad suurused.

HTML5 bänner (adaptiivne, kummist) tõmbamine.
See on bänner, mis suudab venitada, hõivata ekraani kogu laiuse (mõnikord kõrgus). (Veel võib leida käesolevas artiklis)

Täisekraani HTML5 bänner.
Bänner, avamine kogu ekraanil. Reeglina sisaldab ekraani taimerit ja nuppu Sule. Eriti populaarne mobiilseadmete kuvamiseks.

Sageli peab selline bänner olema erinevate suundumuste ja mobiilseadme õigustega kohanemisvõimelised.

HTML5-bänner (Raskulap) viskamine.
Esiteks on olemas ainult sellise bänneri käivitamispaneel (teaser). Antud algoritmi (hiire või pressimise, taimeri või muude sündmuste täitmisel) täitmisel avaneb bänneri teine \u200b\u200bosa täiendava täiustatud teabega.

HTML5 video bänner.

Sõltuvalt reklaamiplatvormi seadetest ja nõuetest võib see näidata videot nii mootorijaama ja pärast nupu "Play" vajutamist. Võib sisaldada juhtnuppe ja heli lahtiühendada. Videofail asub tavaliselt välisel hosting ja kuvatakse kuvamisel.

Mängu interaktiivsed bännerid.
Bännerid helistasid kasutajale mängu tegemiseks lihtsate tegevuste täitmisel.

Sellised bännerid meelitavad sihtrühma tähelepanu, põhjustada elavate huvi, kuid samal ajal on mitmeid piiranguid (näiteks hiire juhtimise sündmuse puudumine mobiilseadmetele või täiendavate skriptide kasutamise piirangute puudumisele). Me ütleme teile alati neid funktsioone, kui olete loodud mängude HTML5 bänneri loomiseks.

Smart HTML5-bännerid (kalkulaatorid).
Kasutati kasutajaga kaasamiseks ja suhtlemiseks, pakkudes talle kohest arvutust vajalikud parameetrid ja antud sisemine algoritmi valem (näiteks laenu arvutamine, hüpoteek, ehitusmaterjalide tarbimine ja muud tüsistused toimingud).

Redigeeritavad HTML5 bännerid - Mõnel juhul on Klient kohustatud viivitamata kaasa bännerite muutusteni ilma arendaja abi muutmiseta (näiteks sageli hindade, intressi või jutumärkide vahel). Me võime sellise ülesandega toime tulla ja kuvada vajalikud parameetrid otse bänneri HTML-koodi juurde, kus klient saab seda ise teha. Pakkuda teise mugava lahenduse toodangule andmetele, mida bänner, välised failid.

HTML5-bännerid, kes töötavad väliste andmete ja API laadimisega.
Kohta sel hetkel Paljud reklaamivõrgud keelavad bänneri ringluse välised allikad. Siiski, kui bänneri postitatakse veebilehel, mis pakub sellist võimalust, võib HTML5 bänner taotleda vajalikku teavet (teksti, numbreid, hinnapakkumisi) ja töötlevad neid vastavalt määratud algoritmile saidi API kaudu.

3D HTML5 bännerid.
Sellised bännerid meelitavad kasutaja tähelepanu leheküljel mahulise pildimudelite loomisega.

HTML5 3D-bännerit saab rakendada pöörleva objektina, mille nägu sisaldab bänneriraami rippmenüü kujul või teiste 3D-efektide abil.

Pange tähele, et HTML5 banner võib sisaldada mitmeid kirjeldatud funktsioone. Näiteks video bänner saab tõmmata kogu lehe laiusele ja kolmemõõtmeline animatsioon avatakse lehel sõltuvalt kasutaja tegevusest.

Kui soovite tellida HTML5 bänner meie saidi ja loominguline idee nõuab kombinatsioon erinevate formaatide - see on alati meie spetsialistide võimsuse all.

HTML5-Banner - mida ta tehniliselt esindab?

HTML5 bänneri tajumine on õiged mini-veebisaidil. Ilma liialituseta.

HTML5, kes andis selle bänneriformaadi nime, on veebilehtede märgistamise keel, lihtsalt rääkides, paigutus. Ja see toimub samade seaduste kohaselt kui iga kaasaegne sait. See võib sisaldada div konteinereid ühendatud fondid, stiilid CSS. ja JS skriptid. Põhielement on lõuend animatsioonkonteiner. Animatsioon ise rakendatakse Java-skripti abil, kasutades sagedamini JS-raamatukogu, mis on spetsiaalselt ette nähtud animatsiooniks.

Mis sees on? Miks arhiivis? Miks on nii palju faile?

Tõsi, sest me oleme harjunud, et banner on üks fail JPG või Gifka või "Flash Drive". Kuid pidage meeles, kuidas me ülaltoodud kirjutasime, HTML5-Banner on tegelikult mini-ala. See sisaldab erinevaid faile ja kaasas reklaamiplatvormi ZIP-arhiivis. Arhiivi sees on peamine HTML-fail, Java skriptide failid, raamatukogud, stiililehed ja pildid.

Märge. Mõnel juhul võib reklaamiplatvorm nõuda kogu bännerit ühe faili abil, lisades kõik kasutatud skriptid ja pildid baas-64 formaadis. See ei ole kogenud arendaja probleem. Selline nõue suurendab siiski bänneri tähtaega ja muudatusi. Õnneks selline nõue esineb harva.

Kuidas ma näen HTML5 bännerit minu arvutis?

Väga lihtne. Laadige zip-arhiiv lahti ja avage fail oma brauseris HTML-failis.

Kuidas kontrollida, mida ma tegin õige HTML5-Banner?

Kui bänner on reklaami jaoks loodud google'i teenusedTeie teenistuses on suurepärane vahend disaineri kvaliteedi kontrollimiseks Google'ilt Google'ist. Me lihtsalt kasutame seda: Laadige alla oma zip-arhiiv koos bänneriga ja vaadake, kas see kontrollis kontroll-lehel. Vead märgistatakse punase ikoonidega. Kui ei ole - teie arendaja töötas mitte asjata ja bänner on valmis paigutamiseks Google AdWords. Või topeltklõps.

Reklaami võrkude Yandex, Mail.ru, Rambler, Adfox, Adrusiver ja teised kontrollitakse ka järgimist bänneri tehniliste nõuete pärast selle allalaadimist süsteemi saidile. Probleemide korral saate kommenteerida moderaatori ülevaate vea kirjeldusega. Mõned saidid pakuvad klientide reklaami võimalust eelvaade Bänner testi lehel.

Sellegipoolest on HTML5-bänneri õige garantii parim garantii arendaja kogemus, selle teadmised reklaamide tehnilistest nõuetest ja valmisolekust kiiresti vigadest.

Java skripti animatsiooniga bänner on teine?

Ärge segage ennast. "Java Script Banner", "Canvas Banner" - see on umbes seda, mida nimetatakse "HTML5-Banner". Sõltuvalt arendaja tööriistast võivad JS raamatukogud või paigutusreeglid erineda, kuid peaassamblee kava jääb samaks.

Kuidas luua HTML5 bänner?

Kõige populaarsem disainerite redaktori seas HTML5 animatsioonide loomiseks - adobe programm Animateerige.

Google pakub oma arendusvahendi - Google Web Designer. Nende eeliste hulgas on paljude sisseehitatud mallide olemasolu ja võime avaldada bänneri otse Google'i reklaamiteenuste jaoks: AdWords ja topeltklõps. Määrade hulgas on animatsiooni piiratud tunnused.

Mõned disainerid, rohkem kui Ameerika, kasutage redigeerijat ja raamatukogu rohelist soki animatsioonplatvormi. Kuid me ei saanud märkimisväärset jaotust.

Arvestades kõik vajalikud komponendid on avatud kood, hea spetsialist saab luua HTML5 banner isegi kõige lihtsamal teksti redaktor. Kuid see meetod ei ole efektiivne võrreldes professionaalsete animatsioonide kasutamisega.

HTML5 bännerite tehnilised nõuded.

Nõuded puudutavad nõuded:

• kogumass HTML5 bänner KB.;
• zip arhiiv struktuurid, kaustade arv ja failid;
• lubatud failivormingute loetelu;
• viis lubada URL-lingid bänneri klikkimiseks (banner firmware);
• lubatud js raamatukogude loetelu välistel hostingis;
• video- ja helifailide järjekord ja piirangud;
• nõuded raami, vastutusest loobumise, sageduse ja animatsioonitsüklite arvu kujundamisele, seadme protsessorisse laadimisele.

Ja see ei ole täielik nimekiri nõuetest, mida peate arvestama meie arendajatele, et pakkuda klientidele HTML5 bännerit, valmis viivitamata kohandama ja alustama reklaamikampaaniat.

Mida ma peaksin tegema oma flash bännerid loodud varem?

Vaadake ennast - suurimad reklaamivõrgud ei aktsepteeri enam Flash-bännereid majutuskomponente, flash-komponendid blokeeritakse brauserites ja IOS-seadmetes, lõpetas oma töö Swffy (ainus piisav on-line flash bänneri konverter HTML5-s).

Automaatne Flash-vormingus konversioon HTML5-s on peaaegu võimatu - nõutav, tegelikult on HTML5 redaktoris täielik käsiraamat. Sellises olukorras on õige lahendus - luua uus animeeritud bännerite komplekt, kaasaegse ja universaalse HTML5 formaadis.

Aga kuidas "GIF"?

Tuleb mõista, et GIF-animatsioon on ka raamide seeriaviis, samuti videofailide komplekt. GIF-fail võib sisaldada teavet kaadrite kiiruse ja korduste arvu kohta. See on piiratud sellega.

GIF-Banner ei tea, kuidas töötada vektorgraafikaga, luua animatsioon programmiliselt, kohaneda soovitud suurusega ja palju muud, millega animeeritud HTML5 banner toime tulla.

Mida see reklaamija jaoks tähendab?

Liigse kaalu toetamine. Jah, isegi bännerid kuuluvad sellele. Kõik peamised reklaamiplatvormid näitavad kõva piiranguid bänneri kaalule kilobaitides.

GIF-Banner on hea mitme staatilise raamide kuvamiseks, on võimalik väikese teksti, nupud või fotode vahetustega. Sellisel juhul ei lähe Gif Banneri kogumass reklaamipaikade nõuetest kaugemale.

Kui animatsioon mõjutab mitme saja raeduse muutmist, suureneb GIF-bänneri kaal, kuna neid väljendatakse inglise keeles, "dramaatiliselt", st dramaatiline. 20-sekundilised gifid kaaluvad mõned megabaiti - tavaline asi. Ja see on äärmiselt mitte nagu reklaami võrgustikudKes on õigesti mures selle pärast, kui palju liiklust peab kasutaja alla laadima bänneri vaatamiseks.

Niisiis, kui vajate bännerit paljude animatsiooniefektide, koomiks animatsiooni, interaktiivse, adactive, adactive või video bänner - valik on tehtud kasuks tellimuse HTML5 Banner.