gotoAndSki 2012

31 Jan

gotoAndSki 2012

Just back from another gotoAndSki conference in Switzerland and what a blast it was! Just as last year I went to Switzerland with @thomasnesse and @smest for almost a whole week, just to be sure not to miss out on good snow. The first day was simply EPIC!!!

50 cm powder snow, cloudy but with thin skies so there was plenty of contrast and no sunburns. We went offpiste until our legs got cramps and then some. When the conference started a few days later, my legs still hurt so on the sunniest day I spent some hours teaching @inspirit how to snowboard and refreshing the memory of @devboy_org. I was pretty proud to hear that Eugene did a black slope all by himself, only the day after! (while cursing @funkysoul and the others for picking that route).

Eugene Zatepyakin presenting @ gotoAndSki Switzerland

Eugene delivered a great talk about his AR library - in2ar - that now is completely rewritten and free of patents. It was especially impressive to see this running on mobile phones using AIR and Native Extensions! Other favorite talks were @quasimondo's return to public speaking. His session "The naked pixel" is guaranteed to fill any conference room! Dominic's session was also quite nice and worked as a primer on Ruby as well.

It was great fun to meet attendees from last year and to meet some new faces like Franto - one of many that I've followed in the Flash community for many years and only met now. I also talked to his buddy @sHTiF that has written a great 2D engine for Stage 3D (and a Starling alternative) that is called Genome2D. I have to finish up a couple other projects first, but then I'll definitely test how this engine plays with my MineGunner project! Seeing Adobe's @tomkrcha demo the Genome2D engine on an iPad 2 with 7000 sprites running at 60fps really convinced me that Flash on devices is here to stay! 

I had a great week in Stechelberg so a big thank you to @fcolaco & @almeidavid_ for organizing yet another great event! Given how bad the snow has been here in Norway this year, it was simply fantastic to get to Switzerland for this week. Just check out this picture - beneath that 2.5 meter high sign there is a road somewhere...

Why Javascript bores me

14 Jan

Now this is going to sound cocky (sorry) but I need to get it off my chest - the thing I hate about the Flash vs HTML(5)/JS/CSS(3) debacle is that clients now expect you to be able to do everything you could in Flash using HTML. They also expect that everything will magically work well on mobile devices such as iPads and cheap Android phones. This is after all the very promise that Steve Jobs and other cool guys have sold them. The problem is - it’s not like that at all.

It’s really hard work to solve browser incompatibilities and code around inefficiencies in mobile browsers. I don’t mind hard work but this really bores me - a lot. I hate patching something that really should have worked, but since somebody didn’t agree on how to solve it I’ll get to poke around half a day to look for an answer…? It’s much more fun to create stuff, isn’t it?

I don’t mind that Flash’s role is changing. It was inevitable and I too love to see cutting edge work done in HTML/JS/CSS like this brilliant site by Bret Victor or enfantsterrible by WeFail. I just don’t want to go 5 years back in time to the time before Flash Player 9 and Actionscript 3. I don’t mind doing Javascript, but it feels so totally inappropriate to try and build serious apps with it (like I do with Flash and Flex). I don’t want to work on projects where I constantly have to cut back on creativity just because something just isn’t possible (yet). Flash is a platform that does not limit what I can do, so to me this boils down to either having (what I think is) a boring job or finding something more enjoyable. Work takes up too much of my life for it to be boring…

AS3 is such a mature language and if you read up on the future of Javascript, you’ll find that JS5 will be the “patched but still untyped” version of JS. Future versions after that will become what ECMA 4 tried to be before Microsoft more or less killed the project. Flash’s programming language AS3 is what Javascript will become in the future. It probably won’t be exactly like, but it’ll be close. I think that I will look for other challenges while waiting for javascript to mature where working with it no longer bores me.

Others have taken a different route and gone with the flow to do with JS what they have already done with Flash and Flex. I have no need to do that. There’s so many other things to do than have a boring job. Today, João Saleiro posted a brilliant and thorough article that more or less sums up all of my frustrations with “the future” of web development. It’s lengthy, but it’s really worth it - especially if you come from the HTML/JS side. Most HTML5 “comment trolls” don’t know anything about Flash, Flex or AS3, so they have no clue what they are missing…

