Sound generation in FlashPlayer 10

Finally Flash will have built in ability to access the sound output buffer when using FlashPlayer 10 that just has been released.
Tinic Uro have posted a little information about the implementation.
So no more relying on complicated hacks, this is all the code you will need to generate a sine wave (snipped from Tinics post):

 
  var sound:Sound = new Sound();
  function sineWavGenerator(event:SamplesCallbackEvent):void {
    for ( var c:int=0; c<1234; c++ ) {
      var sample:Number = Math.sin(
               (Number(c+event.position)/Math.PI/2))*0.25;
      sound.samplesCallbackData.writeFloat(sample);
      sound.samplesCallbackData.writeFloat(sample);
    }
  }
  sound.addEventListener("samplesCallback",sineWavGenerator);
  sound.play();
 

Stupid keep it simple?

Simplicity, accessibility and content should always be the main focus when you design, at least that's what we are usually told. But are they actually only factors to consider and sometimes they can be somewhat disregarded in favour of other considerations?

Many times when discussing various aspects of graphics or software design I find that a lot of people love to deal in absolutes. They catch on to some idea that might contain a lot of truth and it becomes a mantra that should be obeyed at all times and at all costs.

 

KISS

Keeping it simple is certainly good advice, both when it comes to programming and design.
But this doesn't mean that simplicity always should be the first priority.
For example if we look at desktop applications targeted at professionals a lot of audio and graphics software is very complex. You can't just dive in to 3dsmax or Logic Audio and get immediate results. Sketchup or Reason for sure wins over the pro-end software in terms of simplicity.
But many pros or more dedicated enthusiasts do need more features than the simpler software provide and they are prepared to invest some time studying the applications to discover functionality that will speed up their work flow or improve the results.

With the web people often have little time and patience to figure out a complex interface, so many times simplicity is very important. But it's always a balancing act, and there is not ultimate truth that the simpler the better a website is. The need for simplicity depends a lot in the target audience and intended purpose. If it is a RIA where people will come back and use it many times and are likely to be willing to spend time to overcome the complexity it can be worthwhile adding features that initially may confuse the users somewhat if they are likely to understand it and find it useful after the initial learning curve.

 

Accessibility

Something I hear very often is statements like "excluding even 1% of the visitors should be avoided". Usually this is said when discussing using Javascript or Flash on a web page.
In many cases one can use progressive enhancement and then i think one should try to do so to avoid excluding anyone, but in some cases it's simply not possible.

Let's for example say that you have a e-commerce website that you are considering to implement a RIA where people can design their own product. Doing it in HTML would mean a really tedious process of typing in values in fields and on each change reload the page to see the result.
Of course it's not worth making the experience horrible for 99% just to make sure that the one 1% without the technology needed to access a reasonable implementation should have to suffer.

You simply cannot just count on how many customers you loose because they are not able to use your application, you also have to evaluate how many you will gain by having something that is really usable for the vast majority of visitors.

And lets not even mention where for example youtube would be today if they decided that they cannot rely on any technology that doesn't have 100% coverage.

 

Content is king

Sure the internet is mainly about information and entertainment, but there are examples of successful sites that have hardly no content.
No, I don't count milliondollarhomepage. Despite being successful it's too stupid to prove a point.

But some sites mostly deal with branding and the content is actually not that important.
How many people have visited 2advanced.com because of the content?
Still I would guess it's a very successful site when it comes to achieving it's goals and that it has done a lot to promote their services. Not thanks to the content but almost exclusively due to the looks.

 

While all of these mantras are very important aspects when it comes to design I think it's important to see them as factors rather than absolutes. It's not always easy to evaluate how much complexity your users will appreciate or how much a certain technology can add and compare that to the impact of that to excluding some visitors.
But it's always about trying to find a correct balance and thinking that there is one answer for every scenario is fooling yourself into thinking reality is simpler than it is.

Rumours of the death of Flash have been greatly exaggerated

Recently we have seen a lot of progress with the capabilities of Javascript to leverage the capabilities of HTML to do things that was previously only possible using Flash.
Thanks to for example mootools and jQuery you can now create sites that looks like they are made with Flash with nice tweening animations, and of course AJAX have already for a few years been an option to update the content without reloading the page.
Does this mean that the future of Flash looks bleak?
Somerandomdude seems to think so, and points to some of examples if the impeding demise of Flash. John Resig’s Processing.js and experiments with HTML 5’s video element.

 

