Hogyan készítsünk flash animációt. Új fájl (dokumentum) létrehozása a Flash CS6-ban
A webhely összes része
Flash animáció létrehozása flash
Flash létrehozása és szerkesztése
Téma létrehozása és szerkesztése mindenféle flash objektum: videó, rajzfilm, transzparens, webhely "- nagyon érdekes, lehet, hogy nem lesz Profi, de MINDENKINEK ismernie kell az" alapokat "és alkalmazni kell ezeket a tudásokat a gyakorlatban!
Mi az egyedi vaku technológia? Természetesen rengeteg előnye van, dinamikusabbá, élénkebbé, interaktívabbá tette a világhálót, lehetővé tette színes céges prezentációk, reklámok, bannerek stb. stb.
Ez a banner kattintható :-)
Ennek a technológiának köszönhetően először animáció készítése nemcsak az elit (szakemberek), hanem amatőrök milliói számára is elérhetővé vált.
A probléma megoldására sok program létezik - kicsik és nagyok, egyszerűek és összetettek, erősek és nem annyira. Különálló (mindenekelőtt) a két szörny ezen a területen!
Ez a Macromedia (Adobe) Flash és Macromedia Flash Professional 8-as verzió- ő mindenki kedvenc Macromedia Flash 8 szakembere
Nézzük meg közelebbről ezt a két "szörnyet"
Macromedia Flash MX esetén nehéz vállalni, mert joggal tekintik
az egyik legnehezebben elsajátítható számítógépes program.
Először is, nagyon bonyolult. Egyszerűen irreális, hogy egy normális ember megértse és megtanulja az Action Scriptet (az úgynevezett script programkódot).
A vágy itt nem elég! Vastürelemre, kitartásra van szüksége, és olyan lelkesedéssel közelítse meg a tanulmányt ...
Másodszor, ennek a programnak megfelelően egyszerűen nincs többé -kevésbé érthető videólecke és videó tanfolyam (kivéve egyet), és a program tanulmányozása vastag tankönyvekből, amelyeket szakemberek írtak ebben a kérdésben, és az Ön "abszurd" nyelvén - mondhatjuk, hogy a medvék biciklizni tanítanak.
Ha akarod, próbáld ki :-)
De a Macromedia Flash 8 Professional segítségével a dolgok szórakoztatóbbak lesznek
És maga a program könnyebben és érthetőbben tanulható, és a képzés
Sok mindenfélét megtalálsz belőle!
Úgy tűnik: vedd el – nem akarom. Azonban a vastag könyvek tanulmányozása sem számít.
egyszerűek, és valamiért egyáltalán nem olcsók. A legjobb mód
tanulási programok – oktatóvideók. Nos, a LEGJOBB a videó tanfolyam
Természetesen jobb egyszer látni és hallani, mint olvasni
hogyan lehet flash videókat, rajzfilmeket, bannereket készíteni és szerkeszteni.
Mint minden képzés - a Macromedia Flash 8 Professional rendszerben található oktatóvideók fizetett és ingyenes részekre vannak osztva.
És mint mindig, a fizetősek természetesen jobb minőségűek (persze nem képek, hanem az edzés minősége).
Bár van 11 ingyenes , de NAGYON jó és jó minőségű videó oktatóanyagok a flash létrehozására és szerkesztésére szolgáló program kezdeti tanulmányozására.
Ha önállóan akar tanulni létrehozni vagy szerkeszteni kész flash videókat, akkor egyszerűen nem nélkülözheti az erről a témáról szóló videotanfolyamot. Nem könnyű egyedül elsajátítani az ilyen programokat.
És ezek a videó oktatóanyagok nagyon jó segítséget nyújtanak a Flash animációval való munkavégzés készségeinek fejlesztéséhez.
Ahhoz, hogy valóban elsajátítsa a vaku technológiáját, komolyabb videóleckékre van szüksége. Természetesen már nem lehetnek szabadok. Érted miért :)
A Flash-technológiák olyan szorosan beépültek a webdizájnba, hogy manapság egy modern weboldal elemévé válik az animált elemek megjelenése a dizájnban - splash képernyők, flash képek, bannerek és más hasonló betétek - az oldal aktív elemei.
Ezek az elemek mintegy "animálják" a webhely dizájnját, kellemesebbé és kényelmesebbé teszik a webhely felhasználóit, lehetővé teszik az oldal megjelenését és eredetibbé és korszerűbbé tételét.
Vaku olyan elemeket, mint animációs videók, a webdesign legújabb vizuális eszközét képviselik, Macromedia Flas technológiával készültek.
És a webhelyen való jelenlétükkel a gyönyörű flash meghajtók megkülönböztetik webhelyét a többitől, mert jelenleg a leghatékonyabb módszer az információk tömörített méretben és időben történő megjelenítésére.
Ha úgy dönt, hogy gyönyörű flash oldalakat hoz létre, és jó pénzt keres vele ...
Írja be a Yandexet, kérje: " flash webhelyek árai"... és látni fogja, hogy a professzionális Flash-webhely gyártásának ára általában 1000 dollárról indul.
Miért? Ilyen áron több html-oldalt is készíthet? "Igen, tényleg megteheti, de mely oldalak? Ghost-oldalak? Az önépítés weblapjai, ha egyszer hozzájutunk, azonnal el akarunk menekülni.
És végül is az ilyen erőforrások tulajdonosai a sötétben vannak, és nem értik, miért nem ír nekik senki vagy hívja őket. Több tízmillió ilyen webhely található az interneten ...
Gondolod, hogy az ilyen "csodálatos" oldalak tulajdonosai valóban érdekelhetik a látogatókat? A válasz kézenfekvő - semmi haszna az ilyen alkotásoknak!
És ha a professzionális Flash-webhely gyártásának ára általában 1000 dollárról indul, akkor ha professzionális Flash-oldalt rendel, akkor az ár megduplázódik ... és 2000 dollárból lesz!
Amikor az emberek azt látják, hogy egy cég vagy egy személy megengedheti magának egy komoly flash weboldalt, teljesen más a hozzáállása egy ilyen céghez.Az Ön webhelye az arcod és a megjelenésed az interneten.
Más szóval, ami pozitív érzelmeket okoz, később emlékeznek rá, és mint tudják: "Az érzelem az eladások királynője."
Így kiderül, hogy egy professzionális, stílusos Flash webhely valójában egy valódi eszköz a jó pénzkereséshez és a webes kép sikeres elhelyezéséhez a hálózaton.
Sőt, azok az emberek, akik ezeket a szolgáltatásokat kínálják az ilyen webhelyek létrehozásához, soha nem fogják elmondani vagy megmutatni, hogyan jött létre a Flash webhely. A forrásért pedig további díjat kell kérni.
Egy kis példa:
Voltál már nyaralófalvakban? Figyelt a tarka épületekre, minden csíkból, amelyek közül időről időre kiemelkednek a szilárd épületek, gyönyörű homlokzattal, dizájnnal stb.
Az esetek 90% -ában ilyen házakat nem egy autodidakta, hanem egy szakembergárda épített, egy szabványos, kész, szabványos terv szerint, amely szerint tucatnyi hasonló épület készült különböző területeken.
Arra a tényre, hogy ezek az emberek tudják, hogyan kell megfelelően betölteni az alapokat, falakat, tetőt, ablakokat üvegezni stb., Vagy más szóval, profik, mindegyik a saját területén, így a ház szépnek és megbízhatónak bizonyul .
Ugyanez a helyzet a professzionális Flash webhelyek létrehozásával is, tehát egy professzionális Flash webhely létrehozásához a semmiből többszakúnak kell lennie.
Vagyis legalább „három az egyben” össze kell kapcsolni.
1.) Legyen képes kézzel rajzolni egy professzionális, elektronikus táblagépen
(nem egérrel, hanem kézzel). Ismerje az animáció alapjait.2.) Tudjon programozási nyelveket: Acton Script 2 és Acton Script 3
(amit évek óta tanulmányoznak, még a programozási alkalmassággal rendelkezők is).3.) Legyen tehetséged, kitartásod és rengeteg szabadidőd.
Tehát a Flash-tervezők túlnyomó többsége világszerte és Oroszországban egyedi készítésű webhelyeket hoz létre tipikus, kész projektek alapján, amelyek az úgynevezett:
"Kész források a Flash-webhelyekhez, professzionális tervezők és programozók csapata által."
Az ilyen forrás létrehozásának sémája nagyon egyszerű: egy fejlesztői csapat összegyűlik, és nagyon gyorsan és harmonikusan több forrást, flash-webhelyet készít, és mindegyik a saját dolgát végzi.
Természetesen ilyen forrásokat szereznek be: professzionális, bemutatható és kiváló minőségű. Ezután online eladásra bocsátják. És több százezer ilyen forrás van az interneten ...
Csak egy árnyalat van ... Kevesen tudják, hogyan kell szerkeszteni őket, mert a Macromedia Flash programban készülnek, amelyet joggal tekintenek a világ egyik legösszetettebbnek.
Most sikerült megoldást találni. Könnyen szeretne tanulni bármilyen flash forrás szerkesztése egyedül ?!
Íme egy rövid és tömör leírás a videó tanfolyam leckéinek témáiról:
Bevezetés. Ebben a leckében megtudhatja, hogy a Macromedia Flash mely eszköztárait fogjuk használni a videó tanfolyam során. |
|
1: A logó szerkesztése. Megtanulja, hogyan kell megfelelően szerkeszteni egy grafikus vagy szöveges logót a legjobban nézett ki a Flash oldalon. |
|
2: A menü szerkesztése. Lépésről lépésre megmondja, hol keressen többrétegű fájlokat, amelyek dinamikus jellemzőket állítanak be animált Flash menü. | |
3: Az oldalak szövegének szerkesztése. A lecke során részletesen végigjárjuk a teljes fájlkönyvtárat, és megtanuljuk, hogyan kell megfelelően szerkeszteni az összes oldalon található szövegblokkokat. | |
4: Címsorok szerkesztése további, híroldalakon. Elég kiterjedt anyag a banner gombok szerkesztéséről magán a Flash oldalon. | |
5: A szöveg szerkesztése további oldalakon. Egy másik blokk a kulcskeretek megtalálására és a megfelelő dinamikus szövegblokkok megváltoztatására. | |
6: A hiperhivatkozások szerkesztése 1. rész. Ez a rész döntő fontosságú a hivatkozások helyes írása szempontjából az Action Script programozási nyelv formátumában. | |
7: A hiperhivatkozások szerkesztése 2. rész. Az anyag a hiperhivatkozások gombjainak létrehozására szolgál, és a lecke befejezése után megtanulja, hogyan hozhat létre önállóan további gombokat a hiperhivatkozásokhoz. | |
8: A zene beírása. Ebben az oktatóanyag -sorozatban megtanulhatja, hogyan ágyazhat be bármilyen zenei fájlt egy Flash webhelyre. |
|
9: Optimalizálás és közzététel. Nagyon fontos téma a forrás sikeres optimalizálása és az összes mappa és fájl internetre való feltöltése szempontjából. |
|
10: Flash + Php űrlap üzenet küldéséhez közvetlenül a Flash webhelyről. Ebben az oktatóanyag -sorozatban megtudhatja, hogyan lehet testreszabni egy űrlapot az üzenetek teljes forrásverzióban történő küldéséhez. |
Szerencsére az aktív internetezők többsége képes flash játékot létrehozni. Ebben már az alapvető programozási ismeretek is jó segítséget jelentenek a kezdőknek (mellesleg nem is olyan nehéz megszerezni - lenne rá vágy). Szüksége lesz azonban egy kis időre, hogy elsajátítsa a sok speciális flash-játékok (például Macromedia Flash) egyikét.
Sok szoftveroldal többek között csak ilyen fejlesztőket tartalmaz. Telepítésük számítógépre általában nem okoz különleges problémákat a felhasználó számára. Ne feledje, hogy a kiválasztott programot regisztrálni kell, és minden szükséges módosítást telepíteni kell - akkor hűségesen, azaz megszakítás nélkül szolgál majd. A játékkonstruktorok többsége angol nyelven készül, de kereshet egy repedést vagy egy orosz változatot. Gyakran a beállításokban van egy ablak, ahol beállíthatja anyanyelvét.
Hogyan készítsünk flash játékot: előzetes felkészülés
Még mielőtt leülne a konstruktőrt elsajátítani, már rendelkeznie kell a játék durva forgatókönyvével, történetével. Érdemes előre átgondolni az animációt és a tervezést – ezzel jelentősen megtakaríthatja az időt. A flash játék létrehozása előtt döntse el a kívánt játék típusát. Inspirációért keresse fel a flash játékkönyvtárakat bemutató webhelyeket.
A szakemberek azt javasolják, hogy a kezdők egyszerű alkalmazások, például arcade játékok létrehozásával kezdjék. És csak ezután lehet majd továbblépni a bonyolultabb játéktípusokhoz, és akár saját stratégiákat is létrehozni. Ugyanazon kivitelezőben választhatja ki a jövőbeli játék típusát, ahol minden műfaj kényelmesen válogatható. Aktiváljuk például az árkádot (dupla kattintás).
Flash -játék létrehozása: a játéktervezőben dolgozva
Nyissa meg a sablont, és húzza rá a kívánt objektumokat az Animációs objektumok és a Statikus objektumok szakaszból. Hozzon létre hátteret a textúra és a szín kiválasztásával. Objektumok esetén válassza ki a színpaletta segítségével. Az animációs lejátszó segítségével ellenőrizze, hogy mely egyéb funkciók nincsenek használatban. A beállításokban állítsa be a játék karaktereinek (árkádok) vagy tárgyak (logikai játékok) mozgási szintjét.
Ha mindent megtett, akkor indítsa el a hibakeresőt. Ebben a módban a saját játékát végigjátszhatja, bármilyen szintről kiindulva - ez fontos a teljesítmény teszteléséhez. Távolítsa el a talált hibákat, és ellenőrizze újra a flash játékot. Ha minden rendben van, mentse el a módosításokat.
Hogyan készítsünk flash játékot: „jussunk eszünkbe”
Most kitalálhat egy eredeti nevet a flash-agyszüleménye számára, és összeállíthat egy rövid kommentárt. Használja a képernyővédő készítőjét, hogy látványos splash képernyőt hozzon létre a játékhoz. Mentse el az összes változtatást.
Nézze át saját flash játékát az elejétől a végéig, annak érdekében, hogy hibákat és meghibásodásokat találjon (vagy ne találjon), és általában nem árt kritikus pillantást vetni saját kezű munkájára. Nagyon fontos, hogy a játéknak legyenek logikus és világosan meghatározott részei, például egy jó könyv vagy film: a kezdet, az események menete, a vége.
Küldje el játékának tiszta verzióját barátainak - hagyja, hogy a becsületes kritikusok értékeljék az elért eredményeket. Nos, ezek után már fel is töltheti a flash játékot a hálózatra.
Hogyan készítsünk flash játékot, ha van vágyunk, de nincs tudásunk?
Annak a sok felhasználónak, akiket annyira aggaszt ez a kérdés, mindenképpen választ akarunk adni. Ne feledje, hogy bármilyen tudás nem származhat a semmiből. Minden új vállalkozást valahol el kell kezdeni. Idővel kezdi megérteni, hogy pontosan milyen tudás hiányzik a játékok létrehozásához. Elkezdesz tanácsot kérni, ajánlásokat keresni, releváns szakirodalmat olvasni, aminek köszönhetően egyre tovább fogsz lépni készségeidben. Ne félj az újtól, különben sosem éred el, amit akarsz. Sok szerencsét!
* Használt programok: Flash CS3, Photoshop CS3
* Bonyolultság: közepes
* Becsült átfutási idő: 3 óra
A portfólió nagy jelentőséggel bír minden kortárs művész, fotós, tervező és még zenész számára is. Komoly hozzáállást mutat az üzlethez és a professzionalizmushoz. Ma megmutatjuk, hogyan hozhat létre eredeti és stílusos fotó portfóliót a modern Moto CMS Flash tartalomkezelő rendszer alapján.
A Moto CMS önálló verzióját fogjuk használni, amely különféle segédprogramokat, összetevőket, beépített példákat és tiszta, különböző struktúrájú webhelysablonokat tartalmaz. És a legegyszerűbb sablont fogjuk használni, azaz a semmiből létrehozunk egy fényképportfólió oldalt.
Ebben az útmutatóban a következő témákkal foglalkozunk:
* Konténerek készítése.
* Résidők létrehozása ("Bezárás" gomb, egyszerű gomb).
* Modulok létrehozása (zenelejátszó és képgaléria).
* A webhely előtöltőjének szerkesztése
* Weboldal -oldalak létrehozása és tartalommal való feltöltése.
A Moto CMS Vezérlőpult lehetőségeiről és funkcióiról is beszámolunk.
Szükségünk van:
* Adobe Photoshop;
* Adobe Flash CS3;
* A Moto CMS önálló verziója (ingyenes próbaverzió);
* Weboldal tervezés. PSD formátum.
Végső eredmény előnézete
1. lépés: Töltse le a Moto CMS fájlokat
A fényképportfólió webhely létrehozásának megkezdéséhez le kell töltenie a Moto Flash CMS önálló verzióját. Annak érdekében, hogy megismételje az útmutató összes lépését, és megértse a Moto CMS képességeit, elegendő a próbaverzió.
2. lépés: A Moto CMS-fájlok gyors bemutatása
Íme egy gyors áttekintés a Moto CMS fájlokról és mappákról:
* Alkatrészek... Ez a mappa az Adobe Extension Manager által kezelt mxp összetevőket tartalmazza.
* Kezelőpanel... A Vezérlőpult összes fájlját tartalmazza.
* Dokumentumok... Ez a mappa API dokumentációt tartalmaz.
* Példák... 4 példát tartalmaz kész flash oldalakra, a legegyszerűbbtől a legbonyolultabbig, galéria modullal, hírmodullal, zene- és videólejátszóval, kapcsolatfelvételi űrlappal stb.
* Sablonok... 5 sablon, amivel Moto CMS alapú weboldalt lehet készíteni. Minden sablon rendelkezik a szükséges fájlkészlettel, és szerkezete eltér. Ma ezen sablonok egyikét, különösen az 1. sablont fogjuk használni fényképportfóliónk alapjául.
* Readme fájl további információért, hogyan kezdjen hozzá egy webhely létrehozásához a Moto CMS segítségével.
3. lépés: Indítsa el a helyi tárhelyet
Következő lépésünk a webhelysablon elindítása lesz, amelyet portfóliówebhelyünk alapjául fogunk használni. Ehhez szükségünk van egy helyi webszerverre. WampServert használunk. Lehetővé teszi webes alkalmazások létrehozását Apache, PHP és MySQL adatbázisokkal.
Az 1. webhelysablon futtatásához egyszerűen töltse fel a mappa tartalmát a helyi szerverre template_01 a / templates / könyvtárból, valamint a mappa tartalmából kezelőpanel.
Ezt követően a Moto CMS Vezérlőpultra lépünk, megadva az URL -t a böngésző címsorában, a végén pedig a / admin
Jegyzet: Az oldalt most nem fogja tudni megtekinteni, mivel még nem tartalmaz oldalakat. Megjelenik egy 404 -es hibaoldal.
4. lépés: A config.xml szerkesztése
Csak annyit kell tennünk, hogy módosítsuk az oldal szélességét és magasságát, és állítsuk be a háttérszínt.
Projektünk mérete 980 × 800 pixel. Ahhoz, hogy a méret átméreteződjön egy nagy képernyőn, a webhely szélességének és magasságának 100%-át kell beállítani. És ahhoz, hogy helyesen jelenjen meg egy kis felbontású képernyőn, meg kell adnunk a webhely minimális szélességét és magasságát (görgetősávok jelennek meg). A háttérszín fekete (# 000000).
5. lépés: A style.css módosítása
Most meg kell nyitnunk a style.css fájlt, és meg kell adnunk a háttérszínt (fekete). Minden más szerkeszthető a Moto CMS vezérlőpultjával.
6. lépés: hozza létre az előtöltőt
A moto.xfl és a website.xfl forrásfájlok a flamoto és a flawebsite mappákban találhatók.
A webhely előtöltőjét a moto.xfl fájlban kell létrehozni. Az előtöltő lehet egy egyszerű, 100 képkocka klip.
A klip Műveletek paneljén ezt írjuk: „Stop ();” az első képkockához. Ezután tetszés szerint animáljuk a többi keretet.
Azt is írjuk, hogy „Stop ();” az idővonal első képkockájának akcióiban fla.
Ne felejtse el megadni a webhely méreteit (minimális szélesség és magasság) a moto.fla fájl tulajdonságaiban.
A következő lépésünk egy szép animáció elkészítése az előtöltő eltűnéséről. Az utolsó keretben el kell indítanunk az oldalt a „showWebsite ()” funkció aktiválásával.
Nyissa meg a website.xfl fájlt, és frissítse az előtöltőt.
7. lépés: A webhely háttere
Nyissa meg a Moto CMS Media Library-t (Beállítások> Médiatár), és a többi szükséges képpel együtt (a főoldalhoz, főoldalakhoz vagy galériához) töltse fel a háttérképet a „Média hozzáadása” gombbal.
Ezt követően térjen vissza a Vezérlőpultra, hozzon létre egy új oldalt, és helyezzen be egy háttérképet a „Fotó” gombbal. Húzza el a képet, és középre helyezze.
A Betűkezelő lehetővé teszi a felhasználók számára a webhely betűtípusainak kezelését, amelyeket SWF fájlként tárolnak és letölthetnek.
A betűtípus betöltése előtt először át kell alakítanunk SWF formátumba. Erre fogjuk használni Online Font Creator A MotoCMS csapata által kifejlesztett praktikus online alkalmazás, amely lehetővé teszi a TTF és OTF fájlok egyszerű konvertálását SWF formátumba. Mindössze annyit kell tennünk, hogy kiválasztjuk a kívánt betűkészletfájlt .TTF vagy .OTF kiterjesztéssel, hozzáadjuk az Online betűtípus -készítőhöz, kattintsunk a „Betűtípus létrehozása” gombra, és töltsük le a kész SWF fájlt, majd használhatjuk azt a portfólió oldal...
Hozzon létre egy webhely nevét és szlogent
Az új betűtípus betöltése után létrehozhatja a webhely nevét és szlogenjét a Szöveg eszközzel és a kívánt betűtípus alkalmazásával. A szlogen létrehozásához a Tahoma betűtípust használjuk, méret: 10, szín: # 727272. Ezt követően javítsa ki a webhely nevét és szlogenjét a .PSD formátumban leírtaknak megfelelően.
9. lépés: Adja hozzá a képet a kezdőlaphoz
Helyezzük a galéria képét az oldal főoldalára. Ehhez válasszon ki egy képet a Médiatárból a bal oldali eszköztár "Fotó" elemére kattintva. Ha szükséges, állítsa be a helyét a főoldal kialakításának megfelelően.
10. lépés: hozza létre az alsó menüt
Az Alakzat eszközzel szürke, keskeny téglalapot hozhat létre, a Típus eszközzel pedig gombokat. Állítson be mindent a webhely kialakítása szerint.
Mentse el az összes módosítást, és nézze meg az eredményt az "Előnézet" gombra kattintva.
A beépített menümodul segítségével menüt is létrehozhat.
11. lépés: Hozzon létre tartalom tárolókat
Jegyzet: A tárolók olyan klipek a website.fla oldalon, ahol dinamikusan lehet tartalmat hozzáadni. Ezek 4 típusúak lehetnek: 1) egy konténer a webhelyen látható tárgyakkal, 2) konténer elrendezési objektumokkal; 3) egy tároló oldalobjektumokkal; 4) konténer felugró objektumokkal.
Az általunk választott 1. számú webhelysablon alapértelmezés szerint két tárolót tartalmaz: egy tárolót, amelyen az objektumok láthatók az egész webhelyen, és egy tárolót az oldalobjektumokkal. Ha megnyitjuk a website.fla fájlt, látni fogjuk őket:
Ezeket a tárolókat a structure.xml fájl írja le. Győződjön meg arról, hogy a szélessége 980, a magassága pedig 800 képpont.
Tároló olyan objektumokkal, amelyek az egész webhelyen láthatók:
Tároló oldalobjektumokkal:
Ahhoz, hogy a webhely elemeit, például a hátteret, a webhelynevet, a szlogent és az alsó menüt szürke téglalappal lássuk el, minden oldalon látható, azokat egy tárolóba kell helyeznünk a teljes webhely objektumaival. Ezt egyszerűen megtehetjük a Moto CMS vezérlőpultjával. Csak kattintson a kívánt elemre, és válassza ki a helyét - Webhely. (A teljes honlapon).
12. lépés: Hozza létre a Névjegy oldalt
Hozzon létre egy üres oldalt
A bal felső sarokban kattintson a "Létrehozás" gombra, amellyel új oldalt hozhatunk létre.
Az új oldalhoz kapcsoljuk a szükséges menügombokat
Ehhez térjen vissza a főoldalra, és csatlakoztassa a menü gombot az új oldalhoz. Csak válassza ki a menügomb szövegét, és kattintson a link ikonra a jobb oldalon a linkszerkesztő megnyitásához. Esetünkben a "Portfólió" menü gomb a webhely főoldalára, a "Rólunk" gomb pedig a "Rólunk" oldalra utal.
Adjon hozzá háttérképet a Rólunk oldalhoz
Úgy döntöttünk, hogy fekete hátteret adunk az oldalhoz. Ehhez lépjen a Médiatárba a bal oldali panelen található "Fénykép" gombra kattintva, válassza ki az előre betöltött képet (egy normál fekete téglalapot), és állítsa be annak helyzetét az oldalon a tervnek megfelelően.
Szöveg hozzáadása a Rólunk oldalhoz
Adjon hozzá szöveges információkat az oldalhoz a Szöveg eszközzel. A beépített WYSIWYG szerkesztő mindent megmutat, amit csinál, így a szöveg formázása egyszerű. A kapcsolattartó címét is nagyon könnyű hozzáadni, csak meg kell nyitnia a Linkszerkesztőt, és be kell írnia az e -mail címet.
Ha végzett, ne felejtse el elhelyezni a Rólunk oldal elemeit az oldalobjektum-tárolóban. Válassza ki egyenként az egyes elemeket, és válassza ki az elhelyezést: Oldal (oldal tartalma).
13. lépés: módosítsa az előtöltő képét
Lehet, hogy észrevette a fehér kör alakú előtöltőket, amikor az oldalak között navigál. Ezek konfigurálásához nyissa meg a website.fla fájlt, és lépjen a könyvtárba. Kattintson a jobb gombbal az előtöltőre, és válassza a Tulajdonságok menüpontot.
A szimbólum tulajdonságai ablakban kiválaszthatja az "Alaposztály szerkesztése" elemet, majd tetszés szerint animálhatja az előtöltőt. Üresen hagyjuk az előtöltőt, és töröljük a grafikus képet.
14. lépés: animálja a webhelyet
Végül elérkeztünk oktatóanyagunk legérdekesebb részéhez: a webhely -animációkhoz. Jelenleg, ahogy észrevetted, a webhely statikus, mivel egyetlen konténer sem animált. Ezért a következő lépésünk a konténerek animálása és más animációk hozzáadása, amelyek életre keltik webhelyünket.
Alapértelmezett tárolók animálása
A tartalomtároló könnyen animálható az idővonal mentén. Nyissa meg a website.fla fájlt, és hozzon létre egy halványítási animációt minden tárolóhoz.
Először a fő konténert animáljuk a webhelyen látható tárgyakkal. Ez a website_holder_1 réteg. Egy egyszerű animációt készítünk átlátszósággal, de valamivel díszítjük a megjelenését. Hozzon létre egy második kulcskockát a rétegen, állítsa az Alfát 0%-ra az első kulcskockához (tegye átlátszóvá), hozzon létre egy közbenső keretet az elsőtől a másodikig, majd adjon hozzá lágyítást.
Hozza létre ugyanazt az animációt az oldalobjektumokkal rendelkező tárolóhoz (page_1_holder_2 réteg), de némileg később jelenítse meg.
Ezzel további két kulcskockát ad hozzá a réteghez, átlátszóvá teszi a tárolót az első és a második képkockában, és egy lágyított köztes keretet hoz létre a második kulcskockából a harmadikba.
Amikor összeállítjuk és betöltjük az oldalt, látni fogjuk, hogy minden elem már animációval együtt megjelenik. De amikor egyik oldalról a másikra lép, nincs animáció, csak szokatlan villanások. Az idővonal második része felelős ezért.
Így animáljuk a konténer megjelenését és eltűnését.
Mivel a szöveg betűtípusa a rendszer betűtípusaiból származik, a keverési módot normál rétegről szintre kell változtatnunk minden filmklip példánynál a tárolórétegeken.
További konténereket hozunk létre és animálunk.
Egy jó flash webhelyhez ez az animáció nem elegendő, ezért animáljuk a webhely más részeit, például a felső részt (sárgával kiemelve az alábbi képen), az alsó részt (zölddel kiemelve) és magát a tartalmat (a képen a piros keretben).
Mivel a felső és az alsó rész a teljes oldal szintjén van, ehhez a két részhez két tárolót adunk. A konténerek hozzáadása előtt meg kell határoznunk azok méretét és helyét. Ez könnyen elvégezhető a Photoshop Slice eszközzel.
A felső rész a következő méretekkel rendelkezik: x = 0, y = 0, szélesség = 980, magasság = 120.
Alsó zóna: x = 0, y = 765, szélesség = 980, magasság = 35.
A felső tároló tartalmazza a webhely nevét, az alsó tároló tartalmazza a menüket, és ezek eltérően jelennek meg. Ezenkívül teljes képernyős módba kapcsolva a képernyő tetejéhez és aljához tapadnak.
A konténerek méretének meghatározása után megnyitjuk a structure.xml fájlt, és új konténereket adunk hozzá (telephely szinten), megadva azok koordinátáit, szélességét, magasságát és mélységét.
Miután hozzáadtuk a tárolókat a .xml fájlhoz, létre kell hoznunk azokat a website.fla fájlban. Nyissa meg a website.fla fájlt, és hozzon létre új rétegeket tárolóinkhoz. A rétegek sorrendjének meg kell egyeznie az xml fájlban megadott mélységi értékekkel.
Másolhatjuk az üres mozgóképet a website_holder_1 rétegről, és beilleszthetjük a website_holder_3 és website_holder_4 fájlokba.
Állítsa be a klipben ugyanazokat a koordinátákat, mint a szerkezet.xml fájlban.
A 3. konténer esetében: x = 0, y = 0;
A negyedik tárolóhoz: x = 0, y = 765.
Mióta lemásoltuk a klipet, a régi nevek maradnak. Azonosítójuk szerint változtatjuk őket, hogy könnyen megtalálhassuk őket.
Ugyanezt kell eljárni a 4-es tartálynál is.
Az idővonalon állítsa be az első kulcskockát a 3. és 4. tárolóhoz, hogy azok később jelenjenek meg, mint a teljes webhely objektumait tartalmazó tároló. Ezután elkészítjük a második kulcskeretet és az animációt. Az első kulcskeretek tartalmazzák a tárolók kiindulási helyzetét, a második pedig a tárolók végső pozícióját a helyszínen. A fő konténer megjelenik a képernyő tetején, ezért áthelyezzük az első kulcsképbe; az alsó tartály az alsó oldalon található, így azt is áthelyezzük az első kulcsképbe. Könnyítéseket is adunk a köztes keretek animálásához.
Íme, amit kaptunk:
Ezt követően hozzá kell adnunk a következő kódot a műveleti réteghez a tárolóink animációjának első kulcskockájának szintjén.
Ezután összeállítjuk a webhelyet, és frissítjük a Vezérlőpultot.
Helyezzen tárgyakat edényekbe
Ha bármelyik objektumot kiválasztja, látni fogja, hogy két új tároló jelent meg a legördülő menü lehetséges elhelyezéseinek listájában: a felső és az alsó.
A szlogennel ellátott webhelynevet a felső tárolóba kell helyezni, az alsó menüben pedig szürke téglalapot.
Az alsó tartály tartalmának megváltoztatása
Kívánatos, hogy az alsó tartály nagy képernyőn tapadjon a képernyő aljához. Ehhez át kell helyeznünk a konténer animációját egy másik klipre, mert mint tudjuk, nem tudjuk programozottan mozgatni az animált klipet (az animáció nem fog működni). Nevezzük ezt a klipet website_holder_4_c-nek.
Ezután lépjen a fő jelenetre, kattintson a 3. és 4. tároló első kulcskockáira, és szerkessze a kódot.
A webhely összeállítása után láthatja, hogy az alsó tartály a képernyő aljához tapad, függetlenül attól, hogy hogyan méretezzük át a képernyőt. Ha a képernyő felbontása túl kicsi, akkor az alsó tartály nem fog átfedni a webhely tartalmával, és a helyén marad.
15. lépés: A webhely tartalomtárolójának animálása
A webhely tartalmának animálásához ugyanúgy animálnunk kell a tárolót a teljes webhely objektumaival, mint a felső és alsó tárolók esetében.
16. lépés: Hozza létre a Kapcsolat oldalt
Új oldal létrehozása előtt frissítsük az oldalsablont. Tegyük a "Rólunk" oldalt minden új oldal sablonjává. Kattintson jobb gombbal a Rólunk oldalra, és válassza az Oldalsablon frissítése lehetőséget.
Miután frissítettük az oldalsablont, kattintson a „Létrehozás” gombra, írja be az oldal nevét, címét, rendeljen hozzá egy URL -t, és válassza ki a helyét a webhely szerkezetében, amint az az alábbi képernyőképen látható.
A "Kapcsolatok" oldal készen áll. Marad a tartalom szerkesztése egy kényelmes WYSIWYG szerkesztővel, és a linkszerkesztő segítségével csatlakoztathatja azt a megfelelő menügombhoz.
17. lépés: hozzon létre egy egyszerű slotot
A Moto Flash CMS -ben a rések animált objektumként működnek. A nyílás nagyszámú animált funkciót tartalmazhat, amelyek közvetlenül a Vezérlőpultról vezérelhetők.
Először megpróbálunk létrehozni egy egyszerű slotot, majd javítani.
Kezdjük a Bezárás gombbal, adjuk hozzá a webhelyhez képként, alkalmazzunk rá néhány effektust, és rendeljük hozzá az Ugrás az oldalhoz -> Kezdőlap műveletet.
Animáljuk a Bezárás gombot, ez egyáltalán nem nehéz, mert egy slot segítségével fogjuk megcsinálni. Hozzunk létre egy rést a website.fla fájlban. Ehhez importálja a "Bezárás" gomb képét a könyvtárba. A Slots részben létre kell hoznunk egy új movieclip -et, és el kell neveznünk CloseButtonSlot -nak.
Állítsuk be az osztályt CloseButtonSlot -nak. Nem kell új osztályt létrehozni, elég az AbstractMotoSlot osztályt örökölni. Csak másolja ki: com.moto.template.shell.view.components.AbstractMotoSlot és illessze be az Alaposztály mezőbe.
Ezután hozzáadjuk a Close gomb képét a színpadhoz (a CloseButtonSlot MovieClipnek nyitva kell lennie), és átalakítjuk a CloseButtonIcon nevű klippé. Mivel a nyerőgépünket az AbstractMotoSlot osztálytól örököltük, ez adja meg az alapvető animációt. Most szép kiterjesztési / összecsukási hatást fogunk létrehozni.
A következő lépés egy új réteg létrehozása, és kulcskockák létrehozása, amelyekben a „Stop ();” elhelyezhető. Helyezzük a fő címkéket „fölé” (az első és a második stop keret közé) és „out” (a második és a harmadik stop kulcskép közé) - lásd a képernyőképet:
A klipünkkel ugyanazokat a kulcskockákat és köztes képkockákat hozzuk létre a rétegen.
Például a "Bezárás" gomb az óramutató járásával megegyező irányban forog, ha fölé viszi, és az óramutató járásával ellentétes irányba, ha eltávolítja.
Tegyünk hozzá némi fényerőt a forgatáshoz, és némi lágyítást a tweenhez.
Az animáció elkészítése után összeállítjuk a website.fla fájlt az új bővítőhelyünkkel (Ctrl + Enter).
Ahhoz, hogy a nyílással dolgozhassunk a Moto CMS használatával, meg kell adnunk a paramétereit a fájlban: structure.xml:
librarySymbolLinkage = ”” - movieclip slot exportálása (Osztály neve).
animated = "true" - egy attribútum, amely jelzi, hogy a hely animált -e vagy sem.
resizable = "false" - van-e logika a slot átméretezéséhez vagy sem.
locked = "false" - meg kell-e jeleníteni a nyílást a Vezérlőpulton vagy sem.
- a hely összes tulajdonságának alapértelmezett értéke, hozzá kell adnia az alfa = "" attribútumot - a nyílás átlátszóságát, 0 -tól 1 -ig.
A mi esetünkben ez történt:
Ezután lépjen a Vezérlőpultra, és nyisson meg minden oldalt. A „Slot” részben láthatja az összes elérhető slotot. Válassza ki a Bezárás gomb helyet, és helyezze az oldalra a Bezárás gomb képe helyett.
Ha egy nyílást választ, a tulajdonságok panel megjelenik a jobb oldalon. Lépjen a „Műveletek” → „kattintás” pontra, és jelölje be az „Engedélyezés” → „Ugrás az oldalra” → „Kezdőlap” négyzetet.
Ezután másolja ki a nyílást, és illessze be más oldalakra, ahol a Bezárás gombra van szükség. Mentse el a módosításokat, és ellenőrizze az eredményt.
18. lépés: Hozzon létre egy bonyolultabb bővítőhelyet
Klip létrehozása SimpleButtonSlot. A structure.xml fájl módosítása
Esetünkben a slot komplexitása a dinamikusan változó paraméterek hozzáadása. Hozzunk létre egy slot gombot néhány változó paraméterrel. Ehhez nyissa meg a website.fla fájlt, hozzon létre egy új klipet, és nevezze el SimpleButtonSlot-nak. Az alaposztályt ugyanúgy regisztráljuk, mint a 17. lépésben.
Alaposztály: com.moto.template.shell.view.components.AbstractMotoSlot.
Ezután adjon hozzá egy „Címke” nevű szövegdobozt és egy síkot ezzel a gombbal. Konvertálja a síkot „ButtonLabelPlane” nevű klipbe.
A kényelem érdekében konvertáljuk a címkét filmklippé, és nevezzük el „labelHolder” -nek, majd konvertáljuk a ButtonLabelPlane -t egy másik videoklipre, és nevezzük „planeHolder” -nek.
Nyissuk meg a structure.xml fájlt, és adjunk hozzá egy új helyet két tulajdonsággal. Csak másolja ki és illessze be a következő kódot a slot szakaszba:
Hozza létre a SimpleButtonSlot osztályt
A Base osztály nem elegendő e két tulajdonság kezelésére. Ezért új osztályt kell létrehoznunk. Hozzon létre egy új ActionScript-fájlt az src / slots mappában, nevezze el SimpleButtonSlot.as-nak, és adja hozzá a következő kódot:
Most térjen vissza a SimpleButtonSlot kliphez, és adjon meg egy másik osztályt:
slots.SimpleButtonSlot.
Ezt követően ide kell importálnunk a klipet:
Ahhoz, hogy mindkét tulajdonságot feldolgozzuk, felül kell bírálnunk az updateProperty () függvényt. A következő kódrészletben megjelenik a PropertyVO értéke, típusa, paramétere és getParameter () függvénye. Switch struktúrát használunk, mert két tulajdonságunk van: htmlText és Color.
Most írjuk le a szövegmezőnket (labelHolder) és a síkunkat (planeHolder).
Ezt követően hozzá kell adnunk az AutoSize funkciót:
Mivel a nyílásunk átméretezhető, helyezzük középre a szöveget a síkban. Ehhez felül kell írnunk a SetSize () függvényt. A síkot is át kell méreteznünk a szövegcímke szélessége alapján. A címke tulajdonság frissítésekor meg kell hívnunk a SetSize () függvényt az updateProperty () függvényhez.
Fordítsa össze a webhelyet a módosítások mentéséhez.
A slot animálása
Nyissa meg a website.fla fájlt, lépjen a fő jelenetre, majd a SimpleButtonSlot klipre. A Layer3 -on készítsen három kulcsképet, és illessze be a Stop (); Helyezze el a fő címkéket „over” (az első és a második stop képkocka közé) és „out” (a második és harmadik stop kulcsképkocka közé).
Animáljuk a planeHolder -t (azaz a hátteret). Például kirepülhet és megállhat. Az idővonalon ez így fog kinézni:
Állítsa össze a webhelyet, és tekintse meg a kapott változásokat. Most már dolgozhatunk az objektumnyílással. A nyílásvezérlő panel segítségével (jobb oldalon) szerkeszthetjük a slot tulajdonságait, és különféle effektusokat alkalmazhatunk rá.
Íme egy jó példa arra, hogyan használható ez a slot weboldalunkon. Ezt a "Rólunk" oldalon használtuk az e -mail cím megadásakor.
19. lépés: Hozzon létre egy zenei flash lejátszót
Jegyzet: A modulok olyan animált elemek, amelyek a könyvtárban rendelkezésre álló helyekből származnak, vagy külső SWF -fájlból tölthetők be. Olyan tulajdonságokkal rendelkeznek, amelyek segítségével a felhasználók könnyen kezelhetik őket. A résekhez képest a modulok nagy előnnyel rendelkeznek: minden modul saját vezérlőpanellel rendelkezik. A Moto Flash CMS ötféle vezérlőpanelt biztosít a saját egyedi modulok létrehozásához. Ez azt jelenti, hogy a Flash fejlesztők meg tudják csinálni a felülettervezést, mivel a többit már a Moto CMS fejlesztők készítették.
Például az általunk használt 1. sablon beépített zenelejátszó modullal rendelkezik. Ezt a modult egyszerűen hozzáadhatja bármely oldalhoz, és dupla kattintással megnyithatja a vezérlőpultot.
Hozzon létre egy MusicPlayerModule filmklipet. A structure.xml fájl módosítása
Készítsünk egy egyszerű zenelejátszót be/ki funkcióval. Nyissa meg a website.fla fájlt, és hozzon létre egy új klipet, nevezze el "MusicPlayerModule" -nak, és adja meg az alaposztályt: modules.MusicPlayerModule. Ezután hozzáadjuk a színpadhoz, és átalakítjuk "musicPlayerIcon" klipszé.
Nyissa meg a structure.xml fájlt, és adjon hozzá egy új modult. A modulok szakaszban adja hozzá a következő kódot:
Hozza létre a MusicPlayerModule osztályt
Hozzon létre egy új ActionScript fájlt az src / modules mappában, nevezze el MusicPlayerModule-nak, és adja hozzá a következő kódot, hogy üres burkolóanyagot hozzon létre az osztály számára:
Fordítsa le a webhelyet, és töltse be újra a Moto CMS vezérlőpultját. A bal oldali ablaktáblában keresse meg a Modulokat, és válassza ki a zenelejátszót az oldalra helyezéshez.
Kattintson duplán a modulra a vezérlőpult megnyitásához, és töltsön be néhány számot (a "Hozzáadás" gomb segítségével). Most hallhatja a zenét, de nem tudja leállítani.
Ennek kijavításához lépjen a MusicPlayerModule kliphez, és hozzon létre egy alakzatot. Változtassuk át a "Button" című filmvé. A kattintási események és a hang be- és kikapcsolására fogjuk használni.
Mivel a Music Player modul a "megosztott objektum" logikáját használja, és megjegyzi, hogy a hang be van-e vagy ki van kapcsolva, a modulnak bekapcsoláskor ellenőriznie kell, hogy a zene szól-e vagy sem.
20. lépés: Hozzon létre Flash képgalériát
Ez a lépés nagyon kiterjedt. Most leírjuk, hogyan lehet gyorsan beilleszteni egy galériát, megadva az összes szükséges forrásfájlt.
Nyissa meg a structure.xml fájlt, és helyezze be a galéria modult.
A modul hozzáadása után meg kell jelennie a Vezérlőpulton. Ahhoz azonban, hogy vele dolgozhasson, három osztályt kell létrehoznia: GalleryModule.as, Monitor.as és Scroll_bar.as, amelyek a / gallery_sources / mappában találhatók.
Töltse be ezeket az osztályokat (GalleryModule.as, Monitor.as és Scroll_bar.as) az src / modules mappába.
A zip archívumban megtalálható a gallery.fla fájl is. Másolja a movieclip galériákat a gallery.fla -ból a website.fla -ba.
Miután mindent feltöltött a helyi szerverre, elkezdheti a galériával való munkát. A bal oldali ablaktáblán kattintson a Modul elemre, válasszon egy képgalériát, és helyezze el az oldalon. Kattintson duplán a modulra a vezérlőpult megnyitásához. Adjunk hozzá néhány fényképet a "Hozzáadás" gomb segítségével.
Minden képhez megadhat címet és Alt értéket, leírást adhat hozzá, vagy linkelheti a képet a webhely bármely oldalához, előugró ablakhoz vagy akár egy külső URL-hez.
Mentse el a változtatásokat, és nézze meg a webhelyet.
Következtetés
Így befejeztük a fotóportfólió-webhely létrehozásának történetét a semmiből a Moto flash CMS használatával. Emlékezz arra Moto CMS számos további modult és widgetet biztosít, amelyek alapján létrehozhat saját modulokat, ami időt és költségeket takarít meg. Ezenkívül ez a Flash CMS minden szükséges SEO eszközt is tartalmaz, amelyek segíthetnek webhelye optimalizálásában, hogy magasabb helyre kerüljön a keresési eredmények között.
És online áruházunkban több mint 80 professzionális, funkcionális és gyönyörű terméket talál flash webhelysablonok .
Sok sikert a fejlődéshez.
Folyamatosan szembesülünk a flash animációval - az interneten és a televíziós adásokban. Egyszerű Flash -animációk készítése a Flash technológia használatával meglehetősen egyszerű feladat, mivel a Flash számos hasznos eszközt kínál, amelyek egyszerűbbé teszik az egész folyamatot. Ha flash-animációt vagy rajzfilmet szeretne készíteni, akkor néhány óra alatt felvázolhatja.
Lépések
1. rész
Képkockánkénti flash animáció- Alapértelmezés szerint a Flash másodpercenként 24 képkockát (FPS) játszik le. Ez azt jelenti, hogy 24 képkocka jelenik meg egy másodperc alatt, de nem mindegyiknek kell különböznie. Ezt a beállítást (ha tetszik) módosíthatja 12 képkocka/másodpercre, de 24 képkocka/másodpercnél az animáció simábban fog lejátszani.
-
Telepítse a Flash Professional alkalmazást. Sok Flash animációs program létezik, de a legerősebb az Adobe Flash Professional CC. Ingyenesen kipróbálhatja ezt a programot, vagy használhat másik terméket (ha nem szeretne regisztrálni az Adobe Creative Cloud szolgáltatásra). A cikk további része a Flash Professional használatával dolgozik.
Mivel a képkockánként történő animációhoz több képre van szükség (amelyek kissé eltérnek egymástól), ezeket a képeket manuálisan kell létrehoznia. Ehhez használja az Adobe Flash Professional alkalmazást, vagy rajzoljon képeket bármely grafikus szerkesztőben.
- Ha azt szeretné, hogy képei könnyen átméretezhetők legyenek a minőség romlása nélkül, hozzon létre képeket vektoros, nem pedig raszteres grafikával. A vektoros képek átrajzolják magukat, amikor átméretezik őket (vagyis elkerülik a pixelálást vagy az aliasingot). A bitképek hagyományos képek, például fényképek, kézzel rajzolt képek stb. Ha megpróbálja felnagyítani az ilyen képeket, akkor erősen torz képet kap.
-
Hozza létre az első keretet. Az Adobe Flash Professional első indításakor üres vászon (réteg) és üres idővonal jelenik meg. A keretek hozzáadásával az idővonal automatikusan kitöltődik. A rétegekkel ugyanúgy dolgozhat, mint a Photoshopban.
- Mielőtt képet adna hozzá, hozzon létre alapvető hátteret az animációhoz. Nevezze át az „1. réteget” „Háttér”-re, majd rögzítse. Hozzon létre egy második réteget, és nevezze el tetszés szerint. Ez lesz az a réteg, amelyen létrehozza az animációt.
- Adja hozzá a rajzot az első keret vászonához. A rajzot importálhatja a számítógépéről, vagy a rajzeszközök segítségével közvetlenül a programban hozhatja létre a rajzot.
- Az első keret a "kulcs" keret. A kulcskép egy képkockát tartalmazó keret, amely egy animáció gerincét képezi. Minden alkalommal, amikor megváltoztatja a képet, új kulcsképet hoz létre.
- Az idővonalon lévő kulcsképeket fekete pont jelzi.
- Nincs szükség kulcsképkockára minden következő keretben. Hozzon létre kulcsképet négy -öt képkockán, hogy jó animációt készítsen.
-
Alakítsa át a képet szimbólummá. Ebben az esetben a képet többször is hozzáadhatja a kerethez. Ez különösen akkor hasznos, ha gyorsan hozzá kell adnia több azonos típusú képet egy kerethez (például halat az akváriumban).
- Válassza ki a képet. Kattintson a jobb gombbal a képre, és válassza a "Konvertálás szimbólummá" lehetőséget. A kép hozzáadásra kerül a könyvtárhoz, ami megkönnyíti a jövőbeni használatát.
- Törölje a rajzot. Ne aggódjon – egyszerűen hozzáadhatja a kerethez a könyvtárból való húzással. Így többször is hozzáadhatja ugyanazt a képet a kerethez.
-
Üres keretek hozzáadása. Ha elkészült az első kulcskocka, illesszen be üres kereteket, majd folytassa a második kulcskép létrehozásával. Nyomja meg az F5 billentyűt (négyszer vagy ötször), hogy üres képkockákat adjon hozzá az első kulcskép után.
-
Hozzon létre egy második kulcskockát (miután hozzáadott néhány üres keretet). Ennek két különböző módja van: átmásolhat egy meglévő kulcskockát, és kis módosításokat végezhet rajta, vagy létrehozhat egy üres kulcskockát, és hozzáadhat egy új képet. Ha másik programban készített rajzot használ, használja a második módszert. Ha Adobe Flash Professional rajzeszközökkel készített képet illeszt be, használja az első módszert.
- Kulcskocka létrehozásához az előző kulcskocka tartalmának felhasználásával, nyomja meg az F6 billentyűt. Üres kulcskocka létrehozásához kattintson jobb gombbal az idővonal utolsó képkockájára, és válassza az Üres kulcskép beszúrása lehetőséget.
- A második kulcskép létrehozása után módosítania kell a képét, hogy életre keltse az animációt. Ha az Adobe Flash Professional rajzolóeszközeit használta, válassza az Átalakítás eszközt, hogy kiválasszon egy elemet a rajzban (például egy karakter kezét), és módosítsa azt.
- Ha új képet illeszt be minden kulcsképbe, győződjön meg róla, hogy a megfelelő helyen van (a képkockák logikai sorrendjének megfelelően).
-
Ismételje meg a folyamatot. Két kulcskép létrehozása után ismételje meg a folyamatot – adjon hozzá néhány üres képkockát az egyes kulcskockák közé, és győződjön meg arról, hogy az animáció zökkenőmentesen fut.
- Végezzen apró változtatásokat. Minél kisebb (finomabb) változtatások, annál simábban játssza le az animációt. Például, ha azt szeretné, hogy a karakter felemelje a kezét, a második kulcskeretnek nem szabad olyan rajzot tartalmaznia, amelyben a karaktert már felemelt kézzel ábrázolják. Ehelyett használjon néhány kulcskockát, hogy a leengedett karról a felemelt karra lépjen. Ebben az esetben az animáció simább lesz.
-
Konvertálja a rajzot. Miután létrehozta a kulcsképkockákat és a pályát, átalakíthatja a képet úgy, hogy zökkenőmentesen változzon, amint az iker pályája mentén halad. Módosíthatja a kép alakját, színét, dőlését, méretét és bármely más paraméterét.
- Válassza ki a keretet, amelyben a kép átalakul.
- Nyissa meg a kép tulajdonságai panelt. Ehhez nyomja meg az F3 billentyűt.
- Módosítsa a paraméterértékeket a kép tulajdonságai ablakban. Például megváltoztathatja az árnyalatot vagy a színt, hozzáadhat szűrőket, átméretezheti.
- A Free Transform eszköz segítségével tetszés szerint módosíthatja a képet.
-
Végezze el az utolsó simításokat. Tesztelje a létrehozott animációt a Ctrl + Enter billentyűkombinációval. Győződjön meg arról, hogy a rajz (karakter) megfelelően változik, és az animáció a megfelelő sebességgel játssza le. Ha az animáció túl gyorsan játszódik le, csökkentse az FPS-t vagy növelje az iker időtartamát.
- Az alapértelmezett FPS 24, ezért próbálja meg ezt az értéket 12 -re csökkenteni. Módosítsa az FPS értékét a tulajdonságsávon. FPS = 12 esetén azonban előfordulhat, hogy az animáció nem játszódik le elég simán.
- Az ikrek időtartamának megváltoztatásához válassza ki az ikreket tartalmazó réteget, és a csúszka segítségével módosítsa az ikrek időtartamát. Ha meg szeretné duplázni az iker időtartamát, mozgassa a csúszkát 48 képkockával. Ne felejtse el a hátteret üres keretekbe illeszteni, hogy a háttér ne tűnjön el az animáció közepén. Ehhez válassza ki a háttérréteget, kattintson az animáció utolsó képkockájára (az idővonalon), majd nyomja meg az F5 billentyűt.
A time-lapse animáció alapjai. Ezt a módszert tekintik a "hagyományos" animáció létrehozásának fő módjának, amelyben minden következő képkocka egy, de kissé módosított képet tartalmaz. Az összes képkocka lejátszásakor a kép életre kel. Ugyanez a technika, amelyet a szabadkézi animátorok is használnak, és időigényesebb, mint a bekötés (lásd a következő részt).
Elgondolkozott már azon, hogy mi rejtőzik az interneten található bannerek gyönyörű animációi mögött? Vagy számítógépes technológiával készült újszerű rajzfilmek? Leggyakrabban "húson" alapulnak, vagy inkább így fordítják a Flash technológia nevét angolról. Ma az oldal flash animációjáról fogunk beszélni:
Flash technológia
A multimédiás keretrendszert a Macromedia fejlesztette ki. A felvásárlást (egyesülést) követően azonban a technológia minden jogát átruházták az új tulajdonosra - az Adobe Systemsre.
Az Adobe Flash modern használatának területe:
- A webes alkalmazások létrehozása meglehetősen új irány. Tartalmazza a Flash teljes vagy részleges használatát webhelyek létrehozásához. Részleges alkalmazásnál ezzel a technológiával egyedi tervezési elemek jönnek létre: különféle interaktív menük, animált gombok stb.
A hagyományos html-alapú erőforrásokhoz képest a flash webhelyek rendelkeznek bizonyos funkciókkal, amelyek korlátozzák használatukat. Ide tartozik a magas fejlesztési költség, az igényes szerver erőforrások, a hosszú letöltési idők lassú internetkapcsolat mellett és néhány egyéb szempont:
- Multimédiás képességek megvalósítása - hanghallgatáshoz és videolejátszáshoz a webhelyeken gyakran használják a Flash alapján létrehozott médialejátszókat. Fejlesztésük magában foglalja az egyik szkriptnyelv (gyakrabban JavaScript) használatát:
- Az online hirdetésekben a technológiát leggyakrabban animált bannerek készítésére használják. Ezek nemcsak a multimédiás reklámok lejátszását, hanem a játékon alapuló interakciót is jelentenek a felhasználóval.
A Flash fejlesztés alapjai és eszközei
Flash-animációk készítéséhez leggyakrabban az Adobe hagyományos eszközeit használják:
- Adobe Flash Professional - interaktív animáció készítésére szolgáló program (animátor);
- Adobe Flash Builder - környezet webes alkalmazásfelület létrehozásához;
- Az Adobe Flash Player egy böngészőbe integrált lejátszó a Flash lejátszásához.
Ezen kívül számos harmadik féltől származó alkalmazás képes lejátszani ezt a típusú multimédiás tartalmat. Ezek közül a legnépszerűbbek a Gnash, a QuickTime és néhány más:
Ez a technológia lehetővé teszi bármilyen típusú grafika megjelenítését ( raszter, vektor, 3D). Támogatja továbbá az audio- és videoadatok streaming továbbítását. A Flash Lite könnyű verzióját kifejezetten mobil eszközökre fejlesztették ki.
A Flash fájlok fő szabványa az SWF kiterjesztés. A rövidítés a Small Web Format rövidítése. A Flash -ben rögzített videó FLV, F4V fájlkiterjesztéssel rendelkezik.
A vektorgrafika a Flash interaktív animációjának fejlesztésének középpontjában áll. Ennek köszönhetően sikerült megvalósítani a multimédiás platform támogatását és az animáció minőségének függetlenségét a képernyő felbontásától.
A Flash alkalmazás fájlmérete minden felhasználó számára azonos, függetlenül a képernyő specifikációjától (felbontásától).
A Flash interaktív animáció a morfológián (vektor típuson) alapul, amelyben a kulcsképek között lassú áramlás van. Az adatok lejátszásához flash lejátszót használnak, amelynek működése sok tekintetben hasonlít a JavaScript virtuális gép működéséhez. A technológia szoftverkomponense az ActionScript nyelv használatával valósul meg.
A technológia hátrányai a következők:
- Nagy terhelés a kliensgép központi processzorán. Ennek oka a flash virtuális gép alacsony hatékonysága, amely a lejátszóval együtt be van ágyazva a felhasználó böngészőjébe;
- Nagy a hibalehetőség - A Flash animáció nagy valószínűséggel játszható le. Ezenkívül a Flash -lejátszás hibái negatívan befolyásolják a teljes ügyfél -alkalmazás (böngésző) működését. Ennek oka a programkód hibatűrésének elégtelen szabályozása a flash alkalmazások létrehozásakor;
- Nem sikerült indexelni - A Flash tartalomban megjelenített összes szöveges tartalom nem vesz részt az indexelési folyamatban. Ez a korlátozás különösen problémás azoknál az erőforrásoknál, amelyek ezen a technológián alapulnak.
Harmadik féltől származó Flash létrehozó szoftver áttekintése
A Sothink SWF Quicker prototípus -alkalmazásnak tekinthető a Flash létrehozásának alapjainak bemutatására. Sok szakember szerint a program a legérthetőbb és legkönnyebben megtanulható.
A Flash szerkesztő a létrehozáson és szerkesztésen kívül "tudja, hogyan" dolgozhat minden más típusú webanimációval (GIF, HTML és más szabványok):
A telepítés után lépjen a program barátságos felületére. Sajnos, miután végigkalandoztunk az interfész nyelvváltó minden zugán, nem találtuk.
Annak érdekében, hogy megértsük, hogyan lehet Flash-animációt készíteni ebben az alkalmazásban, a beépített sablonokat fogjuk használni. A program indítása után azonnal megjelenik az "Új sablonból" párbeszédpanel. Ezenkívül a "Fájl" főmenüponton keresztül hívható meg. A javasolt lehetőségek közül a banner létrehozását választottuk:
A varázsló következő ablakában a legördülő listából ki kell választania egy sablont, amely alapján az animáció létrejön. Alatta van egy kis keret, amelyben a kiválasztott sablon kerül lejátszásra:
A következő lépésekben be kell állítania a szalaghirdetés méreteit, és be kell írnia az animációban lejátszandó 5 szövegkifejezést. Ezenkívül a szalaghirdetésre kattintva meg kell adnia annak az erőforrásnak a címét, amelyhez a felhasználó el lesz vezetve:
A projekt összeállítása és a varázsló ablak bezárása után megtekintheti a kapott videót a beépített lejátszóban. Ehhez kattintson a zöld nyílra a tetején:
A lejátszó bezárása után nézzük meg közelebbről az alkalmazás felületét. Felhívjuk figyelmét, hogy két főablakból áll: a felső a videó időintervallumának szerkesztésére szolgál, az alsó pedig egy normál grafikus szerkesztő. Mindegyik elem külön rétegen helyezkedik el, amely az oldalsó panelen található szabványos szerszámokkal módosítható:
A webhelyhez készített flash animáció közzétehető. A közzétételi mód a tetején található "Közzététel" gombra kattintva választható ki. Három lehetőség közül választhat, beleértve a html -kódba való beillesztést. Ennek a folyamatnak a részletes konfigurálása a "Beállítások közzététele" külön ablakban érhető el.