I’ve run into this a few times, and I keep forgetting about it each time. Here’s the problem: I’m trying to scale a SimpleButton object that uses 9-slice skins, and the 9-slice just won’t work.

button = new SimpleButton();

addChild(button);

button.upState = new upSkin();
button.overState = new overSkin();
button.downState = new downSkin();

button.width = getCalculatedWidth();

What am I doing wrong?

Back in February while working on an AIR application, I found myself dealing with a lot of JSON data in ActionScript. I was using the corelib library for parsing and generating JSON objects. It was all good until I realized I could improve it even further.

While the JSON class does its job perfectly well, it has one small drawback: it’s not object-oriented.

The static methods encode and decode take the data object as input and return a converted data object as output. The objects themselves have no knowledge of the conversion from JSON to ActionScript and back; they’re just dumb objects. Every time you want to generate a JSON string out of an ActionScript object, you have to invoke the encode method; every time you want to parse a JSON string into an ActionScript object, you have to invoke the decode method. That’s procedural programming. How about if the objects themselves knew how to do this conversion?

Enter the JSONObject class.

Instances of the JSONObject class can read and write JSON strings while at the same time serving up their data as ActionScript properties.

Let’s look at an example:

var data:String = "{\"name\":\"John Doe\",\"age\":28}";

var person:JSONObject = new JSONObject(data);

trace(person.name); // John Doe
trace(person.age); // 28

person.age++;

var newData:String = String(person);

trace(newData); // {"name":"John Doe","age":29}

A few things to notice:

1. A JSONObject instance can be created by passing the JSON string to the constructor. If the JSON string is not available at the time of construction, the object can be populated later using the populate method.
2. You can access the properties of the JSON object directly as properties of the JSONObject object.
3. A JSONObject object can be converted to a JSON string by simply casting it to the String type.

In a recent article on Adobe Developer Center, Justin Everett-Church explains some of the new features in Flash Player 10 “Astro” (beta). If you have any investment in the Flash platform, you should definitely check out the videos.

Here are my favourite features from this release:

• 3D effects
• Custom filters and effects (Pixel Bender)
• GPU mode
• Enhanced sound APIs
• unloadAndStop
• Limited full-screen keyboard access
• Large bitmap support

These are features I can put to use immediately. The new unloadAndStop API in particular is the most welcome of the lot.

Firefox 3 added a new feature called Full Page Zoom. You can now zoom the entire page (as opposed to zooming just the text), and the browser remembers the zoom level for each website. i.e. if you visit en.wikipedia.org and increase the zoom level to 150%, the next time you visit the site, it’ll be opened to a zoom level of 150%. This is really useful. Some sites do use very small font sizes (including perhaps mine), and every time you visit them you have to increase the zoom level. It’s extremely cool that Firefox 3 does this automatically for you.

That said, I’ve found this feature to be annoying at times. Not every page on a site uses the same font, and not every page is structured the same way, with the same kind of content. Some pages may have photos, some long articles full of text. While browsing a site, if you open one of its pages in a new tab, or a new window, and adjust the zoom level, it also changes the zoom level for the other page you were viewing from the same site (now in the background). If you switch back and forth between the two pages, you end up having to adjust the zoom level each time you switch. I don’t know if this is a common use case, but I found myself doing this a few times, and so I finally decided to turn off this site-specific zoom feature altogether.

Here’s how you do it:

1. Open a new browser window, type about:config in the address bar, and hit Enter.
2. Click OK on the warning page.
3. On the configuration page, type “zoom” in the filter box.
4. Find the preference called browser.zoom.siteSpecific, and turn it to false (double-click on it).

Now Firefox shouldn’t use the same zoom level for every page on a site. It won’t remember the zoom levels either — that’s the tradeoff.

An ideal solution would be if Firefox just didn’t change the zoom level of a page once the page had been opened, unless the user changed it manually. Site-specific zoom by itself is nice, but this “trying to keep up with the current zoom level” behaviour is annoying. Applications on the desktop also try to remember their window sizes, but they don’t resize other windows when you resize one. The same policy should apply for site-specific zoom, in my opinion.

