„Adobe Edge Creative Cloud Cloud“ programos

• Gegužė 21, 2024

HTML5, „JavaScript“ ir CSS3 tapo beveik tokie pat populiarūs kaip „Flash“ kuriant interaktyvią animaciją žiniatinkliui, planšetiniams kompiuteriams ir telefonams. „Adobe“^R „Edge Animate“ ir kitos „Edge“ programos yra labai patogi naudoti programinė įranga su daugybe išankstinių nustatymų, kad jūsų darbas būtų lengvesnis.

Laiko juostos animacija vis dar yra populiariausias būdas animuoti, o „Adobe“ palengvėjo naudojant naujus „Edge Animate“ judesio takus, kurie gali imituoti realaus pasaulio judesius ir su įmontuotu palengvinimu. Galite lengvai pridėti animaciją išilgai laiko juostos naudodami mygtuką „Pin“, kuris prideda animacijos žymeklius prie laiko juostos, arba vilkdami ir numesdami objektus, esančius scenoje, kurią „Edge Animate“ automatiškai paverčia judesio takais. Jūs netgi galite naudoti mygtuką Įrašyti, kuris įrašo jūsų atliktus scenos objektų pakeitimus ir paverčia šiuos pakeitimus pagrindinio kadro animacija. „Edge“ taip pat turi savo „Veiksmų“ skydelio versiją, kuri neuždengiama kiekvienu veiksmu, turinčiu skydelyje savo skirtuką. Pabandykite animaciją lengvai naudodami „Adobe Edge“ ir „Google Chrome“ naršyklę.

Jei esate susipažinęs su „Flash“ animacija, pastebėsite, kad interaktyvumo pridėjimas „Edge“ primena „Flash“ darbo eigą, nes kiekvienam animacijos elementui galite naudoti įdėtas laiko juostas ir pritaikyti iš anksto įdiegtus kodo fragmentus dažniausiai naudojamoms sąveikoms ir animacijai. Šie kodo fragmentai apdoroja tiek atkūrimo animaciją, pvz., Atkūrimą, pristabdymą, atnaujinimą ir sustabdymą, tiek sukuria karštas zonas pagrindiniams mygtukų veiksmams, tokiems kaip paspaudimas, užvedimas ir net hipersaitai. Norėdami pridėti tinkintą kodą prie šių kodo fragmentų, galite įvesti tiesiai į Veiksmų skydelį. Žinoma, galite rankiniu būdu užkoduoti savo HTML5, „JavaScript“ ir CSS3 „Veiksmų“ skydelyje. Kadangi tokio tipo žiniatinklio ir animacijos programavimas dažnai priklauso nuo išorinių „JavaScript“ bibliotekų, netgi galite pridėti nuorodų į šiuos išorinius šaltinius.

Animacija yra tik dalis to, ką galite padaryti naudodami „Edge“ programų grupę. Vienas iš svarbiausių interneto dizaino aspektų yra svetainės, reaguojančios ar lanksčios visų tipų ekranams, pradedant darbalaukiu ir baigiant mobiliaisiais telefonais, sukūrimas. Tai atliekama naudojant daugialypės terpės užklausas ir sklandų, procentais paremtą tinklelio išdėstymą, kurie abu yra įrankių, rastų „Edge Reflow“, dalis. „Edge Reflow“ yra WYSIWYG darbo aplinka, kurianti jūsų projekto kodą. Šis kodas yra atnaujintas atsižvelgiant į naujausius žiniatinklio standartus, ypač „WebKit“, kurį vis labiau palaiko viskas - nuo tinklalapių iki el. Knygų skaitytuvų.

Sukurti išdėstymą naudojant „Edge Reflow“ yra taip paprasta, kaip naudojant „Box“ įrankį piešti HTML div konteinerius ant tinklelio, o absoliutus šių dalių išdėstymas suteikia jiems galimybę pakeisti dydį arba transformuoti pagal kiekvieno ekrano dydį. Kaip tai veikia? Paslaptis yra daugialypės terpės užklausos, kurias galite tinkinti „Media Query Manager“ nustatydami minimalius ir maksimalius trijų ar daugiau ekrano skiriamųjų parametrų parametrus. Šie parametrai lems, kada dizainas bus pakeistas aukštyn ar žemyn, kad atitiktų artimiausią ekrano dydį. Man labai patinka spalvoti kodavimo ekrano žymekliai, skirti kiekvieno ekrano dydžiui, esančiam darbo vietos viršuje, kurie padeda įsivaizduoti, kada įvyks šie pokyčiai.

