wonderwhy-er blog

As usual I am slow to write about such things. So last week Adobe fired hundreds of people and announced that they are giving up on Flash for mobile browsers. There is already much written about it. Lot of  “Flash is dead” buzz on tech sites which sounds to me like an ill informed. Some closer to Adobe people, who actually work in RIA, have a lot more sane views on the question. Here, here and here among the others.

My views and reactions

My first reaction was “Well, now Flash as we know it is dead”. Or more precisely it got a terminal illness. On other side what exactly changed? Right now really nothing. Flash was not really used on Android browsers.

So what changed is promise. Before, may be somewhat unofficially Flash had a “Write once,  run everywhere” promise. You could do desktop, browser, mobile apps with it. But now… Even though flash was not really used on mobile browsers it was somewhat there. Now promise is no more. And it is very important for future prospects. And it probably will undermine demand for Flash from marketing sources.

Mobile killed web

Reading posts and comments around this Adobe move I was trying to gather up things that happened since iPhone came out. And it seems to me that its not only about  iOS killing Flash. Its about mobile revolution fragmenting the web.

Simple example are popular web services. How many versions of their interfaces there are? Up to five. Web version for desktop and for mobile. And native versions for desktop, iOS and Android. Though native desktop app is a rare beast. On other hand on mobile web version may not be rare but its rarely used if native app exists. For one thing with app you do not need to login, app remembers tour credentials.

Some even prophesying that mobile web is dead, people prefer app stores and native apps instead. And for good reasons.  HTML5 if far from being able to compete with full-blown apps experience.

Right tool for the job

One trend that is stable among big Flash developers is to say “right tool for the job” and “differentiate yourself by learning new stuff”. In a way what they say is that Flash is becoming a more niche thing and if you want to have many jobs and projects to pick from you better to expand your skills and tools in to other niches as well.

I started to learn both HTML/JS/CSS and Flash some 8 years ago. Made few ugly sites in HTML, made few small toys on Flash and one ugly site. And started to do more and more with Flash. Why? It could a lot more, it was a lot easier and more consistent too. It was fun. So I picked Flash because it was easier, more fun, and it was a profession with a lot less competition at least locally while there was demand. But even then Flash was a niche tool. But its niche was and still is cool. It was all about animations, flashy interfaces, multimedia rich tools in a browser, games, interactive and generative art in browser like a demoscene. So by picking this I was in a way filtering what kind of work will come my way, and this kind of work felt a lot more fun and interesting then making some internet shops and usual visit card text/image sites. I also loved web, open, without gatekeepers, with lot of opportunities on making something.

Now after 8 years not much have changed, I would rather say that demand for Flash even boomed over last years but in realm of social games. And now checking for available works for Flash developers it feels like 70% or more are social games related. While other 30% are marketing related.

For over a year I was starting to feel that Flash niche stops to be that fun for me and I want to be able to do more. Slowly started to learn other web technologies. After a year, and now with announcement of Adobe… I must say that for me nothing changed in standard web technology world. HTML/CSS/JS improved a lot. I at last can make imageless pretty looking sites and interfaces. It feels good. But when it comes to actually making a complete rich app with data input/output, sounds, complex interactions and consistently with good performance across all browsers… Its still the same pain it was years ago or so it seems to me…

So for me, more exploration is on side of servers and simple sites, for rich app experience in browser Flash was and will  be for near years my tool for the job.

But that’s years. Probably few. What’s then? I do feel a need to expand my experience as a professional developer. And I see two choices before me. One I talked about above, as web developer. Another one I see is as mobile app developer, aether native or reusing my Flash skills and doing AIR apps.

As I said above, I picked Flash because it was fun and works coming my way were fun with it. As I see future of web development for me right now seems like not fun. At least rich apps future. Flash will be fading away everywhere where HTML5 can pick up, but it will be usual HTML hell of consistency, performance, missing features and hacking all around it. It will be a work with unfinished product. It seems to me its still too early to seriously get in to the HTML5.

While if we speak about native mobile apps… It seems to me that out of everything that happens in software development world right now mobile apps are most fun. An uncharted waters with many interesting possibilities. Many also prophesying that mobile is future of computing and that desktop is dead. Anyways, this market is poised to grow. So fun possibilities in growing market.

