Flash / ActionScript

Wonderful Flash Related fun Must Be Built

Animation with Flash Professional and the CreateJS Plugin

As we enter a new 'post-Flash' era Adobe are piling in with 'HTML5' tools.

Flash Professional CS6 can be used to create Javascript animation via the createJS framework.

Adobe have released an extension for Flash Professional called the Toolkit for CreateJS that lets you build an animation in the traditional way and then export it via a simple panel to Javascript.

Here is an example.

This was created with just a simple Motion Tween timeline animation in Flash Professional.

(Quality will vary according to your browser).

replaceAll() function for Javascript (and ActionScript)

Ever needed to replace all the instances of a string in Javascript (or ActionScript)? This function takes three parameters, the string to find, the string to replace it, the string to search and an optional setting to toggle case sensitivity.

Syntax
.replaceAll(target:string, findToRemove:string, replacement:string, [caseSensitive:int=0 ])

function replaceAll(o,t,r,c){if(c==1){cs="g"}else{cs="gi"}var mp=new RegExp(t,cs);ns=o.replace(mp,r);return ns}

Example function call searching the string "Bob, bob and Andy", looking to replace all occurrences of 'Bob' with 'Fred' regardless of case.

replaceAll("Bob, bob and Andy", "Bob", "Fred");

Returns 'Fred, Fred and Andy'.

Use a value of 1 to make the search case sensitive.

replaceAll("Bob, bob and Andy", "Bob", "Fred", 1);

As this is now case sensitive it returns 'Fred, bob and Andy'.

See this in action.

Want to know more

This is achieved using Javascript's replace() function and regular expressions. The expanded code is:

function replaceAll(oldStr, removeStr, replaceStr, caseSenitivity){
	if(caseSenitivity == 1){
		cs = "g";
		}else{
		cs = "gi";	
	}
	var myPattern=new RegExp(removeStr,cs);
	newStr =oldStr.replace(myPattern,replaceStr);
	return newStr;
}

A Regular Expression is created and given a flag of 'g' or 'gi'. The g (global) flag does a global search and then 'i' a case insensitive search. The caseSenitivity parameter is optional and if not set then a case insensitive replacement takes place.

ActionScript Version

Javascript and Actionscript are ECMAScripts so we can port the above as ActionScript:

function replaceAll(oldStr, removeStr, replaceStr, caseSenitivity:Number=0){
	var cs:String;
    if(caseSenitivity == 1){
        cs = "g";
        }else{
        cs = "gi";
    }
    var myPattern=new RegExp(removeStr,cs);
    newStr =oldStr.replace(myPattern,replaceStr);
    return newStr;
}
///////////// example one /////////////////////
var newStr:String;
newStr = replaceAll("Bob, bob and Andy", "Bob", "Fred");
trace(newStr);
//returns "Fred, Fred and Andy"
///////////// example two /////////////////////
var newStr2:String;
newStr2 = replaceAll("Bob, bob and Andy", "Bob", "Fred", 1);
trace(newStr2);
//returns "Fred, bob and Andy"

The only difference here is the setting of the default case sensitivity value to 0, which is done directly in the parameters.

Use Case

I put this together so that I could get rid of pesky white spaces in a string and replace them with + to create friendlier URLs.

Flash Player Retrenches

Adobe P P P Piss Off a Penguin

With Flash it was supposed to be build once play anywhere. But having lost the Flash Player on mobile it looks like Linux users are next in line - at least in terms of a comprehensive service.

I was at the London Flash Platform User Group's event this week where Flash superheros Lee Brimelow and Mike Chambers were present to discuss the future of Flash. It was Mike's unenviable task to introduce Adobe's White Paper Roadmap for the Flash Player that was announced the previous day (22 February 2012).

Now I have been to my fair share of Adobe events over the years, doing right back to the Macromedia days, but this was something different. Gone were the whoops and continual references to awesomeness, in was a humble recognition, at least in the context of the mobile announcement, that in the words of Mike Chambers, 'Adobe f**ked up'.

So what of the Flash Player Roadmap? Adobe have been working with Google on a project called "PPAPI" or "Pepper" a new API for hosting plugins. The bottom line is that this will be included in Chrome later this year and for Linux users will become the only way to get the Flash PLayer as a Linux Flash Player will no longer be available as a direct download from Adobe.

There are caveats here, ie a debug player will still be available and the Linux version of Flash 11.2 will be supported for another 5 years, and I know there aren't masses of Linux users out there, but this seems to follow a general backing away from the 'play anywhere' philosophy that once made Flash so ... erm awesome.

Gaming and Premium Video

