Adobe Edge Creative Cloud-apps

• April 27, 2024

HTML5, JavaScript en CSS3 zijn bijna net zo populair geworden als Flash voor het maken van interactieve animatie voor het web, tablets en telefoons. Adobe^R Edge Animate en de andere Edge-apps zijn zeer gebruiksvriendelijke software met veel voorinstellingen om uw werk eenvoudiger te maken.

Tijdlijnanimatie is nog steeds de meest populaire manier om te animeren en Adobe heeft het gemakkelijker gemaakt met de nieuwe Edge Animate-bewegingspaden, die bewegingen uit de echte wereld kunnen nabootsen en met ingebouwde versoepeling. U kunt eenvoudig animaties langs de tijdlijn toevoegen met de Pin-knop die animatiemarkeringen aan de tijdlijn toevoegt of door objecten op het werkgebied te slepen en neer te zetten dat Edge Animate automatisch converteert naar bewegingspaden. U kunt zelfs de knop Opnemen gebruiken, waarmee u wijzigingen vastlegt die u in de objecten in het werkgebied aanbrengt en deze wijzigingen omzet in keyframe-animaties. Edge heeft ook een eigen versie van het deelvenster Handelingen, die overzichtelijk is en elke actie een eigen tabblad in het deelvenster heeft. Het testen van uw animaties is eenvoudig met een combinatie van Adobe Edge en de Google Chrome-browser.

Als u bekend bent met Flash-animatie, zult u merken dat het toevoegen van interactiviteit in Edge lijkt op de Flash-workflow doordat u geneste tijdlijnen kunt gebruiken voor elk animatie-element en vooraf geïnstalleerde codefragmenten kunt toepassen voor de meest voorkomende interacties en animaties. Deze codefragmenten verwerken zowel afspeelanimatie zoals afspelen, pauzeren, hervatten en stoppen als maken hot gebieden voor de basisknopacties zoals klikken, zweven en zelfs hyperlinks. Als u aangepaste code aan deze codefragmenten wilt toevoegen, kunt u rechtstreeks in het deelvenster Handelingen typen. Natuurlijk kunt u uw eigen HTML5, JavaScript en CSS3 handmatig coderen in het deelvenster Handelingen. Omdat dit type web- en animatieprogrammering vaak afhankelijk is van externe JavaScript-bibliotheken, kunt u zelfs koppelingen naar deze externe bronnen toevoegen.

Animatie is slechts een deel van wat u kunt doen met de Edge-groep apps. Een van de belangrijkste aspecten van webontwerp is het maken van een website die responsief of flexibel is voor alle soorten schermen, van desktop tot mobiele telefoons. Dit wordt gedaan met mediaquery's en vloeiende, op percentage gebaseerde rasterlay-outs, die beide deel uitmaken van de tools in Edge Reflow. Edge Reflow is een WYSIWYG-werkomgeving die de code voor uw project genereert. Deze code is bijgewerkt voor de nieuwste webstandaarden, met name WebKit, die in toenemende mate wordt ondersteund door alles van webpagina's tot e-boeklezers.

Het bouwen van een lay-out in Edge Reflow is net zo eenvoudig als het tekenen van HTML div-containers op het raster met de Box-tool en absolute positionering van deze divs stelt hen in staat om het formaat of de transformatie aan te passen zoals nodig voor elke schermgrootte. Hoe werkt dit? Het geheim is Mediaquery's die u kunt aanpassen in Media Query Manager door de minimum- en maximumparameters in te stellen voor drie of meer schermresoluties. Deze parameters bepalen wanneer het ontwerp omhoog of omlaag transformeert voor de dichtstbijzijnde schermgrootte. Ik hou echt van de kleurgecodeerde visuele markeringen voor elke schermgrootte bovenaan de werkruimte die je helpen visualiseren wanneer deze veranderingen zullen optreden.

Een van de meest tijdbesparende Edge-functies is hoe u uw aangepaste CSS3-stijlen gemakkelijk kunt hergebruiken voor verschillende projecten en zo consistente stijlen kunt behouden. Dit maakt het bijwerken ook bijna automatisch. Adobe heeft dit onderdeel van uw workflow gemaakt met het Edge Reflow Styling-paneel. Om de zaken overzichtelijk te houden, heeft elke stijl, zoals achtergronden of randen, een eigen gedeelte. U kunt de kleur en andere parameters, evenals de hiërarchie van lagen, rechtstreeks vanuit deze tabbladen beheren. Deze aangepaste stijlen worden automatisch omgezet in CSS-stijlregels, die vervolgens kunnen worden gekopieerd / geplakt voor hergebruik.

In het verleden moest u, om uw webpagina te bekijken, de wijzigingen opslaan, overschakelen naar een webbrowser en de pagina vernieuwen. Adobe heeft het aantal van deze stappen verminderd door een combinatie van Edge Inspect en de Chrome-browser te gebruiken. Nu kunt u een voorbeeld bekijken van hoe uw project wordt weergegeven op meerdere apparaten, van desktop, tablet tot mobiele telefoon. Een functie die ik echt leuk vind, is de mogelijkheid om een ​​screenshot te maken van deze voorbeelden om deze te e-mailen naar klanten en teamleden of te gebruiken op Creative Cloud voor samenwerking.

Tot slot, voor degenen onder ons die nog steeds graag met onbewerkte code werken, heeft Adobe Edge Code. Het codevenster is overzichtelijk met slechts een paar knoppen aan de linkerkant en Edge Code integreert met Google Chrome om u een live preview te geven. Wanneer uw code lang en log wordt, kunt u naar het individuele elementniveau gaan met behulp van de functie Snel bewerken die alle stijlen weergeeft die aan een element in een overlayvenster zijn gekoppeld. Omdat de Edge-apps deel uitmaken van de Creative Cloud, kunt u de Adobe Edge-weblettertypen, Google-weblettertypen en Typekit-lettertypen rechtstreeks vanuit Edge Code gebruiken. Edge Code genereert de header-scripttag die het externe lettertype aantrekt.

Omdat HTML5, JavaScript en CSS3 snel oudere animatietechnieken vervangen vanwege de populariteit van mobiele apparaten, vormen deze geïntegreerde Edge-apps en hun integratie met de andere Adobe-apps de volgende generatie van de workflow voor het ontwerpen en ontwikkelen van meerdere apparaten.

Openbaarmaking: ik werd niet financieel gecompenseerd voor dit artikel. Adobe heeft voor deze review een Creative Cloud-lidmaatschap verstrekt.De meningen zijn volledig van mij op basis van mijn ervaring.

Copyright 2018 Adobe Systems Incorporated. Alle rechten voorbehouden. Schermafbeeldingen van Adobe-producten herdrukt met toestemming van 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 en Flash Paper is / zijn ofwel [a] geregistreerde handelsmerken [s] of een handelsmerk [s] van Adobe Systems Incorporated in de Verenigde Staten en / of andere landen.

Video-Instructies: Building a Mobile App with Adobe Creative Cloud | Adobe Creative Cloud (April 2024).