Adobe Edge Creative Cloud Apps
HTML5, JavaScript in CSS3 so postali skoraj tako priljubljeni kot Flash za ustvarjanje interaktivne animacije za splet, tablice in telefone. AdobeR Edge Animate in druge aplikacije Edge so zelo uporabniku prijazna programska oprema z veliko prednastavitvami za lažje delo.

Animacija na časovni premici je še vedno najbolj priljubljen način animiranja, Adobe pa si je olajšal nove poti gibanja Edge Animate, ki lahko posnemajo gibanja v resničnem svetu in z vgrajenim sproščanjem. Animacijo lahko po časovni premici preprosto dodate s tipko Pin, ki doda animacijske označevalce na časovnico ali s pozicioniranjem predmetov na odru, ki jih Edge Animate samodejno pretvori v poti gibanja. Uporabite lahko celo gumb Snemanje, ki beleži spremembe, ki jih vnesete v predmete na odru, in te spremembe pretvori v animacijo s ključnimi okviri. Edge ima tudi svojo različico plošče »Dejanja«, ki je brez vsakega dejanja v zavihku. Preizkušanje animacij je enostavno s kombinacijo Adobe Edge in brskalnika Google Chrome.

Če poznate Flash animacijo, boste opazili, da dodajanje interaktivnosti v Edgeu spominja na delovni tok Flash, saj lahko uporabite ugnezdene časovnice za vsak element animacije in uporabite predhodno nameščene delčke kode za najpogostejše interakcije in animacije. Ti delčki kode obravnavajo tako animacijo predvajanja, kot so predvajanje, začasno ustavi, nadaljuj in ustavi, pa tudi ustvarijo vroča območja za osnovna dejanja gumbov, kot so klik, lebdenje in celo hiperpovezave. Če želite tem kodam kode dodati kodo po meri, lahko vnesete neposredno na ploščo Dejanja. Seveda lahko na plošči Dejanja ročno kodirate svoje HTML5, JavaScript in CSS3. Ker se tovrstno spletno in animacijsko programiranje pogosto opira na zunanje knjižnice JavaScript, lahko na te zunanje vire dodate tudi povezave.

Animacija je le del tega, kar lahko naredite s skupino aplikacij Edge. Eden najpomembnejših vidikov spletnega oblikovanja je ustvarjanje spletnega mesta, ki je odzivno ali prilagodljivo za vse vrste zaslonov od namizja do mobilnih telefonov. To se naredi z medijskimi poizvedbami in tekočimi, na osnovi odstotka postavitvami mrež, ki so del orodij, ki jih najdete v Edge Reflow. Edge Reflow je delovno okolje WYSIWYG, ki ustvari kodo za vaš projekt. Ta koda je posodobljena za najnovejše spletne standarde, zlasti WebKit, ki ga vse bolj podpirajo vse, od spletnih strani do bralcev e-knjig.

Izdelava postavitve v Edge Reflow je tako enostavna kot risanje vsebnikov HTML div na mrežo z orodjem Box in absolutno pozicioniranje teh divjev jim omogoča spreminjanje velikosti ali preoblikovanje za vsako velikost zaslona. Kako to deluje? Skrivnost so medijska poizvedba, ki jih lahko prilagodite v upravitelju medijskih poizvedb, tako da nastavite najnižje in največje parametre za tri ali več ločljivosti zaslona. Ti parametri določajo, kdaj se bo zaslon preoblikoval navzgor ali navzdol za najbližjo velikost zaslona. Zelo so mi všeč barvno označeni vizualni markerji za vsako velikost zaslona na vrhu delovnega prostora, ki vam pomagajo vizualizirati, kdaj se bodo te spremembe pojavile.

Ena izmed najbolj varčnih funkcij Edge je, kako lahko preprosto uporabite ponovno uporabljene sloge CSS3 v več projektih in tako vzdržujete skladne sloge. Zaradi tega je posodabljanje skoraj samodejno. Adobe je to postal del vašega delovnega procesa s ploščo Edge Reflow Styling. Vsaka sloga, na primer ozadja ali obrobe, ne sme ostati neprimerna, ima svoj poseben razdelek. Barvo in druge parametre ter hierarhijo slojev lahko nadzorujete neposredno iz teh zavihkov. Ti prilagojeni slogi se samodejno pretvorijo v pravila sloga CSS, ki jih je nato mogoče kopirati / prilepiti za ponovno uporabo.

V preteklosti ste morali za predogled svoje spletne strani spremembe shraniti, preiti na spletni brskalnik in osvežiti stran. Adobe je število teh korakov zmanjšal z uporabo kombinacije Edge Inspect in brskalnika Chrome. Zdaj si lahko ogledate, kako bo vaš projekt prikazan v več napravah, od namizja, tablice do mobilnega telefona. Ena izmed lastnosti, ki mi je zelo všeč, je možnost, da posnamete posnetek zaslona teh predogledov po e-pošti strankam in članom ekipe ali uporabite v Creative Cloud-u za sodelovanje.

Končno, za tiste, ki še vedno radi delajo s surovo kodo, ima Adobe Edge Code. Okno z kodo je strnjeno, le nekaj kontrol na levi strani in Edge Code se integrira z Google Chrome, da vam omogoči predogled v živo. Ko vaša koda postane dolga in nezahtevna, se lahko pomaknete do ravni posameznih elementov s funkcijo hitrega urejanja, ki navaja vse sloge, pritrjene na element v oknu prekrivanja. Ker so aplikacije Edge del ustvarjalnega oblaka, lahko uporabite spletne pisave Adobe Edge, Google Web Fonts in Typekit neposredno iz meje Edge Code. Edge Code bo ustvaril oznako skripta glave, ki se vleče v zunanjo pisavo.

Ker HTML5, JavaScript in CSS3 hitro nadomeščajo starejše tehnike animacije zaradi priljubljenosti mobilnih naprav, so te integrirane aplikacije Edge in njihova integracija z drugimi aplikacijami Adobe naslednja generacija več delovnih načrtov in razvojnega procesa.

Razkritje: Za ta članek nisem bil finančno kompenziran. Adobe je za namene tega pregleda priskrbel članstvo v Creative Cloud-u.Mnenja so glede na moje izkušnje povsem lastna.

Avtorske pravice 2018 Adobe Systems Incorporated. Vse pravice pridržane. Posnetki zaslona izdelkov Adobe so bili ponatisnjeni z dovoljenjem 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, Prispevaj, Captivate, Flash Catalyst in Flash Paper so ali so [a] registrirana blagovna znamka (-e) ali blagovna znamka Adobe Systems Incorporated v Združenih državah Amerike in / ali drugih državah.


Navodila Video: Building a Mobile App with Adobe Creative Cloud | Adobe Creative Cloud (Januar 2022).