Ohjelma flash-animaatioiden luomiseen. Kuinka luoda flash-animaatioita. Flash-editorin Advanced Effect Maker Free Editionin ilmaisen version vertailu kaupalliseen versioon Commercial Edition

Tämä artikkeli näyttää, kuinka pääset alkuun yksinkertaisten vaiheiden avulla. Adobe Flash CS5. Oppitunnin aihe yksinkertainen animaatio, luomme sen perehtymättä käyttöliittymän ja ohjelman monimutkaisuuteen.

Luodaan uutta flash-asiakirjaa

Avaa ohjelma ja luo uusi asiakirja"ActionScript 3.0".

Piirretään objekti myöhempää animaatiota varten

Piirretään nyt ympyrä. Valitse oikeasta paneelista soikea työkalu ja pidä hiiren vasenta painiketta ja näppäimistön Shift-painiketta painettuna ja piirrä ympyrä valkoisella taustalla.

Valitse äskettäin luotu kohde Valintatyökalulla napsauttamalla sitä hiirellä tai tallentamalla se neliön muotoiseen valintaan.

Objektin muuntaminen symboliksi yksinkertaista animaatiota varten

Jatkotyötä varten sinun on muutettava objekti symboliksi. Koska ympyrä on jo valittu, napsauta oikea painike hiiri ja kontekstivalikko valitse "Muunna symboliksi".

Valitse "Tyyppi" -luettelosta "Grafiikka"

Sinisen neliön pitäisi nyt ilmestyä objektimme ympärille.

Luo klassinen animaatio (Classic Tween)

Animaation luomiseksi sinun on määritettävä "avainkehys".

Alapaneelissa on animaatioasteikko, valitse kahdeskymmenesviides kehys ja paina hiiren oikeaa painiketta, valitse näkyviin tulevasta kontekstivalikosta "Insert Keyframe".

Valitse ympyrä ja siirrä sitä oikealle pitämällä hiiren vasenta painiketta painettuna.

Valitse ensimmäinen kehys animaatioasteikosta ja valitse yläreunan päävalikosta "Lisää" -kohdasta "Classic Tween".

Katso luotu animaatio

Nyt voimme katsoa animaatiota. Valitse päävalikon "Ohjaus"-kohdassa "Toista".

Lisätään ympyrän "kadottava" tehoste. Voit tehdä tämän valitsemalla objektin uudelleen ja valitsemalla oikeanpuoleisesta paneelista "väritehoste"-valikon "alpha", aseta arvoksi "0".

Katsotaan, mitä tapahtui. Siirry kohtaan "Ohjaus" ja valitse "Toista".

Oletko koskaan miettinyt, mikä on Internetin kauniiden bannerianimaatioiden takana? Tai tietotekniikan avulla luodut uudet sarjakuvat? Useimmiten ne perustuvat "lihaan", tai tarkemmin sanottuna, näin Flash-tekniikan nimi käännetään englannista. Tänään puhumme sivuston flash-animaatiosta:

Flash-tekniikka

Multimediakehyksen on kehittänyt Macromedia. Mutta sen omaksumisen (fuusion) jälkeen kaikki tekniikan oikeudet siirrettiin uudelle omistajalle - Adobe Systemsille.

Adobe Flashin nykyaikaisen sovelluksen alue:

• Verkkosovellusten luominen on melko uusi suunta. Tarkoittaa Flashin täydellistä tai osittaista käyttöä verkkosivustojen luomiseen. klo osittainen soveltaminen Tämän tekniikan avulla luodaan yksittäisiä suunnitteluelementtejä: erilaisia ​​interaktiivisia valikoita, animoituja painikkeita jne.

Perinteisiin luonnonvaroihin verrattuna html-pohjainen Flash-sivustoilla on ominaisuuksia, jotka rajoittavat niiden käyttöä. Näitä ovat korkeat kehityskustannukset, palvelinresurssien vaatimukset, pitkät latausajat hitaalla Internet-yhteydellä ja joitain muita näkökohtia:

• Multimediaominaisuuksien käyttöönotto - äänen kuunteluun ja videoiden toistamiseen verkkosivustoilla käytetään usein Flashiin perustuvia mediasoittimia. Niiden kehitys sisältää yhden skriptikielistä (yleensä JavaScriptin) käytön:

• Verkkomainonnassa teknologiaa käytetään useimmiten animoitujen bannerien luomiseen. Ne tarkoittavat paitsi multimediamainonnan pelaamista, myös jonkinlaista vuorovaikutusta käyttäjän kanssa pelipohjalta.

Flash-kehityksen perusteet ja työkalut

