Category Archives: Flash

SoundAnalyzer (HYPE class) tests!

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:

Sound Analyzer – Tron Legacy

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.

Illustrator Elements

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)

Functiontracker code

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!

AE Fix

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):

SoundAnalyzer Iron Man – Swf file

Advertisements

Creating Wine Bottle Label Art Using Hype

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:

Png Ouput 1

Png Ouput 2

Png Ouput 3

Png Ouput 4

Png Ouput 5

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:

Wine Bottle Using Hype Framework

Is Flash Dead?

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).

HYPE-ing it up!

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.

png_test1

png_test2

png_test3

png_test4

png_test5

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!

————————————————————————-

Flash – Stalking Eyes!

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.

Eye Animation - Ape

Eye Animation - Me

Flash – Name Animation!

Animating my name using ActionScript3 in Flash. Click the image below to view the animation [opens in new window]:

Name Animation

I tried to do something following the style of the numbers flipping in The Matrix but instead with the letters of my first name.

Flash animation – Cheetah Run Cycle

Flash animations generally don’t require too much work if your assets are all setup and you have everything planned out. This was a pretty simple scene with a looping background and a run cycle.

Click to view result
Source files

Starting off, I got an image to use as the run cycle for a feline:

Once the image was traced out in Illustrator, I added a gradient and started testing out the animation in Flash since I hadn’t tried it before.

screen2

I then came back to Illustrator to add spots to the cheetah and shadows as well. The shadows were just flipped, re-sized versions of the original with reduced opacity.

screen1

screen3

Moving to Flash, I imported my frames and started setting up my animation. I then imported grass and ground elements from other illustrator files.

screen4

screen5

I’d already setup one of the layers with a large width to animate so I set that up for the other grass as well, but instead I did it in Flash. This was done by duplicating and reflecting the image onto it’s right side so the part where they join matches along with the beginning and the end ensuring a smooth loop. This was then classic tweened from right to left.

screen7

I added clouds and a simple background and was almost done with the animation. Just to test out how audio worked, I also added a song from the lion king soundtrack on a separate layer.

screen9

And finally, it was complete! Click to view the flash animation!

‚ô† Leave me an email (contact page) if you need any help setting up your animation!!

%d bloggers like this: