Adobe Edge Creative Cloud-apps

• Kan 21, 2024

HTML5, JavaScript og CSS3 er blevet næsten lige så populære som Flash til at skabe interaktiv animation til internettet, tablets og telefoner. Adobe^R Edge Animate og de andre Edge-apps er meget brugervenlig software med mange forudindstillinger for at gøre dit arbejde lettere.

Tidslinje-animation er stadig den mest populære måde at animere på, og Adobe har gjort det lettere med de nye Edge Animate-bevægelsesstier, som kan efterligne bevægelser i den virkelige verden og med indbygget lette. Du kan nemt tilføje animation langs tidslinjen med knappen Pin, der tilføjer animationsmarkører til tidslinjen eller ved at trække og slippe placering af objekter på scenen, som Edge Animate automatisk konverterer til bevægelsesstier. Du kan endda bruge Record-knappen, der registrerer ændringer, du foretager på objekterne på scenen, og konverterer disse ændringer til keyframe-animation. Edge har også sin egen version af panelet Handlinger, som er uklart med hver handling, der har sin egen fane i panelet. Det er nemt at teste dine animationer med en kombination af Adobe Edge og Google Chrome browser.

Hvis du er bekendt med Flash-animation, vil du bemærke, at tilføjelse af interaktivitet i Edge ligner Flash-arbejdsgangen, idet du kan bruge indlejrede tidslinjer til hvert animationselement og anvende forudinstallerede kodestykker til de mest almindelige interaktioner og animationer. Disse kodestykker håndterer både afspilningsanimation som afspilning, pause, genoptagelse og stop samt oprettelse af varme områder til de grundlæggende knaphandlinger som klik, hover og endda hyperlinks. For at tilføje tilpasset kode til disse kodestykker kan du skrive direkte i panelet Handlinger. Naturligvis kan du håndkode din egen HTML5, JavaScript og CSS3 i panelet Handlinger. Da denne type web- og animationsprogrammering ofte er afhængig af eksterne JavaScript-biblioteker, kan du endda tilføje links til disse eksterne kilder.

Animation er kun en del af, hvad du kan gøre med Edge-gruppen af ​​apps. Et af de vigtigste aspekter ved webdesign er at oprette et websted, der er lydhør eller fleksibelt for alle typer skærme fra desktop til mobiltelefoner. Dette gøres med medieforespørgsler og flydende, procentvis-baserede gitterlayouter, som begge er en del af værktøjerne, der findes i Edge Reflow. Edge Reflow er et WYSIWYG-arbejdsmiljø, der genererer koden til dit projekt. Denne kode er opdateret for de nyeste webstandarder, især WebKit, der i stigende grad understøttes af alt fra websider til e-bog-læsere.

Det er lige så let at oprette et layout i Edge Reflow som at tegne HTML div-containere på nettet med værktøjet Box og absolut placering af disse divs giver dem mulighed for at ændre størrelsen på eller transformere efter behov for hver skærmstørrelse. Hvordan virker det? Hemmeligheden er Media Queries, som du kan tilpasse i Media Query Manager ved at indstille minimums- og maksimumsparametrene for tre eller flere skærmopløsninger. Disse parametre bestemmer, hvornår designet vil transformere op eller ned for den nærmeste skærmstørrelse. Jeg kan virkelig godt lide de farvekodede visuelle markører for hver skærmstørrelse øverst i arbejdsområdet, som hjælper dig med at visualisere, hvornår disse ændringer vil ske.

En af de mest tidsbesparende Edge-funktioner er, hvordan du nemt kan genbruge dine tilpassede CSS3-stilarter over flere projekter og således opretholde ensartede stilarter. Dette gør også opdatering næsten automatisk. Adobe har gjort dette til en del af din arbejdsgang med panelet Edge Reflow Styling. For at holde ting uklare, har hver stil, såsom baggrunde eller grænser, sin egen individuelle sektion. Du kan kontrollere farven og andre parametre samt lagens hierarki direkte inde fra disse faner. Disse tilpassede stilarter konverteres automatisk til CSS-stilregler, som derefter kan kopieres / indsættes til genbrug.

Tidligere, for at få vist din webside, var du nødt til at gemme ændringerne, skifte til en webbrowser og opdatere siden. Adobe har reduceret antallet af disse trin ved hjælp af en kombination af Edge Inspect og Chrome browser. Nu kan du få vist et eksempel på, hvordan dit projekt vises på flere enheder fra skrivebord, tablet til mobiltelefon. En funktion, jeg virkelig kan lide, er muligheden for at tage et skærmbillede af disse forhåndsvisninger til e-mail til klienter og teammedlemmer eller bruge på Creative Cloud til samarbejde.

Endelig, for dem af os, der stadig kan lide at arbejde med rå kode, har Adobe Edge Code. Kodevinduet er uklart med kun et par kontroller til venstre, og Edge Code integreres med Google Chrome for at give dig en live preview. Når din kode bliver lang og ubesværet, kan du bore ned til det individuelle elementniveau ved hjælp af funktionen Hurtig redigering, der viser alle de stilarter, der er knyttet til et element i et overlayvindue. Da Edge-apps er en del af Creative Cloud, kan du bruge Adobe Edge Web-skrifttyper, Google Web-skrifttyper og Typekit-skrifttyper direkte inden for Edge Code. Edge Code genererer den overskrift-script-tag, der trækker den eksterne font.

Som HTML5, JavaScript og CSS3 erstatter hurtigt ældre animationsteknikker på grund af populariteten af ​​mobile enheder, disse integrerede Edge-apps såvel som deres integration med de andre Adobe-apps er den næste generation af den flere enhedsdesign og udviklingsarbejdsgang.

Offentliggørelse: Jeg blev ikke økonomisk kompenseret for denne artikel. Adobe leverede et Creative Cloud-medlemskab med henblik på denne gennemgang.Synspunkterne er helt mine egne baseret på min oplevelse.

Copyright 2018 Adobe Systems Incorporated. Alle rettigheder forbeholdes. Adobe-produktskærmbilleder (r) genudtrykt med tilladelse 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, fyrværkeri, Bidrage, Captivate, Flash Catalyst og Flash Paper er / er enten [a] registreret varemærke [er] eller et varemærke [s] fra Adobe Systems Incorporated i USA og / eller andre lande.

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