Flash-animaatioiden luomiseen käytetään useimmiten perinteisiä Adoben työkaluja:

• Adobe Flash Professional – ohjelma interaktiivisen animaation luomiseen (animaattori);
• Adobe Flash Builder – ympäristö verkkosovellusliittymien luomiseen;
• Adobe Flash Player– selaimeen integroitu soitin Flashin pelaamiseen.

Tämän lisäksi useat laitteet voivat toistaa tämäntyyppistä multimediasisältöä. kolmannen osapuolen sovelluksia. Suosituimmat ovat Gnash, QuickTime ja jotkut muut:

Tämän tekniikan avulla voit näyttää kaiken tyyppistä grafiikkaa ( rasteri, vektori, 3D). Se tukee myös ääni- ja videotietojen suoratoistoa. Erityisesti mobiililaitteet kevyt Flash-versio Lite.

Flash-tiedostojen päästandardi on SWF-laajennus. Lyhenne tulee sanoista Small Web Format. Flashilla tallennetun videon tiedostotunnisteet ovat FLV, F4V.

Interaktiivisen animaation kehitys Flashissa perustuu Vektorigrafiikka. Tämän ansiosta oli mahdollista toteuttaa tuki multimediaalustalle ja animaation laadun riippumattomuus näytön resoluutiosta.

Flash-sovelluksen tiedostokoko on sama kaikille käyttäjille, riippumatta tekniset ominaisuudet näytön resoluutio).

Flashin interaktiivinen animaatio perustuu morfoimiseen (vektorityyppi), jonka välillä on hidas virtaus avainkehykset. Datan toistamiseen käytetään flash-soitinta, jonka toiminta on monella tapaa samanlainen kuin virtuaalikone JavaScript. Tekniikan ohjelmistokomponentti on toteutettu ActionScript-kielellä.

Tekniikan haittoja ovat seuraavat seikat:

• Kova kuorma päällä prosessori asiakaskone. Tämä johtuu Flash-virtuaalikoneen alhaisesta tehokkuudesta, joka on sisäänrakennettu käyttäjän selaimeen soittimen mukana;
• Suuri virheiden todennäköisyys – Flash-animaatioiden toistaminen voi tapahtua suurella virhetodennäköisyydellä. Lisäksi epäonnistumiset Flash-toistossa vaikuttavat negatiivisesti koko asiakassovelluksen (selaimen) toimintaan. Tämä johtuu riittämättömästä vikasietoisuuden hallinnasta ohjelmakoodi kun luot flash-sovelluksia;
• Indeksointi epäonnistui – kaikkea Flash-sisällössä näkyvää tekstisisältöä ei ole indeksoitu. Tämä rajoitus on erityisen ongelmallinen niille resursseille, jotka on luotu tämän tekniikan pohjalta.

Katsaus kolmannen osapuolen Flash-luontiohjelmistoon

Prototyyppisovelluksena, jossa esittelemme perusasiat Flashin luominen, Hänet otettiin Ajattele SWF Nopeampi. Monien ammattilaisten mukaan ohjelma on ymmärrettävin ja helpoin oppia.

Luomisen ja muokkaamisen lisäksi flash-editori "voi" toimia kaikkien muiden verkkoanimaatioiden kanssa (GIF, HTML ja muut standardit):

Asennuksen jälkeen siirry ohjelman käyttäjäystävälliseen käyttöliittymään. Valitettavasti emme löytäneet käyttöliittymän kielen vaihtoa, kun vaeltelimme läpi kaikki kulmaukset.

Ymmärtääksemme kuinka tehdä flash-animaatiota tässä sovelluksessa, käytämme sisäänrakennettuja malleja. "New From Template" -valintaikkuna tulee näkyviin heti ohjelman käynnistämisen jälkeen. Lisäksi se voidaan kutsua päävalikon "Tiedosto" kautta. Valituista vaihtoehdoista valitsimme bannerin luomisen:

Seuraavassa ohjatussa ikkunassa avattavasta luettelosta sinun on valittava malli, jonka mukaan animaatio luodaan. Sen alla on pieni kehys, jossa valittua mallia toistetaan:

Seuraavissa vaiheissa sinun on asetettava bannerin mitat ja syötettävä 5 tekstilausetta, jotka toistetaan animaatiossa. Lisäksi sinun on määritettävä sen resurssin osoite, johon käyttäjä ohjataan napsauttamalla banneria:

Kun olet kääntänyt projektin ja sulkenut ohjatun ikkunan, voit katsella tuloksena olevaa videota sisäänrakennetussa soittimessa. Voit tehdä tämän napsauttamalla yläreunassa olevaa vihreää nuolta:

