Adobe Edge Creative Cloud Apps
HTML5, JavaScript i CSS3 postali su gotovo jednako popularni kao Flash za stvaranje interaktivne animacije za web, tablete i telefone. čerpićR Edge Animate i ostale Edge aplikacije vrlo su korisni softver s mnogim unaprijed postavljenim uređajima koji olakšavaju vaš rad.

Animacija vremenske linije i dalje je najpopularniji način animiranja, a Adobe je to olakšao novim Edge Animate stazama pokreta, koje mogu oponašati pokrete iz stvarnog svijeta i s ugrađenim olakšanjem. Animaciju uz vremensku traku možete jednostavno dodati pomoću gumba Pin koji animacijskim markerima dodaje vremensku traku ili povlačenjem i ispuštanjem pozicioniranja objekata na pozornici koji Edge Animate automatski pretvara u staze pokreta. Možete čak koristiti gumb Snimanje koji bilježi promjene koje napravite na objektima na pozornici i pretvara te promjene u animaciju ključnog okvira. Edge također ima svoju inačicu ploče Actions (Akcije) koja nije složena tako da svaka radnja ima svoju karticu na ploči. Testiranje animacija je jednostavno uz kombinaciju Adobe Edgea i preglednika Google Chrome.

Ako ste upoznati s Flash animacijom, primijetit ćete da dodavanje interaktivnosti u Edgeu nalikuje Flash tijeku rada, tako da možete koristiti ugniježđene vremenske crte za svaki element animacije i primijeniti unaprijed instalirane isječke koda za najčešće interakcije i animacije. Ovi isječci koda upravljaju animacijom reprodukcije, poput reprodukcije, stanke, nastavka i zaustavljanja, kao i stvaranje vrućih područja za osnovne radnje gumba, poput klika, zadržavanja miša, pa čak i hiperveza. Da biste ovim isječcima koda dodali prilagođeni kôd, možete izravno unijeti na ploču Akcije. Naravno da na HTML-u, JavaScript i CSS3 možete ručno kodirati na ploči Action. Budući da se ova vrsta web i animacijskog programiranja često oslanja na vanjske JavaScript knjižnice, možete čak dodati veze do tih vanjskih izvora.

Animacija je samo dio onoga što možete učiniti s grupom aplikacija Edge. Jedan od najvažnijih aspekata web dizajna je izrada web stranice koja je prilagodljiva ili fleksibilna za sve vrste ekrana od stolnih do mobilnih telefona. To se provodi pomoću upita medija i tekućeg izgleda rešetki zasnovanih na postotku, a oba su dio alata koji se nalaze u Edge Reflowu. Edge Reflow je radno okruženje WYSIWYG koje generira kôd za vaš projekt. Ovaj je kôd ažuriran za najnovije web standarde, posebno WebKit koji sve više podržava sve, od web stranica do čitatelja e-knjiga.

Izgradnja izgleda u Edge Reflowu je jednostavna kao crtanje HTML div spremnika na rešetku pomoću alata Box, a apsolutno pozicioniranje ovih div-ova omogućuje im da promijene veličinu ili transformišu prema potrebi za svaku veličinu zaslona. Kako ovo radi? Tajna su medijski upiti koje možete prilagoditi unutar Upravitelja medijskih upita postavljanjem minimalnih i maksimalnih parametara za tri ili više razlučivosti zaslona. Ovi će parametri odrediti kada će se dizajn transformirati prema gore ili prema dolje za najbližu veličinu zaslona. Jako mi se sviđaju vizualni markeri obojeni u boji za svaku veličinu zaslona na vrhu radnog prostora koji vam pomažu u vizualizaciji kada će se te promjene dogoditi.

Jedna od značajki Edge koja štedi vrijeme je kako lako možete ponovo koristiti svoje prilagođene CSS3 stilove tijekom nekoliko projekata i na taj način održavati dosljedne stilove. Ovo također čini ažuriranje gotovo automatskim. Adobe je ovo pretvorio u vaš tijek rada s pločom Edge Reflow Styling. Da bi se stvari ostale nepotpune, svaki stil, poput pozadine ili obruba, ima svoj vlastiti zasebni odjeljak. Možete upravljati bojom i drugim parametrima, kao i hijerarhijom slojeva, izravno s tih kartica. Ovi prilagođeni stilovi automatski se pretvaraju u pravila CSS stila koja se zatim mogu kopirati / zalijepiti za ponovnu upotrebu.

U prošlosti ste za pregled web stranice trebali spremiti promjene, prebaciti se na web preglednik i osvježiti stranicu. Adobe je smanjio broj ovih koraka pomoću kombinacije Edge Inspect i preglednika Chrome. Sada možete pogledati kako će se vaš projekt prikazivati ​​na više uređaja sa stolnog računala, tableta na mobilni telefon. Jedna osobina koja mi se jako sviđa je mogućnost snimanja zaslona ovih pregleda za slanje e-pošte klijentima i članovima tima ili korištenje Creative Cloud-a za suradnju.

Konačno, za one od nas koji još uvijek vole raditi sa sirovim kodom, Adobe ima Edge Code. Prozor koda je prepun samo nekoliko kontrola na lijevoj strani i Edge Code se integrira s Google Chromeom kako bi vam omogućio pregled uživo. Kad vaš kôd postane dugačak i nespretan, možete se detaljno pregledati do razine pojedinog elementa pomoću značajke Quick Edit koja prikazuje sve stilove pričvršćene na element u prozoru preklapanja. Budući da su aplikacije Edge dio Creative Cloud-a, možete koristiti Adobe Edge Web Fonts, Google Web Fontove i Typekit fontove izravno iz Edge Code. Edge Code generirat će oznaku skripte zaglavlja koja povlači vanjski font.

Kako HTML5, JavaScript i CSS3 brzo zamjenjuju starije tehnike animacije zbog popularnosti mobilnih uređaja, te integrirane Edge aplikacije kao i njihova integracija s ostalim Adobeovim programima sljedeća su generacija višestrukog dizajna i razvoja tijeka razvoja uređaja.

Otkrivanje: Za ovaj članak nisam financijski nadoknađen. Za potrebe ovog pregleda Adobe je dostavio članstvo u Creative Cloudu.Mišljenja su u potpunosti moja na temelju mog iskustva.

Autorska prava 2018. Adobe Systems Incorporated. Sva prava pridržana. Snimke zaslona Adobe proizvoda preispisane su uz dozvolu tvrtke Adobe Systems Incorporated. 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 i Flash Paper je ili su [a] registrirani zaštitni znak (i) ili zaštitni znak (Adobe) tvrtke Adobe Systems Incorporated u Sjedinjenim Državama i / ili drugim zemljama.


Upute Video: Building a Mobile App with Adobe Creative Cloud | Adobe Creative Cloud (Svibanj 2024).