Monokai

Monoslideshow Facebook app

Wimer Hazenberg — Thu, 20 Aug 2009 08:53:41 +0000

Monoslideshow for Facebook has just been released:

apps.facebook.com/monoslideshow

You can use this app to display your photos in your profile page, either in the boxes tab (large), or in the wall tab (small). You can also choose to populate Monoslideshow with Flickr images from any Flickr feed.Â Best thing, it’s totally free for Facebook users!

Monoslideshow 2.0 is out!

Wimer Hazenberg — Tue, 30 Jun 2009 15:10:29 +0000

Monoslideshow 2.0 has just been released:

Monoslideshow is the ultra customizable Flash image viewer for your site. This new version has been completely rewritten and has a ton of new features and professional photo transitions. You can find the all new interactive demo right here:Â http://www.monoslideshow.com/demo

Flash SEO: graceful degradation to add meaning and structure

Wimer Hazenberg — Mon, 20 Oct 2008 08:40:00 +0000

Flash sites are traditionally less searchable by Google than plain HTML sites. Now that Google supports the indexing of Flash files, you might think that’s that. You just make your shiny site in Flash and never have to worry about being searchable. Still, something is missing: meaning and structure. Both of them are present in regular HTML sites, but not in Flash. So, how exactly can we make Flash sites just as searchable as HTML sites?

Structural information

How does Google actually index Flash files? Inside a Flash .swf file, Google reads its text fields and follows its links, sure, but can Google add structural info to all this? Flash files normally contain text, but also layout instructions, effects, and other visuals. In other words, Flash files contain a mix of content and styling. This sounds like the old days, when you were used to wrap your text in tags.

With plain XHTML and CSS though, content and styling are separated. This has a couple of benefits, which we all know by now. Google can easily read the “raw source” of a web site, and the visitor sees a visually pleasing result of that same source. The CSS transforms the raw source of the XHTML, as it were, and is declared in a separate CSS file. What’s nice about this, is that Google doesn’t have to plough through lots of visual declarations like tags or tags, which don’t add any meaning to the content. What remains for Google are structural tags, like

’s for paragraphs, or

’s for headers. Headers and paragraphs add meaning and structure to a site, and are relevant for your content to rank high on Google. For example, Google knows that if your header contains the word “cookies” and your paragraph contains the word “sugar”, that section would be about cookies, and sugar would be of less importance (it could be an ingredient). If both words were reversed, the section would say something about sugar, and cookies would be of less importance (cookies could be an example of things to make with sugar). If a Flash file contains these same words, Google doesn’t know which is more relevant, and thus isn’t able to add meaning or structure to your site.

Hold this in mind.

Embedding Flash

We now look at how Flash .swf files are embedded in HTML files. The recommended technique to load Flash files in a browser is to use a script, like SWFObject for example. What it does is that it injects your Flash file in a specified

tag in your HTML source code. For example, if you have this

with id “flashContent” in your source:


Please download Flash

…this command will replace that with the flash file “yourFlashFile.swf”:

This is a nice technique because it gracefully degrades. If no Flash Player is installed at the visitors computer, the message “Please download Flash” is displayed in the

. Otherwise, the message is replaced by the Flash content.

So, this is the recommended technique to embed Flash files. But what about searchability? Imagine that your Flash file contains lots of text, or maybe reads it content from an XML file. In theory, you could copy-paste the text from your Flash file into the

of your HTML file, and Google would have access to it. But this presents two problems. One, you have your content twice. That is twice the bytes, and it just doesn’t sound elegant. And two, you have to recreate the tags around your content, to add structure to the text. This is cumbersome.

Use Flash like you use CSS

So, what do we do? We turn things around. First we add content, then we style. Just like CSS on top of XHTML, we put Flash on top of XHTML. The concept is to see Flash as the little brother of CSS. Or actually, the more powerful one.

First, type your content in any editor, preferably without markup. Then copy-paste your text into a HTML file. Wrap

header tags around your headers and wrap your paragraphs in

tags, etc. When done, you have your content structured in a HTML file, ready for Google to parse and index.

Now create your Flash file. And, instead of typing text in you text fields, you have to fire up your actionscript skills to populate your text fields with the content from your XHTML file. The key is to write a little XML loader, that loads the contents from your HTML page. Then use the built in E4X commands of Flash to select the content nodes of your XHTML page. Finally, you have to populate your text fields with the data from the XML nodes. Example:

