Adobe Edge Creative Cloud Apps

• Maj 5, 2024

HTML5, JavaScript och CSS3 har blivit nästan lika populära som Flash för att skapa interaktiv animering för webben, surfplattor och telefoner. Adobe^R Edge Animate och de andra Edge-apparna är mycket användarvänlig programvara med många förinställningar för att göra ditt arbete enklare.

Tidslinjeanimering är fortfarande det mest populära sättet att animera och Adobe har gjort det enklare med de nya Edge Animate-rörelsevägarna, som kan efterlikna rörelser i den verkliga världen och med inbyggd lättnad. Du kan enkelt lägga till animering längs tidslinjen med knappen Pin som lägger till animeringsmarkörer till tidslinjen eller genom att dra och släppa positionering av objekt på scenen som Edge Animate automatiskt konverterar till rörelsebanor. Du kan till och med använda inspelningsknappen som registrerar ändringar du gör på objekten på scenen och omvandlar dessa ändringar till nyckelbildsanimering. Edge har också sin egen version av Åtgärdspanelen, som är otydlig med varje åtgärd som har sin egen flik i panelen. Att testa dina animationer är enkelt med en kombination av Adobe Edge och webbläsaren Google Chrome.

Om du känner till Flash-animering kommer du att märka att lägga till interaktivitet i Edge liknar Flash-arbetsflödet genom att du kan använda kapslade tidslinjer för varje animationselement och tillämpa förinstallerade kodavsnitt för de vanligaste interaktioner och animationer. Dessa kodavsnitt hanterar både uppspelningsanimering som spela, pausa, återuppta och stoppa samt skapa heta områden för de grundläggande knappåtgärderna som klick, hover och till och med hyperlänkar. För att lägga till anpassad kod i dessa kodavsnitt kan du skriva direkt i panelen Åtgärder. Naturligtvis kan du handkoda din egen HTML5, JavaScript och CSS3 i panelen Åtgärder. Eftersom denna typ av webb- och animationsprogrammering ofta förlitar sig på externa JavaScript-bibliotek kan du till och med lägga till länkar till dessa externa källor.

Animering är bara en del av vad du kan göra med Edge-gruppen av appar. En av de viktigaste aspekterna av webbdesign är att skapa en webbplats som är lyhörd eller flexibel för alla typer av skärmar från stationära till mobiltelefoner. Detta görs med mediafrågor och flytande, procentuella baserade rutnätlayouter, som båda är en del av verktygen som finns i Edge Reflow. Edge Reflow är en WYSIWYG-arbetsmiljö som genererar koden för ditt projekt. Den här koden är aktuell för de senaste webbstandarderna, särskilt WebKit som alltmer stöds av allt från webbsidor till e-läsare.

Att bygga en layout i Edge Reflow är lika enkelt som att rita HTML div-behållare på rutnätet med Box-verktyget och absolut positionering av dessa divs gör att de kan ändra storlek eller ändra efter behov för varje skärmstorlek. Hur fungerar detta? Hemligheten är Media Queries som du kan anpassa inom Media Query Manager genom att ställa in minsta och maximala parametrar för tre eller fler skärmupplösningar. Dessa parametrar kommer att bestämma när designen kommer att förvandlas upp eller ner för närmaste skärmstorlek. Jag gillar verkligen de färgkodade visuella markörerna för varje skärmstorlek högst upp på arbetsytan som hjälper dig att visualisera när dessa förändringar kommer att ske.

En av de mest tidsbesparande Edge-funktionerna är hur du enkelt kan använda dina anpassade CSS3-stilar över flera projekt och därmed upprätthålla konsekventa stilar. Detta gör att uppdateringen nästan automatiskt. Adobe har gjort detta till en del av ditt arbetsflöde med panelen Edge Reflow Styling. För att hålla saker obekväma har varje stil, till exempel bakgrunder eller gränser, sitt eget individuella avsnitt. Du kan styra färgen och andra parametrar, liksom hierarkin för lager, direkt från dessa flikar. Dessa anpassade stilar konverteras automatiskt till CSS-stilregler, som sedan kan kopieras / klistras in för återanvändning.

Tidigare, för att förhandsgranska din webbsida, behövde du spara ändringarna, växla till en webbläsare och uppdatera sidan. Adobe har minskat antalet av dessa steg genom att använda en kombination av Edge Inspect och Chrome-webbläsaren. Nu kan du förhandsgranska precis hur ditt projekt kommer att visas på flera enheter från skrivbord, surfplatta till mobiltelefon. En funktion som jag verkligen gillar är möjligheten att ta en skärmdump av dessa förhandsgranskningar för att skicka e-post till kunder och teammedlemmar eller använda på Creative Cloud för samarbete.

Slutligen, för oss som fortfarande gillar att arbeta med raw code, har Adobe Edge Code. Kodfönstret är rensat med bara några kontroller till vänster och Edge Code integreras med Google Chrome för att ge dig en direkt förhandsvisning. När din kod blir lång och obearbetad kan du borra ner till den enskilda elementnivån med hjälp av snabbredigeringsfunktionen som visar alla stilar som är kopplade till ett element i ett överläggsfönster. Eftersom Edge-apparna är en del av Creative Cloud kan du använda Adobe Edge Web-typsnitt, Google Web-typsnitt och Typekit-typsnitt direkt från Edge Code. Edge Code genererar rubrikskriptet som drar in det externa teckensnittet.

Eftersom HTML5, JavaScript och CSS3 snabbt ersätter äldre animationstekniker på grund av populariteten för mobila enheter, är dessa integrerade Edge-appar såväl som deras integration med de andra Adobe-apparna nästa generation av flerfunktionsdesign och utvecklingsarbetsflöde.

Offentliggörande: Jag kompenserade inte ekonomiskt för den här artikeln. Adobe levererade ett Creative Cloud-medlemskap i syftet med denna granskning.Yttrandena är helt mina egna utifrån min erfarenhet.

Copyright 2018 Adobe Systems Incorporated. Alla rättigheter förbehållna. Adobes produktskärmbild (ar) tryckta om med tillstånd från 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 och Flash Paper är / är antingen [a] registrerat varumärke [s] eller ett varumärke [s] från Adobe Systems Incorporated i USA och / eller andra länder.

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