Forhåndsvisning av Adobe Edge: Prøver animasjoner

Et akseptert stykke vanlig visdom akkurat nå er at HTML5 har mye applikasjonslignende funksjonalitet som i stor grad vil fortrenge Silverlight og Flash i webapplikasjonsverdenen. Adobe har endelig reagert på dette presset, ved å utvikle et nytt verktøy kalt "Edge" som gjør det mulig å lage HTML5-animasjoner i det. Adobe Labs ga nylig ut en gratis forhåndsvisning av Edge, og jeg ga den en snurr for å se hva den handler om.

Å fyre opp Edge gir oss et ganske spartansk brukergrensesnitt, som du kan se i figur A. Så mange av knappene og widgetene som du ser i en Flash- eller Silverlight-editor er ikke der. Dette gjenspeiler det faktum at Edge er begrenset til HTML5s animasjonsfunksjoner, og at det er i forhåndsvisningstilstand akkurat nå. Mulighetene som er der er gjennomtenkt, og de fungerer.

Figur A: Adobe Edge, klar til å gå.

Kanten støtter rektangler, avrundede rektangler, tekst- og bildeobjekter. Du kan lage linjer, sirkler eller formørkelse ved hjelp av rektanglene, men det hadde vært en fin touch hvis det var et verktøy innebygd for å automatisk lage disse formene. Jeg så ingen måte å legge toppunkt på former.

I Edge jobber du med en tidslinje som i Flash eller Silverlight, og legger til "nøkkelrammer." En Keyfame definerer et punkt der du spesifiserer hvordan et element skal se ut. Hvis et element har et annet utseende mellom to nøkkelrammer, overfører systemet automatisk utseendet når tidslinjen skrider frem. I Edge kan du angi uavhengige nøkkelrammer for alle egenskaper i et element. I en av testanimasjonene mine hadde jeg for eksempel tekst som startet svart med en skriftstørrelse på 24 px, men på 0:15 var det rødt. Samtidig satte jeg et nøkkelbilde 0:05 for å ha skriftstørrelsen på 36 px, og på 0:15 nøkkelfronten var fontstørrelsen 24 px igjen. Nettoeffekten tok for teksten å ta femten sekunder å overføre fra svart til rødt, men fem sekunder for å vokse fra 24 px til 36 px, og deretter ti sekunder å krympe seg ned til 24 px.

Koden generert av Edge er en enkel, ren HTML-fil med en generert JavaScript-fil for å håndtere animasjonene. Et raskt blikk viser at animasjonsdataene er lagret i JSON-format, antagelig for å bli analysert av de andre refererte JavaScript-bibliotekene. Sluttresultatene var dessverre ikke det jeg hadde håpet på. Animasjonene føltes uønsket, spesielt når de var strukket ut over en lang tidslinje. Enda verre var resultatene ikke på langt nær det jeg forventet. Som du ser i figur B, etterlot IE 9 noen gjenstander av teksten mens den ble skalert ned til en mindre størrelse. Firefox 5 fikk ikke engang skriften riktig ( figur C )! Google Chrome var den eneste nettleseren som korrekt håndterte animasjonen og skjermen for denne enkle testen ( figur D ). Unødvendig å si, hvis en enkel test som dette ga slike problemer, ville jeg absolutt ikke hengt hatten på Edge ennå. Og i rettferdighet er det tross alt en forhåndsvisning ... og den første på det.

Figur B: IE9 viser "stier" av teksten mens den ble nedskalert

Figur C: Firefox 5 fikk ikke font i det hele tatt!

Figur D: Teksten som vises i Edge UI, og av Chrome; Chrome var den eneste store nettleseren som håndterte animasjonen riktig.

Alt dette er sagt, Edge er enkel å bruke. Mangelen på muligheter utover grunnleggende animasjoner er både en styrke og en svakhet. Verktøyet er lettere å bruke enn alternativene. Da jeg lærte Flash (tilbake i Flash 4 dager), var verktøyene veldig kompliserte, selv da. Det krevde mye praksis å finne ut av dem. I Edge angir du bare et punkt på tidslinjen, oppretter objektet og klikker deretter på nøkkelrammeikonet ved siden av en eiendom for å legge til et nøkkelbilde for det på tidslinjen, og angir verdien for eiendommen på det punktet. Det tok meg noen minutter å finne ut den grunnleggende funksjonaliteten uten å gjøre en gang eller veiledning. Det er ikke verst for animasjonsprogramvare. Samtidig er brukerinteraksjon, lyd eller noen form for programmering (å hente data for animasjonen fra en ekstern kilde, randomisering osv.) Utenfor grensene, i det minste i denne forhåndsvisningen.

Figur E: En travel tidslinje med et antall nøkkelbilder på seg.

Jeg tror at Edge har mye løfte. Jeg liker absolutt ideen om å jobbe med et verktøy som ikke krever en nettleser-plugin (spesielt for å nå iPhone- og iPad-brukere), og det er fint å bruke et animasjonsverktøy som ikke har et skremmende antall knapper og vinduer. Hvis Adobe kan ordne de tekniske problemene og få litt ekstra funksjonalitet (for eksempel å gjøre det enkelt å gjøre sirkler og andre former), vil Edge være et fantastisk verktøy å bruke når den treffer versjon 1.

© Copyright 2020 | mobilegn.com