Mister Superb

Adobe Air, het framework dat toelaat cross-platform desktop applicaties te ontwikkelen met flash/flex/ajax is ondertussen al een tijdje gereleased (de huidige Air versie is 1.5). Ondertussen heeft de developer community niet stilgezeten. Naast enkele grote bedrijven zoals AOL, eBay en Nasdaq die als eerste op de voorgrond traden met hun Air-toepassingen zijn er enkele nuttige en minder nuttige Air applicaties gratis beschikbaar.

Ik bespreek hier enkele applicaties die ik zelf getest heb en in sommige gevallen nog steeds gebruik. Er zijn nog veel meer applicaties beschikbaar voor allerlei uiteenlopende doeleinden dus ga zeker zelf ook eens op zoek!

Time managment

1. Klok

minimized view

maximized view

Klok laat toe gepresteerde uren bij te houden aan de hand van verschillende projecten en subprojecten. Vooral handig om op kantoor je uren per dag bij te houden. Je kan daarna je timesheet exporteren naar een excel of html bestand. Daarnaast kan je ook taartdiagrammen genereren op basis van je prestaties. Nice maar niet zo extreem uitgebreid op vlak van project specificatie. Het systeem waarmee je uren voorop kunt stellen vind ik minder goed uitgewerkt aangezien je de progress niet echt goed kan volgen.

Ondanks enkele beperkingen gebruik ik dit programma dagelijks om gemakkelijk mijn timesheets volledig en correct in te kunnen vullen en om mijn persoonlijke projecten bij te houden. Het is een handige tool om snel te zien waaraan je gewerkt hebt en hoe lang en het blijft uit de weg dankzij de mini-modus.

http://klok.mcgraphix.com/klok/

2. SimpleTimer 2

SimpleTimer 2 is net zoals Klok een timemanager die min of meer dezelfde features heeft. Sommige zijn beter uitgewerkt, andere minder maar ik vind de GUI van Klok een stuk aantrekkelijk. Toch moet deze applicatie niet onderdoen, zo kan je exporteren naar CVS bestanden en blijven tellers lopen zelfs als je computer in standby gaat. De progress van elk project is goed zichtbaar via percentage bars wat een voordeel is in vergelijking met Klok.

http://www.nulldesign.de/projects/simpletimer-2/

3. PEF

Om te beginnen, PEF is veel meer dan een timemanagment applicatie alleen, het is een toepassing die toelaat om een designproces uiterst gedetaileerd bij te houden en collega’s te betrekken tijdens de ontwerp-fase. Je kan via een ingebouwde tool screenshots nemen van je werk en die worden automatisch toegevoegd aan je tijdslijn met thumbnail en timestamp. Je kan ook handmatig bestanden toevoegen zoals ideeschetsen, presentatie schetsen, bronnen, …
De video tutorial spreekt voor zichzelf en legt de workflow van PEF uit. Als ik de video bekeek kreeg ik echt het gevoel van: “dit is handig, gemakkelijk in gebruik, uitgebreid en kan zeker een meerwaarde binnen een grafish bedrijf zijn” . Ik heb me dan ook aangeboden als beta-tester aangezien PEF nog onder constructie is en ik raad alle designers aan dit ook te doen. Dit is een tool speciaal voor jullie, dus dank de Monsters en maak er gebruik van!!!

http://demonsters.nl/producten/PEF

Twitter Clients

Twitter is blijkbaar geliefd bij Air developers want er zijn reeds verschillende Twitter clients beschikbaar, de ene al uitgebreider dan de andere. In mijn ondervinding blijkt dat “eenvoudig maar robust” de beste aanpak is voor een dergelijke applicatie. Twitter is een beperkt microblog platform waarvan de hoofdkenmerken “snel” en “eenvoudig” zijn dus zo moeten de clients ook aanvoelen.

1. Twhirl