Sorry. HTML5/Javascript/CSS3 really bore me and I’m already used to Living in the future. I won’t spend time on learning the fancy “flavor of the month” JS-library that may be dead a couple months from now. Instead, I currently enjoy learning about electronics and microcomputers while coding in C - a language that is older than me and still just as valid. And if I ever “have to” to build something big with Javascript, I’ll certainly use something like Haxe that can remove the pain and add some fun.

Further reading?

The V8 Myth: Why JavaScript is not a Worthy Competitor

PS: I do a lot of HTML, JS, CSS and have done so ever since I started in this business 15 years ago. I also do PHP and EE CMS on a almost daily basis. I just don’t see the excitement in fighting against technology to make it do what have been done already. If being on the bleeding edge requires daily pain and fighting inadequacies/inconsistencies/incompatibilities, I’ll rather look for things more fun to do?

Playing with Arduino

20 Dec

For quite some time I’ve wanted to play with Arduino and after the Rock City project, where I did a lot of soldering and hardware integration (based on Phidgets) I decided it was about time I got started. I picked up the kit today and I just couldn’t stop playing with it. The kit that I got was the Ultimate Microcontroller pack from MakerShed. Lot’s of components and I also added a bunch of extra sensors that I though I might find a use for. So much fun!

Arduino programming is C/C++ based and that’s something I haven’t done much. The syntax seems fairly easy and for now I haven’t run into what I’ve always dreaded the most with C - memory management issues. I’m sure I’ll run into some, but I’ve picked up a couple books to read over xmas so that I can try to avoid things like that. I’ve posted a short vid of my first project done without following a tutorial below.

I have one question for those of you reading this that have Arduino experience:
Why will only some of my LED’s fade in/out?
I’m using “analogWrite” to set a value between 0 and 255. Those that don’t fade will always toggle at a value of 128. I’ve swapped around the LED and resistor and that makes no difference. It seems this is related to the I/O ports used. You can see this in the video below.

Housekeeping time

16 Dec

Housekeeping time

Back when I started this blog in 2006, I installed Movable Type and just left it there. Kind of scary given the amount of hackers, but apparently MT is pretty safe now that WordPress has taken over? I’ve finally managed to move this blog to a more recent CMS, so that was certainly about time… I didn’t want to spend time on a new setup, so I tried installing Wordpress - just because it takes virtually no time. It turned out that my hosting company had not yet upgraded their PHP to the version required by Wordpress, so I had to look at other options.

I love ExpressionEngine, but setting it up for something as simple as a blog is totally overkill. Then it dawned on me that the brilliant Bjørn Børresen had created some simple and decent looking EE templates over at ThemeForest. Turns out he has found some really good solutions, so if you just want a simple EE site - go check these out. They come complete with a bunch of Bjørn’s nifty extensions as well so the blog has Gravatar support, thumbnail generation and video embedding support. By just copying the theme files to the server at setup time, everything is set up for you automatically. Very neat!

Next part was moving all the contents of the old blog into EE and the excellent DataGrab module by Andrew Weaver came to the rescue. All my content (including comments) converted perfectly on the first attempt and all I’ve had to do are some very minor tweaks to the content and templates. Have to say that I didn’t expect this to go as smooth, so kudos to Bjørn and Andrew! I also threw together a quick, static site for my ltd company while I was at it.

Now that all my projects are finished for this year and I’m almost done with all other private projects, I will kick back with some Android and iPhone development on my brand new 27” monitor (I needed more pixels!). If you have any challenging Flash projects in January/February - please get in touch! I have extensive device experience and I wouldn’t mind doing some Stage 3D either…
(Note: the usual banners and microsites are not challenging/interesting…)

The Rock City project

07 Dec

The Rock City project