Bug #419612 in the Mozilla bugbase specifically addresses this issue. The request is to make this a hidden preference, though I think it should be the default behaviour. If you agree, go vote for it.

In 1961, psychologist Stanley Milgram conducted a series of experiments to measure the influence of authority on human behaviour, specifically on people’s willingness to perform acts that conflicted with their personal conscience. The results were to shock the entire world as they revealed, yet again, the dark side of human nature. This seminal work in social psychology came to be known as the Milgram Experiment.

Later Prof. Milgram would discuss his findings in his book Obedience to Authority: An Experimental View.

Here’s a video of one of the experiments.

There’s a longer length one on Google Video, though not quite the same quality.

A few links:

• Obedience to Authority (1974)
• When Good People Do Evil
• Resisting Authority: A Personal Account of the Milgram Obedience Experiments
• The Perils of Obedience

And here’s wishing all my Indian friends a Happy Independence Day. With freedom comes responsibility. Let’s do our best, today and every day.

Bert Bos of the W3C in a recent essay on the subject makes a good case against the inclusion of variables and macros in the CSS language. I’m not sure I buy all of his points, but the overall argument for simplicity makes sense.

Incidentally we have something similar in Issuu’s layout language, although in a limited sense. They’re called anchors, and you define them thus:

<anchor name="outerMargin" x="50" />
<anchor name="controlBarCenterLine" y="60" />

Then you can align objects to these anchors. e.g.:

<image source="#Logo" left="#outerMargin"
  verticalCenter="#controlBarCenterLine" />

Unlike CSS “variables” though, IML anchors can be truly dynamic, as in the case of the predefined anchors in the viewer:

<pageNumber top="20" right="#droppContentRight" />

The above aligns the right edge of the page number control to the right edge of the document object, represented by the droppContentRight anchor. You can see this in action in the Basic Grey theme: as you resize the browser window, the document object gets resized too and the page number control shifts position accordingly.

The idea behind anchors of course is to decouple the positioning attributes from their intended values by adding a layer of abstraction. The designer can set up grid lines which can then be used for aligning objects. i.e. instead of setting all objects in the first column to a margin of 50, you can set those objects to a variable called outerMargin, which can then be adjusted independently without touching the objects. The anchors defined in an IML document should give you a sense of the overall layout of its content.

To that extent, we have here what is the equivalent of CSS variables. I wouldn’t venture to add variables of other types to the language though, for the very same reason cited by Bert, i.e. in the interest of simplicity.

There seems no dearth of inspiration in the micro-ISV world. Meet Giacomo “Peldi” Guilizzoni, former Adobe ConnectNow engineering lead and now owner and sole employee of Balsamiq Studios LLC. You might have known him for his work on the FLV player or his contributions to Breeze Live, but today he’s drawing attention for something entirely different: his income. I am not talking about his salary, of course, which, as he puts it, is “steady at $0”. Instead, I’m referring to his company’s earnings from the sales of its very first product. Three weeks into the launch of Balsamiq Mockups, a mockup creation tool for UI designers, the company was already making profits. Within 6 weeks it had grossed over $10,000 in revenue.

Everything in Peldi’s one-man company is handled entirely by him out of his home in Italy. The only thing he’s had to outsource is the legal stuff, which incidentally has accounted for 65% of his costs. If this isn’t inspiration, what is?

You can learn more about the Balsamiq story on the company’s blog.

As for the product, I’ve heard some very favourable reviews about it, and now I can hardly wait to take it for a spin.

Last night Issuu released its new platform site for developers, designers, and anyone interested in using the technology.

What can you build on the Issuu platform?

As of now, you can customise the online publication viewer to include your company logo, change the background, modify the buttons, and do pretty much anything to the UI — in other words, infuse it with your own branding. The viewer has already been available, since its very first release, in four different themes: Grey, Grass, White, and Wood. Now you can create your own themes, using a combination of XML and either Adobe Flash or any standard image editor like Adobe Photoshop or GIMP.

