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
Hvem passer kurset for?
Kurset passer godt for designere som vil lage bannerannonser, animasjoner o.l. for web.
Hvis det du lager MÅ fungere på iPhone/iPad og du derfor ikke kan bruke Flash er Edge et nytt godt alternativ.
Kurset passer for alle som ønsker å benytte HTML/CSS/JavaScript for å lage animasjoner, bannerannonser etc uten å måtte skrive kode.
Forkunnskaper
Deltakerne trenger ingen forhåndserfaring med Edge. Kurset krever ingen forkunnskaper utover alminnelig kjennskap til arbeid med Macintosh eller Windows (mus, menyer og vinduer), samt en grunnleggende forståelse av hvordan internett fungerer. Erfaring med HTML/CSS/JavaScript er ingen krav.
Sertifisert instruktør
Kurset holdes med Adobe-sertifisert instruktør.
Instruktøren har over 25 års erfaring innen programmering. Han har jobbet med QuarkXPress og Adobe Illustrator siden 1988 og Adobe Photoshop siden 1990. Han startet å jobbe med Adobe Flash allerede i 1997. Høsten 2011 startet han å jobbe med Adobe Edge og har siden oppstarten vært en aktiv deltaker på brukerforum og i Adobes beta-program. Instruktøren har mer enn 20 års erfaring som kursholder i Photoshop, Flash og andre programmer.