The Flash Player Roadmap recognises that after years of browser doldrums, in recent years the browser market has been revolutionised by the efforts of Firefox, Webkit and johnny come lately IE9. The opportunities the browser doldrums offered the Flash Player are no longer relevant as the holy trinity of HTML5, CSS3 and Javascript do some serious territorial pissing.

So Adobe are retrenching the Flash Player. It is now focused on Gaming and Premium Video.

Lee Brimelow spoke about some new features coming to the Flash Player, such as disabling the right-click context menu and thus allowing it to capture events and improves to Hardware-accelerated graphics, that are clearly useful to gamers.

There was little talk about what Adobe means by 'Premium Video' at the event although the white paper does talk about benefits Flash has for DRM and analytics.

Gaming with Flash is still certainly streaks ahead of HTML5 technologies and I would have to say that my experience with HTML5 video has so far been less that thrilling - at least on the desktop (great on mobile!).

Mobile - The Third Way

That leads us to mobile. So the Flash Player has gone from mobile. Not going to lose to much sleep over that as it wasn't a very satisfactory experience and of course never going to be on the iOS. The message coming from both the event and the white paper seemed to be that retreating, retrenching, refocussing, however you want to term it, allows Adobe to "actively invest in enabling developers to create and deploy Flash based content as mobile (and desktop) applications via Adobe AIR".

That is the crumb of consolation I take away from all of this. If I am to keep using Flash Professional, and also teaching ActionScript, then I have to know where and what kind of content should be published. Games and Video for the desktop (not Linux) fine but I also want to package up native mobile apps for Android and iOS. For me this is a killer feature of Flash Professional. Who wants to learn Objective-C right? So why doesn't it appear as the 'third way' along side Gaming and Premium Video. Well, as the whole 'Thoughts on Flash' saga proved the problem for Adobe is that they are hostages to Apple, and indeed Google/Android, with this killer feature. It is outside their control and could all come horribly tumbling down as I am sure they all remember it did with the launch of Flash Professional CS5. My fingers however remained tightly crossed.

Adobe Edge ' Post Flash' Animations

Adobe Edge, available in beta, is a 'post Flash' animation tool. It generates animations constructed with web standards HTML5, CSS3 and Javascript (mainly piggy backing on jQuery).

The interface is very familiar to Adobe After Effects in terms of the timeline and property keyframes. In terms of functionality it has the lightweight options for adding text and basic shapes - though artwork can be imported as GIF, PNG, JPEG and SVG. If you have already dabbled with Adobe Muse and even Flash Catalyst you will have experienced these lightweight applications, almost 'app' like, compared to monsters like Photoshop and After Effects.

Very easy to use. This demo was knocked up in quarter of an hours playing. Some nice touches like the inclusion of a good range of 'ease' options but some simple features like animating opacity seemed to be missing.

Definitely potential for a tool that plugs the 'post-flash' gap and Adobe seem to have a number of strands running here as there is also the 'Wallerby' exporter that takes Flash Professional FLAs and converts them to 'HTML5'. Adobe, who were caught with their pants down when Steve Jobs gave 'HTML5' a huge boost with the iPad, are beginning to put together the tools we need in the 'post-flash' world.

Useful links

You can download the preview software here
http://labs.adobe.com/technologies/edge/

and see Wallaby here
http://labs.adobe.com/technologies/wallaby/

Adobe MAXing it Out

Loads of news coming out from Adobe this week as they hold their Annual Beanfeast MAX. There was the obligatory Photoshop pixel fairy magic.  The one that got people most excited appeared to be the 'deblur' tool.  Expect this to replace the Content Aware Fill as the killer Photoshop demo to wow your audience.

But beyond the gimmicky and the usual corporate hyperbole their is the distinct feeling that Adobe have rediscovered their mojo and our motoring forward (all be it sometimes via the chequebook) with some very interesting ideas.

Typekit

Adobe have acquired typekit. This I am sure will be give @fontface / web typography an all mighty boot up the backside. The days of the old web safe fonts looked numbered. Of course you could do this yourself through services liked the wonderful font squirrel but Adobe have the nack of making this kind of stuff easy.

I reakon we'll be seeing this integrated with Dreamweaver, Fireworks and the recently revealed Project Muse.  Designing web fonts directly into these Adobe products looks like a very slick idea and shows Adobe going all CSS3 on us.

Adobe Buys PhoneGap

Next up is another chequebook job.  Adobe have acquired PhoneGap.

