I recently posted my first test with HYPE’s SoundAnalyzer class which was pretty basic:
First SoundAnalyzer Test
Here’s another attempt at one themed around the Tron Legacy movie:
This one makes use of the blur filter but since the center of the discs aren’t transparent you won’t see the image in the back. Each disc responds to a different octave using SoundAnalyzer’s ‘getOctave’ function.
Finally, the one I spent the most time on was the one below (had to edit the song playback speed due to copyright reasons):
Themed around Iron Man, I started out with constructing the elements with just a bunch of circles in Illustrator and then symmetrically cutting them up. Initially, I tried to get each piece of a circle to respond to different values for a certain octave (once again using the ‘getOctave’ function but that wasn’t proving to be very effective. What I ended up doing was using the ‘getFrequencyIndex’ class which allowed me to spread the frequency values (0-255) across the smallest to largest circles.
When I tested the program, at times the elements wouldn’t react to the audio, which as I found out was due to having too many Functiontrackers! (I had 51 trackers)
No matter what I couldn’t get all of them to respond during the entire track and even the Quicktime Export option had the same issue. This then led me to then screen-record half of the trackers at once and then the other half. Once that was done, I stitched the tracks by comparing the waveform and added a few adjustments in After Effects!
It was after putting the entire video together that I realized that the FunctionTracker problem was only present during runtime inside Flash. When I played the swf from the file explorer (before uploading it), the problem was gone!! Here is the swf for the above (without effects):
Starting off with an example provided for the PixelColorist class in HYPE, I created my own shape and experimented with the blur filter and different images to somewhat get close to what I needed. What I noticed is that you should always have an image of the same size as your stage to avoid any problems, so I gathered a whole bunch of 1280×720 images to test. After testing around with a few shapes, I decided to settle with the decorative tool in Flash to create something that looked a like a cosine wave. Here are some of the png results that I ended up with:
The 3D features in Photoshop CS6 are quite impressive as it comes with a few 3D presets of it’s own and even lets you import 3D objects in .obj format. I decided to go with the wine bottle preset that came with Photoshop. After setting up the lighting, I brought together a few of my images and blended them to create the label. The only downside to the Photoshop 3D features might be the render time it takes if you go with transparency for your objects! Final result:
Flash, which stands for Future and Splash, may not be the future but it has definitely come a long way and it still has a while to go before it is abandoned completely. A while ago, I had the chance to look over the Adobe Road Map in which they outlined it’s future and it mainly hinted at video on demand services and gaming.
YouTube, last year, allowed people to enter an HTML5 trial to viewing videos. What’s surprising is that while Flash had problems of its own, I’ve had problems viewing content in the HTML5 player as well but it might just be because it’s something that’s still in the works.
I’m sure there’s tons of website out there still running Flash but from what I’ve seen most are already switching over. There’s this Wix website which used to let you build your own Flash websites in a very simplistic interface. They too have now shifted their focus towards HTML5. To me, it is not the question of will it happen but when will it happen? It’s end seems truly inevitable and Flash might just hang on to its life with some niche market gap that still requires it near the end. An interesting article by thenextweb in 2010 indicated how the web is run by designers and not developers. To some extent, this is quite true as Flash provided an external service to build and publish your work without much hassle. With HTML5, there’s not exactly a go-to-guide on how to get things done. Thankfully, Adobe Edge might help in this matter and once again let Adobe manage a partial hold over its development procedure. Also, the dozens of libraries available for Flash will also take some to be ported over to HTML5 or re-written. In this respect, the article also talked about how there’s still things going for Flash that have not been replicated in HTML5 such as sprites, reading of raw webcam pixel data and multi-touch support.
Recently, when the Samsung SIV was announced a few people jokingly suggested that it’s Air Gesture feature be used for MouseOver events in Flash (which could actually work out) in response to Steve Jobs’ letter about how Flash’s MouseEvents would not be feasible on a mobile device. Sadly, Flash development has mostly come to an end in terms of mobile devices. I believe the only way to get Flash Player on most new Android devices is to somehow side-load it (not sure if that’s worth it in the end). Steven J on ZDNet in his article made an interesting point about how long Flash would last on desktop devices. It’s been almost over a year and a half since that post, but it makes sense somewhat to gradually halt desktop development for Flash as well since everything is going mobile. PC sales, as recently reported, are already at their lowest and the trend is quite clear: if you’re not a hardcore user, you will most likely end up using your mobile device at least 80% of the time.
To me, working with ActionScript with Flash has definitely been an overall satisfying experience and it has helped my programming skills quite a bit. Plus, the fact that Flash lets you export your output as a mov file only makes it so much better (I just wish it had more encoding options for other formats).
Testing the HYPE framework created by Branden Hall and Joshua Davis.
The images below were created by taking a vector shape from a live traced bitmap image and then making use of HYPE’s ColorPool and ObjectPool:
Swatch colors: 0xBAC5D9, 0x9B5534, 0xA3A6A1, 0xD96B43, 0x3B3B3B, 0xFF6200, 0x638DFF, 0xD5A843, 0x5D00FF. The brighter shades were used for all except the first.
I also did a short test with the SoundAnalyzer class in Hype. Each circle was assigned its own octave using the analyzer.getOctave function. Click >here< to view the test!
Click one of the images below to view the animation! [opens in new window]
The image for the first one was taking from a poster for Rise of the Planet of the Apes, while the other has an image of me. The eyes shall follow! Previously I had both eyes following, but then made them both independent of each other.