Adobe Edge Creative Cloud alkalmazások

• Lehet 7, 2024

A HTML5, a JavaScript és a CSS3 majdnem olyan népszerűvé vált, mint a Flash, hogy interaktív animációt hozzon létre az interneten, táblagépeken és telefonokon. Vályogtégla^R Az Edge Animate és a többi Edge alkalmazás nagyon felhasználóbarát szoftver, számos előre beállított beállítással, hogy megkönnyítse a munkáját.

Az idővonal-animáció továbbra is az animáció legnépszerűbb módja, és az Adobe megkönnyítette az új Edge Animate mozgáspályákat, amelyek utánozzák a valós világbeli mozgásokat, és a beépített enyhítés révén. Könnyedén hozzáadhat animációt az idővonal mentén a Pin gombbal, amely animációs markereket ad hozzá az idővonalhoz, vagy húzza és dobja el az objektumokat olyan helyzetben, hogy az Edge Animate automatikusan mozgáspályává alakul. Használhatja még a Felvétel gombot, amely rögzíti a színpadon lévő objektumokon végrehajtott változtatásokat, és ezeket a változásokat kulcskeret-animációvá alakítja. Az Edge-nek megvan a saját verziója is a Műveletek panelen, amely nem csúfolódik, mivel minden egyes műveletnek saját fül van a panelen. Az animációk tesztelése egyszerű az Adobe Edge és a Google Chrome böngésző kombinációjával.

Ha ismeri a Flash animációt, akkor észreveszi, hogy az interaktivitás hozzáadása az Edge-hez hasonló a Flash munkafolyamathoz, mivel beágyazott idővonalakat használhat minden animációs elemhez, és előtelepített kódrészleteket alkalmazhat a leggyakoribb interakciókhoz és animációkhoz. Ezek a kódrészletek kezelik a lejátszás animációit, például a lejátszást, a szünetet, a folytatást és a leállítást, valamint forró területeket hoznak létre az alapvető gombműveletekhez, mint például a kattintás, lebegés és akár a hiperhivatkozások. Ha egyéni kódot szeretne hozzáadni ezekhez a kódrészletekhez, írja be közvetlenül a Műveletek panelt. Természetesen saját HTML5, JavaScript és CSS3 kódolását kézzel is kódolhatja a Műveletek panelen. Mivel az ilyen típusú webes és animációs programozás gyakran a külső JavaScript könyvtárakra támaszkodik, ezekre a külső forrásokra hivatkozásokat is felvehet.

Az animáció csak egy része annak, amit tehetünk az Edge alkalmazáscsoporttal. A webdizájn egyik legfontosabb szempontja egy olyan weboldal létrehozása, amely rugalmas vagy rugalmas minden típusú képernyőhöz, az asztali telefonoktól a mobiltelefonokig. Ezt médialekérdezésekkel és folyékony, százalékalapú rácsrendezéssel hajtják végre, amelyek mindkettő az Edge Reflow eszközben található eszközök részét képezik. Az Edge Reflow egy WYSIWYG munkakörnyezet, amely létrehozza a kódot a projekthez. Ez a kód naprakész a legfrissebb webes szabványokhoz, különösen a WebKithez, amelyet egyre inkább támogat a weboldalak és az e-könyv olvasók.

Az Elge Reflow elrendezésének elkészítése ugyanolyan egyszerű, mint a HTML div konténerek rajzolása a rácsra a Box eszközzel, és ezeknek a osztóknak a teljes elhelyezése lehetővé teszi számukra az átméretezést vagy az átalakítást az egyes képernyőméretekhez. Hogy működik ez? A titok a médialekérdezések, amelyeket testreszabhat a Media Query Manager alkalmazásban a minimális és maximális paraméterek beállításával három vagy több képernyőfelbontáshoz. Ezek a paraméterek határozzák meg, hogy a terv mikor változjon fel vagy le a legközelebbi képernyőmérethez. Nagyon szeretem a színterülettel ellátott vizuális jelölőket a munkaterület tetején lévő egyes képernyőméretekhez, amelyek elősegítik, hogy a változások bekövetkezzenek.

