Wednesday, 27 April 2011

Providing transparency and controls for Adobe Flash Player’s local storage

Many web users today are aware of browser cookies, and every major browser allows users to view and delete the browser cookies stored on their computer. However, some users may not be aware that many websites use different types of local storage as well, including Adobe Flash Player Local Shared Objects (LSOs), referred to by some people as “Flash cookies.”

In the past, in order to view Flash LSOs and delete them from your computer, you had to visit an online settings application on Adobe’s website. To make local storage data deletion easier, we worked with Adobe and others in the web community to design the NPAPI ClearSiteData API. This API, which Adobe has implemented in Flash Player 10.3, has made it possible to delete Flash LSOs directly from the browser itself.

As of this week’s Chrome Dev channel release, you can delete local plug-in storage data (such as Flash LSOs) from within Chrome by clicking Wrench > Tools > Clear browsing data and selecting “Delete cookies and other site and plug-in data.”
Above: The chrome://settings/clearBrowserData dialog.

“Plug-in data” here refers to client-side data stored by plug-ins that obey the NPAPI ClearSiteData API, such as Flash Player 10.3. You can also configure Chrome’s content settings to clear plug-in data automatically whenever you close the browser.
Above: The chrome://settings/content dialog.
To our knowledge, Adobe Flash Player is currently the only NPAPI plug-in which has implemented support for the NPAPI ClearSiteData API, but we hope other plug-ins will follow suit. We believe providing control over plug-in data directly in the browser creates a better experience for both users and website developers.

Posted by Bernhard Bauer, Software Engineer
Source: Providing transparency and controls for Adobe Flash Player’s local storage

Thursday, 21 April 2011

HTML5/JavaScript platform game optimised for iPad

by Seb Lee-Delisle
HTML5 canvas! Hailed as a competitor to Flash, so much so that Apple is using it as an excuse not to allow the plug-in on iOS. But what everyone overlooks is that canvas is horribly slow and pretty much unusable on these devices. Is it even possible to create a Flash-like in-browser gaming experience on iPads and iPhones?
To answer that question I ran a JavaScript hack day for the finest programming minds at Plug-in Media where we had a single day to make a retro platform game : Infector!

Play it for yourself here.
So of course, with only a day to complete, it’s fairly unfinished but it works as a proof of concept and the performance is good, even on the iPad 1 (with the pre iOS update slower JavaScript engine).
It also works on Safari, Firefox and Chrome. Naturally with such a limited time scale we weren’t too worried about writing perfect code or cross browser issues. It was more to see what’s possible. And in theory, we should be able to get this working on older IE browsers (famous last words, I know :) )
Coders hard at work...
So what’s the answer to getting the performance on iOS? Forget HTML5 canvas, all the moving objects in this game are HTML div elements, we’re just moving them around by controlling CSS properties with JavaScript.
And of course, fantastic home made cookies. :-D
Yes please!
But there’s one more trick that’s fairly well known amongst the JS community. With CSS3 came 3D transformations – you can now move your HTML stuff around in 3 dimensions, in browsers that support it of course. As soon as you set any of the 3D properties of an element in a webkit browser, it’s rendered using the GPU, and this makes a massive difference on mobile Safari.
Our game framerate doubled just by setting the “-webkit-transform:translateZ(0px)” property of our HTML elements.

The animated objects are HTML divs with a sprite sheet (like the picture above) for the background. We change which frame we’re on by simply offsetting the background position (again, adjusting CSS properties).
The background is a canvas, but we only render the non-moving platforms once at the start. HTML5 canvas is only slow when you draw stuff into it, when you’re not updating it, it’s no more CPU intensive than an ordinary image.
Creating the bugs
It was a great day working with a fun and very talented team, and I believe we’ve proved that we could provide a pretty good experience on iPads in the browser.
If you want to learn more about creative programming with JavaScript and HTML5, you could do worse than attend one of my courses! I’ll also be writing a tutorial for an upcoming .net magazine all about using these 3D CSS transformations.
Source: HTML5/JavaScript platform game optimised for iPad