Twhirl is één van de eerste Twitter clients sinds de release van Air en wordt door veel mensen gebruikt als primaire toegang tot het Twitter netwerk (naast mobiles en de Twitter homepage). Je kan het bovendien ook gebruiken voor andere netwerken zoals Friendfeed, identi.ca of seesmic. Het is klein en stabiel, eenvoudig in gebruik, bevat verschillende built-in themes en je kan het minimaliseren naar je tray. Je kan ook on the fly links laten verkorten via 3 verschillende services (is.gd, snurl.com, twurl.nl). Nice! Tot sindskort gebruikte ik deze app ook maar ik ben ondertussen overgeschakeld naar een gelijkaardige client (zie verder).

http://www.twhirl.org/

2. TweetDeck

TweetDeck is een relatief uitgebreide applicatie met verschillende features zoals popular tag clouds, spell check, verschillende views (3-col, 1-col, fullscreen), custom panels, … Het maakt gebruik van de volledige Twitter api en probeert die volledig toegankelijk te maken voor de gebruiker. Ik vind het allemaal een beetje veel en complex, net om de redenen die ik eerder vermeld heb. Aan de andere kant, als je echt veel mensen volgt op Twitter kan dit misschien voor meer overzicht zorgen dankzij de uitgebreide filter functionaliteit. Een kwestie van gebruikerservaring neem ik aan.

http://www.tweetdeck.com/beta/

3. Destroy Twitter

Jonnie Hallman, de man achter Destroy Today is aan zijn projectlijst te zien duidelijk “hooked on air”. Hij bracht ondertussen al 4 volledig eigengemaakte applicaties naar buiten waaronder Destroy Twitter en Destroy Flickr. Zoals je aan de screenshot kan zien is het design van zijn applicaties super strak en ik hou wel van zo’n minimalistische stijl. Daarnaast spreekt de applicatie voor zich, voelt het enorm stabiel aan en doet het alles exact zoals het moet zonder dat je verloren raakt in de applicatie. DT heeft min of meer dezelfde features als Twhirl maar maakt gebruik van TinyURL voor het verkorten van urls. De notifications verschijnen in tegenstelling tot de meeste popupkadertje in de rechter bovenhoek van je scherm i.p.v. vanonder, wat wel wat wennen is maar toch goed werkt. Ik heb deze client nog maar pas ontdekt en ben direct overgeschakeld. Er komt binnenkort een update aan dus hou Destroy Today in de gaten en check zeker ook zijn andere applicaties in het geval die je aanspreken!

http://destroytoday.com/index.php?p=Project&id=DestroyTwitter

Air Debuggers (voor de Air developers onder ons)

Aangezien het niet altijd mogelijk is om Air applicaties te debuggen via de Flash of Flex IDE was er al snel nood aan een manier om variabelen en dergelijke te tracen at runtime. De eerste debugger werd ons geleverd door Carl Calderon (ik blijf die package naam maar misschrijven) en kon enkel strings tracen (maar dan wel in verschillende kleurtjes!) of objecten omgezet naar strings via de toString() method. Toch was ik blij met het ding want eindelijk kon je de stappen in je code visueel opvolgen. Thx Carl en Lee (Brimlow, die zich blijkbaar ook nuttig gemaakt heeft bij de ontwikkeling van Arthropod). Het principe is eenvoudig, importeer de debug klasse in je project, roep de juiste trace method aan en gebruik de Air applicatie als console om je traces te volgen.

1. Arthropod

Zoals hierboven vermeld was Arthropod de eerste vrij-beschikbare Air debugger. Het screenshot is van een oudere versie, de meest recente ziet er lichtjes anders uit en is uitgebreider qua functionaliteit. Een groot voordeel aan Arthropod is dat je bestanden die online staan ook kan laten tracen en dat zoals reeds gezegd in allerlei verschillende kleurtjes! De DiscoDebugger noem ik hem soms maar hij komt dikwijls wel eens van pas, ook in Flash projecten.

http://arthropod.stopp.se/

2. White Fly