Once in a while there comes along a project where you get to play with loads of fun things. This project was exactly that. Rock City Namsos is a brand new cultural building in the city of Namsos. It contains a movie theatre, a concert hall, a resource hub for professional music, a super-sweet recording studio as well as an exhibition centre. I worked on the exhibition centre part and I was hired by SixSides and my friends at Back to create six of the ten interactive installations. If you’re ever in that part of Norway - make sure to drop by!

The goal for the interactive part of the exhibit is to teach people about how music is created and let them have a go at making it themselves. The theme is the musical style “Trønderrock” which was more or less invented in Namsos. The difficulty of the task is of course that no music skills can be required. Based on seeing both kids and adults having a blast making songs with the software, I think we solved this really well!

The first installation I did was a GarageBand-like editor that had been dumbed down a lot to make it accessible. The app is called “Låtskriveren” (the songwriter) and I could not have done this without the excellent Tonfall library written by Andre Michelle. Thanks a lot for making this library Andre!

laatskriveren.jpg

You create your own tracks by dragging prefabricated loops onto the timeline. There’s drums, bass, guitar and accordion (important for proper TrønderRock!) available. You’ll get a random set of chords initially, but you can change this by just pulling down a drop-down menu. Advanced users can zoom in on the timeline for some minor edits and they can bypass the automatic chords to mix and match as they want. You can jump on the timeline by clicking/dragging the playhead as well, so the app is quite complete.

The other app I did based on Tonfall was a full mixing desk with motorized faders! This app called “MiksEnMaster” was incredibly fun to do! All the interactive parts of the exhibit are activated using RFID cards that is made to look like a stage-pass (with Access All Areas of course). The passes are given out when the user enters the exhibit. The user will go up to a station, scan the card and if they save the result and register, they’ll be able to view and share what they created at the exhibit when they come home.

miksenmaster.jpg

When you scan your badge on “MiksEnMaster”, the motorized faders will all move up to the max position. This is done using standard mixing desk faders that we picked up from Yamaha along with Phidget motor controllers. Next you’ll select one out of four classic Trønderrock tracks and on the “window” (a 46” monitor) in front of the desk,  a guy will show up to tell you what to do. Hit play and you can tweak the eight tracks as you like. When you know how you want it, you press record to do the actual mixing.

As the user is working the faders, I’m adjusting the volume of each track in the Tonfall-setup. It simply works super-smooth! When the song is finished or the user stops the recording, we write the captured sound-bytes to an uncompressed WAV file and then convert that to MP3 using AIR’s NativeProcess capabilities. If the user is happy with the mix, we’ll save it to the server so they can show it off when they get home.

kuler.jpg

There’s also a third app in the exhibit that uses Tonfall. This one was done by @sunjammer and @deplifer and it’s a rythm-table! A big desk contains a bunch of holes and a string of LED’s that play along the top. By putting different colored balls into the holes, you can build your own rythms. The installation uses an AIR-app that controls two webcams that read the color of the balls. Each color is a sound and you can build some pretty cool rythms (or make a complete mess) with this installation.

Another app I made is “CoverDesigneren” (the Cover Designer). This is a multitouch-application for designing your own CD cover. I had played around with multitouch quite a bit before, but making this work on a 23” screen for completely novice users was quite a challenge. I would say that any app should get at least 25% extra hours if proper multitouch (other than the basic gestures) is required.

In the app, you can select pre-made backgrounds or take a snapshot using a webcam, add graphics and text as well as add effects to all of these. It’s kind of a mini-photoshop for CD covers. Thanks to Mario for his neat color manipulation classes in this app! The resulting covers from this app is played back later in the exhibit on a multi-projector setup where you’ll see your own cover along with classic Trønderrock-covers.

Many museums/exhibits have an archive, but Rock City now has the neatest of them all. On a purpose built class table containing two 46” screens, you can browse a huge archive of newspaper clippings and images previously unavailable. The people sitting down at this installation can easily just sit there reading for 15 minutes or even more.

avisbordet.jpg

