Adobe Edge Creative Cloud -sovellukset

• Saattaa 9, 2024

HTML5, JavaScript ja CSS3 ovat tulleet melkein yhtä suosituiksi kuin Flash interaktiivisen animaation luomiseen webille, tablet-laitteille ja puhelimille. adobe^R Edge Animate ja muut Edge-sovellukset ovat erittäin käyttäjäystävällisiä ohjelmistoja, joissa on monia esiasetuksia, jotta työsi olisi helpompaa.

Aikajana-animaatio on edelleen suosituin tapa animoida, ja Adobe on helpottanut sitä uusilla Edge Animate -polkuilla, jotka voivat jäljitellä reaalimaailman liikkeitä ja sisäänrakennetulla keventämisellä. Voit lisätä animaatiota aikajanalle helposti napsauttamalla -painiketta, joka lisää animaatiomarkkereita aikajanalle, tai vetämällä ja pudottamalla kohteiden sijoittamisen lavalle, joka Edge Animate -sovelluksen automaattisesti muuntaa liikepolkuiksi. Voit jopa käyttää Tallenna-painiketta, joka tallentaa muutokset, jotka teet vaiheessa oleviin kohteisiin ja muuntaa nämä muutokset avainruudun animaatioksi. Edgellä on myös oma versio Toiminnot-paneelista, joka on siistinä jokaisen toiminnon ollessa paneelissa oma välilehti. Animaatioiden testaaminen on helppoa yhdistämällä Adobe Edge ja Google Chrome -selain.

Jos tunnet Flash-animaation, huomaat, että vuorovaikutteisuuden lisääminen Edgeen muistuttaa Flash-työnkulkua siinä, että voit käyttää sisäkkäisiä aikatauluja jokaiselle animaatioelementille ja käyttää esiasennettuja koodinpätkiä yleisimpiin vuorovaikutuksiin ja animaatioihin. Nämä koodinpätkät käsittelevät sekä toistoanimaatiota, kuten toistoa, keskeyttämistä, jatkamista ja lopettamista, sekä luovat kuumia alueita painikkeiden perustoiminnoille, kuten napsautukselle, hoverille ja jopa hyperlinkkeille. Voit lisätä mukautetun koodin näihin koodinpätkät kirjoittamalla suoraan Toiminnot-paneeliin. Voit tietysti myös koodata omat HTML5, JavaScript ja CSS3 toiminnot Toiminnot-paneelissa. Koska tämäntyyppinen verkko- ja animaatio-ohjelmointi perustuu usein ulkoisiin JavaScript-kirjastoihin, voit jopa lisätä linkkejä näihin ulkoisiin lähteisiin.

Animaatio on vain osa sitä, mitä voit tehdä Edge-sovellusryhmällä. Yksi tärkeimmistä verkkosivujen suunnittelun näkökohdista on verkkosivuston luominen, joka on herkkä tai joustava kaikentyyppisille näytöille pöytätietokoneista matkapuhelimiin. Tämä tehdään mediakyselyillä ja juoksevilla, prosenttipohjaisilla ruudukkoasetteluilla, jotka molemmat ovat osa Edge Reflow -sovelluksen työkaluja. Edge Reflow on WYSIWYG-työympäristö, joka luo koodin projektillesi. Tämä koodi on ajan tasalla uusimmista verkkostandardeista, etenkin WebKitistä, jota tukee yhä enemmän kaikki verkkosivut e-kirjojen lukijoihin.

Asettelun rakentaminen Edge Reflow -pelissä on yhtä helppoa kuin HTML-div-säiliöiden piirtäminen ruudukkoon laatikkotyökalun avulla, ja näiden divien absoluuttinen sijoittaminen antaa niiden koon muuttaa tai muuttaa tarvittaessa kunkin näytön koon mukaan. Miten tämä toimii? Salaisuus on mediakyselyjä, joita voit mukauttaa Media Query Manager -sovelluksessa asettamalla vähimmäis- ja enimmäisparametrit kolmelle tai useammalle näytön resoluutiolle. Nämä parametrit määrittävät, milloin muoto muuttuu ylös tai alas lähimmän näytön koon mukaan. Pidän todella työalueen yläosan värikoodatuista visuaalisista merkinnöistä jokaiselle näytön koolle, jotka auttavat sinua visualisoimaan, kun nämä muutokset tapahtuvat.