White Fly is een project van het Belgische Boulevart waar ex-klasgenoot Karel werkt. De debugger bestaat uit verschillende vensters die toelaten om je objecten in detail te bekijken. Je kan eveneens tracen vanuit de browser, de applicatie en de IDE. Deze debugger biedt meer functionaliteit dan Arhropod maar ik vind de verschillende vensters persoonlijk wat onaangenaam, je verliest nogal gemakklijk je weg in de applicatie en een debugger moet logisch en overzichtelijk zijn en dat mis ik hier een beetje. Als je over twee schermen beschikt is het natuurlijk een stuk gemakkelijker dus in dat geval is dit misschien wel de beste debugger voor jou.

http://labs.boulevart.be/index.php/2008/08/13/boulevart-air-debugger-whitefly-beta/

3. Monster Debugger

Monster Debugger is net zoals PEF een product van de Monsters (ya rly), en mijn favoriete debugger. Het feit alleen al dat je objecten kan bekijken net zoals in de Flash debugger en dan nog leesbaar ook, en dat terwijl je binnen de applicatie blijft, maakt het de ideale tool for the trade. Er komt binnekort een update aan dus hou de site in de gaten want de lijst gewenste features ziet er wel netjes uit! Het project is bovendien Open Source dus mensen die zich geroepen voelen: laat jullie gaan zou ik zo zeggen!

http://www.demonsters.com/products/debugger/

Miscellaneous

Dit zijn enkele kleine applicaties die ik ook gebruik en het vernoemen waard vind.

1. Doomi

Doomi loves you, of dat zegt de hovertext op het tray icoon toch. En terecht, want Doomi zegt je wat je moet doen en dat is niet altijd even leuk. Het is een eenvoudige To-Do list met de mogelijkheid om getimede alerts in te stellen. Eenvoudig te gebruiken, blijft uit de weg (in de tray) tot je het nodig hebt en geen overbodige functies. Alleen drag en drop zou nog nice zijn maar dat is beloofd voor toegekomstige versies. Handig!

http://www.doominow.com/

2. SWF Object code generator

Dit is een tooltje van Google Code om swfObject 2 code te genereren. SwfObject laat toe om heel gemakkelijk flash te embedden in een webpagina aan de hand van Javascript. Je geeft gewoon de parameters op voor je movie en de code wordt onderaan teruggegeven. Handig, snel en geen typfouten. Sweet!

http://code.google.com/p/swfobject/downloads/detail?name=swfobject_generator_1_2_air.zip&can=2&q=

Air applicaties kunnen dus best wel handig zijn, de voorbeelden die ik hier bespreek zijn geen supercomplexe of uitgebreide applicaties maar voor sommige doeleinden hoeft dat ook niet. Air zal java of C# niet vervangen maar het feit dat je cross-platform applicaties kan maken in een taal waar je je thuis in voelt spreekt veel developers aan. Als Flash of Flex developer is de stap naar Air bijzonder klein, het is een library die je toelaat nieuwe mogelijkheden te gebruiken met een taal die je kent.

Op kantoor hadden wij gehoopt dat het gebruik van de Air library in Flash, Director en Lingo volledig zou vervangen maar dat is jammergenoeg niet het geval. Je kan namelijk geen bestanden openen zonder via de browser te gaan en dat is voor ons toch wel een belangerijk nadeel. Het file-systeem in Air is een stuk beperkter dan in Lingo en dat is jammer. Ik hoop dat Air nog verder uitgebreidt wordt zodat de nood om container applicaties in java of C# te gebruiken verminderd of wegvalt. Het is natuurlijk niet evident en er is een reden waarom het mogelijk is om met containers te werken maar dit toont opnieuw aan dat er toch bepaalde beperkingen zijn en dat je niet volledig vrij bent om full fledged desktop applicaties te maken zonder kennis van andere technologiën te hebben.

Adobe heeft niet stilgezeten,  en wij ook niet, daarom bezochten we vandaag met de collega’s en vrind Pelardo de Adobe “road to brilliant” CS4 Tour. De verschillende suites werden er voorgesteld en er waren enkele korte hands-on seminaries.

Om niet te erg uit te wijden:

Adobe Bridge CS4