Kun olet sulkenut soittimen, katsotaanpa tarkemmin sovelluksen käyttöliittymää. Huomaa, että se koostuu kahdesta pääikkunasta: ylempi on videon ajanjakson muokkaamista varten ja alin on tavallinen graafinen editori. Jokainen elementti sijaitsee erillisellä tasolla, jota voidaan muokata sivupalkissa olevilla vakiotyökaluilla.

Ilmainen ohjelma lähes minkä tahansa monimutkaisten flash-videoiden luomiseen! Sisältää melkein kaiken tarvittavat työkalut jokapäiväiseen työskentelyyn salaman kanssa ja sitä voivat käyttää sekä aloittelijat että ammattilaiset. Tämän ohjelman tärkein ero ja etu on sen tuki ActionScript 2.0:lle, jota ilman on yksinkertaisesti mahdotonta kuvitella ammattimaisen Flash-sisällön luomista.

Näyttää siltä, ​​​​että Dima Bilan on oikeassa sanoessaan, että mahdoton on mahdollista :). Viime aikoihin asti web-kehittäjien oli joko merirosvottava tai maksettava melko paljon rahaa mahdollisuudesta työskennellä Flash-animaatioiden kanssa. Ja nyt, vihdoin, on tullut aika, jolloin kolmas täysimittainen vaihtoehto on ilmestynyt - käyttää ilmaista flash-editoria.

Sivuillamme oli jo aiemmin yksi vastaava ohjelma, mutta sen haittapuolena oli vanhentuminen, rajoitettu työkaluvalikoima ja tuen puute ActionScript-ohjelmointikielelle, joka on niin välttämätön jonkin verran toimivien verkkosivustojen, pelien jne. luomiseen.

Tänään esittelen sinulle täysin modernin flash-editorin, joka voi kilpailla melkein tasavertaisesti kuuluisan Adobe Flashin kanssa - Vektorilainen Giotto.

Vectorian Giotton vertailu maksulliseen analogiin

Kuten näette, Vectorian Giotton kehittäjät tekivät parhaansa ja yrittivät sovittaa ohjelmaansa mahdollisimman paljon Adobe Flashin kaltaisia ​​toimintoja. Lisäksi useimmat pikanäppäimet ovat myös samoja, joten Adobe-editorin kanssa työskentelyyn tottuneilla ei ole suuria vaikeuksia siirtyä ilmaiseen Vectorian Giotto -alustaan!

No, ja "jälkiruoaksi" sisään ilmainen editori on myös jotain, mitä "isoveljeltä" joskus puuttuu - sisäänrakennettu animaatiotehosteiden kirjasto, joka vetoaa erityisesti niihin, jotka luovat flash-bannereita.

Valmistautuminen työhön

Aloitaksemme työskentely Vectorian Giotton kanssa meidän on ladattava arkisto asennusohjelman kanssa, joka muuten painaa vain 8 megatavua! Kun arkisto on ladattu, avaa se ja suorita tiedosto VectorianGiotto.exe.

Huolimatta siitä, että asennus (ja valitettavasti itse ohjelma :)) on englanninkielinen, sen ei pitäisi aiheuttaa vaikeuksia, koska oletusasetuksissa ei tarvitse muuttaa mitään. Napsauta vain "Seuraava" -painiketta useita kertoja ja odota asennuksen valmistumista;).

Ensimmäinen tutustuminen käyttöliittymään

Asennuksen päätyttyä, jos emme muuttaneet mitään vakioasetukset, Vectorian Giotto -työikkuna tulee näkyviin koko näytön kokoiseksi:

Kuten jo sanoin, ohjelman käyttöliittymä on englanninkielinen, joten väärinkäsitysten ja väärinkäsitysten välttämiseksi artikkelissa kuvattuja lisätoimintoja suoritettaessa haluaisin esitellä joitakin käsitteellisiä laitteita :). Aloitetaan tavalliseen tapaan ylhäältä alas ja vasemmalta oikealle.

Valikkopalkki. Tämä on paneeli, jossa sijaitsevat kaikki Vectorian Giotto -ohjelman valikot. Animaatioita työskennellessäsi saatat tarvita osioita, kuten "Tiedosto" (animaatiosi tallentamiseen ja viemiseen SWF-tiedostoon), "View" (työtilan näyttöparametrien asettamiseen), "Muokkaa" (nykyisen asiakirjan parametrien hallintaan ja kirjastotehosteiden käyttäminen) ja "Ikkuna" (näytettävien moduulien ja ohjelmapaneelien mukauttamiseen).

