Along side this, the release also includes several other additions, improvements, tweaks and bug fixes…

• video/audio search results now display meta data information
• board item controls now contain an info button, so that you can quickly see information about the item, including which user added it and who was the last user to edit it
• board item controls now contain a ‘duplicate’ button
• lightbox items now have an info tooltip that appears after one second on rollover
• vimeo videos are now played in board (instead of in the popup panel) and multiple videos can be played simultaneously
• our own in board and popup video controls have been removed in favour of the native player controls
• youtube video’s are now displayed at the correct aspect ratio in a board. i.e no more black bars (unless they’re part of the video that is…)
• mouse wheel/trackpad board zoom control
• holding the space bar down whilst in a boards edit mode, now allows you to move/zoom a board from any point
• fullscreen video support in the enlarged video panel
• the feed selector within search, now maintains the last selection across sessions
• a raft of other behind the scenes performance improvements

Fixed bugs/issues

• a boards ‘edited’ info now correctly reflects any update to a board or any of it’s items
• long board names are now handled more gracefully, including the addition of a tooltip within the dropdown menu’s to show the full name

And finally a feature that was added a month or so ago, but deserves a mention…

• more accurate board zooming has been added, to replace the limited 100%/view all zoom. You can now zoom in iterations, or to an exact percent and also scale the board up to 200% for more accurate control over the items

• Text Tool – enables the addition of editable formatted text blocks
• Color Tool – enables the addition of editable color blocks
• Exported PDF’s now contain links to the source of each image/video
• The resize controls have been modified to resize from corner to corner (as opposed to scaling from the centre), for more accurate resizing and positioning. There’s also a new centre control for quick scaling.
• ‘Snapshots’ have been changed back to ‘Previews’ and a new icon has been added to the toolbox and board header to represent these.
• Optimisation to the movement and scaling of boards.

http://www.quasimondo.com/examples/draganddrop/dragAndDropFFF.php

http://www.html5rocks.com/en/tutorials/dnd/basics/

http://www.thebuzzmedia.com/html5-drag-and-drop-and-file-api-tutorial/

Current Limitations

After playing around with this for a while i think it’s best to give a quick rundown of the limitations that exist at this point in time. Or at least the ones i’ve come across.

Safari 5.0.5

Although the drag and drop detection is implemented in this version, there is currently no support for the FileAPI and more importantly within this, the FileReader class. This has several methods, one of which is readAsBinaryString(), which is used to convert a File Object from binary into a UTF-16 encoded string, which can then easily be passed to a swf to convert into a ByteArray and be displayed as an image.

There is a workaround for this, that involves sending the image straight to the server and then reloading it, which can be seen here,

http://www.smilingsouls.net/Blog/20110413023355.html

This is hopefully supposed to be implemented in Safari 6.

FireFox 4.0.1 and 5.0

So although it was possible to get it working in 3.6, a few things have unfortunately now changed in this release. Firstly the ‘dragleave’ event has stopped working when you mouse out of the browser window when still dragging an item. This is a registered bug on mozilla.

Secondly and more importantly, as anyone who try’s Mario’s example in 4.0.1 (and also 5) will find, you can no longer drop an item on an embedded swf. It appears that the default behaviour in Firefox 4.0.1 (unlike Chrome and Safari), that is, when no drag behaviour has been added to the div, will not allow an item to be dropped on an embedded swf to replace that swf in the browser (i’m not sure if this is only restricted to 4.0.1? Edit – although this is also the case in 3.6.18, it will allow you to drop the item on the swf, it just doesn’t load it into the browser). It now also performs in that way, even when the drag and drop behaviour has been added, so although you can detect the ‘dragenter’ and ‘dragover’ events, the ‘drop’ event does not get fired, it just reverts back to the default behaviour described above.

If anyone knows of a way of preventing this behaviour, then i’d be interested to know how it’s done. Or whether it’s simply a bug in the new version?

Update – After a bit of poking around and help from the bugzilla team, i’ve managed to find the solution to this, so now have it up and running in Firefox 3.6.18, 4.0.1 and 5.0, as well as Chrome (only tested in 12.0.742.100).

The issue and explanation can be found here.

Opera and IE

HTML5 drag and drop will possibly be supported in the next versions.

Chrome

The consolation is, i’ve managed to get it working in Chrome (tested version 12.0.742.100). I did come across one problem when attempting to pass the UTF-16 encoded string back to the swf from the javascript, whereby the data was fine in the javascript, but was being received as null in the swf. This turned out to be an issue with the UTF-16 encoding (it worked fine as base64 or UTF-8) and i managed to get it working by simply calling encodeURI() on the string before it was sent and then decodeURI in the swf. This was not an issue in Firefox, it only occurred in Chrome.

Conclusion

Having spent some time looking at the WC3 specs to better understand this and attempt to create a solution for AS3, it appears that (although this isn’t even correctly or completely implemented across most browsers and not even supported at all in others), the current version is already depreciated? So who knows when this will actually be properly supported by all. Just be aware that whatever you try to build now, there’s a very high chance that it will no longer function correctly in the next release of the browser. As was seen from the switch to Firefox 4.0.1 fr0m 3.6.

I’ve got it fully working in Chrome (demo here – this also works in Firefox 3.6.18), but it only works on a server, not when run locally. I also attempted a Firefox 4.0.1 hack/workaround (demo here) that has an absolute div over the top of the div that the swf is embedded in, to detect the drag and drop events. This actually works, but throws up a load of other issues. As i said, it’s a hack. Hopefully the issue i outlined above in the ‘FireFox’ section will be resolved and then the chrome example should fully work in FireFox as well. NOTE – I’ve just tested Firefox 5  and all the same issues  unfortunately still exist.

Now up and running in Chrome (12.0.742.100 – only runs on server or localhost, not when run locally) and in Firefox 3.6.18, 4.0.1 and 5.0. The demo can be seen here.

The example and source code can be downloaded here.

However, after getting it up and running within the app, i soon realised that there was a slight problem. It didn’t currently support PNG (or any, for that matter) transparency. After a bit of research i found that this was due to the fact that ‘soft mask’ support had not yet been completed, so decided to finish off the implementation myself, as it was something we couldn’t do without.

‘Soft masks’ are essentially the same as a layer mask in Photoshop. So the transparency of the bitmapData is extracted and used to create an 8-bit grayscale image that will act as a mask for the original image, which itself is then supplied as a 24 bit RGB image. The image that represents the ‘soft mask’ is simply assigned by id to the actual image’s /SMask property, when both images are written to the PDF output ByteArray.

I’ve extended the PDF class and added 2 new methods, addDisplayObject() and addBitmapData().

For the addDisplayObject method, when supplying a DisplayObject, if the ‘imageFormat’ parameter is set to ‘PNG’ (which is the default), then it’s assumed that the resulting image will require transparency support, so a mask is also created using the alpha of the resulting bitmapData.

For the addBitmapData method, any BitmapData supplied that supports transparency (i.e it’s ‘transparent’ property is set to true), will also be outputted with a supporting mask.

I’ve also overriden and modified the addImageStream method, which simply checks the type of the supplied ByteArray and if it finds it to be a PNG of colorType 6 (which means each pixel contains an alpha sample as well as an RGB triple), then it’s decoded into a BitmapData and then processed through the addBitmapData method.

I’ve added a PNGDecoder class to deal with this, but have had a few issues with it. It works fine if you convert an existing BitmapData instance to a PNG ByteArray using the Adobe corelibs PNGEncoder and then convert the resulting ByteArray back to a BitmapData instance using the PNGDecoder.decode() method. But when attempting to decode a PNG that has been loaded straight in as a ByteArray using either the URLLoader (as BINARY) or the URLStream classes it fails. I’ve noticed that the resultant ByteArray from both these loader classes is actually longer than the one produced by the corelibs Encoder? This can be seen by simply commenting out line 128 of Main.as.

Unfortunately this is not something we need at the moment and i don’t have the time to work out what the issue is. So if anyone has any suggestions, i’d be happy to implement them in order to fix this.

I’m also not sure whether this is the most efficient way to deal with this, as you could simply use Loader.loadBytes() to convert the ByteArray to a Bitmap instance and then use that instances bitmapData to add the image to the PDF. However, the reason why i haven’t done this is due to the fact that it then becomes asynchronous. Although this may be a better solution for dealing with larger images.

In order for all of this to work, you MUST use the latest version of the AlivePDF source from the SVN, not the version found on the Downloads page. I’ve also supplied a modified version of the Adobe corelibs PNGEncoder, but this is simply for use in the example (Main.as), it is not used anywhere within the PDF implementation.

Thibault is also aware of this and will hopefully be adding it to the AlivePDF core soon.

The example and source code can be found here.

Here’s another speech by le Jobs to get you thinking. Everyone knows you should follow your heart at all times, and everyone understands that talk is cheap and doing it is actually very very difficult. Which is the (tenuous) link to this video being here – making Mooooodle has been extremely difficult with more than several opportunities to chuck in the towel and run back to the comfort of ‘normal’ life.

But if there’s one thing we should all take from this 14 minutes it’s the title of the post – “Stay Hungry. Stay Foolish”. We’d like to think we are and we certainly hope you are too…

via we are the ads

PS – this may or may not be the last Steve post for a while. We’re by no means trying to turn this blog into a Steve love-in, but when life offers things it’s best that one listens.

“Make something someone specific needs, launch fast, let users show you what to change, change it, repeat last two.”

We can claim the first, are doing our best on the second (though we could and should be faster), and we most definitely subscribe to the third (and fourth). So, Paul, I think we’re in good shape. And we’ll be sure to let you know how many moodboards are made on a daily basis, each and every day. Don’t you worry about that :)

via Twitter

It will come as no surprise that we love Steve Jobs. Who doesn’t? He is the phoenix re-incarnate, widely hailed as a master of brand management (iPhone4 antenna troubles aside), reinvented the music industry and will probably do so again with the publishing industry. He helmed ’1984′ the Ad of the 20th Century that launched the Mac and has most recently led Apple to becoming the biggest technology company on the planet.

Check out this video of Steve launching the ‘Think Different’ campaign and talking about branding in general. We’re with you Steve – it is the crazy ones who wear sandals and shape the world.

via ycombinator / hacker news

Well, well, well we finally made it. It’s 2 days since I quit the ample bosom of full-time employment in advertising to embark on this trip. This blog will be filled with the trials and tribulations of a startup. I freely admit I know too little to really be doing this, but I enjoy a steep learning curve.

There’s lots to come over the next months and years, so stay tuned. I hope that you enjoy the ride as much as I do :)