The Bridge, een tool die ik best handig vind, is nog maar eens wat sneller geworden, althans dat wordt gezegd! Je kan er alle Adobe formaten mee previewen en managen. Maar sinds de CS4 versie kan je ook batch opdrachten uitvoeren zoals het aanmaken van een Flash photogalerij aan de hand van een gekozen map net zoals mogelijk is via automate of script in Photoshop. De nieuwe Bridge metadata laat ook toe om aanpassingen te maken op afbeeldingen, net zoals dat in Photoshop kan, maar zonder ze direct effectief toe te passen op de afbeelding (gelijkaardig aan non-destructive filters). In plaats van de eigenlijke bestanden aan te passen wordt er meta-data weggeschreven die ook op andere afbeeldingen kan worden toegepast door middel van presets. De foto’s worden dus gerendered met de aanpassingen in de meta-data zonder het originele bestand aan te passen en dit allemaal binnen de Bridge omgeving. Indrukwekkend? zeker! De nieuwe functionaliteit lijkt handig maar men kan zich afvragen waarom het nodig is om aan “fotomanipulatie” en dergelijke  te doen in een programma dat voornamelijk bedoelt is als filemanager. Ik hoop dat de snelheid niet moet inboeten voor de vele nieuwe features want dat vindt ik toch wel het belangrijkste bij een filemanager.

Adobe  Flash CS4

De eerste hands-on sessie was een korte kennismaking met de nieuwe features in Flash waarbij het keywoord voornamelijk “cool” was, waar ik eigenlijk op “handig” gehoopt had. Er is duidelijk werk gemaakt van het animatie-gedeelte in Flash zo is er een volledig nieuw property-animatie venster dat sterk doet denken aan dat van After Effects en Premiere. Er is een grafische weergave voor elke property van je MovieClip waardaar je erg precies animatie en effecten op mekaar kan afstellen door middel van property-keyframes (♦). Daarnaast is er “3D”-functionaliteit toegevoegd alhoewel het niet echt 3D is. Je kan MovieClips in 3 ricthtingen  roteren maar enkel oppervlakkig, dit lijkt mij een beetje zwak maar toen ik zag wat er mogelijk was op Adobe Cards moest ik wel even slikken. Er is ook een nieuwe Animation en 3D ActionScript class waarmee je deze animaties kan aanroepen via script. Gelukkig!

De flash animators worden duidelijk verwend in deze versie want er zijn ook nog “Bones”! Net zoals je in een 3D-animatie omgeving bones kan instellen op je objecten kan je dit nu ook doen op MovieClips in Flash. Voor de mensen die het niet weten, bones laten toe om een soort scharniergewrichten in te stellen op delen je object. Hierdoor kan je realistische bewegingen maken met bijvoorbeeld een arm die net zoals een menselijk arm beweegt. Je kan ook constraints instellen die de bewegingen beperken, zodat je kan zorgen dat de beweging gecontrolleerd en realistisch blijft bij beweging. Nice! Maar niet zo nice is dat je dit niet kan toepassen via script, je kan enkel een animatie omzetten naar keyframes en deze gebruiken als klasse. Wat wel mogelijk is, is dat je het object at runtime kunt laten bewegen door de gebruiker, volledig losstaand van keyframes of script. Een leuk extratje dat waarschijnlijk zwaar zal uitgebuit worden om fancy effectjes te maken. Ook niet onbelangrijk is het feit dat je nu tijd kan gebruiken in plaats van frames om je animatie in te delen. Het is de bedoeling dat frames uiteindelijk worden afgeschaft en dat alles met tijd-indeling zal verlopen net zoals in After Effects en Premiere.

De gastspreker van de tweede voorstelling van Flash was niemand minder dan Greg Rewis  aka Mr. Assorted Garbage himself. Hij en de mensen van Adobe zijn van mening dat je in Flash CS4 je animatie best volledig in keyframes maakt en deze dan later omzet via de “Copy Motion to AS3″-functie en als klasse gebruikt. Er zit wel wat in vond ik,  dus dat moet ik dan maar eens proberen. In Flash CS3 moet dit ook mogelijk zijn aangezien de betreffende functie al sinds CS3 ingevoerd was. Daarnaast ook nog het vermelden waard is de ondersteuning voor High Definition video (h.264) en QuickTime als ik me niet vergis.

