Adobe Edge Creative Cloud Apps

• Kan 8, 2024

HTML5, JavaScript og CSS3 har blitt nesten like populære som Flash for å lage interaktiv animasjon for nettet, nettbrett og telefoner. Adobe^R Edge Animate og de andre Edge-appene er veldig brukervennlig programvare med mange forhåndsinnstillinger for å gjøre arbeidet ditt enklere.

Tidslinje-animasjon er fremdeles den mest populære måten å animere på, og Adobe har gjort det enklere med de nye Edge Animate-bevegelsesstiene, som kan etterligne bevegelser i den virkelige verden og med innebygd lettelse. Du kan enkelt legge til animasjon langs tidslinjen med knappen Pin som legger til animasjonsmarkører til tidslinjen eller ved å dra og slippe plassering av objekter på scenen som Edge Animate automatisk konverterer til bevegelsesbaner. Du kan til og med bruke Record-knappen som registrerer endringer du gjør på objektene på scenen og konverterer disse endringene til keyframe-animasjon. Edge har også sin egen versjon av Handlinger-panelet, som er uklart med hver handling som har sin egen fane i panelet. Det er enkelt å teste animasjonene dine med en kombinasjon av Adobe Edge og Google Chrome-nettleseren.

Hvis du er kjent med Flash-animasjon, vil du legge merke til at å legge til interaktivitet i Edge ligner på Flash-arbeidsflyten ved at du kan bruke nestede tidslinjer for hvert animasjonselement og bruke forhåndsinstallerte kodebiter for de vanligste interaksjonene og animasjonene. Disse kodebitene håndterer både avspillingsanimasjon som spill, pause, gjenoppta og stopp, samt opprette varme områder for de grunnleggende knapphandlingene som klikk, hover og til og med hyperkoblinger. Hvis du vil legge til tilpasset kode i disse kodebitene, kan du skrive direkte i Handlings-panelet. Selvfølgelig kan du håndkode din egen HTML5, JavaScript og CSS3 i Handlinger-panelet. Fordi denne typen nett- og animasjonsprogrammering ofte er avhengig av eksterne JavaScript-biblioteker, kan du til og med legge til lenker til disse eksterne kildene.

Animasjon er bare en del av det du kan gjøre med Edge-gruppen av apper. Et av de viktigste aspektene ved webdesign er å lage et nettsted som er responsivt eller fleksibelt for alle typer skjermer fra stasjonære til mobiltelefoner. Dette gjøres med mediaspørsmål og flytende, prosentbaserte rutenettoppsett, som begge er en del av verktøyene som finnes i Edge Reflow. Edge Reflow er et WYSIWYG arbeidsmiljø som genererer koden for prosjektet ditt. Denne koden er oppdatert for de nyeste nettstandardene, spesielt WebKit som i økende grad støttes av alt fra nettsider til ebook-lesere.

Å bygge en layout i Edge Reflow er like enkelt som å tegne HTML div-containere på nettet med boksverktøyet og absolutt plassering av disse divene gjør at de kan endre størrelse på eller transformere etter behov for hver skjermstørrelse. Hvordan virker dette? Hemmeligheten er Media Queries som du kan tilpasse i Media Query Manager ved å stille inn minimums- og maksimumsparametere for tre eller flere skjermoppløsninger. Disse parametrene vil avgjøre når designet vil transformere opp eller ned for nærmeste skjermstørrelse. Jeg liker veldig godt de fargekodede visuelle markørene for hver skjermstørrelse øverst i arbeidsområdet som hjelper deg å visualisere når disse endringene vil skje.

En av de mest tidsbesparende Edge-funksjonene er hvordan du enkelt kan gjenbruke dine tilpassede CSS3-stiler over flere prosjekter og dermed opprettholde konsistente stiler. Dette gjør også oppdatering nesten automatisk. Adobe har gjort dette til en del av arbeidsflyten din med Edge Reflow Styling-panelet. For å holde ting uklare, har hver stil, for eksempel bakgrunner eller grenser, sin egen individuelle seksjon. Du kan kontrollere fargen og andre parametere, så vel som hierarkiet av lag, direkte fra disse kategoriene. Disse tilpassede stilene konverteres automatisk til CSS-stilregler, som deretter kan kopieres / limes inn for gjenbruk.

For å forhåndsvise nettsiden din, trengte du tidligere å lagre endringene, bytte til en nettleser og oppdatere siden. Adobe har redusert antall av disse trinnene ved å bruke en kombinasjon av Edge Inspect og Chrome-nettleseren. Nå kan du forhåndsvise hvordan prosjektet ditt vises på flere enheter fra stasjonær, nettbrett til mobiltelefon. En funksjon jeg virkelig liker, er muligheten til å ta et skjermbilde av disse forhåndsvisningene til e-post til klienter og teammedlemmer eller bruke på Creative Cloud for samarbeid.

Til slutt, for de av oss som fremdeles liker å jobbe med raw code, har Adobe Edge Code. Kodevinduet er ryddig med bare noen få kontroller til venstre, og Edge Code integreres med Google Chrome for å gi deg en live forhåndsvisning. Når koden din blir lang og ubehandlet, kan du bore ned til det enkelte elementnivået ved å bruke hurtigredigeringsfunksjonen som viser alle stilene som er knyttet til et element i et overleggsvindu. Fordi Edge-appene er en del av Creative Cloud, kan du bruke Adobe Edge Web-skrifter, Google Web-skrifter og Typekit-skrifter direkte fra Edge Code. Edge Code genererer overskriftsskriptkoden som trekker inn den eksterne font.

Siden HTML5, JavaScript og CSS3 raskt erstatter eldre animasjonsteknikker på grunn av populariteten til mobile enheter, er disse integrerte Edge-appene så vel som deres integrasjon med de andre Adobe-appene neste generasjon av arbeidsflyten for flere design og utvikling.

Offentliggjøring: Jeg ble ikke økonomisk kompensert for denne artikkelen. Adobe leverte et Creative Cloud-medlemskap for formålet med denne gjennomgangen.Meningene er helt mine egne basert på min erfaring.

Copyright 2018 Adobe Systems Incorporated. Alle rettigheter forbeholdt. Adobes produktskjermbilder er skrevet ut på nytt med tillatelse fra 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, Fyrverkeri, Bidra, Captivate, Flash Catalyst og Flash Paper er / er enten [a] registrert varemerke [s] eller et varemerke [s] fra Adobe Systems Incorporated i USA og / eller andre land.

Video Instruksjoner: Building a Mobile App with Adobe Creative Cloud | Adobe Creative Cloud (Kan 2024).