Now very excited about this one.  PhoneGap, if you have missed it, is the open source tool that will take your lovely HTML5, CSS  and Javascript and package it up as an Android, Blackberry or IoS App.  Very cool.  I can see this been integrated into (again) Dreamweaver (CS5.5 already has jQuery Mobile) but also Flash.  That is Flash Professional, Flash Builder and Flash Catalyst - all development environments we associate with producing content for the Flash Player but which are been subtlely refocused as development environments that, yes do Flash Player SWFs, but also do other stuff too.

Then they announce a whole splash of tablet apps.  Coming to Android first but promised to be available on iPads by 2012 there are 6 apps known collectively as the Adobe Creative Cloud.  This are all very touchy feelie drawing / inspiration / mood board type apps.  Expect a flurry of handdrawn style content as designers get their grubby little hands (and of course fingers) on these new creative tools.  I am feeling all flowly and floaty just thinking about it.

Could we be witnessing the emerging shape of a Post-Flash Adobe.

Google Deprecate Maps API for Flash

Google have announced on their Geo Developers Blog that they are deprecated support for the Flash based Maps API.   They claim this is so they can focus more resources on the JavaScript Maps API v3.

The Flash API was introduced back in 2008 when Flash was probably at its peak.  The decline of Flash, is in my mind, linked to one device in particular.  It seems very coincidental that the iPhone was in first released in June 2007.  It was the iPhone that was in the vanguard of Flashless web content followed more ravishingly by the iPad which first appeared in April 2010.

Is this another nail in the coffin of Flash based content?  In a previous post I bemoaned the lack of Flash on the iPad with reference to live streaming.  There are certainly somethings that Flash does brilliantly well of which live streaming is an example.  But, I think we have to assume that the Google announcement is not welcome news at Adobe.  Yet again, the once dominant Flash is moving down the pecking order.  Despite Google's statement that they remain committed to the Flash platform on both Android and in Chrome, the Flash Player is just not the multi-platform, multi-content delivery system it was back in 2008.

As a Flash developer myself, who has used the Google Flash API, I would say to others fear not.  Those hard won Actionscript skills transfer very nicely to Javascript.   They are both ECMAScripts, and if there is one permanent in this business it is change.

Using Twips to Position Flash Objects to a Decimal Place

I was a bit of a twit until I discovered twips.

When positioning display objects in Actionscript we use the x and y properties.

These related to pixels. But what if you need half a pixel or 0.12345 of a pixel.

Flash does allow you to position object using 'twips'. A twip is 1/20 of a pixel or 0.05. This allows you to position display objects in multiples of 0.05.

In my project I wanted to increment the x value by 0.11799410029498525. This caused a problem as the object didn't move as far as it should as it kept getting rounded down.

I created a varable called 'stepLength' holding my decimal. A second variable called 'newPos ' was incremented with 'stepLength'. This was then used to set the position of my displayobject.

newPos += stepLength;
myDisplayObject.x = newPos ;

As such the x value is only rounded to a twip when set and not when incremented so the object moved as desired.

Glastonbury Flashtonbury

Enjoying the Glastonbury coverage from the BBC on this wet weekend. The best festival in the world and the best music. But I'm not able to enjoy it on my iPad.

BBC Glastonbury Coverage via iPad

The cool kids may be knocking Flash but you can't beat it for live event streaming like Glasto. U2 may be an old band, over the hill and not down with the hipsters but they knocked the socks of Glastonbury. Flash may be an old hand, over the hill and not down with the hipsters but you can't watch Glastonbury online without it.

Flash is dead? Hmmm, well like some old hippie it doesn't seem to be going away ... and has plenty of good tunes left to play.

Flashvars in AS3

Flashvars allow you to get data into to your SWF file from the calling HTML.  Easy to use just add a flashvars parameter to your HTML.  I use 'swfobject' as follows:

<script type="text/javascript">
var flashvars = {myvar:"1234",anothervar:"some value"};
var params = {};
var attributes = {id:"main",name:"main"};
swfobject.embedSWF("flash-build/main.swf", "main", "650", "450","9.0.0", "scripts/expressInstall.swf", flashvars, params, attributes);
</script>

Then in your actionscript use:

root.loaderInfo.parameters.varname;

to reference the variable.

ActionScript to Javascript Communication

In my last post I showed how to communicate from Javascript to ActionScript.  To do so I used ExternalInterface in my ActionScript.  ExternalInterface allows traffic to flows both ways.

We'll start in ActionScript this time.  Ensure you have imported the ExternalInterface class.

import flash.external.ExternalInterface;

Then create a call to Javascript using the 'call' method of the ExternalInterface class.

ExternalInterface.call("sayHello");

You'll in all likelihood be placing that inside an event like a button click.

In your HTML document now add a Javascript function using the same name in the ActionScript call ie:

function sayHello(){
	// do something
}

See a working demo here