Yet it is a world with gatekeepers, world attached to success of certain firms like Apple and Google and what they do. Now by picking technology like HTML5 or Flash you already become somewhat dependent. Web standards while better still are dependent on all major players decisions too. Just look at IE, WebGL, WebM cases. But on mobile platforms you are even more dependent,  just remember Apple change of rules with 30% cut from in app purchases that put many apps in to a tricky position. Like Amazon…

Conclusions

•  Flash is not dead, it will stay alive as long as HTML5 will not pick up on all features Flash has, and it is long from it, 2 years at best, 10 at worst(I hope it will be faster), even then Flash may still manage to somehow stay ahead. So Flash seems to me still like a best option for cross platform RIA, especially with possibility to publish AIR apps in to iOS and Android markets.
• There is no single tool to satisfy all use cases. I would like to do it all, mobile apps, web apps, explore all possibilities, yet HTML5 is not ready, Flash has it holes and uses cases and native apps usually are even more niche and attached to platforms.

So I am confused. There is no single job out there that can provide you with broad enough possibilities, picking one feels wrong, trying to do it all feels wrong too.

So it is a stormy time with unclear horizon and without any safe cove to drop an anchor in to wait out. And I don’t see other options then to jump around, trying different new things, finding junior jobs in mobile or web to broaden skills, still doing Flash, and hoping that future will become more clear soon.

Thinkering around with AI-Class subs browser decided to try and collect some feedback from visitors. It does get few hundred visits a day. From my previous experience with Flash I do know that its good idea to collect errors from visitors in the web. It may work perfectly on all browsers and all machines you can get your hands on but quite often it will not work on some other machines, in rare cases almost on all machines except ones you tested on. It may be internet connection, debug environment or some other small difference.

Local error handling and try/catch

As any modern language today JavaScript does have this crucial construct. Just wrap your code like this

try{
  //your code
} catch(error) {
   //handle your error
}

And handle your error in catch block. Now as far as I can say this works everywhere. Differences start with what error object contains:

• In any browser it contains message property, usually some description on what went wrong, but message itself differs by browser for same errors
• It also may contain stack property. As far as I can say Chrome and Firefox have it. IE and mobile browsers don’t. It usually contains info on where error occurred, which script on which line

And that’s about it with local error handling. Its a good thing to use to wrap around unstable or untested segments of code and provide some fall back in case something goes wrong. And that’s what I did initially. But that’s not always enough. Some people had problems while I was not getting anything in my log. So I needed something more global.

Global window.onerror

Luckily JavaScript has global error handler. And it looks like this:

window.onerror=function(message, url, line){
   //handle your error
   return true;//if you return true it overrides default browser error message, at least it should
}

Here is some documentation on it on MDN. Now this thing gets all errors that happen on your page (at least it should, may differ by browser and situations). Sadly mobile browser do not support it Also on all browsers that support this it returns script url and line number where error occurred. For example if error happened in some third party library you will get it here. And its a good thing.

Now what I somewhat dislike about JavaScript so far is that it lacks good language references similar to PHP or AS3. Best out there seems to be one at MDN but its somewhat lacking. Also it may be little bit biased towards Firefox implementation. Would be good if it was in wiki form or had comments for each page. Thing is that I spent quite some time searching for info on how well supported window.onerror is, is it even part of JavaScript standard or not and some other things.

For example I was getting many errors that looked like this:

message: script error, line: 0, url:

Empty errors that say nothing… Great. After lot of searching found it here. Turns out that if you have scripts from other domains then errors in them are reported without any useful information. And I was using jquery and swfobject from Google CDN. Initially thought that its a good thing. Less traffic for my site and probably faster load times from Google CDN for users. Sadly if it leads to such errors that say nothing it probably does not worth it. In the end I switched to locally hosted scripts. Will see if there are any improvements.

Anyways. This approach is very good because you don’t need to go around and put try/catch everywhere. Plus you catch errors even from 3rd party libraries. A good thing. Still for actually handling errors and providing fallback in case of something going wrong its better to use try/catch in right places. This one is good for actually logging errors and preventing browser default behavior on errors.

Example

And if you want to see and test this here is small example. You can also check AI-Class subs browser source for code I actually use to collect and report errors.

P.S User Agent

