va.lent.in — what a flash developer’s site should be

A couple of weeks ago I released my new personal portfolio/sandbox site — va.lent.in. I need more opinions and less bug reports.

I like projects which make me learn something. During this one I learned a lot…

Someone mentioned, the site looks like a bunch of cool effects combined with no purpose. I think right now it is pretty solid but in the beginning it was definitely like this. All my crazy ideas and experiments were compiled into one project. That was an Abomination. I sat down and rethought the whole concept, cut off unnecessary features and effects.

I showed the typing effect long time ago on my Russian flash blog, it was inspired by the real product. And it looked like a good idea after all to make a programmer’s site like a program he is typing. Yeah! I’ll add hands on a keyboard too.

So, what I have learned…

The IDE effect is very cool inside. It’s controlled by XML with grammar structures composed of primitive blocks. It was really easy to add new constructs in the final product. There’s a queue of commands which is filled with actions to execute over time. Blocks are addressed using names hierarchy. Everything is created and deleted according to grammar.

I learned some After Effects too. The final video is much better than the original one. There were like 5 videos I captured but only the last one was almost perfect.

I like the video glitch effect*. First, I made the whole code shift RGB layers and distort within some random controlled sin amplitude. It was great with small bitmaps, but when a lot of code typed it rendered the effect slow as hell. I optimized everything as much as I could, even used Pixel Bender but didn’t get any noticeable performance improvement. After that I’ve been trying to distort small areas of 20-30 pixels height moving the pivot point of distorted rectangle randomly. This time the effect was much faster and even more cool. I’m still using Pixel Bender shader but consider to switch back to AS3 bitmapData manipulations.

The image change effect in galleries is interesting too. Simple use of blur effect and Flash 10 3d transforms. But looks cool.

I bet nobody will notice a lot of small things I spent a lot of time making and debugging. I just can’t leave buttons to be simple and icons/effects/UI I don’t really like. There are a lot of such small things all over the site. For example lines connecting galleries with images. You can see small circles sliding on the bounding rectangle. Had to remember some geometry to code a right lines intersection algorithm. I extremely like small details but usually I don’t have time for them or am too lazy.

But the biggest lesson I learned is the importance of optimization. 0.1ms execution time here, 0.1ms there and FPS drops to 10 which is extremely low. I used Flex Profiler for the first time in my life and it saved me a lot of time. I learned a lot of optimization techniques, read a lot of articles and even shared some of my thoughts on the blog. I optimized every single important piece of code. Using functions inlining, object pools, math functions optimizations, cut off lazy unnamed functions. I can say that I learned to write optimized code from the beginning rather than being lazy. It is OK for small projects, but for big heavy experimental sites you must think about performance all the time.

That’s it. If you like the site feel free to post a link on your blogs. I want as many opinions as possible. Even bad ones.