The navigation is really cool as well. Beneath the glass surface, there’s four touch-buttons that light up if navigation is possible in that direction. It took forever to solder the 32 LED’s but the end result was simply beautiful. They make the table really easy to use. Another fun bit of this installation is that it is placed in a room that is made to look like a hotel room and just above the table, there’s a “window”. The window is also a 46” screen and when you’re reading an article about Tokyo, the window will change to show a view of Tokyo. Both sides of the table will “compete” over the “view” so we needed a simple way for these to tell what image to use. The maybe obvious choice here would be to use a socket server, but we used something that is much smoother to work with - Peer 2 Peer multicast! Thanks to the Cocoon-p2p library created by Peter Elst, the apps will just send a simple message onto the network that is then picked up by the machine running the view on the window.

We also use Cocoon in another part of the exhibit - the stage! Here you’ll scan your badge and enter a proper Stage. Once the first badge is scanned, a countdown will display on monitors in front of the stage until a recording starts. When the song is finished, you can view your recording on a big screen in the adjacent room. The setup consists of four different computers controlled with Cocoon p2p that runs different projections as well as the concert lighting rig that hangs above. @thomasnesse did this installation and while it was a fairly complex setup, I think he solved it very elegantly and simple thanks to the p2p capabilities in Flash/AIR!

My friend @plo also did the app running the Multitouch kiosks in the exhibit. These were done as AIR apps based on HTML/CSS/JS and this worked quite well. Personally I would still use Flash for custom UI like this, but it was fun to see that HTML is getting there as well for stuff like this.

tnt.jpg

This is certainly the most fun project I’ve done in ages and we could not have done this in such a short amount of time if it wasn’t for open source projects like Tonfall and Cocoon.

Did I mention this was all put together in only 3-4 months time? The project owners had set the launch to be 11.11 2011 at 11.11 so we had no slack in terms of the opening. The setup of the exhibition also got more epic thanks to a huge water leak that went straight into our server room the day before opening, but I absolutely loved this project. So many nice people and fun challenges are rare to come by. Fingers crossed that I’ll get to do more projects like this!

(images by Rock City, Lars Petter Garen and me)

My thoughts on HTML5 and Flash’s future

29 Nov

Given the mess that Adobe has put us Flash developers in these days, I want to add to the conversation that I’ve never had a better time as a Flash developer! While Mike and Ben provide some good background on the choices, this does not compensate for how poorly this was communicated. Way to kill a devoted community Shantanu!

This should have been handled in a much different way and it puzzles me that there’s still nobody in Adobe talking about Flash’s unique strengths. It’s all about HTML5 these days and the 750 layoffs is probably just a start. Luckily for Flash as a platform, there’s others doing Adobe’s job in this area.

I should add that I’ve done dynamic HTML sites ever since I started in this business about 15 years ago. The Rock City project (in the previous post) uses ExpressionEngine as a backend and I also do smaller sites based on Wordpress on a regular basis. The new Away3D.com website is EE driven and I’ve written several EE plugins in PHP as I’ve needed them. It’s all about using the right tool for the job at hand.

I enjoy making sites and apps using HTML, but I could never do that every single working day. Flash is what brings fun to my job. Things I do with jQuery, CSS and CMS systems are really just something I do for bread and butter and to stay up to date. I’ll keep doing this as well as play around with other languages like Haxe and Processing (for Arduino and other things)

I still see Flash as a solid part of my future, especially with the new Stage3D and other gaming related features now in Flash Player 11. I’m thoroughly impressed by the performance I can get out of the AIR apps I write for Android and iOS and I love NativeProcess and the possibilities it gives. All the fun things I’ve done this year are thanks to the Flash platform and I don’t see that change in the near future. I’m pretty sure there’s no other tool that is as capable when it comes to multi-platform publishing that can actually utilize hardware features such as cameras, audio, video, p2p, multitouch, hardware 3d and much more on so many platforms - all with the same consistent rendering.

And the best part - the stuff that I made in Flash more than 10-12 years ago still works on 99% of all desktop machines as well as quite a few Android phones and tablets (for now).

Busy, busy, busy

29 Nov

It’s been a while since I’ve posted an update on what I’m doing these days so it’s time to catch up a bit. I’ve been really busy the last year and now I finally have some time to post on it. Here’s some of my favorite projects the past year.