Maar toch ben ik niet tevreden en wel om een zeer voor de hand liggende reden zijnde: “What about the darn script editor??” Alle scripters hadden gehoopt op een editor die gelijkaardig is aan flexbuilder met code-hinting en code-completion voor custom classes en alles wat je maar wil, maar nee! De editor leek me op het eerste zicht niet veranderd! En wat blijkt, er is helemaal niets aan veranderd! Kut!

Een positief punt is wel dat je nu meta-data kan toevoegen aan Flash movies via XMP. Hierdoor wordt het mogelijk om Flash content te indexeren in zoekmachines zoals Google en Yahoo. Hurray, eindelijk een stap dichter naar een standaard waar we al jaren op wachten!

Adobe Dreamweaver CS4

Dreamweaver, css-editor of choice? Misschien wel, code-completion en hinting zijn best wel aangenaam maar het ding neemt toch wel serieus wat tijd om op te starten en doet lastig als je snel een bestandje moet aanpassen dat niet toevallig in één van je gedefiniëerde sites zit. Het design-gedeelte heb ik nooit willen gebruiken aangezien ik dat tijdverlies vondt maar in de nieuwe versie heeft het een nieuwe functie gekregen. Je kan nu je site live previewen net als in een brower! “En welke browser mag dat dan wel wezen?”, was de eerste vraag die mij te binnen schoot. Het antwoord: het is een engine, geen browser en het is WebKit, de open-source engine van onder andere onze fruitige vriend Safari. Tja, Adobe en Apple hebben hun relatie nooit ontkent dus dat was wel te verwachten.

Voor de AJAX ontwikkelaars is er goed nieuws, de design/preview mode van Dreamweaver laat toe om je geladen content on-the-fly te onderzoeken. Je JavaScript wordt dus toegepast en de veranderingen kan je zien in een code venster, erg gelijkaardig aan de FireFox-extensie FireBug. Je kan ook een element op je pagina aanduiden en onmiddelijk de gelinkte css properties opvragen waardoor het css-bestand wordt geopend en de focus geplaatst wordt op de exacte lijn waar je properties staan. Handig! Er is nu ook mogelijkheid om een HTML dataset te gebruiken in AJAX i.p.v. een XML. Je kan dus bijvoorbeeld een UL als dataset gebruiken en list-items als records.

Ook handig is het feit dat als je een bestand opent, bijvoorbeeld een PHP bestand, dat alle gelinkte bestanden (CSS, Javascript, …) ook worden geopend in een tab menu bovenaan de applicatie,  zelfs de includes en required pagina’s die eventueel nodig zijn voor een PHP bestand. Handig!

En dan is er nog een nieuw principe voor de design modus die je toelaat om PSD bestanden te linken in je design zodat ze automatisch worden aangepast en opnieuw gerendered voor je ontwerp in Dreamweaver. Auto-update via PSD dus. Supersweet, als je van design-mode houdt.

Alle nieuwe CS4 producten hebben trouwens een nieuwe display-preset functie die je toelaat om set-ups van je workspaces op te slaan en te laden via de GUI. Er zijn verschillende presets zoals “Designer”, “Illustrator”, “Animator”, “Coder”, …

Adobe PhotoShop CS4

Photoshop, het Zwitsers zakmes van iedereen die wel iets met grafische dingen doet, heeft veel nieuwe features. Er lijkt maar geen einde te komen aan nieuwigheden in de laatste Photoshop versies. Het meest indrukwekkende deze keer vond ik “Zo schalen dat inhoud behouden blijft”:

