Markus Bergh

Min första utveckling mot iPhone

När jag surfade genom App Store efter appar till min iPhone och sedan såg att Debaser släppte ett sprillans nytt API fick jag en idé om att göra en app som jag själv skulle ha nytta av. En app att kunna använda deras API, ta del av data och se vad som hände på de olika arenor Debaser har här i Stockholm men också i Malmö.

Från början var tanken att göra det i den bejublande Flash-to-iPhone som Adobe hade utvecklat och skulle släppas i nya Flash Professional CS5. Men så kom bomben från Apple vilket gjorde det omöjligt att släppa en app som inte var skriven i antingen JavaScript för WebKit, Objective C, C eller C++. En annan väg jag provade var Titanium,  en gratis platform som portar om JavaScript till XCode-projekt, skrivna i Objective C. Det buggade ganska friskt och skulle aldrig bli helt och hållet nativt så jag gav mig in i djungeln att lära mig Objective C.

Det har varit en lång väg att gå eftersom mycket av det som skett naturligt för mig i Flash inte alls fanns stöd för i detta språk, som t.ex. garbage collection. Det har tagit minst lika lång tid att lära sig språket & utveckla i det, som att leta minnesläckor och släcka dessa i efterhand men efter ett par veckor har jag äntligen fått upp min app i App Store och väntar nu på att Apple ska granska den. Förhoppningsvis blir den snabbt godkänd och då även nedladdningsbar för alla, gratis.

Uppdaterat: Appen blev godkänd av Apple 7/6 och skådas här!

Deeplinking med SWFAddress

Deep linking definieras på wikipedia som making a hyperlink that points to a specific page or image on another website, instead of that website’s main or home page.

Innan jag ens visste om att det gick att använda deep linking i flash så kände jag att det skulle behövas i exempelvis bildgallerier gjorda med flash för att kunna länka till en specifik bild istället för att låta någon bläddra fram den, vilket skulle bli väldigt jobbig process ifall det fanns flera album med flera olika sidor. Eller om man skulle behöva peka ut ett kontaktformulär i en kampanj gjord i flash. Jag tänker inte grotta ned mig i stora tekniska detaljer utan mest redogöra för vad man kan göra med hjälp av denna teknik.

Vi har fram till idag i flashrummet gjort flera kampanjer med deep linking-funktionalitet, exempelvis i Libero Eco Actions (Q4, 2009) och TetraPak (Q2, 2009). Även i de fall när man behöver länka till bidrag i tävlingar har tekniken används för till exempel Libresse.

Jag har en sida för mina foton som är helt gjord i flash och tänkte förklara vad jag kände att den saknade kring just deep linking. Innan jag implementerade tekniken så kunde man byta sida i ett album, få upp en bild och stänga denna. Jag presenterar alla bilder högupplöst i förhållande till bildskärmen upplösning och webbläsarens storlek för att få ut så mycket som möjligt i detajlrikedom och upplevelse, men det fanns inget stöd för att snabbt kunna visa sista bilden tillexempel utan vägen man fick gå var från startsida till tumnagelvy, bläddra till sista sidan och klicka på bilden. Plus laddtider för allting. Det kändes onödigt långt och krångligt.

Jag använde SWFAddress (v2.4) som med hjälp av JavaScript kan se ifall adressfältets värde har ändrats och isåfall skickar ett event som jag senare hanterar i en funktion i flash. SWFAddress kan också ändra adressfältets värde från flashen under det att användaren byter bild eller sida.

En genererad adress kan se ut så här wwwroot/#/page3 eller wwwroot/#/page2/pic10
Nummertecknet (#) tillåter adressfältet att ändras utan att HTML-sidan med tillhörande flash behöver uppdateras.

Om flashen känner av det senare mönstret hoppar den över startsidan, laddar automatiskt sida 2 och sedan bild 10. Även om det redan finns laddare till både tumnaglar och vald bild kan det vara bra att låta besökaren veta att bildvalet nu istället sker automatiskt eftersom man valt att gå in på flashen via deep linking. (Det har jag ännu inte hunnit lägga till, på grund av tidsbrist och inte lathet :) Om man istället bara vill länka till specifik sida väljer man första mönstret. Prova /#/page3 och #/page4/pic24 själv!