Sukker.no

Sukker is the largest dating site in Norway and it’s used by more or less every single person below 50 that I know. I were originally hired to solve a problem that others had given up - making a 22 Gigapixel image zoomable and interactive. At any time of the day, this app will show the online status for many thousand users, offering new ways to explore and connect to people. Making an app like this run on old machines was quite a fun task! You can check out the city yourself but you’ll have to be logged in to see who is behind each blinking dot.

sukkercity.jpg

I also made two more apps for Sukker and they both allow their users to utilize more than just pictures to show others who you are. One is an “Apartment configurator” where you can create a kind of fantasy apartment allowing others to see what taste you have in music, film, food and much more. You can even peek into the fridge! The other app is sort of a “powerpoint”-app that allows people to build stories based on slides, images, video and text.

RIM / Playbook

I can’t say much about this project, but I’ve been allowed to say that “I have been working on a first party application for RIM”. I can also say that it was great to work with my friends at Jadehopper!

Minegunner

The only breaks from commercial projects have been working on a Tower Defense game called MineGunner. The paying gigshave enabled me to take time off to work on this. There’s still work to be done on it though so I’ll spend my time from now and a little into January trying to get it finished and published. (Come to think of it - I don’t think I ever posted a link to my old sparetime project - the Rampgenerator?)

mingunner.jpg

Rock City

This has certainly been the most fun project ever! I’ve used multitouch, low level audio manipulation (with Tonfall), peer to peer apps (with Cocoon p2p), controlling lights and LED’s, webcams, motorized faders as well as literally bags of Phidgets! I’ll write up a separate post on this soon since it was simply too much fun to fit in just a few paragraphs.

Simple data storage from Flash to ExpressionEngine

26 Aug

Am working in a great project at the time. The backend is my fav cms ExpressionEngine and I play with audio programming, mutitouch, and phidgets all day. Good times!

Just thought that I’d post some experiences in getting data from Flash to ExpressionEngine since I’ve spent some time on that. The initial idea was to use SafeCracker with EE. This works to some extent, but there are a couple hiccups. Mostly it’s because of the XID required to do safe forms and 302 redirects. Due to this, we had to find a another path. For anything more advanced, we’ll use AMFie (ActionScript Remoting for EE, developed by bjornbjorn) but for the simple stuff, we’ll just use the Metaweblogs API plugin that comes with EE. It’s simple, but it’s all you need to just save some text easily (Getting it out is super easy with a custom template).

I was a little puzzled that there were only AS1 and AS2 libraries for XMLRPC. If you know of an updated AS3 Metaweblog API for Flash, please post it in the comments. Documentation for the Metaweblog API was rather crappy since the main site is broken but I found a couple resources that helped me solve how the XML were supposed to look. If you want to see how it’s done, there’s code in the extended entry. This is no API, but it does show how to insert data. It’s the same for the other methods.

Here’s the code snippet I use with the Metaweblog API:

        /**
         * Stores the users progression
         * Uses the Metaweblog API module in ExpressionEngine
         *  
         * @param session_id The id returned from getSession();
         * @param key A key you define for use with your application
         * @param value A value for the key
         * 
         */    
        public static function saveContent( session_id:String, key:String, value:String ):void
        {
            // The message that the MetaWeblog API wants
            var payload:String = "";
            payload += "";
            payload += "    metaWeblog.newPost";
            payload += "    ";
            payload += "        ";
            payload += "            2";                    // EE channel
            payload += "        

";
payload += "

"; payload += " myuser"; // EE user payload += "

";
payload += "

"; payload += " mypass"; // EE password payload += "

";
payload += "

"; payload += " "; payload += " "; // Struct with members per field payload += " "; payload += " title"; payload += " "+session_id+" - "+key+" - "+value+""; payload += " "; payload += " "; payload += " mt_excerpt"; payload += " "+session_id+""; payload += " "; payload += " "; payload += " description"; payload += " "+key+""; payload += " "; payload += " "; payload += " mt_text_more"; payload += " "+value+""; payload += " "; payload += " "; payload += " mt_keywords"; payload += " mt_keywords"; payload += " "; payload += " "; payload += " "; payload += "

";
payload += "

"; payload += " 1"; payload += "

";
payload += "

";
payload += "

";

var req:URLRequest = new URLRequest("http://example.com/?ACT=45&id=1"); // This value, you'll find on EE's metaweblog api module info page
req.method = URLRequestMethod.POST;
req.data = payload;

// Flash will add User-Agent and Content-Length for us, but Content-Type we set ourselves
var contentType:URLRequestHeader = new URLRequestHeader("Content-Type", "text/xml");
req.requestHeaders.push(contentType);

xml_request = new URLLoader();
xml_request.addEventListener( Event.COMPLETE, saveContentResult );
xml_request.addEventListener( IOErrorEvent.IO_ERROR, error );
xml_request.addEventListener( HTTPStatusEvent.HTTP_STATUS, httpResponse );
xml_request.load(req);
}