Also, its good thing to actually collect User Agent info on server side too for this, some errors are inherent only to some browsers or platforms. Like I do get some errors from iOS devices obviously having issues with YouTube Flash player.

Continuation to previous post.

Update

Third batch of lectures and homework’s is out for Stanford AI-Course and I just updated the page and data for it.

Changes:

1. Switched captions layout from list to tables, now does not look broken on smaller screens
2. Added link to about, so far just my previous blog post about this(yeah, I am lazy to make a separate about page for it
3. Added update date to data, shown at the top of the page now

Remaining issues:

1. No iOS support, not planed too, I am under impression(which may be false) that its too much hassle to provide Flash-less alternative to YouTube JS API right now.
2. Broken under Android, was not intended for use on small screen anyways, not fixing it too

Source code

Cut to the chase. Here is the source code at GitHub. Its intended mostly for those who want to make similar thing for other YouTube based courses or make an alternative language version(English only now).

And its my first use of GitHub so “Hello World”

Anyways, most part of last week and weekend were taken by:

1. Trying to make PHP scrapper for subs which failed
2. Remaking my Flash/AS3 code in to AIR app project so that people could work with it(had it in fla Flash authoring format before which worked well only in debugging environment)
3. Formatting and adding comments to source code

Source code is published under MIT license, use it however you like but I will be thankful for mentioning where it came from

P.S Any help with PHP script, or more precisely, finding a way to download captions for YouTube videos trough PHP is welcome.

Introduction

So, last week Stanford ai-class has started.

Immediately found out that not being able to read  question for quizzes in text was a problem. And clicking trough video to see it in the subs was not that fun aether. Immediately got an idea to fix that for myself and make an exercise in HTML/JS/CSS out of it (I am kind of slowly learning it all trough small projects like this for last year).

Try number one: bookmarklet

First, I remembered of bookmarklets. Small javascripts saved as a bookmark which you can “execute” inside any page. Developers often put in some small useful codes to inject in to pages for analysis  or some other reasons.

After checking ai-class page and requests found out from where player gets subs. Whole link is large and contains lot of unnecessary parameters, experimenting with it  shrunk it down to smaller size. And here how it looks.

Then googled around a little for ways to make a cross domain request from JavaScript. Thing is that for security reasons in JavaScript making such requests is prohibited while for Flash a cross domain policy exists that allows domain owners to specify who can gain access. Found out that there is a partial workaround trough Yahoo! YQL.

In the end I failed with that idea as there is no way to really figure out which video is playing right now on ai-class site. At least trough JS/HTML. May be it is possible to somehow query YouTube player for that.

P.S Killed lot of time on hacking 3 levels of escaping of quotes. First quotes were for anchor href attribute in which bookmarklet code goes. Then quotes inside that code. And third quotes level in that YQL request I hate escaping!

Try number two: php curl

Next quick try was to test PHP curl and see if I can retrieve subs from those urls on server side and make a page out of it. Tried, failed, after lot of fighting with JS on previous step gave up fast. And I don’t have idea how to “debug” curl http requests on server side anyways.

Try number three: Flash local app

Well after some fighting with JS and PHP I fall back to dark side I am Flash developer for last 5 years soo… Something like an hour and I got this:

Just an app where I paste link to AI-Course video and get their subs formatted for reading.

Until homework started this was enough for me.

Try number 4: YouTube JS Api + XML

While doing home works I realized that only text for current video is not enough. Seeing people making lecture notes helped that realization. So I needed ability to get all subs together and search trough them. But wait, text is not enough. Jumping to other videos I need to quickly refresh my knowledge is a “must” too.

That’s how idea started to form, I rewrite my app to take in all videos and subs for them. Output it in one XML. Use it as data source for a page. And add YouTube player controlled from JavaScript  to the mix.

First things I went to check was how to get list of ai-class lectures automatically. I am a programmer and for me doing copypasting job is a disgrace. I better write a script to do it for me Poked around Zen GData library for PHP and its YouTube API. Turned out it was not so good for what I needed and there was easier way just trough links like this. Sadly it only lists public videos, so no homework’s. And also order is mixed, ended up parsing video names for ordering. Also turned out that only video owner can get subs trough their API So my hacky way of spoofing player requests seems to be the only way.

Anyways, rewrote my Flash app to get all videos from there, sort them, get subs for each trough old method and output an XML like this. Also ended up adding homework video ids by hand.

And then started making site:

• Made a PHP page with YouTube player and scripts to control it. Fast and easy.
• Used SimpleXML in PHP to parse XML and output a list of lectures with subs. Easy again.
•  And then part I don’t like about current standard web development came, layout trough CSS. It got lot better in last 5 years but its still feels like hacking around achieving what you need trough not intuitive means. That’s why Flash won me over 7 years ago

P.S I actually love CSS selectors idea, just layout part feels broken. And I love jQuery for bringing selectors to JS.

Result

And here is the result:

• You can open or close lectures separately. Or close/open them all together.
• You can read whole transcripts of lectures and search trough them trough standard browser means.
• And you can click on button to the right of each line to jump to that video on that moment. Magic!

There are still some problems though:

• Firstly, using lists for layout here seems to be a bad idea. Should have used table with two columns instead. Will try soon.
• There are some issues under Mac/Safari with referencing YouTube Player. As I am under winds can try stuff only blindly.
• And script for making an XML still is in Flash/AS3, will need to spend some time trying to port it to PHP, not sure it will work.

Source code

Ok, you can read more about source code in next post or go straight to GitHub repository where it is.

Actually it was yesterday, read about it on Google+ and already posted on Facebook about some of this.

Download Flash 11 here.

Check out Alternative Demos here.

But news that struck me most were this. Epic Games is ready to release support of Unreal Engine 3 for Flash platform. And they showed Unreal Tournament 3  working in Flash at Adobe Max 2011. Ouh boy what a year it will be for browser games. Unity shared a sneak peak recently too, and now Unreal Engine.

Flash is well posed to become a console of the web but I have hard time figuring out how it all will play out. We still have Flash agnostic iOS, not all devices will work well with this, we still have traffic bottlenecks. Years back it was considered useless publishing a game ove 10Mb in size. Today? May be over 60mb is useless? We will see but considering that modern games rarely take less then a gigabyte of space and some up to a dozen of gigabytes, it will be interesting to see how developers work around this

P.S Also turns out there already is a game using Flash 11 on Facebook. Its actually a re-release of older game developed on Java called Battle Punks.

Something like a month ago read that this year Standford University Professors behind their AI introduction course are planing to run a free online version  with video lectures, quizzes, homeworks and exam. As of today registration to this course is open. I am in. Are you?

Contest ended little bit more then a month ago and I ended up a winner. There are some other nice entries there too. And here is mine

This is little post on how things went for me and some code sharing trough wonderfl.net site.

Music Spectrum Circles

I wrote about first experiments with spectrum in my second post about this contest and exploration. Click on images to see wonderfl.net versions with source code. There is not much more to say about it then what I already said in that post. Simple, yet pretty cool

Trails of Music

After that I turned to sound signal itself. Was pretty pleased with results that ended up in my new year “postcard” With flaws but looked good.

Initially I was planing to make something more interactive where each user could add his actions along with music to get interesting results. Something like musical brush. After making some experiments with sound signal my view started to change a little. Allowing other people to express some creativity is cool but exploring what kind of experience what song provides with visualizer +  ability to replay that and share exactly same view with friends is equally important. Here I started to think that making visualizer so that it is same visualization for same song each time for any user is a good idea too. That way people could listen trough various songs and share names of those that looked especially cool so that others could see it too.

Music Atom

At that point I started to try to make my final entry of musical brush. But after some time I figured that I will not be able to do anything spectacular in time I had left till the end of the contest. Still I made few experiments using that concept and along the way made a step forward with musical signal. Thing I did was to use FFT class from SION library to get original signal spectrum, break it to as many sub segments I needed and then, using reverse FFT, get smaller separate signals in different frequency ranges. This way I hoped to get two things. More separate entities that react to music + parts of visualization that reacted to different parts of sound. First worked perfectly and second… Well depends on the song.

In the end I gave up on brush idea and turned to playing around lines again. There were few things I did not like about Trails of Music and Musical Fireworks. Main problem was that line traveling around could end up near corners of the view. Also it all did not had any distinct form. Ideas to fix it were simple. Try some techniques that will make it not go too far from center of screen. Easiest ways were to just change coordinate system. Like apply Sin/Cos functions to lines coordinates so that they “bounce” elastically from corners of the screen. Looked not so well to be honest. Another similar thing would be polar coordinates and this one worked brilliantly. It made beams to inside a sphere which looked cool, it also made trajectories more interesting (like flowers). It also made amount of beams different for different parts of screen. They would spend more time traveling at sphere edge + they would far more often cross center of the sphere. Along with additive blend mode and smooth beam color change it made for a brilliant pictures.

The End

And so that’s it. I must say I had much of fun and learned thing or two during those two months and have plans to play with those things further in various ways. Hope you found it fun too and found code interesting and useful too

Over last months of 2010 I was coming to realization that I want to be able not only to make multimedia Flash apps in web but also build HTML pages and services around them. So decided to start slowly learning some. Also with HTML5 making core web stack more and more potent it would make me more prepared for challenges where HTML5 will be a better choice then Flash for rich internet applications.

Not that I don’t know or did not know some. I have basic knowledge of HTML/CSS/JS/PHP/MySQL. Kind of standard stack used today for various cases. But here my knowledge is gather from various small cases and web examples. Probably only part of it where I did get some formal education is relational data bases. What I wanted was to broaden my knowledge in all this.

Asking friends for ideas about good books to start from I was often asked “why books?”. Today you can learn anything from the web, thousands of examples, tutorials and documentation sites and active developer communities allow anyone to learn to program anything.

Thing is that I find it to be a bad way to start. Tutorials and examples often concentrate on solving something specific, are not always made with big picture in mind or sometimes even made badly and teach you bad things. I prefer to start from some book that give a broad and not deep view, showing how it is meant to be done without going too deep in to the details(details I will dig out later if I will need). I need this to get some ground under my feet from where I can start. And then explore the web myself knowing for what to look, what’s good and what’s not so good etc etc.

For starters I picked a little bit unusual direction As I mentioned I more or less know PHP and I wanted to try something new. Also for some time I was curious about Google App Engine. Pocking around GAE I found that probably best languages for that platform right now are Python and Java. Well I knew Java years back and don’t want to return. So I went in direction of Python.

In last December I was ordering some books from Amazon and ended up ordering 3 books on web technologies.

Google App Engine

First book from those I started to read was specifically about Google App Engine. This book covers whole GAE platform as far as I can tell. On programming part it includes both Python and Java specifics, classes and code examples. It helps you trough your first Google App Engine application. Big part of it is Data Store. Then it comes trough various other features of GAE like memory cache, google account integration apis, various other built in apis.

For me most interesting part was Data Store. I am pretty familiar with relational databases and ideas behind them and was always curious what Data Store is, how it works, where better to use it and this books gives pretty good overview on that side. Actually something like 1/3 of this book is about Data Store related stuff.

Some interesting things about App Engine. It was designed with “return answer as fast as possible”  ideology for rich web apps. One related to that interesting feature is that app can return result first and then start working on updating data, indexes etc. I guess that possible to do with any stack but I never looked on it from that optimization point.

As far as Data Store goes it reminds me of simple Object Orientated Database. It basically stores entities by unique keys that may have properties and something like classes forced by code. Also Data Store allows building indexes to run queries on some of the property types. As far as I can say there are 3 significant differences from SQL database:

• Query language is simple, does not allow joins and some types of queries that need calculations
• You can retrieve entities not trough queries but directly if you know their unique keys, it is lot faster then trough query
• It is possible to store an array as entity property, it also allows running queries that target content of arrays so you can get entities who have some kind of values in their array typed property, you can store keys in such array making kind of Object Orientated version of one to many relationship between entities

Another thing is that keys are constructed in a way where first part of key is application ID, and you don’t even see it, which means that each app can only get access  to entities it has created. Can’t access other apps data directly. Also there are limitations on how many entities you can access at once which along with other GQL limitations makes GAE a bad platform for solutions that for example need t work with large amount of data providing statistical info on it.

I guess that would be it on that book. Overall it gives good overview for GAE providing a good start point if you want to know what GAE can and can not do.

CSS Mastery

Another topic I was curious about but never was really getting to know it better was CSS.

Basically its something I knew what it was for but did not knew general ideas behind it and how it is really meant to be used. This book claims to be a book for those who have been using CSS for some time but don’t feel they are experts yet. Or people with basic knowledge of CSS. After reading this book I must say that its rather a book for starters. It rather teaches clean and simple CSS/HTML showing where common pitfalls are and all.

This books covers essential parts of CSS, selectors, techniques of layout, advanced CSS3 features and how to do something like that in CSS2.1 using old methods and tricks.

I think best part of this books is that it teaches how it should be done and why. Why HTML part of pages should be designed as meaning and structure while all styling should go in to CSS. Author adds small examples from his experience which make it pretty clear why it should be like that.  Or another thing is how using hacking to fix problems is a bad idea as problems are fixed as browsers are updated. So your hacky fix now becomes a bug.

Some 7 years ago coming from Java/C/Pascal background I started to dig in to HTML/CSS/JS and Flash. Flash slowly win me over. It was a way to develop Apps while HTML seemed like way to developer styled text pages along with a bonus of serious cross browser inconsistencies/bugs and limitations. Over these 7 years things seemed to improve especially on JS/CSS front.

Sadly coming from Flash I still find that even CSS3 is insufficient to style things cleanly. Firstly today style is not only about static visuals. Its about animations, reaction to user actions, its about visual behavior of interfaces. Now CSS3 includes animations but that’s not enough. I think big problem is  that you can’t reference values in CSS. For example one of examples in the book shows how to make 3 text columns to be of one dynamic height. Thing is that you can have them aether of static height or they all will scale according to size of text inside them. As you can’t reference values in CSS what author proposes is to make all columns of large height, then use container of those columns in “hakcy” way which resizes according its content actual size. Now container is of size of highest column. And now use overflow property to cut out unnecessary height of columns. Of course such trick is possible only with simple column style. Now then all I wanted is to make 3 columns to share same dynamic size. And I end up with doing lot of trickery to get a limited solution. This kind of lets me down…

Another example is vertical content centering on page. Solution looks pretty clear but is limited too. Just make your content top padding 50% which will move its top side to center of page. And then, with different technique, move content up by half of its height. Yay it is centered. Sounds even intuitive and logical in idea. But you can’t target values in CSS. So you can’t target its own height in position style. So you can’t center object vertically if it has dynamic size in HTML/CSS… Or at least it seems so.

Well anyways this all is CSS problems. This books does good work communicating good and correct way of dividing content and style of your HTML/CSS pages. I guess many HTML/CSS problems can be solved with JSS/jQuery filling in position of visual and other behavior for HTML/JS/CSS at least for now.

Python Web Development with Django

Another book I only just started to read is this one. I thought that it is a good idea to learn not PHP/Python language directly for web development(as that I can do myself). What I wanted to learn is how to develop good web solutions too. How to architect your engine, authentication, user content, HTML output components etc. I wanted to know best practices in how to develop your engine/framework for web site building. And what’s a better way then learning some framework and seeing how they done things there.

Another thing with Python books is that Python is a language used for broad number of things. While PHP is mostly used for web development Python started elsewhere as general purpose language like C. As a result majority of books don’t cover Python use as web development language almost at all. And thus majority of those books are of no interest for me in current situation. For that reason picking Python based web development framework book seemed like a good idea too.

Now first chapters of this book gives incremental introduction to Python first which is perfect I knew for a while that Python used spaces and new lines as part of its syntax instead of various braces. I always was finding that it is both good and bad. Good that everyone writes in same style as it is enforced trough syntax, also makes language less bloated with special symbols and more readable. Sadly in some cases it also makes language less readable as you can’t arbitrary style some part of code for better readability.

I just only started this book but so far I must say I really like some features of Python. They make language a lot smaller when performing task with array for example. Here are few interesting examples:

• string[1] – like in any other language it returns strings second character
• string[-1] – here good things start, it returns strings last character, so if index in [] is less then 0 array length is added
• string[:1] – now what? Turns out that Python extended this operator to allow ranges. In this case it will return first two characters of this string.
• string[1:3] – now this is full syntax returning second, third and fourth symbols in the string.
• string[1:] – and this will return whole string without first character

Anyways I have still much to read from this one so no more comments on it so far.

Other books and some practice

Basically this is it from this book order but there are two more I would like to buy. One on JavaScript/jQuery and one on some PHP framework to improve my knowledge in those directions. Also I have few test projects planed to try and use these technologies. After reading book on CSS I already updated homepage a little(here how it looked before), planing to do more work later on it. Also planing to try and do two projects for practice on GAE later.

After playing with spectrum next thing I wanted to play with was sound signal itself. Checking stuff initially I noticed that sound signal looks the closest to my association with what I hear. Actually old console games music looks geometrical for example Noticed that back in the day listening to some Amiga music emulator made in Flash probably by Andre Michell. Sadly don’t remember where it was now.

Experiments

You can select different visualizers in bottom left side combobox.

• Direction – was a first I tried. Just using sound signal as angular speed for a moving particle. Nothing special but looks pretty cool
• Direction 2 – with direction 1 particle moved around the screen and teleported to opposite side when it was going outside of screen. Good but sometimes it would rotate somewhere in a corner where you could not see much. With direction 2 I tried to make camera follow the particle. Not perfect and camera is too shaky with some music
• Burst - new year was coming and both directions had a problem with music that had lot of frequencies in them like rock. They would just spin in place chaotically. Wanted them to kind of explode at such times so made burst as a kind of fireworks  thing
• BurstStereo - realized after making first burst that I was using only one of two channels for music. Decided to make a particle for other channel. Looks like just two particles  that are not really connected
• Beat - seen one place that sum of amplitude of signal is kind of a beat, I would rather say that its a volume
• Radial – here I just wanted to see how it would look if instead of moving particle I just change direction I shoot them. Turned out to be boring
• Opposition – another try with two channels. Now two bursts are attached to same particle, looks weird to be honest

MP3 Parsing

Before I was using, mp3filereferance by FlexibleFactory to load music from ByteArray. Sadly it had a flaw of throwing “End of file” for some songs. I suspect that its about damaged files. So I decided to try as3swf lib that can do the same. Sadly it has flaws too. Firstly lib is big and slows down compilation a lot(which is a pain). Secondly it does not load all music too. From mine I noticed that it throws this error “Unsupported sampling rate: 48000 Hz”. Good part is that wonderfl includes as3swf which means I will be able to port some of my music experiments to wonderfl easily somewhere in February.

ComputeSpectrum problems

Also I stumbled on Flash bug I wrote about here. Basically when you have two flash open in your browser where one uses computeSpectrum and other plays song on other domain you will have a security sandbox violation error. Thing is that you can’t access stream data that is streamed from other domain and computeSpectrum seems to be global for Flash player instance. But I think I tackled it well in musical fireworks.

More things to try

• I am thinking on trying to fall back to mp3filereferance when as2swf fails to improve things a little.
• Also I am thinking on trying microphone input instead of mp3 too. Flash 10.1+ should be able to do it.
• And finally its time to start making final entry for the contest using all things I learned so far

That’s it

Two more bugs I voted on and started to follow in recent weeks.

FilreReferance and hidden extensions

Here and here. I stumbled on it something like a year ago. If you have option “hide known extensions” in Windows enabled  and you save file trough FileReferance class no extensions is shown at all. That has two consequences. One if you save without setting a type yourself file will get saved without extension. Also it is shown without extension in saving dialog which sometimes makes user to write their extensions. That may be a problem if for example you are trying to save png and user writes jpg instead.

There is an ugly workaround though. You can add something like “.png.png” to file name, what user will see will be “.png” then and it will be saved with “.png” extensions. Perfect? Well not really. If you have extension hiding disabled user will get “.png.png “… Still probably better then original behavior.

SoundMixer.computeSpectrum and YouTube

Experimenting with audio visualization lately noticed a bug that is new to me. Turns out that SoundMixer.computeSpectrum works not only on all sound in one swf but on all sounds in one Flash Player instance. What that means is that if you have say Flash game in one tab, YouTube in other tab and something that uses computeSpectrum in third. What you get as a result is that SoundMixer tries to access sounds from that game and YouTube video and cross domain sandbox violation error is thrown. So your app that uses computeSpectrum does not work.

And here is Adobe JIRA item for that problem.

As for workarounds, well all I thought about for now is catching the error and showing the warning about it to user asking to close other Flash instances that have music in them. I first tried it in my new year congratulation here.