Az egyik legmegtakarítóbb Edge szolgáltatás, amellyel egyszerűen újrafelhasználhatja az egyedi CSS3 stílusokat több projekt során, és így fenntarthatja az egységes stílusokat. Ez a frissítést szinte automatikusvá teszi. Az Adobe ezt a munkafolyamat részévé tette az Edge Reflow Styling panelen. Annak érdekében, hogy a dolgok ne kerüljenek rendetlenségre, minden stílusnak, például háttérrel vagy szegmensekkel, van saját része. A színeket és az egyéb paramétereket, valamint a rétegek hierarchiáját közvetlenül ezekről a lapokról vezérelheti. Ezeket a testreszabott stílusokat automatikusan átalakítják CSS stílusszabályokká, amelyeket később másolni / beilleszteni újrahasználat céljából.

A múltban a weboldal előnézetéhez el kellett mentenie a változtatásokat, váltania kell egy webböngészőre, és frissítenie kell az oldalt. Az Adobe csökkentette ezen lépések számát az Edge Inspect és a Chrome böngésző kombinációjával. Most megnézheti, hogy a projekt hogyan jelenik meg több eszközön, asztali, táblagépről mobiltelefonra. Az egyik olyan szolgáltatás, amelyet nagyon szeretek, az, hogy képeket készíthessünk ezekről az előnézetekről, hogy e-mailen küldjük el az ügyfeleknek és a csapat tagjainak, vagy hogy felhasználjuk a Creative Cloud-on együttműködésre.

Végül, azoknak, akik továbbra is szeretnék a nyers kóddal dolgozni, az Adobe rendelkezik az Edge kóddal. A kód ablaka nem szennyezett, mindössze néhány vezérlővel a bal oldalon, és az Edge Code integrálódik a Google Chrome-hoz, hogy élő előnézetet kapjon. Ha a kód hosszadalmas és nehézkes, akkor a Gyors Szerkesztés funkció segítségével fúrhat le az egyes elemek szintjére, amely felsorolja az egyes elemekhez csatolt összes stílust az overlay ablakban. Mivel az Edge alkalmazások a Creative Cloud részét képezik, az Adobe Edge webes betűkészleteket, a Google Web betűkészleteket és a Typekit betűkészleteket közvetlenül az élkódban is használhatja. Az Élkód létrehoz egy fejléc-szkriptcímkét, amely behúzza a külső betűtípust.

Mivel a HTML5, a JavaScript és a CSS3 gyorsan helyettesítik a régebbi animációs technikákat a mobil eszközök népszerűsége miatt, ezek az integrált Edge alkalmazások, valamint az Adobe más alkalmazásokkal történő integrációja a több eszköz tervezési és fejlesztési munkafolyamata következő generációja.

Nyilvánosság: Nem kaptam pénzügyi ellentételezést e cikkért. Az Adobe átadta a Creative Cloud tagságot e felülvizsgálat céljából.A véleményem teljesen a saját véleményem, tapasztalataim alapján.

Szerzői jog 2018 Adobe Systems Incorporated. Minden jog fenntartva. Az Adobe termék képernyőképe (i) újra kinyomtatva az Adobe Systems Incorporated engedélyével. Adobe, Photoshop, Photoshop Album, Photoshop Elements, Illustrator, InDesign, GoLive, Acrobat, Cue, Premiere Pro, Premiere Elements, Bridge, After Effects, InCopy, Dreamweaver, Flash, ActionScript, Fireworks, Contribute, Captivate, Flash Catalyst és Flash Paper vagy bejegyzett védjegy (ek) vagy az Adobe Systems Incorporated védjegye (i) az Egyesült Államokban és / vagy más országokban.

Video Utasításokat: [Adobe Creative Cloud] Adobe Edge Animate CC의 새로운 기능들 (Lehet 2024).