Saturday, 16 April 2011

Multi-touch game controller in JavaScript/HTML5 for iPad

By Seb Lee-Delisle
Now that browser-based games running on touch devices are becoming a reality, it’s time to figure out how to implement easy to use and tactile game controls in these new keyboard-less environments.

I’ve long been a fan of how the twin-stick touch controls work in Geometry Wars Touch, so I wasn’t surprised to find that Brighton game UX expert Graham McAllistair also considered this “dynamic display on touch” interface to be the best option for analogue controls.

So last week at my creativeJS training course in Brighton (only four tickets left for the San Francisco event :) ) we started experimenting with multi-touch points in JavaScript with the aim of making a game controller that works on iPhone and iPad.

The natural first step : figure out how to get the touch data in JS. It’s actually pretty easy – there are three events that are broadcast by any DOM element that can be touched, touchstart, touchmove and touchend. But before you do that, you probably want to check that you’re running in a touch-able environment. And you can do that by checking that createTouch is a property of the document:
var touchable = 'createTouch' in document;

If this is true, you can add event listeners to your canvas element like this :

if(touchable) {
canvas.addEventListener( 'touchstart', onTouchStart, false );
canvas.addEventListener( 'touchmove', onTouchMove, false );
canvas.addEventListener( 'touchend', onTouchEnd, false );

And then you define each of the functions specified :

function onTouchStart(event) {
//do stuff

function onTouchMove(event) {
// Prevent the browser from doing its default thing (scroll, zoom)

function onTouchEnd(event) {
//do stuff

In each touch listener, event is the object that provides all the touch data, and it contains three arrays:
event.touches : all of the current touches
event.targetTouches : all the touches that originated from the DOM element
event.changedTouches : only the touches that triggered the event.
For touchstart and touchend, changedTouches usually only contains one touch event (unless you just happened to touch two fingers at exactly the same time).
Each array contains touch data objects with the following properties :
identifier: An unique number that allows you to track touch events as they move
target: the DOM element that broadcast that event
clientX, clientY: touch position relative to the viewport
screenX, screenY: touch position relative to the screen
pageX, pageY: touch position relative to the full page
Call event.preventDefault(); on a touchmove event to disable the automatic scrolling you normally get on touch devices.
I found this full explanation on SitePen really helpful.
So a quick test for iPad revealed that you could have 11 concurrent touch points (cue infantile jokes about what to use after you’ve run out of fingers…)
Try it here on a touch device or if you don’t have one handy you can watch this video:

So how to turn this into a game controller? Easy! If we pick up a touch down on the left side of the screen, we’ll use that as the centre point of our analogue control, and keep track of that touch ID. I use my 2D vector class to work out the vector between the current touch position and the original touch down position. We can then use that difference vector to dictate the velocity of the ship.
While we have a touch on the left we can ignore other touches on that side of the screen. If we get a touch on the right side, we assume that’s a fire button. It’s a pretty simple system.
Try it here on a touch device.
I’ve started to optimise this for iOS by converting the ship into a single canvas that I’m moving around, but didn’t finish yet. Currently the bullets and the touch circles are being drawn into canvas every frame, so it’s not quite as performant on the iPad1 (pre iOS update) as it could be.
The source is on git hub – I expect I’ll be improving it over the coming months, but please feel free to fork it if you have any suggestions!

Sunday, 3 April 2011

Flash Player versions 10-11

by Mark Doherty

As you have undoubtedly noticed by now, we’ve been updating the Flash Player and AIR runtimes with increased frequency.  In fact, we’re moving to a new (roughly) quarterly update schedule for the runtimes that we hope will deliver huge advances across the web in a very short time.

Why?  I guess there are a number of reasons, the most interesting one is mobile investments bringing new fruit and HTML beginning to take more of the weight.  If you remember, during the 18months when Flash Player 10.1 was launching we received a lot of feedback that we were over-committed to mobile in general.  I think unfortunately the word didn’t get out that these investments were much broader than just mobile devices.   It was a ground up effort to enable the Flash Platform to support sweeping changes in the way media is composed, rendered, protected and analyzed.

Looking at the world through Tomi Ahonen’s eyes, you can see that a growing majority of web access is now on mobile devices.  That is, if you include the numbers of people using mobile only and mobile or desktop devices.  Of course these devices require new tools, new ideas and new content that runs effectively – it’s time for a shift in thinking.

Historically this is actually a pattern of advances on the web if you look at Flash releases, maybe some of you recognized it?

  • Flash 1 – Vector Graphics Support
  • Flash 3 – MovieClips, loadMovie
  • Flash 6 – AS1, XML, Video, Unicode, Drawing API, events, AMF
  • Flash 9 – AS3, H.264, JIT Compiler, E4X, Binary Sockets
  • Flash 11 – Full 3D etc

Note: I’m not attempting to be precise here, it’s just a pattern that describes the general points where the Platform has evolved over time.  There are obviously matching HTML/Jscript/CSS advances to match, all of which make the wheels of the web go round.

So in our efforts to drive web innovation, and take the Flash Platform to new places, let’s look at the current and upcoming Flash Player releases.

Flash Player 10.2

New Features include:

  • StageVideo support, pushing decoding and screen blitting of H.264 video via the GPU.  This is actually a feature that comes from the Digital Home investments, and in fact Flash Lite on Nokia phones rendered video in much the same way.
  • Complete Hardware rendering path on IE9
  • Native Mouse Cursors, enabling richer gaming experiences

StageVideo should now be included in all situations where you are presenting video.  It’s automatically enabled on mobile and Digital Home devices, but on the desktop it’s not always possible to use this method.  Get started with StageVideo today.

Many of you have noticed that Flash Player 10.2 has yet to launch on mobile, for which there are number of reasons.  Those are quite obvious really, it’s just much more complicated to ship on mobile phones and tablets.  In addition, we’re targeting the new Android 3.0.1 release from Google as well, a platform that brings fresh features and challenges.

That said, Flash Player 10.2 is expected to ship on Android in two days time.

Flash Player 10.3

Already fast on the heels of 10.2 is a desktop beta version of the next Flash Player to launch.  This is actually on the most exciting releases for some time because it delivers new features, many of which are driven by the community.

New Features include:

  • Media Measurement
  • Acoustic Echo Cancellation
  • Integration with browser privacy control for local storage
  • Native Control Panel
  • Auto-Update Notification for Mac OS

With these new additions, the community will be able to create incredible VOIP applications in the browser.  One of the missing items for those applications was Echo Cancellation, essentially processing of the Microphone inputs so that you won’t need a headset.  I’m certainly going to use this for my Radar application.

Another nice new feature is the native control panel, this will make Flash feel more integrated into the Desktop or device experience.  Finally we can get rid of the horrible SWF based settings manager on, something that confused even me.  Users will be able to control their own security and experience much more easily, as well as make the best of Browser security.

Media Measurement is going to be great for our Omniture customers, enabling them to analysis content playback much more easily.  Let’s face it, it’s a feature for monetization, but that’s always good.  Last year over 128Billion Megabytes were streamed through Flash Player, that’s 100% growth.  So with this feature our customers will be able to get a much broader view of what’s going on during playback, helping to improve and monetize those experiences.

You can download the beta today.

Flash Player Inclubator

As you read above, this is part of our ongoing efforts to seed the community with bleeding edge technology.  I like to think of it this way, HTML will be taking care of some of those slideshow and simpler web experiences, micro-sites, product data and maybe some basic video playback.  This isn’t something that scares me, in fact it’s completely the opposite.  Lets face it, the more HTML can take on, the more new innovations we can deliver with Flash.

I find the whole HTML5 and Flash argument quite amusing, anyone that’s old enough to remember how the web evolved will recognise that Flash was successful because it solved problems for our customers.  So it makes sense (and it’s exciting) that it will evolve to solve new problems as HTML catches up, and we’re helping those technologies catch up.

New Features:

  • All of Flash Player 10.3
  • 3D Rendering Pipeline “Molehill”
  • more to come :-)

Interestingly, the StageVideo api enables play back video on a hardware surface using an OpenGL (ES2.0)/Direct3D shader API to convert from YUV to RGB.  It shouldn’t take you long to realise that Molehill uses the same apis for 3D rendering, thus enabled by Stagevideo.

Flash is so widely distributed now that we don’t have the option to simply cut off those users without GPUs or the correct drivers.  So for these users we have a seamless fallback to a new component called SwiftShader, a Transgaming product of which Adobe is a licensee.

You can see some of the incredible work underway below:

Developer and/or Browser War

(Personal Opinion)

Finally, in case some of you didn’t notice, we’re in the middle of a browser war.  Each of the major players (including Adobe) are working incredibly hard to drive innovation on the web, adding new features, increasing performance and fighting for territory.

This has unfortunately led to some adverse press attention being poured on Flash, one of the most talked about technologies of the past year.  What’s important here is that we all keep a level head, listen to customers concerns, but always consider someones motivation for targeting Flash to gain press attention.

Example One

Example Two

Net is, Flash is a product made successful by those who use it – that’s probably you.  It’s not just a pile of 1′s and 0′s, it’s a complete ecosystem that is largely, and most successfully, presented within HTML  It’s success has been driven by the Flash community creating incredible millions of pieces of content over the past decade, enabling online business and entertainment to thrive.

I have no doubt that HTML5 is going to be great for all of us, that includes Flash developers who will be free to create even more advanced forms of content on even more screens.  That’s why I believe that Flash is the innovation engine for the web and digital experiences, the use cases may well change – but the reason for Flash existing won’t.

Source: FlashMobileBlog

Google April Fools' Day 2011

by Alex Chitu

This year, Google's hoaxes are less inspired and some of them aren't original either, but they're still funny. Here are some of them:

1. Google China invented teleportation. 'Through the search is to let Google take you through time and space, most want to reach your arrival time, place, with an immersive way to perceive everything you want to perceive.' (machine translation)

2. Gmail Motion is a new way to control Gmail using body language. 'To use Gmail Motion, you'll need a computer with a built-in webcam. Once you enable Gmail Motion from the Settings page, Gmail will enable your webcam when you sign in and automatically recognize any one of the detected movements via a spatial tracking algorithm. We designed the movements to be easy and intuitive to perform and consulted with top experts in kinestetics and body movement in devising them.'

There's also Google Docs Motion, 'a new way to collaborate -- using your body'.

Opera had a similar hoax two years ago: Opera Face Gestures.

3. Google hires autocompleters. 'Are you passionate about helping people? Are you intuitive? Do you often feel like you know what your friends and family are thinking and can finish their thoughts before they can? Are you an incredibly fast Google searcher? Like, so fast that you can do 20 searches before your mom does 1?' If you have have 'good typing skills (at least 32,000 WPM)', you're willing to 'relocate to obscure places like Nauru and Tuvalu to develop knowledge of local news and trends' and you have a 'certificate in psychic reading', then you can get a job at Google.

4. Search for Helvetica or Comic Sans using Google, and you'll have a little surprise. Google plans to use Comic Sans as the default font across all Google products, but you can use the Comic Sans for Everyone extension to browse the entire World Wide Web using Comic Sans. It's fun, fun, fun.

5. YouTube presents the top viral videos in 1911. 'Today, we celebrate 100 years of YouTube, and we thought we would reflect on our inaugural year with a re-print of our first blog post from 1911. In honor of this milestone, today's homepage is a reproduction of how you might have viewed it 100 years ago. Check out some of the most popular videos of the time and be sure to try out our new upload mode which summons a horse-drawn carriage to pick up your video submission from your home.'

6. Google Body Browser was replaced by Google Cow.

7. Google will buy Blogger once again. 'This morning we're beyond thrilled to announce that Blogger has signed a definitive agreement to be acquired by Google, the Internet search company. This is exciting news not only for all of us on the Blogger team, but for our users, our partners, and most importantly -- the blogosphere itself.'

8. Google AdWords offers a new ad format: Blimp Ads. 'Imagine this: a baseball stadium, packed with thousands of fans. A home run flies through the air, and as the crowd looks up, they see your ad, bigger than ever, hand-painted on the side of a majestic blimp. Blimp Ads can make this a reality.'

For those who are afraid to try new things, Google brings back old school ads: 'Punch the monkey!', 'Congratulations, you've won $100,000!', 'Click here for smileys', pop-ups and more.

9. Another company has gone Google: Contoso, 'a fictional company used by Microsoft as their example company and domain'. The explanation is pretty clear: 'As a subsidiary of a traditional software company, we went against the grain and switched all 1,200 Contoso employees across nine continents to the cloud. After previously considering Google Apps, we were finally convinced to make the move when Google Docs began supporting the Corsiva font. I still can't find track changes in Docs, but now we can use Corsiva from anywhere, on any device. We decided against Microsoft® Office 365 beta, because we'd heard for years that beta software was too risky.'

10. Google Maps and Google Earth added 10 real-world sightings to the maps. 'It all started with a recent visit to my friend Nessie in Boston. As I crossed the bridge into town, the car in front of me stopped short so I slammed on the brakes. The cars next to me were also stopped, so I got out to see what was causing the back up. There was a huge, red lobster sitting on the bridge.'

Your mission is to find the other 9 sightings.

11. Google Voice Search now supports Pig Latin. 'What is Pig Latin you may ask? Wikipedia describes it as a language game where, for each English word, the first consonant (or consonant cluster) is moved to the end of the word and an “ay” is affixed (for example, 'pig' yields 'ig-pay' and 'search' yields 'earch-say').' The nice thing is that this actually works: open Voice Search for Android or Google Search for iPhone, change the language to Pig Latin and try your luck. This English to Pig Latin translator might help.

"To configure Pig Latin Voice Search in your Android phone just go to Settings, select 'Voice input & output settings', and then 'Voice recognizer settings'. In the list of languages you'll see Pig Latin. Just select it and you are ready to roll in the mud! It also works on iPhone with the Google Search app. In the app, tap the Settings icon, then 'Voice Search' and select Pig Latin."

Here's a video that announces the new feature. Watch it and Mike LeBeau's fan club will thank you.

12. Chrome's team came up with Chromercise, a finger fitness program that helps you increase your hands' strength and dexterity. 'Some existing finger exercise programs focus on upgrading your digits' cardiovascular strength and musculature; others focus on dexterity. Chromercise's unique blend of aerobic motion and rhythmic accompaniment covers all of the above while simultaneously tightening and toning your fingers' actual appearance,' informs Chrome's blog.

Check out the video because it's really funny (probably the funniest Google hoax this year):

13. If Chrome is not fast enough for you, use ChromeLite, an extension that harnesses the power of text-only browsers. 'In our never-ending quest for speed, our team members recently gathered to race the latest and greatest browser versions against each other. Much to our surprise, the winning browser was neither the latest version of Chrome nor another modern browser, but was instead an early text-based browser called Lynx,' explains Google.

Coincidentally, Lynx was the Google Browser from my 2006 April Fools' joke and 2006 was the year when Google started developing Chrome.

14. Search for [kittens] using a mobile phone and the top results will show a lot more than you expect. Refresh and everything will seem random.

{ Thanks, everyone. }
Source: Google Operating System