Je kan dit automatisch laten doen of met behulp van een channel of selectie. Wicked! Je kan nu ook nog verder gaan in het skinnen van 3D-objecten door 2D-afbeeldingen toe te passen op 3D-objecten. Je kan ook door middel van een set nieuwe tools als het ware je 3D object opensnijden om zo de binnenkanten te skinnen zonder dat er iets gewijzigd wordt aan je originele 3D model! Om het even concreet voor te stellen: als je een model van een auto hebt kan je in photoshop het dak er af snijden zodat je in het interieur van de auto alles kan voorzien van kleur of textures. Supersweet! Photoshop doet duidelijk een inspanning om zich te profileren als uiterst geschikt skinning/texturing-programma met onboard capabilties. Deze opties zijn wel enkel beschikbaar binnen de Extended version van Photoshop CS4 die net zoals CS3 extra 3D en animatie toevoegde aan het programma.

Wat ook direct opviel is dat alle image adjustments niet meer in het Image>Adjustments menu zitten maar in een apart palet met verschillende tabs. Toegankelijker? Misschien. Ik heb het meer voor shortcuts dan voor panels eerlijkgezegd, zeker in Photoshop.

Er zijn drie verbeterde tools voor het retoucheren van foto’s namelijk Tegenhouden, Doordrukken en Spons die toelaten om kleuren van een foto aan te passen, maar nu de texturen beter behouden voor een natuurlijker resultaat. Als je inzoomt tot op pixel niveau zie je nu ook een wit raster waar de pixels lopen. Handig voor het bewerken van onder andere iconen en kleine afbeeldingen. Ook kan je nu enorm snel en effeciënt layers op mekaar uitlijnen. Dit kan handig zijn voor het op mekaar zetten van foto’s van verschillende canvas groottes met gelijkaardige content of voor het uitlijnen van bijvoorbeeld rollover-states van buttons.

Er zijn nog veel meer nieuwe opties, bekijk zeker ook de links vanonder aan de pagina’s als je meer wil te weten komen.

Adobe Illustrator CS4

Illustrator heeft net zoals Photoshop een aantal nuttige nieuwe features en het is duidelijk dat de nadruk op verlopen (gradients)  ligt. Zo kan je nu transparantie gebruiken in verlopen, iets waar je vroeger betrekkelijk veel moeite moest voor doen. Je kan je verlopen ook on-the-fly aanpassen door gebruik te maken van de nieuwe gradient-balk (of hoe moet ik het noemen). Het werkt een beetje als een elastiek, als je er aan trekt, rekt je verloop uit Zo zei die man het toch. In ieder geval is het wel een nuttige tool en het heeft je meer overzicht over je verloop.

Het appearence palet was blijkbaar niet erg in trek bij het publiek hoewel het volgens mij een essentieel onderdeel is van Illustator.  In de nieuwe versie wordt er dan ook meer aandacht aan besteed, zo kan je nu via een kleurkiezer in het palet de kleuren voor je verschillende fills en strokes keizen zonder daarvoor in een aparte kiezer te moeten gaan zoeken. Nice! Er is verbeterde ondersteuning voor graphic styles, je kan er meer properties op toepassen en variabel maken en je kan ze nu op zowat alles toepassen en opslaan in een library.

Wat mij ook interessant leek was dat brushes nu echt brushes geworden zijn. Hiermee bedoel ik dat het geen paden meer zijn met een stroke erop toegepast maar echte vlakken zoals je met een penseel zou schilderen. Als je boven je getekende lijnen schildert dan worden deze automatisch samengevoegd zonder dit via de pathfinder te moeten doen. Net echt! Misschien zal dit veel pen-tablet gebruikers illustrator een nieuwe kans doen geven want nu kan je echt schilderen in vectors net zoals je in Photoshop kan in pixels.

Het was een erg interessante dag vond ik, leuke locatie en leuke collega’s. Meer van dat!

Bridge CS4 New Features:
http://www.adobe.com/nl/products/creativesuite/bridge/features/

Flash CS4 New Features:
http://www.adobe.com/nl/products/flash/features/?view=topnew

DreamWeaver CS4 New Features:
http://www.adobe.com/nl/products/dreamweaver/features/?view=topnew

PhotoShop CS4 New Features:
http://www.adobe.com/nl/products/photoshop/photoshopextended/features/?view=topnew

Illustrator CS4 New Features:
http://www.adobe.com/nl/products/illustrator/features/?view=topnew