import flash.events.Event;
import flash.net.URLLoader;
import flash.net.URLRequest;

function load() {}
	XML.ignoreWhitespace = false;
	XML.prettyPrinting = false;
	var loader:URLLoader = new URLLoader();
	loader.addEventListener(Event.COMPLETE, onLoadComplete);
	loader.load(new URLRequest("index.html"));
}

function onLoadComplete(event:Event):void {
	var xml:XML = new XML(event.target.loader.data);
	trace(xml.body..h1.text()) // outputs all h1 tags;
}

Also, dispatchevent.org has some starting points:

Actionscript 3 E4X rundown
Using E4X with XHTML? Watch your namespaces!

Now you have your Flash file, completely separate from the actual content. The content is styled by Flash. Just like CSS does to XHTML content. Benefits: your content is easily updatable without having to enter the Flash IDE, and Google is happily indexing your content. As an added bonus, users without Flash still see the content of your site. You can even style your bare content with CSS, to be Ã¼bercompatible. So, in the end, it’s all about content, meaning and structure (and, of course, a little design sauce on top of that).

Wrap up

Advantages of this technique:

Fully search engine optimized
Meaning and structure restored
Content is read once
Content is easily editable
Visitors without Flash and / or Javascript sill see content

At our studio Booreiland, we created a site using this technique for Unga Toys, an Amsterdam based toy development studio:

www.ungatoys.com

Also, we made our own site this way:

www.booreiland.nl

Go ahead, try to disable Flash or Javascript or view the source of the sites above. It’s an extremely robust technique. We’ll be using it as a standard for our quality mark from now on.

FiTC Amsterdam 2008

Wimer Hazenberg — Tue, 26 Feb 2008 20:38:28 +0000

Just came back from Flash In The Can 2008 in Amsterdam, a conference about all things Flash. This was the first FiTC held in Europe, and as all my Flash heroes from around the world were there, and as it’s literally a 10 minutes bike drive from my home to the conference, I had to go. The lectures were generally very inspiring and my hands itch to start coding the whole night. Let’s sum up my thoughts about the presentations I attended.

Monday:

Adobe Keynote: Newsflash, Adobe released Air just 3 hours before. Some stuff about Flash9. Can’t blame them, but it was a bit of a promo-talk really though.

Aral Balkan – Beyond The Buttons: I chose to attend this presentation as it shouldn’t only be about Flash, but more about the fun of creating things. Aral pointed out that Flash is merely a tool to realize your ideas. Flash shouldn’t limit your ideas. Turned out to be a fun and inspiring presentation, and Aral seems a very cheerful guy. I like how he thought out of the box.

R Blank – Under the Hood, the Nuts and Bolts of Flash Video: A bit of a dry presentation about Flash Video and how to load this into Flash projects. Codecs, file formats, streaming and the Flash Video component. He gave a clear overview of the things you have to have in mind when embedding video. So I did learn a few things, but it wasn’t that much fun.

Colin Moock – Actionscript 4: Quite hardcore and in-depth info about new coding shortcuts and new features of AS4. Not that shocking, but a few changes were nice to hear. At least, function overloading will be available in AS4. Colin seemed to me like a very serious guy, but throughout his presentation caught the eye of some of his friends and then smiled and said hello to them. I saw him smiling during the breaks as well, so I’m glad he generally doesn’t frown as much as during the talk.

Seb Lee-Delisle – Kaboom! Flash Pyrotechnics: Cheerful English guy talking about particle effects. Had much fun along the way. Showed some nice and simple tricks that inspired me to do it myself and build upon that. Will do

Chris Allen – Building Red5 Applications: Chose this to learn something about remote multi-user interaction, as I though this might come in handy some time. Maybe it was the subject itself, but I did think it was a bit boring. Also, Eclipse/Red5 crashed a few times, which was a bit annoying to constantly watch.

Joshua Davis – New Works: To be honest, I didn’t think that much about Joshua (slick guy with his overly slick graphics). But I wanted to see for myself, as I’ve never seen the guy in person and didn’t really know his works. Turned out to be a very nice and inspiring presentation. And I actually liked his work and his process of creating it. He uses generative art, or programs to randomize and calculate the art automatically for him. Inspiring and something I wanted to do for a long time as well. Have some more ideas of how I should be doing that now.

