Krigen mellem Flash og HTML er først og fremmest hype.
HTML5, CSS3 og JavaScript kan ikke leve op til det niveau, som Flash befinder sig på i dag, og med den eksisterende udviklingshastighed vil det tage lang tid, inden de når derop.
Alligevel er mulighederne ved HTML5 så store, at mange udviklere højlydt har undret sig over, hvorvidt webstandarderne snart vil erstatte Flash i forhold til visse multimedia-applikationer - især set i lyset af Apples afvisning af Flash til iOS.
Forudseende webudviklere har produceret imponerende demoer lige siden den første HTML5-kompatible browser kom på gaden. Problemet: Det er ikke nemt.
Der er ikke mange tilgængelige værktøjer, der kan give kunstnere og designere frihed til at arrangere HTML-elementer visuelt, og de værktøjer, som findes, er generelt orienteret mod sidelayout frem for mod multimedie. At producere noget, der kan sammenlignes med selv det mest simple Flash-banner, kræver sidevis af håndskreven JavaScript-kode.
At tage programmeringen ud af JavaScript
Smagsprøven på Edges brugerflade minder mest om de andre produkter i Adobes Creative Suite-pakke - bare mere begrænset. Adobe fortæller, at hovedfokus foreløbigt har været på animationsmaskinen, og værktøjer til at lave animationer udgør størstedelen af, man får adgang til.
Alle animationseffekter i Edge bliver skabt ved hjælp af jQuery og det tilhørende jQuery Easing plug-in. Hvis du er webudvikler og tidligere har arbejdet med JavaScript-biblioteker, så kan du sandsynligvis allerede skrive kode, som er lige så godt som det, du kan skabe med Edge. Hvis du på den anden side ikke ved så meget om JavaScript-programmering - og især hvis du heller ikke gider vide det - så gør Edge det muligt at nå et tilfredsstillende resultat uden alt for meget koderi.
Men mere vigtigt er, at Edge forsøger at gøre det nemmere at skabe JavaScript-baseret animation ved at gøre det muligt for animatorerne at lave visuelle prototyper af en sekvens ved hjælp af en timeline-baseret brugerflade, på samme måde som brugerne af andre digitale animationsværktøjer, for eksempel Flash, vil være vant til. Denne mulighed alene er praktisk nok til, at selv erfarne JavaScript-kodere kan blive fristet til at inkorporere Edge i deres workflow.
På et senere tidspunkt, altså, for Edge er som sagt stadig temmelig ru i kanterne. Man fornemmer, at det ikke er færdigudviklet, og det mangler stadig mange af de funktioner, der må forventes i et professionelt udviklingsværktøj. Men Adobe har allerede skabt et imponerende galleri af demoer, som viser den slags bannere, film og infografik, der kan skabes med selv den tidlige version af produktet.
Ikke helt Flash, men næsten...
Det er nemt at skabe animationer i Edge, men man skal lige vænne sig til det. Først skal man importere 'symbolerne' og placere dem i det aktive vindue. 'Symbol' er et begreb lånt fra Flash, men i denne kontekst er der tale om en GIF, JPEG, PNG eller SVG-grafik. Man kan også skabe symbolerne direkte i Edge, men i preview-versionen er det begrænset til rektangulære bokse og tekster.
Når man har samlet sine symboler, kan man specificere starttidspunktet på tidslinjen, og hvor lang tid effekterne skal vare. Når man har valgt en effekt til et symbol, udfylder Edge automatisk animationen i så lang tid, som man vælger. Hvis man skifter mening, kan man moderere varigheden, slette effekten eller bevæge den op og ned af tidslinjen som det passer bedst, og den funktion alene eliminerer en del af det tidskrævende trial-and-error, som man oplever med rent kodebaserede animations-teknikker.
Animationsværktøjerne tilbyder en række forskellige effekter at vælge imellem. Man kan flytte symbolerne omkring i vinduet og få Edge til at animere bevægelsen. Man kan rotere, skalere og dreje dem. Man kan også kontrollere gennemsigtigheden og få dem til at fade ind og ud.
Edge understøtter desuden konceptet 'easings', som er en funktion, der kan bruges sammen med animationseffekterne. Hvis man gerne vil bevæge et symbol henover vinduet, så kan man for eksempel vælge mellem en glidende eller en hoppende bevægelse. Easing i Edge har arvet sit navn fra jQuerys Easing plug-in, og det betyder, at betegnelserne ikke er særligt beskrivende, som for eksempel easeOutSine, easeInCubic og easeInOutExpo.
Det er ikke svært at få en fornemmelse for værktøjerne, men alligevel kan det være besværligt at arbejde med Edge. Den generelle brugerflade føles langsom og sårbar over for nedbrud. Animationer fremvises pænere i en browser end i Edge, hvor de fremstår i ryk og virker til at blive fremvist i en ret lav frame rate.
Ikke helt Dreamweaver...
Udover at skabe nye animationer, siger Adobe, at man kan bruge Edge til at tilføje animationseffekter i eksisterende hjemmesider. I praksis er det dog ikke så nemt, eftersom Edges HTML-parser er ekstremt kræsen. Jeg prøvede at åbne en række HTML-sider - blandt andet fra mine egne tidligere projekter og enkelte gemt fra nettet - men for de flestes vedkommende virkede det ikke.
Enten kunne Edge ikke genkende objekterne på siden som symboler, eller også kunne jeg se dem men ikke tilføje transformationer til dem. Eller også var siderne for komplekse, hvorefter de frøs eller gik ned med en fejlmeddelelse. Det er meget sigende, at selv Googles hjemmeside gav problemer med Edge.
Jeg har prøvet at regne ud, hvad der er galt med Edge. Jeg dykkede ned i mine filer, konverterede gamle sider til HTML5, fjernede CSS-positioneringer og unødvendige styles, men intet virkede. Selv da jeg havde simplificeret en side, så den bestod næsten udelukkende af en række billeder på en hvid baggrund, der fungerede som HTML5, kunne Edge ikke arbejde med det. Men da jeg tilføjede ID til alle billedelementerne, så virkede det pludseligt. Det er meget mærkeligt, eftersom Edge havde virket med en anden side, hvor ingen af billederne havde ID.
Så vidt jeg kan regne ud, så kan Edge bedst lide ren og velstruktureret kode uden en masse ekstraelementer eller CSS og JavaScript, der kan komme i vejen. Når man derimod forsøger sig med kode fra den virkelige verden, så går det ikke særligt godt. Man kan mærke, at programmet har problemer, for det bliver ustabilt og virker til nemt at kunne gå ned. Hvis det lykkes at tilføje animationer til en kompleks side, så skal man - i hvert fald i denne version - prise sig heldig.
Jeg kommer til at tænke på de tidlige dage med Dreamweaver og GoLive. De påstod begge at gøre det meget nemmere at bygge hjemmesider som drag and drop - men i det store hele skuffede de. På samme måde ser det ud til, at parsing og manipulation af komplekse HTML-dokumenter med visuelle værktøjer er noget mere udfordrende, end det lyder til.
Standard-baseret men proprietært
Edges animationssekvenser består af en blanding af CSS og JavaScript. Selvom Adobe beskriver Edge som et HTML5-værktøj, så er der i virkeligheden ikke meget HTML involveret. Når man skaber nye animationer, bliver billeder og andre symboler loadet og positioneret udelukkende ved hjælp af JavaScript, som kaldes frem fra en næsten tom HTML-fil. Når man arbejder med en eksisterende side, så forbliver ens eget HTML uberørt, bortset fra de links, der bliver tilføjet for at loade Edge-filerne.
I forhold til maskingenereret kode er Edges output overraskende læselig, men Adobe advarer om, at man ikke skal forsøge at redigere i hånden. Faktisk virker det til, at Adobe gerne vil have brugerne til at koncentrere sig udelukkende om det visuelle og ignorere koden fuldstændigt. Edge tilbyder intet kig til kildekoden på samme måde som i Dreamweaver, og der er ingen måde at tilføje hjemmelavede effekter eller indstillinger til elementer ved hjælp af CSS eller JavaScript.
Det betyder, at der heller ikke findes nogen pålidelig måde at tilføje interaktivitet til et Edge-projekt. I modsætning til Flash Professional så kan man ikke bruge Edge til at skabe spil. Man er fuldstændigt begrænset til timeline-baserede animationer - faktisk findes der ikke engang en funktion, hvor man kan få en animation til at køre i et uendeligt loop.
Orkestrering og playback af animationssekvenserne bliver håndteret af to proprietære Adobe JavaScript-biblioteker, som tilsammen tilføjer omkring 60KB til ens side. Adobe giver brugerne licens til at distribuere bibliotekerne i forbindelse med projekter, men kun i komprimeret og ikke-modificeret form.
Edge Preview lægger desuden sine egne kopier af jQuery 1.4.2 og jQuery Easing 1.3 i ens projektmappe. Den skaber desuden sin egen directory til det, så den ikke risikerer at overskrive ens eksisterende filer, men den er dog ikke intelligent nok til at vide, hvilke JavaScript-biblioteker, man bruger i forvejen. Hvis man ikke er forsigtig, kan man ende med en side, der forsøger at loade flere versioner af jQuery eller andre biblioteker på en gang.
Når Edge bliver mere modent, vil det heller ikke være for alle. Nogle udviklere vil være imod at bruge Adobes proprietære JavaScript-biblioteker, mens andre vil foretrække at have mere direkte kontrol over animationerne på kodeniveau.
Edge er nok for pladskrævende, hvis det eneste, man er ude efter, er en metode til at peppe virksomhedens hjemmeside lidt op med fancy effekter. Men det kan på den anden side vise sig at være et effektivt redskab til bannerreklamer, infografik, demonstrationer og andre simple animationer, uden behov for browser plug-ins - alt sammen forudsat at Adobe kan tilbyde en større værktøjsklasse og overkomme programmets nuværende performance-problemer.
Denne artikel stammer fra ComONs søstermagasin Infoworld. Oversættelse: Marie Dyekjær Eriksen.
