Yoan Blanc’s weblog

Flash is still used for all the nice things an artist may want. A web developer must try to manage a progressive enhancement all the work he has to do. This implies that the semantic HTML comes first and the design arrives at the end., then add the JavaScript. Always test your page without JS, without CSS and without both of them.

What to do with a Flash movie? Couldn’t we do the same? HTML then Flash. I did that on the PhotoViewer you may find in the Flex2 SDK samples directory and it’s easy. The PhotoViewer is using a XML file to build the gallery.

<?xml version="1.0" ?>
<galleries>
 <gallery id="">
  <description></description>
  <photo>
   <description></description>
   <name></name>
   <source></source>
  </photo>
  <!-- more -->
 </gallery>
</galleries>

From my point of view, it’s like if a photo carousel module was doing a XHR call to get the picture, we have the HTML already, let’s (re)use it:

<div id="galleries">
 <div class="gallery" id="">
  <h2></h2>
  <div class="photo">
   <h3></h3>
   <img src="" alt="" />
  </div>
  <!-- more -->
 </div>
</div>

Instead of having the PhotoViewer doing another HTTP call to get the XML file above, the idea is to build a JSON object from the HTML and passing it to the Flash movie. The goal of that manipulation is to have a better referencement of our slideshow (SEO rules), an usable version for people without JavaScript (I bet you’re already using JavaScript to include the Flash movie in your page).

The next exemple will use jQuery for it’s readability (a native code is easy too but is more consequent) to extract the data out of the HTML:

var data = [];
jQuery("#galleries .gallery").each(function() {
 gal = {
  id: this.id,
  description: $("h2").get(0).value,
  photo: []
 };
 $(".photo").each(function() {
  var img = $("img", this).get(0);

  gal.photo.push({
   name: $("h3", this).get(0).value,
   source: img.getAttribute("src"),
   description: img.getAttribute("alt")
  })
 });
 data.push(gal);
 this.parentNode.removeChild(this)
});

Using json2.js (courtesy of Master of us Douglas Crockford), this data array can be given to the Flash Movie via the flashvars parameter.

var flashvars = "json="
 + encodeURIComponent(
  JSON.stringifiy(data)
 );

Now, let’s dive into the ActionScript 3 (Flex) source code to see how to use this, JSON comes with as3 corelib.

// PhotoViewer.mxml
var json:String = Application.application.parameters.json;

// samples.photoviewer.JSONPhotoService
var data:Array = JSON.decode(json);
var temp:ArrayCollection = new ArrayCollection();

for(var i:int=0; i<data.length; i++) {
 temp.addItem(new Gallery(data[i]));
}
galleries = temp;

And what is absolutely brilliant about that is the fact that the XML interface for values, arrays, etc… is the same that the object generated by the ActionScript JSON decoder. You can reuse your existing code that is reading the XML file. Email me to get the PhotoViewer that is using the JSON code, the end user license doesn’t authorize me to publish it here unfortunately.

The benefits of that approach I can see are many:

• Maintenance, always painful and annoying, the only file you have to modify here is the HTML gallery;
• SEO, no more invisible pages from the search engine robots point of view, every informations is be available for them;
• Reusability, maybe putting the most of the informations out of the Flash movie will improve the reusability of it for sure.

And the biggest one, is that you can replace the Flash movie by a JavaScript only module if you want. I don’t like those big blinky modules that offer most a the time a painful user experience.

Dear God, this year went so fast, I still can feel the coldness of past January that I already have to look at the promising next year. At the beginning of this year, I’ve said “Past, present and future” and really think I can say that again because I’m at the same place, not in the same location thought. I like to do that kind of retrospective because I believe that what I am it more and more related to what I’ve done.

One year ago, I was living with Batiste and Eve in Lausanne (Switzerland) in a very lovely flat-sharing. And because the three girls next door weren’t very friendly (this is a private joke), I was already in the mood of moving from there to somewhere else (nice or not). Then I’ve met someone very keen who show me that I was deserving that change so I got the strength to search actively. By the way, I owe him a hot chocolate (and the interests).

From this point, everything went pretty fast, Eve left and Louisa took her place and cooked many very delicious deserts (nothing compared to Eve’s strange dishes). I saw this on my blogmarks’ friends page, blogmarked by a future Yahoos and now colleague, applied, got one phone call, one little homework, a very interesting interview in Paris and left Electron Libre. One funny thing was that I’ve had to achieve the homework the weekend of the carnival of Romont and as you may know a carnival meant usually a lot of beer, white wine and very few and definitively not quite sleep. So to be able to do in on the Sunday afternoon in good conditions I didn’t drink a single drop of alcohol. The other members of the Guggenmusik (the name of the band that are playing for Carnival in Switzerland and Germany, usually out of loud, Los Clodos the most famous one in Valais) were astonished to see me like that because I used to drink way too much. And I don’t drink to the next carnival as well and don’t drink anymore even if we celebrate various things with some champaign in those weeks.

Then, I moved to Paris in a two days road trip with my grand father and started on the Eurosport project that the Yahoo! office there in April. It wasn’t easy because the whole team was working all their best to get the new version out as soon as possible and we made it. It was hard because everything was new from a professionnal point of view: the language (Perl), the system (OSX), the text editor (Vi(m) in the early days and now combined with TextMate when I’m lazy), a great and distributed team, a working agile methodology (FTW) and nobody was understanding my swiss french accent. But I worked my best to get into what they expected me to. Victor learned me some nice bits of Perl, Mark to love JavaScript even more, Mike that you cannot care enough about accessibility, Pierre what being pragmatic really means, Jon to not forget to be nice with your workmates and many other guys more slang words in both french and english.

I’m since then living alone, in my own studio in the 10th arrondissement of Paris (capitale de l’Amour isn’t it?) and it wasn’t easy because you have to be in a good mood with yourself to cook dinner, wash the dishes, iron the clothes, clean the place and so on. No one else will help you on any of these tasks or tell you to do them. It’s a real pleasure to live this way even if some day you really want to watch someone else cooking you something for the dinner while you’re promising to do the washing up afterwards. And cooking for one is sometimes a non sense and a lot of wasted energy. At the beginning I was missing to be with someone else so I wrote a lot about that and bumped (it’s not how it happened but I like this expression) into her at a Lense. It didn’t happen in the early days but this little romance was enjoyable somehow. It had the taste of the South of the France: the sun, ice-creams, backeries. We are in different realities and I still like to talk with her on that field.

Paris is full of personalities you have to meet, to chat with, to discover. I’ve had the opportunity to do that with some of them, bloggers, photographs, artists. You have also here many places to eat yummy dishes, to listen to great artists, to rest in the grass in sunny Sunday afternoon and so many streets I don’t know the name but I will remember for their shops, buildings and graffitis (or as I like to call that street art).

This year I also made a lonely and kind of crazy trip to Peja (Kosovo) for a friend of mine’s wedding. Only because I still have to understand what a wedding is or can be, because that word have some many facets. During the few days I spent in Switzerland since I’m living here, I heart to spend time with people I care about and they are over there: mother, brother, grand father, close friends. But you don’t have to abuse of the good things, right?

Now, what I want for 2008, the same in better. More cool experiences, more places to discover, more people to meet, more love to the one I want to give some. In a professional manner, I want to build websites back. If I have skills, I want my ideas to become useful as well. At this moment I don’t where all this will drive me but I hope that it’s a lovely road to there.