First of all, does any of these developments offer improvements over what Flash have been capable of for years?
Maybe if a site that is heavy on information but you might want to jazz it up a bit with some nice transitions.
When it comes to presenting text HTML has some advantages, mainly due to the browser integration.
Using the browsers built in search or select and right click to google a phrase for example.
Usually those advantages are greater than the possibility to embed font outlines with Flash.
But most implementations I have seen of for example slideshows and menus does not offer any advantages what I can see. Implementing them in Javascript still performs worse, gives you less possibilities and makes it less accessible.

 

When it comes to video on the surface I cannot see any reason why a video playback native to the browser would be preferable.
Of course one could argue that since you have a limited choice of compression formats with Flash it would open up to more options there. But to deploy content you will still have to make sure you use a codec that is included with a majority of browsers. It remains to be seen if it will mean much of an improvement in practice, and personally I do think that h264 is quite satisfactory.
All the above is true for the HTML5 audio element as well.

 

Of course the technical merits is only a part of the parameters that decide the acceptance of a technology. There are a lot of developers that really dislike Flash for various reasons and they are just really happy that they now can do the same things as has been possible for a long time with Flash.
The fact that it can be more tedious to implement and performs worse is not as important as various factors like avoiding proprietary formats or using a environment they are already accustomed to.

 

But even if Flash is not necessary to do a lot of things that previously was it's exclusive domain to me it seems like it's constantly gaining acceptance with developers.
Flash is still quite far ahead of the capabilities of DHTML/AJAX and how long will it take before HTML5 is widespread enough to make it a viable option?
Flash is still developing rapidly and the new versions of the plug-in is spreading extremely fast, so by the time HTML5 capable browsers is widespread enough probably 95% will have the Flash 15 plug-in installed.

 

I think the main issue here is the different ways in which Flash and HTML is being developed.
A lot of the hate against Flash is based on the fact that swf is a proprietary format, and even if that is not entirely true any more it's certainly not based on an open standard.
And that what makes it possible for it to stay on the cutting edge, and that's why the capabilities of DHTML, XHTML, Javascript, SVG etc. always is one step behind.
Even if I prefer open standards in theory it just doesn't seem to work as well in practice.
Rather than being impressed how HTML and Javascript is catching up with the capabilities of Flash I'm continuously surprised at how slowly it's happening.

 

I have been fanatic about Flash since I first discovered it in 1999, and I really have trouble being completely neutral even I try. But IMO Flash is not going anywhere. With AS3, AVM2 and FLEX a lot of new possibilities has opened up that DHTML will not be capable of any time soon, like for example decent 3d engines, socket connections and sound synthesis.
Overall I do see a trend though that the web is getting less and less fixated with certain technologies.
On the server side we have seen Python and Ruby gaining acceptance. MS will be trying with Silverlight to present an alternative to Flash and HTML will be able to compete as well.
But it's not a war where anyone has to die...there is certainly room for more than either ASP, perl or PHP on the server and HTML, Shockwave or Flash on the client, which pretty much used to be the case.

SVN version control in Flashdevelop projects

A couple of applications that really have helped my work flow a lot is Flashdevelop and TortoiseSVN.

For those of you not familiar with them Flashdevelop is an actionscript editor that integrates with MTASC or MXMLC compilers and swfmill to include assets into the project.
TortoiseSVN is a version control system which basically is a must on large projects and very handy even on smaller projects even if you are developing alone and just keep the repository on your local machine. TortoiseSVN also comes with a program called SubWCRev which we will use to write information about the current version into a textfile, which is handy so we can load it into our swf to display the current version.

First of all you need to download and install the applications if you don't have them already.

Get Flashdevelop
Get TortoiseSVN

First step is to set up your "repository" and "working copy" directories.
I will not explain that part here since there is already many good guides on that subject, for example this pfd.
It is a little bit of an effort initially but I can assure you it's energy well spent.

 

Now in Flashdevelop select Project->New Project in the menu to create a new AS2 or AS3 project in your working copy directory.
For example say we have created a working copy folder called "E:\_dev\Example", you settings will look like this in the new project dialogue:

flashdevelop new project dialogue

 

Ok, so now we are all set up to actually integrate the SVN with our Flashdevelop project.
First of all create a new text file in your working directory and name it "build.bat".
In it enter the following:

@ECHO OFF

set TORTOISESVN_PATH=C:\Program Files\TortoiseSVN\bin
set CURRENT_PATH=%CD%

"%TORTOISESVN_PATH%\TortoiseProc.exe" /command:commit /path:"%CURRENT_PATH%\*"/logmsgfile:"%CURRENT_PATH%\logmsg.txt" /notempfile /closeonend:3