Päätyökalurivi. Tässä on painikkeet projektitoimintojen hallintaan ja animaation toistopaneeli.

Piirustuspaneeli (vietää koko ohjelmaikkunan vasemman puolen). Täältä löydät kaikki tarvittavat työkalut animaatiosi haluttujen objektien luomiseen sekä painikkeet, joiden avulla voit määrittää tarvittavien työkalujen parametrit.

Kuvakäsikirjoitus (tai aikajana). Voit hallita kehyssoluja ja luotuja tasoja.

Värillinen ohjauspaneeli. Sen avulla voit nopeasti muuttaa aiemmin luotujen muotojen väriä. Sitä käytetään myös animaatioobjektien täyttötyypin valitsemiseen (kiinteä, gradientti jne.).

Työtila. Se on virtuaalinen "paperiarkki", joka on suunniteltu animaatioidesi piirtämiseen :).

ActionScript-editori. Jos sinun ei tarvitse luoda yksinkertaisia ​​bannereita, vaan jotain monimutkaisempaa, mukaan lukien painikkeet ja kaikenlaiset interaktiiviset objektit, et voi tehdä ilman komentosarjaeditoria.

Klipsirakennepaneeli. Näyttää kaikki "kehyksessä" olevat muodot ja antaa sinun vaihtaa nopeasti niiden välillä ja hallita niiden järjestystä.

Ominaisuudet-paneeli. Jokaisella salaman kohteella on tiettyjä ominaisuuksia. Tätä paneelia käytetään niiden hallintaan.

Muutospaneeli. Voit muuttaa nopeasti valitun animaatioelementin kokoa ja sijaintia.

Elementtien kirjasto. Edustaa luetteloa luoduista tai tuoduista objekteista, jotka voidaan lisätä (ja lisätään toistuvasti!) animaatioon.

Ilmainen ohjelma Flash-animaatioiden luomiseen valmiilla sovelmilla.

Luulen, että monet teistä ovat koskaan yrittäneet luoda omia verkkosivustoja (ja ehkä omistatte jopa erittäin suositun portaalin).

Tavalla tai toisella jokainen on kohdannut Web-sivujen tehokkaan suunnittelun ongelman. Ja koska staattisesta HTML-koodista on vähitellen tulossa menneisyyttä, monet nykyään kiinnittävät huomionsa sellaisiin suosittuihin teknologioihin kuin JavaScript ja Flash. Niiden avulla voit luoda kauniita animoituja dynaamisia sivuja edistyneillä toiminnoilla.

Pienen animoidun flash-bannerin tekeminen ei ole asiantuntijan vaikeaa, mutta mitä muiden tietämättömien pitäisi tehdä? Jos huolellinen ohjelmointikielten opiskelu ei sisälly lähisuunnitelmiisi, voit, kuten aina, turvautua apuun erikoistunut ohjelmisto. Tänään tutustumme ohjelmassa työskentelyn perusteisiin Advanced Effect Maker.

Tämän apuohjelman avulla voit luoda kaikenlaisia ​​flash- ja JavaScript-tehosteita, sekä omia "tyhjästä" että perustuen valmiita malleja! Advanced Effect Maker on olemassa useita versioita, jotka eroavat toisistaan ​​valmiiden tehosteiden määrässä ja käyttäjän vapauden asteessa. Verrataanpa maksimi- ja ilmaiskokoonpanoja:

Flash-editorin Advanced Effect Maker Free Editionin ilmaisen version vertailu kaupalliseen versioon Commercial Edition

Suurin haittapuoli ilmainen versio ohjelmat - eräänlaisen esiapploderin läsnäolo, jonka avulla voit tarkastella joitain valmiita tehosteita vasta kun olet napsauttanut luotua banneria. Tähän kaikki erot periaatteessa loppuvat :).

Ohjelman asennus

Advanced Effect Makerin asennus tapahtuu normaalisti, joten siirrytään suoraan ohjelman kanssa työskentelemiseen:

Kun käynnistämme ensimmäisen kerran, meitä pyydetään lukemaan lisenssisopimus. Hyväksy se napsauttamalla "Hyväksyn" -painiketta. Tämän jälkeen voit aloittaa apuohjelman käyttöliittymän tutkimisen:

Käyttöliittymä ja työskentely editorin kanssa