Yksi aikaa säästävistä Edge-ominaisuuksista on, kuinka voit käyttää mukautettuja CSS3-tyylejäsi helposti uudelleen useissa projekteissa ja ylläpitää siten yhtenäisiä tyylejä. Tämä tekee päivityksestä myös melkein automaattisen. Adobe on tehnyt tästä osan työnkulusta Edge Reflow Styling -paneelilla. Jotta asiat eivät pysy siistinä, jokaisella tyylillä, kuten taustalla tai reunuksilla, on oma erillinen osionsa. Voit hallita väriä ja muita parametreja sekä tasojen hierarkiaa suoraan näiden välilehtien sisällä. Nämä mukautetut tyylit muunnetaan automaattisesti CSS-tyylisäännöiksi, jotka voidaan sitten kopioida / liittää uudelleenkäyttöön.

Aikaisemmin Web-sivun esikatseluun sinun piti tallentaa muutokset, vaihtaa selaimeen ja päivittää sivu. Adobe on vähentänyt näiden vaiheiden määrää käyttämällä Edge Inspektin ja Chrome-selaimen yhdistelmää. Nyt voit esikatsella, kuinka projektisi näkyy useissa laitteissa pöytätietokoneista, tablet-laitteista matkapuhelimiin. Yksi ominaisuuksista, joista pidän todella, on kyky ottaa kuvakaappaus näistä esikatselukuista sähköpostitse asiakkaille ja tiimin jäsenille tai käyttää Creative Cloudissa yhteistyöhön.

Viimeinkin niille meistä, jotka haluavat edelleen työskennellä raa'an koodin kanssa, Adobella on Edge Code. Koodi-ikkuna on siistinä vain muutamalla vasemmalla puolella olevalla säätimellä ja Edge-koodi integroituu Google Chromen kanssa, jotta saat reaaliaikaisen esikatselun. Kun koodisi tulee pitkäksi ja hankalaksi, voit porata yksittäisen elementin tasolle käyttämällä Pikamuokkaus-ominaisuutta, joka luettelee kaikki elementit liitettyinä tyyleinä peittoikkunassa. Koska Edge-sovellukset ovat osa Creative Cloudia, voit käyttää Adobe Edge Web Fonts-, Google Web Fonts- ja Typekit-fontteja suoraan Edge-koodista. Edge Code luo otsikkokirjoitetunnisteen, joka vetää ulkoisen fontin.

Koska HTML5, JavaScript ja CSS3 korvaavat nopeasti vanhemmat animaatiotekniikat mobiililaitteiden suosion vuoksi, nämä integroidut Edge-sovellukset ja niiden integrointi muihin Adobe-sovelluksiin ovat seuraavan sukupolven monilaitteisten suunnittelu- ja kehitystyönkulkuja.

Ilmoittaminen: Minulle ei ole maksettu rahallista korvausta tästä artikkelista. Adobe toimitti Creative Cloud -jäsenyyden tätä katsausta varten.Lausunnot ovat täysin omat kokemukseni perusteella.

Tekijänoikeus 2018 Adobe Systems Incorporated. Kaikki oikeudet pidätetään. Adobe-tuotteen näyttökuva (t) uusitaan Adobe Systems Incorporatedin luvalla. Adobe, Photoshop, Photoshop Album, Photoshop Elements, Illustrator, InDesign, GoLive, Acrobat, Cue, Premiere Pro, Premiere Elements, Bridge, After Effects, InCopy, Dreamweaver, Flash, ActionScript, Ilotulitteet, Contribute, Captivate, Flash Catalyst ja Flash Paper on / on joko [a] rekisteröity tavaramerkki (t) tai Adobe Systems Incorporatedin tavaramerkki (t) Yhdysvalloissa ja / tai muissa maissa.

Video-Ohjeita: Get to Know Animate CC  | Adobe Creative Cloud (Saattaa 2024).