New toy

03 Aug

eeepad.pngI’ve been working with various devices and Flash the last half year and today I got myself a brand new toy, the ASUS Eee Pad Transformer. It’s the first Android tablet that has appealed to me in any way and the keyboard dock actually makes it usable as something more than just an entertainment-toy like the iPad is to me.

Don’t get me wrong though. Android is still miles behind Apple in terms of usability on their tablet OS, but HoneyComb 3.2 really isn’t bad at all and I needed a high resolution tablet (1280 by 752 pixels) for device testing. Getting my projects onto the device was absolutely straightforward except for one important thing - the device didn’t show up in Flash Builder initially.

Thanks to Mark Doherty and Twitter I got an answer in just minutes but it wasn’t exactly detailed: “you’ll need to add the oem code to a file called adb_usb.ini”. It took a few minutes to figure this out so I figured I’d post how to add any USB device to the Android SDK and Flash Builder 4.5 (an others) for future reference.

Open a Terminal window and at the prompt type this:
cd /Applications/android-sdk-mac_86

If your Android SDK is in a different location, just substitute the path above. Next, make sure you stop the ADB server by issuing the kill-command:
./adb kill-server

Next you’ll create the adb_usb.ini file. Open another Terminal window. By default, Terminal windows open at your home path and that’s just where we want to be. In this folder there should be a hidden folder called “.android”. You can’t see this using the OSX Finder, but if you type:
ls -la

you’ll see all the files in the directory. Enter the folder using the cd-command:
cd .android/

If you type “ls -la” again and no “adb_usb.ini” exists, type the following to create the file:
touch adb_usb.ini

The next step is adding support for the tablet/device vendor of your choice. You can edit this file using any good text editor or you can do it simply via the Terminal by typing:
echo “0x0b05” >> ~/.android/adb_usb.ini

That will append the hex value to the text file. In the line above, the characters “0b05” adds support for devices from ASUS. The full (but not complete) list of manufacturers can be found here: http://developer.android.com/guide/developing/device.html and using this you should be able to add support for any other USB-based device.

You finish off by restarting the ADB server:
./adb start-server

and then ask it to list devices connected:
./adb devices

On my machine this produced a list like the one below and made the ASUS Eee Pad Transformer device show up in Flash Builder as it should:
List of devices attached
370668942427457 device

I hope this is of use to others as well grin

Away3D.com

16 Jun

While on the topic of 3D - we just launched a new version of away3d.com!. I did the ExpressionEngine part of it, Richard handled the JS/CSS and Alejandro got all the old content into the new site plus a bunch of other things. He also has the role of webmaster for the site.

Great fun to do another EE site and my first time working with the Forum module. Skinning that thing is ... quite a job. It took me about two days to get all the skinning right and it’s far from as easy to work with as EE in general. We also needed a custom field to go with all forum posts (to enable filtering) and adding that wasn’t exactly easy either as the classes are not really written to be extended like that. I ended up extending the base class and overriding the relevant methods. The resulting file contains quite a bit of copied code, but it should be fairly easy to maintain.

Please go check it out and tell me what you think?

away3dcom.jpg