Huolimatta Englannin kieli, täällä kaikki on yksinkertaista ja selvää. Advanced Effect Maker -ikkuna on jaettu kahteen osaan. Vasemmalla on vain kaksi suurta painiketta: ensimmäinen on käytettävissä olevien tehosteiden galleriaan siirtymiseen ja toinen sovelmien lisäämiseen (jos haluat ostaa niitä;)). Oikealla puolella on luettelo käytettävissä olevista malleista, joissa on alaosiot ja esikatseluikkuna sekä tehosteiden muokkausalue.

Aloita haluamasi mallin muokkaaminen napsauttamalla sen kuvaa ja jos haluat vain nähdä kuinka se toimii, napsauta kuvan alla "Esikatselu":

Kun avaat haluamasi tehosteen, näyttöön saattaa tulla viesti, joka ilmoittaa, että se on jo olemassa oleva tiedosto. Jos näin tapahtuu, jätä se huomiotta napsauttamalla "Ok"-painiketta:

Jos malli avattiin onnistuneesti, voimme nähdä useita välilehtiä, jotka sisältävät kaikenlaisia ​​asetuksia:

Ohjelman asetukset ja animaatioiden luominen

Ensimmäinen välilehti on "Yleistä". Sisältyy tähän Yleiset asetukset hanke. Yleensä nämä ovat mitat (leveys - leveys ja korkeus - korkeus), nimi (tiedoston nimi), tulevan tiedoston laatu (laatu) ja myös flash-elokuvan ikkunatila (ikkunatila).

Toinen välilehti, "Väri", kuten nimestä voi päätellä, vastaa projektissa käytetyistä väreistä. Kaikki on täällä hyvin selvää, joten siirrytään seuraavaan - "Viestit":

Tässä meillä on kaksi kenttää. Ensimmäiseen kenttään (vasemmalla) kirjoitamme tekstin, joka meidän on näytettävä erikoistehosteella, ja toiseen - linkki, jota käyttäjä seuraa napsauttamalla banneria. Advanced Effect Makerin etuna on, että voimme syöttää rajattoman määrän tekstirivejä (sekä linkkejä), mutta suurin haittapuoli on venäjän kielen tuen puute:(.

Kahta seuraavaa välilehteä käytetään kirjasimien (Fontit) ja animaatioominaisuuksien (Others) hallintaan. Yksi varoitus: jos haluat käyttää vaihtoehtoisia TTF-fontteja, ne on ensin muunnettava yhteensopiviksi Advanced Effect Makerin kanssa. Voit tehdä tämän soittamalla "Muunna fontit" -työkalulle "Työkalut" -valikosta ja valittuasi haluamasi fontin napsauttamalla "Muunna" -painiketta:

Kun kaikki muutokset on tehty, voimme napsauttaa "Luo sovelma" -painiketta. Tämän jälkeen projektin kohdekansioon luodaan kaksi tiedostoa: SWF (suora animaatio) ja HTML (sisältää ohjeet tuloksena olevan animaation toteuttamiseksi sivusi koodiin):

Työtulosten säästäminen

Siinä ei kuitenkaan vielä kaikki. Advanced Effect Makerilla voit luoda oman tehosteen olemassa olevan tehosteen perusteella tai kokonaan tyhjästä! Voit tehdä tämän siirtymällä "Työkalut" -valikkoon ja aktivoimalla "Plugin Maker" -kohdan:

Tässä sinun on ensin asetettava nimi uudelle projektille sekä joitain muita parametreja (valinnainen). Tämän jälkeen voit napsauttaa "Luo sovelma" -painiketta ja siirrymme suoraan tehosteiden muokkausikkunaan:

Täällä on useita painikkeita, joiden avulla voit syöttää joitain tulevaisuuden vaikutuksen skenaarioon. vakio-ominaisuudet. Ainoa ongelma on, että joudut syöttämään kaikki tarvittavat muuttujat ja arvot manuaalisesti itse, mikä vaatii ohjelmointitaitoja ActionScriptissa tai JavaScriptissä :(.

johtopäätöksiä

Advanced Effect Maker voi miellyttää aloittelevia web-suunnittelijoita, koska sen avulla voit luoda vaivattomasti melko vaikuttavia bannereita, animoituja valikoita, diaesityksiä ja jopa pieniä pelejä (kuten tag). Esiapploderin muodossa oleva puute (jos se on läsnä valitussa efektissä) voidaan poistaa erityisillä SWF-tiedostojen purkuohjelmilla (mukaan lukien ilmaiset) ;).

Onnea sinulle kaikissa pyrkimyksissäsi ja luovaa menestystä!

P.S. Lupa vapaasti kopioida ja lainata tätä artikkelia edellyttäen, että avoin aktiivinen linkki lähteeseen ilmoitetaan ja Ruslan Tertyshnyn kirjoittaja säilyy.