Viena iš daugiausiai laiko taupančių „Edge“ funkcijų yra tai, kaip galite lengvai pakartotinai naudoti pasirinktinius CSS3 stilius keliuose projektuose ir taip išlaikyti nuoseklų stilių. Tai taip pat leidžia atnaujinti beveik automatiškai. „Adobe“ tai padarė jūsų darbo eigos dalimi naudodama skydelį „Edge Reflow Styling“. Kad dalykai nebūtų nešvarūs, kiekvienas stilius, pavyzdžiui, fonas ar kraštai, turi savo skyrių. Galite valdyti spalvą ir kitus parametrus, taip pat sluoksnių hierarchiją tiesiai iš šių skirtukų. Šie pritaikyti stiliai automatiškai paverčiami CSS stiliaus taisyklėmis, kurias vėliau galima nukopijuoti / įklijuoti pakartotiniam naudojimui.

Anksčiau norėdami peržiūrėti savo tinklalapį turėjote išsaugoti pakeitimus, persijungti į interneto naršyklę ir atnaujinti puslapį. „Adobe“ sumažino šių veiksmų skaičių naudodama „Edge Inspect“ ir „Chrome“ naršyklių derinį. Dabar galite peržiūrėti, kaip jūsų projektas bus rodomas keliuose įrenginiuose nuo stalinio kompiuterio, planšetinio kompiuterio iki mobiliojo telefono. Viena ypatybė, kuri man labai patinka, yra galimybė padaryti šių peržiūrų ekrano kopiją el. Paštu klientams ir komandos nariams arba naudoti „Creative Cloud“ bendradarbiavimui.

Galiausiai tiems, kurie vis dar mėgsta dirbti su neapdorotais kodais, „Adobe“ turi „Edge Code“. Kodo langas neužterštas, tik keli valdikliai yra kairėje, o krašto kodas integruotas su „Google Chrome“, kad būtų galima tiesiogiai peržiūrėti. Kai jūsų kodas tampa ilgas ir sunkus, naudodamiesi greitojo redagavimo funkcija, kurioje pateikiami visi elementai, pridedami prie perdangos lango, galite susiaurinti iki atskirų elementų lygio. Kadangi „Edge“ programos yra „Creative Cloud“ dalis, „Adobe Edge“ interneto šriftus, „Google“ žiniatinklio šriftus ir „Typekit“ šriftus galite naudoti tiesiogiai iš „Edge“ kodo. Krašto kodas sugeneruos antraštės scenarijaus žymą, įtraukiančią išorinį šriftą.

HTML5, „JavaScript“ ir CSS3 greitai keičia senesnius animacijos metodus dėl mobiliųjų prietaisų populiarumo, todėl šios integruotos „Edge“ programos ir jų integracija su kitomis „Adobe“ programomis yra naujos kartos kelių įrenginių projektavimo ir kūrimo darbo eiga.

Atskleidimas: Man nebuvo suteikta finansinė kompensacija už šį straipsnį. Šiai peržiūrai „Adobe“ pateikė „Creative Cloud“ narystę.Remdamasis savo patirtimi, visiškai laikau savo nuomonę.

Autorių teisės 2018 m. „Adobe Systems Incorporated“. Visos teisės saugomos. „Adobe“ produkto ekrano kopija (-os) perspausdinta gavus „Adobe Systems Incorporated“ leidimą. „Adobe“, „Photoshop“, „Photoshop Album“, „Photoshop Elements“, „Illustrator“, „InDesign“, „GoLive“, „Acrobat“, „Cue“, „Premiere Pro“, „Premiere Elements“, „Bridge“, „After Effects“, „InCopy“, „Dreamweaver“, „Flash“, „ActionScript“, „Fejerverkai“, „Prisidėkite“, „Captivate“, „Flash Catalyst“ ir „Flash“ popierius yra (yra) registruotas (-i) prekės ženklas (-ai) arba „Adobe Systems Incorporated“ prekės ženklas (-ai) JAV ir (arba) kitose šalyse.

Vaizdo Instrukcijos: What is Adobe Animate (October 2017) | Adobe Creative Cloud (Gegužė 2024).