Tuesday:

Koen De Weggheleire: Play with Pixels, Bitmap Manipulation with Flash: This nice dude started the day with Matrix Math and convolution filters. Great to have these concepts refreshed, as I wasn’t really aware Flash could do all this. Got a few ideas from this presentation as well.

Jared Tarbell – The Circle: I was actually planning to see Branden Hall with his presentation about coding smarter, as to learn some new tricks, but at the last moment decided to go to Jared’s. And I was glad to. Jared is known for his generative art, like Joshua. So, I was expecting some coding examples on how to generate his art. That wasn’t what he did at all. Instead, he showed some examples of circles all around us and finally showcased some of his works. Other than Erik Natzke’s and Joshua Davis’ complex art, his work almost has Zen-like qualities, while not necessarily based on less complex programs. Beautiful ways of mixing math, design and creativity. And very inspired by it.

AndrÃ© Michelle – Making Real Music Within Flash: This crazy and laid back German dude was struggling to get his presentation running. But he showcased something that I thought was nearly impossible in Flash: Realtime audio generation, filtering, vocoding and synthesizing. I mean, a 303, 909 plus a load of effects in Flash? Insane. And it seemed the guy could code these things in a few days. Very inspiring to see how AndrÃ© pushes the boundaries of Flash to create things Flash isn’t even meant for.

Joshua Hirsch – Big Spaceship: A little talk about the goings of running a design agency of 50 people. Nice to see how they take on projects and manage them. Big Spaceship is divided into a few production units, with each unit having its own project with its own developers and designers. Developers get to freestyle a lot in dead time between projects. No freelancers, as they don’t get as much feeling and responsibility with a project as their own crew does. They refuse to work on projects bigger than they can handle. Furthermore, some showcases of their work.

Ralph Hauwert – Flash 2D and 3D effects: I expected to see some hardcore code, but instead he showed how to be creative within the set boundaries of Flash. Ralph showed how, back in the days, the demo scene pushed their C64′s to compute things the C64 wasn’t meant to do. 3D rotation, raytracing, displacement maps were done 20 years ago, with computers having much less CPU than today. His point was that Flash can actually do a lot. And if it can’t do something, there are creative ways to eventually do it too. He also showcased RePhlex, a modular system of triggering Flash events that can be of any type. It will be open source, and will be released in an early state soon. Ralph made the impression of an insanely bright guy, knowing not only how to code, but to really push things beyond limits and to see the bigger picture.

Hoss Gilford – The Rest of the Iceberg: Presentation about the agency Marque (Formerly Third Eye). Didn’t think too much of it really. He made some jokes, but the presented works weren’t that good. Maybe the standard was set too high with the preceding presentations, or I had a little too much visual input overload, I don’t know.

Erik Natzke: Beyond The Knowledge: The Art of Playing: Erik creates art using generative programs. Much like Joshua and Jared. He showed some complex systems and they were fun to watch. Maybe it was because of him talking rather monotonously, but although his work was very intelligently programmed and very complex, it didn’t strike a chord with me, unlike Jared’s. But inspiring it was and I’ve got a lot to learn to match up with his skills

Mindz Music Volume 1

Wimer Hazenberg — Fri, 22 Feb 2008 15:13:02 +0000

Simuze, together with Mindz, released a new virtual CD today. One of my tracks got selected: A Few Blocks. Originally this was a track made for a Drum ‘n’ Bass competition, in which I ended up first. Back then, I received two tracks on vinyl, which I couldn’t even play as I don’t have a turntable.

Reactable

Wimer Hazenberg — Sun, 04 Nov 2007 16:15:09 +0000

Of all new instruments and interfaces created, the Reactable made me drool when it first showed up on Youtube. With this instrument, you can use actual, tangible building blocks to produce music. Blocks influence eachother according to their relative positions. Put me in a room with that thing and I won’t open the door for a month. Probably will forget to eat as well. Throw in a Tenori-On and I’ll leave public society for 10 years, delivering the most avant-garde music album afterwards.

Too bad the Reactable isn’t commercially produced. There are only a few, including one in the Icelandic vaults of BjÃ¶rk. Previously, the Reactable was showcased somewhere in Rotterdam I believe, but I only noticed afterwards. I was thrilled to notice that it was showcased yesterday at Nemo, during the “Amsterdam Museumnacht”.

