Adobe Edge – animasjon med HTML5, CSS3 og JavaScript er et 2-dagers kurs i et program for å lage animasjoner til websider. For mange web-utviklere vil det være et alternativ til Flash, siden animasjonene man lager også vil fungere på iPhone og iPad, og i andre sammenhenger hvor brukeren ikke har Flash Player installert. Edge er basert på HTML5, CSS3 og JavaScript, noe som betyr at animasjonene kan spilles av i alle moderne nettlesere som støtter HTML5 (Safari, Mobile Safari, Firefox, Google Chrome, Opera og Internet Explorer 9, for å nevne de viktigste).

Animasjonene i Edge lages på en tidslinje, på lignende måte som i Flash og After Effects. For Flash-brukere vil den største forskjellen være at det ikke brukes frames. Edge kan importere vanlige grafikkformater som JPEG, PNG, GIF og SVG (vektorbasert webgrafikk).

Filstrukturen i Edge er laget slik at animasjonsdataene er fullstendig adskilt fra HTML-dataene. Dette gjør at Edge kan brukes til å animere elementer på eksisterende websider, uten at innholdet i disse filene blir endret (med unntak av noen få kodelinjer som knytter filene sammen). Hvis du f.eks. vil at innholdet i et bilde skal skifte, eller at en overskrift skal komme glidende inn, er det en enkel jobb med Edge.

I øyeblikket finnes Edge bare i en tidlig prøveversjon, men du kan bruke den til å produsere ferdige animasjoner allerede idag. Siden filene bare er vanlige tekstfiler (HTML, CSS og JavaScript) er det ikke noe eget filformat å ta hensyn til slik som med Flash. Hvem som helst kan laste ned prøveversjonen fra labs.adobe.com og prøve hvordan det virker.

Adobe regner med at den første ferdige versjonen av Edge blir tilgjengelig i 2012.

Eksempler på animasjoner laget med Adobe Edge

Eksempler på animasjoner vi har laget kan du se her på vår eksempelside. Du vil lære en del av teknikkene som er brukt for å lage disse animasjonene på kurset.

Kursinnhold

Kurset vil ta utgangspunkt i den versjonen av Edge som er kurant når kurset holdes. Siden programmet vil utvikles raskt i løpet av våren 2012, vet vi ikke eksakt hvilke funksjoner som vil være tilgjengelige på kurstidspunktet. Listen over kursinnholdet er basert på Preview-versjon 3. En viktig nyhet i Preview 3 er at man nå kan scripte med JavaScript og jQuery, noe som åpner helt nye muligheter for hva man kan lage. Vi mener det vil være interessant for mange utviklere å lære å bruke Edge allerede nå, siden HTML5 kommer til å bli stadig mer viktig i tiden som kommer.

• Filstrukturen i et Edge-prosjekt
• Samspillet mellom HTML5, CSS3, JavaScript, jQuery og JSON
• Klargjøring av grafikk, med vekt på SVG og transparent PNG
• Praktiske øvelser og animasjonseksempler
• Plassering av Edge-animasjoner på websider
• Animasjon av eksisterende websider
• Bruk av JavaScript til å lage tilleggsfunksjonalitet
• Preloading-problematikk i Edge
• Wallaby – en mulighet for Flash-utviklere til å konvertere enkle Flash-animasjoner til HTML5