"%TORTOISESVN_PATH%\SubWCRev.exe" "%CURRENT_PATH%" "%CURRENT_PATH%\version.a" "%CURRENT_PATH%\version.txt"

pause

Make sure that the "TORTOISESVN_PATH" is the same as the one you have installed TortoiseSVN to and save.
Basically what this batch file is doing is first to call TortoiseSVN telling it to commit changes and then calling SubWCRev to take the template for our version text (version.a) and use that to write a file that we will load into our app for displaying the version information (version.txt).

So we need to create a file called version.a containing the following text:

major=0;
minor=1;
build=$WCREV$ ;
date="$WCDATE$" ;

The stuff between the $'s is what will be substituted by SubWCRev.
Here is a complete list of substitution keywords if you like to include more information, but usually the build number is all that I would use.
The major and minor version numbers one have to update by hand, at least to my knowledge.

 

Now in Flashdevelop go Project->Properties and open the "Build" tab.
In the "Post-Build Command Line" type: $(ProjectDir)\build.bat:
flashdevelop build settings
Now you are set up and each time you build in Flashdevelop you will get presented with a screen where you can enter a log message for the change if you like to commit it, or you can choose cancel and the change will not be committed.
If you like to have a default log message for the commit add a logmsg.txt in the working copy directory with the text you like to appear.

 

If you like to display the version information in your swf you have to load the version.txt and display the information. Here is an AS3 example:

package com.blixtsystems.utils {
	import flash.events.Event;
	import flash.events.IEventDispatcher;
	import flash.net.URLLoader;
	import flash.net.URLRequest;
	import flash.text.TextField;
	import flash.text.TextFieldAutoSize;
	import flash.text.TextFormat;
	/**
	* Class to display version information
	* @author leo@blixtsystems.com
	*/
	public class ShowVersion {
		private var _owner:Object;
		public function ShowVersion(owner:Object) {
			this._owner = owner;
			loadTxt();
		}
		private function loadTxt():void {
			var loader:URLLoader = new URLLoader();
			configureListeners(loader);
			var request:URLRequest = new URLRequest("version.txt");
			try {
				loader.load(request);
			} catch (error:Error) {
				trace("Unable to load version.txt.");
			}
		}
		private function configureListeners(dispatcher:IEventDispatcher):void {
			dispatcher.addEventListener(Event.COMPLETE, completeHandler);
		}
		private function completeHandler(event:Event):void {
			var loader:URLLoader = URLLoader(event.target);
			this.draw(loader.data);
		}
		private function draw(data:Object):void {
			var a:Array = data.split(";");
			var major:String = a[0].split("=")[1];
			var minor:String = a[1].split("=")[1];
			var build:String = a[2].split("=")[1];
 
			var tf:TextField = new TextField();
			tf.autoSize = TextFieldAutoSize.LEFT;
 
			var format:TextFormat = new TextFormat();
			format.font = "Verdana";
			format.color = 0x000000;
			format.size = 10;
 
			tf.defaultTextFormat = format;
			tf.text = major + "." + minor + "." + build;
			this._owner.addChild(tf);
		}
	}
}

 

That's it, now every time you press F8 in Flashdevelop you will add any altered files to the repository and your swf will reflect the current version number!

Sanitizing numeric input in PHP

Going trough some PHP code I have to clean up I'm a bit surprised at finding that it can take many lines using everything from preg_match to addslashes and mysql_escape_string to sanitize numeric input.
So I thought I share a method that I find handy:

$id = (int) $_GET["id"];

In some cases it might want to handle any attempts to input a string where an number is expected though.
When converting a string to an integer PHP will default to 0, rather than something handy like NaN.
Usually it's not too much a problem if someone tries to hack you site and only gets directed to the contents for "id=0" when they try to input "id=1;DROP TABLE users".

But one would think that this should work as a check:

$id = (int) $_GET["id"];
if($_GET["id"] == $id){
	echo "ok";
} else {
	die("error");
}

But even if $_GET["id"] is "foo" it will equal 0, again because PHP will evaluate a string that doesn't represent a number as 0.

Instead I use this to check if the input string actually evaluates to a number:

if(ctype_digit(strval($_GET["id"]))){
	echo "ok";
} else {
	die("error");
}
 

Dreamspell calculator

I added a little application to the download section.
It takes a Gregorian date and converts it to a dreamspell date and then calculates the kin, guide, analog and antipode to generate the affirmation for that day.
For those of you not familiar with the dreamspell calendar it's a reinterpretation of the Mayan calendar by Dr. José Argüelles.
It's based around 20 "glyphs" and 13 "tones" which make up the 260 day year called the Tzolkin.
The idea behind it is to create a new calendar system that actually is in tune with natural cycles, unlike the Gregorian system we use today, but mostly it's used to cast horoscopes.
Here is one resource for more information about the calendar.