I finally was going to see The Instrument with my own eyes. And guess what, people were actually allowed to play with this thing! So, Else and I managed to get close to the guy leading the workshop, and were chosen to gave our best shot.

5 Minutes of hardcore virtual generator movements, modulator block rotation and filter knob manipulation made the crowd go wild. Else showed some serious musical skills she herself didn’t even know she possessed. I tried to get a hold on the mechanisms behind this thing, but only mildly understood the various communications between the blocks. All in all, we rocked the place of course. Those 5 minutes completely made my day.

What I noticed was that music produced with the Reactable generally isn’t very subtle. All too easy you put lots of generator and modulator blocks on the table, which doesn’t contribute to a pleasant listening experience. Most music produced was the kind of music that comes from arty underground museum installations of first grade art students. Even the main guy himself didn’t perform any better. It would be great to experiment with the table to actually make music that would be pleasant to listen to. I know it is possible.

Share this vibe!

Wimer Hazenberg — Tue, 13 Mar 2007 13:18:10 +0000

One of my tracks (â€œLoomingâ€) got selected for another (virtual) cd of Creative Commons, called â€œShare This Vibeâ€. It’s my first track made in Ableton Live, and I remember at the time I got my inspiration from Nathan Fake and James Holden. Who both are younger than me and have redefined techno music basically on their own. Too bad I haven’t got the time lately, to make new tracks, I’ve got plenty of ideas.

Wish days had a couple more hours. I should run a petition for that.

Pseudoscope

Wimer Hazenberg — Sat, 03 Feb 2007 17:05:53 +0000

Today I’ve finished my pseudoscope, following a tutorial found online.

From wikipedia: “Whereas stereoscopic depth perception is the result of fusing the different images received by the two eyes, pseudoscopic perception is the result of switching the inputs to the eyes before they are fused, so that the right eye receives information normally received by the left eye, and the left eye receives information normally received by the right eye”

For some years now, the pseudoscope intrigued me. A device that reverses depth perception, how exactly would this work? What would it look like?

I was looking for pseudoscopes at local flea markets, eBay, etc. but of course found none. It seems it’s quite a rare device. So, I was very happy I discovered a blog entirely dedicated to a project of creating a custom pseudoscope. My pseudoscope is basically an exact copy of the results from that blog. I’ve even ordered the suggested high reflective surface mirrors from eBay.

The results are not as extreme as I perhaps hoped them to be, but it’s certainly fun to experiment with the pseudoscope. Sometimes, the effect is really bizar. In my first experiments, I’ve found that objects that are placed slightly in front of each other really do appear to be depth-reversed. Sometimes you have to wait a little, to begin to see there’s something strange going on. Very subtle The effect also works very well with convex and concave objects.

I’ve made an A3 .PDF of the dimensions of the piece of wood (where I converted the original inches to centimeters.)

Creative Commons DVD released

Wimer Hazenberg — Thu, 11 Jan 2007 23:13:54 +0000

Today, Creative Commons Nederland released a DVD containing music and video’s exclusively licensed under CC-licenses. That means you can freely download the tracks, freely distribute them, and in many cases freely remix them without violating copyrights.

The project started with asking musicians to send in music. Afterwards they let several video artists choose a track and create a video clip for it. It so happens that one of my tracks got selected, the videogame/8bit like track “Mier”. And Ckoe made a wonderful matching robot style video clip for it. Yeah! They really go great together and I would like to thank Ckoe for the love he put in animating this multifunctional music bot.

Creative Commons licenses allow for a much more flexible licensing system. There’s no legally strangling contract prohibiting other musicians to sample your music and interpret it in their own way. But your intellectual property is protected just the same. There a lot of different CC-licenses, one for a multitude of situations. For example, you can choose yourself whether others can remix them, can use them commercially, etc. For more info: www.creativecommons.org or the Dutch version.

Also covered on www.nu.nl.

Deep Blue Stress widget

Wimer Hazenberg — Fri, 15 Dec 2006 15:59:05 +0000

Need some live action on your Mac? Want to see how a struggling deep sea creature tries to survive in a tiny aquarium on your Dashboard? Of course you do. Download my entirely new and shiny widget:

Download Deep Blue Stress v1.1