Moving forward, Issuu will be releasing new UI components and data APIs through the new Issuu Platform & Services site.

Issuu Markup Language

From the manual:

The user interface of Issuu’s online publication viewer is configured using a simple, dynamic, XML-based UI markup language called Issuu Markup Language (IML). Skin libraries in either SWF 9 or PNG, JPG, or GIF format provide the graphics for interface objects, whereas the objects themselves are laid out using IML markup.

What does IML markup look like?

Here’s an example:

<button action="openUrl:http://platform.issuu.com/"
  upState="#PlatformButton_up" overState="#PlatformButton_over"
  downState="#PlatformButton_down"
  toolTip="Issuu Platform &amp; Services"
  left="35" top="18" />

It’s not very different from HTML and other XML-based UI languages like Mozilla’s XUL and Adobe’s MXML (surprise!). If you’re familiar with any of these technologies, you should have no trouble picking up IML.

Is it a general-purpose language? Almost. Currently it’s tied to the Issuu platform, specifically the viewer.

You can learn more from the language reference and the many tutorials available on the site.

Also check out the sample themes (source included).

The Mashable Theme Example

Yesterday, I put together a quick ’n dirty Issuu theme for the popular social networking news site called Mashable. Essentially it’s a customisation of the Crayon theme with some Mashable branding thrown in. The header, in particular, looks exactly like the one you see on mashable.com. It took me 15 minutes to create the theme, an example of how even a person with absolutely no design skill whatsoever can easily customise the Issuu experience for potentially millions of users online.

Mashable actually used the theme in its story announcing the release.

Learn More

You can join the group on Google to participate and interact with other users of the Issuu platform, ask questions, and share your views and experiences with the community.

Amit Agarwal over at Digital Inspiration has done a good job of explaining Issuu’s new Presentation mode. You should know that it’s possible to use this new mode even when embedding an Issuu publication into your own web page or blog, just as I had done in one of my posts. Though this feature is not fully supported yet, it works fairly well and is easy enough to use if you’re willing to do a tiny bit of HTML editing.

Here’s what you do:

1. Go to the wizard and get the HTML embed code.
2. Append a &viewMode=presentation to the embed URL.
3. Adjust the dimensions of the embedded object to suit the new single-page view.

In steps 2 and 3, you’ll have to modify both the object and the embed elements.

...backgroundColor=1b1c20&layout=grey&viewMode=presentation" />

When you paste the final code into a web page, you should be able to see a preview of the document in Presentation mode.

Here’s the Aurora concept video (part 1) by Adaptive Path and Mozilla Labs, depicting what could be the future of user experience on the internet.

Future. User experience. Internet. Where have I heard that before?

A List Apart have launched their survey for 2008. If you’re in the business of making websites, you should consider taking it.

The Guardian is carrying a piece on global warming by Andrew Simms, head of the climate change programme at nef, in which he warns that time is running out for us to take action against climate change. According to Simms, we have only about a hundred months left before we reach the tipping point of global warming, beyond which the effects will be beyond our control.

The concentration of carbon dioxide (CO2) in the atmosphere today, the most prevalent greenhouse gas, is the highest it has been for the past 650,000 years. In the space of just 250 years, as a result of the coal-fired Industrial Revolution, and changes to land use such as the growth of cities and the felling of forests, we have released, cumulatively, more than 1,800bn tonnes of CO2 into the atmosphere. Currently, approximately 1,000 tonnes of CO2 are released into the Earth’s atmosphere every second, due to human activity. Greenhouse gases trap incoming solar radiation, warming the atmosphere. When these gases accumulate beyond a certain level — often termed a “tipping point” — global warming will accelerate, potentially beyond control.

So what action can we take? You can sign up for the monthly newsletter at onehundredmonths.org to learn more. For now, spread the word.

PS: Now that it’s come up, also check out the Penn and Teller video.