My wife wanted to have an neat application for displaying the affirmation of the day and to look up a persons birth "kin", so I put this one together for her:

If this sort of stuff interest you are free to hotlink to the swf using the following URL:
http://www.resonantearth.com/ingrid/dreamspell.swf
You can download the swf here.

To get the source visit the download page.

Site update

I have been meaning to upgrade my site for quite a while now, but since I just haven't had the time to spend on fixing up and redesigning my flash site so it's up to standards I decided to replace it with a simple wordpress blog for now.
And I must say I'm quite happy with functionality of it, and adhering to the old "content is king" mantra the first thing I will do is taking up blogging again and spend some time making applications for download.

I have copied the old posts from the BlixtBlog, but I could not be asked to transfer all the comments.
So my apologies to everyone who has been posting...if I make a new Flash-based blog system I will use wordpress for the back end and make sure the same thing doesn't happen again.

Does Flajax make sense?

Well, the word in itself maybe not, I just made that up myself.
But as you probably guess I'm talking about using Flash and AJAX together.

After my last post that also involved Flash and AJAX, "Right tool for the job...or right job for the tool?", I came across the following blog entry: Ajax and Flash Together
Some good examples of AJAX and Flash integration and I couldn't help to ask myself a couple of questions.

In what way does it affect me as a user if the buttons controlling flash is in the HTML page or part of the swf?

Looking at Yahoo finance and Google finance I really have difficult to see that the user would have advantages or disadvantages from an AJAX mix compared to only Flash.
The only case would be if there is browser incompatibilities with JS or that they lack the flash plug-in.
Obviously buttons is no good without graph and vice versa, so not having to rely on two separate technologies being available as expected is better. But to me it could just as well be one big swf...I would not notice any difference apart from when I right click.

On the google page I can agree that it's neat how it highlights the headlines to the left when you click the corresponding box in the graph. Using HTML for those headlines makes it possible to completely retain their visual identity, even if the result in Flash could be made very similar looking.

In what way would it affect me as a developer having to implement one over the other solution?

I cannot see that it would have any advantages when developing to move buttons to control the graph outside of the swf.
Anyone who can make the graphing app can in no time add the buttons instead of making a handler to respond to JS calls from the HTML buttons.

What have I missed?
In what way does combining Flash and AJAX help the user in those examples?
In what way does it help developers?

Right tool for the job…or right job for the tool?

Usually when people discuss Flash, AJAX and HTML there will be a lot of people saying "just use the right tools for the job, both have their strengths."
Seems obvious enough and makes sense.
But do we really have to learn to use all tools, and could one not turn it around to say that we should find jobs that fit our tools?

I many times been thinking I should have a look at AJAX because I might get a project where it would be a good solution.
The main reason I haven't bothered is that I have problem finding uses for it where Flash is in any way inferior. The only reason to go with AJAX that I can see is if you have a HTML page where AJAX could feel more visually integrated, but on technical merits alone I find it hard to see where AJAX would be a better tool.

The point I'm trying to make is not about if Flash is better than AJAX.
Regardless of the merits of using AJAX vs. Flash I really dislike having to deal with browser issues and a far from ideal development environment

Sure, if there was no demand for Flash and I had to make sure to put food on the table, then an AJAX job might seem tempting.
But as we all know Flash is higher in demand than ever, so why would I start using a technology that I don't enjoy working with that basically fills only fills some of functions as the one I already master?
To make sure that I can give the best solution to a customer who have a project that is one of the few where I think AJAX would be a better choice?
No thanks, if that situation would arise I'll be happy to send them on to someone who likes to deal with browser incompatibilities.

As long as I have the possibility I rather choose jobs where my skills is the right solution. Sure I like to keep up with new technologies, but only as long as they seem nice to work with and they bring new advantages. But to choose what tools to use according to the jobs on offer doesn't appeal to me.

So, what's your approach, choosing the skills that you find nice and useful to find matching jobs or adapting your skill set to the jobs on offer?

Better backbutton and deeplinking

I'm glad to have discovered that someone made an effort making a script similar to my backbutton and deeplinking solution for Flash.
Maybe old news to many of you, but since I get some visitors here looking for such a solution I thought I mention it.

http://www.asual.com/swfaddress/

I haven't got a chance to try it out and only had a look at the info on their web page, but it seems to be a very good alternative to my own script.

Next Page »