- - Skapa webbanimering och interaktionsdesign i HTML 5 med Adobe Edge

Skapa webbanimering och interaktionsdesign i HTML 5 med Adobe Edge

De senaste webbstandarderna, HTML5 och CSS3 ini samband med JavaScript har verkligen minskat tiden och ansträngningarna för att skapa webbplatser med grafik, text och animering. Med hjälp av krafterna i HTML5 behöver du inte längre skriva kod manuellt för att bädda in multimediainnehåll medan CSS3 gör dina webbgränssnittsgränssnitt mer flexibla, robusta och ännu viktigare att hantera. Om du har letat efter ett webbdesignverktyg som gör att du kan dra maximal nytta av de senaste webbstandarderna utan att tvinga dig att manuellt ange kod för varje UI-element kommer det nyligen lanserade Adobe Edge är förmodligen precis vad du behöver.

Adobe Edge har särskilt skrivits förvisuella, webb- och interaktionsdesigners som ofta kämpar med att skapa webbrörelse och animerat innehåll med hjälp av HTML5, CSS3 och JavaScript webbstandarder. Det är i grunden ett verktyg för webbrörelse och interaktion för att skapa animerat innehåll med HTML5, CSS3 och JavaScript. Medan det innehåller alla grundläggande verktyg för att skapa, redigera, justera och designa webbgränssnittsgränssnittet på webben, erbjuder det en intuitiv animeringskoreograf för att enkelt skapa och justera animerat innehåll på din webbsida. Dessutom tvingar det dig inte att starta ett nytt projekt från början, du kan importera din HTML-fil i den för att inkludera nya UI-kompositioner och binda med befintliga UI-element, till exempel, tabell, textstilar, bildskärmar, position, teckensnitt, containerjustering och mer.

Huvudgränssnittet är indelat i tre avsnitt. Den vänstra sidofältet innehåller utvalda verktyg för UI-elementskomposition, höger sidofält har alla huvudlistor för webbgränssnittsgränssnitt, inklusive skuggeffekter, bilder, text, medan det nedre avsnittet innehåller tidslinjeditoren för koreografanimationer.

Edge main 2

Med elementfönstret kan du visa / dölja markeradeelement och lås det för att förhindra ytterligare redigering. När du väljer ett element på huvudskärmen markeras det omedelbart i elementfönstret, vilket gör det lättare att dölja eller låsa det. När du håller muspekaren över ett objekt som listas i element, berättar det klassinitialerna med namn, så att du enkelt kan identifiera det i CSS-fil.

element huvud

Egenskapsfönstret till vänster visarkompositionsverktyg för valt UI-element på din webbsida. När du väl valt kan du ändra dess platsstorlek, opacitet, textstilsfamilj, storlek och textstilar, ställa in transformens ursprung, bildrotation och så vidare.

kant 3

Tidslinjeditoren gör att du kan se tidslinjenav varje animerat element. Om du har att göra med en enorm CSS-fil klickar du på filterknappen för att bara visa animerade element i elementfönstret för att snabbt redigera sina positioner, färger, storlek etc. Nederst till vänster om fönstret har du zoomknappen för att förstora tidslinjen för att verifiera tilldelad tids- och övergångseffekt för alla animerade element.

animerade element

Förutom att skapa cross-browser kompatiblaanimerat innehåll för alla allmänt populära webbläsare, inklusive Firefox, Chrome, Internet Explorer 9, webbinnehåll som skapats genom detta verktyg fungerar sömlöst på iOS- och Android-plattformar. Enligt officiella community är Edge Preview i aktiv utveckling och kommer snart att uppdateras med många funktioner. Adobe Edge fungerar på Windows Vista och Windows 7.

Ladda ner Adobe Edge

kommentarer