Random Fractals» Flex http://randomfractals.com/blog Sat, 27 Mar 2010 13:57:26 +0000 http://wordpress.org/?v=abc en hourly 1 Back to SVG and a cup of Java ME http://randomfractals.com/blog/2009/02/05/back-to-svg-and-a-cup-of-java-me/ http://randomfractals.com/blog/2009/02/05/back-to-svg-and-a-cup-of-java-me/#comments Thu, 05 Feb 2009 21:32:02 +0000 Taras http://tarasnovak.com/blog/?p=687 Over the past two weeks I’ve been plowing through tons of SVG code, rereading the good old SVG Essentials reference book and checking out Painting the Web, a more recent title on modern web design and graphics, in preparation for some potential mobile app work with SVG, Java ME, and hopefully some Flex here and there.

Turns out SVG Tiny is the only standard that is supported by most mobile phones to do any decent UI design work for mobile devices. By now all major browsers including WebKit and the clones with their mobile versions support SVG, which is a good choice for mobile devices due to the varying screen sizes, limited bandwidth and memory.

So, I’ve decided to get back to SVG and a cup of Java ME, even though I am still planning to do some Flex dev work.

To refresh my memory on how things work in SVG and speed up UI design I’ll be using Flex with some open source SVG frameworks for prototyping since I am very comfortable in this development environment. Besides, Java ME graphics api is not much different from the core Flash graphics api and should be easy to port to.

After a brief time of setting up my new mobile Java dev. environment, checking out all the emulators, and getting some code moving things, I can tell that I have not missed much in 5 years as far as Java and SVG goes.

A few years ago, I’ve built a full-blown data visualization library in SVG for a corporate portal dashboard solution. This was done back in the days when not many folks knew about SVG, Adobe just released and still supported their IE SVG Viewer browser plugin, and Java portals, XML and XSL were the hottest technologies to use for web apps.

Many things have changed in web application development over the years. Open-source software, virtualization, cloud computing, mobile web, REST, and component-based frameworks are the new norm now.

It’s good to finally see SVG gaining momentum and becoming a standard that is supported and used in web applications and on mobile devices. I think slowly but surely SVG will replace raster images for most web graphics and mobile app UI design needs, as well as enable true scalable GeoWeb that’s beyond raster image tiles backbone.

Expect more posts on Flex, SVG, GeoWeb and mobile Java from now on.

In the meantime, here is a quick Degrafa Tetris game (with source) I hacked last weekend for fun. I came across Mozilla SVG Tetris and just could not resist the temptation.  Tetris running in MS-DOS on UKNC was the first computer game I’ve played back in 1988. And yes, I know Turbo Pascal too, in case you wonder. It was the first programming language most Soviet Computer Science students mastered back then.

Look where we are now.

Related Posts

]]> http://randomfractals.com/blog/2009/02/05/back-to-svg-and-a-cup-of-java-me/feed/ 0 Flick Flip Book Light http://randomfractals.com/blog/2009/01/12/flick-flip-book-light/ http://randomfractals.com/blog/2009/01/12/flick-flip-book-light/#comments Mon, 12 Jan 2009 16:54:28 +0000 Taras http://tarasnovak.com/blog/?p=431 Some folks complained that my default UI skin is too dark, it is hard to read photo descriptions in Flickr Flip Book, and the whole charcoal look and feel used in most Adobe Flex and AIR apps is wearing off.

So, I added new silvery Light UI skin to this app with an option to switch between the default and light skin:

flickrflipbooklighttoolbarsmall

And here is the screenshot of Flickr Flip Book Light:

flickrflipbooklightsmall

It’s a little plain, but easy on the eyes. Maybe I’ll add some album page background pattern options in v.2 to make it stand out and more colorful.

In the meantime, I am planning to do a short how-to with some sample code next, to show how easy it is to add support for multiple UI skins to Flex apps with a well-designed UI and cleanly separated view/layout code and styles.

Related Posts

]]> http://randomfractals.com/blog/2009/01/12/flick-flip-book-light/feed/ 1 Interactive BitmapData Perlin Noise Explorer http://randomfractals.com/blog/2008/10/16/interactive-bitmapdata-perlin-noise-explorer/ http://randomfractals.com/blog/2008/10/16/interactive-bitmapdata-perlin-noise-explorer/#comments Thu, 16 Oct 2008 20:49:17 +0000 Taras http://tarasnovak.com/blog/?p=124 If you’d like to create your own Perlin Noise music vis or try to produce programmatic natural-looking textures, here is an interactive BitmapData Perlin Noise Explorer for you to play with:

I’ll post some sample configurations for the clouds, sea, smoke, wood grain and brushed steal textures later.

Related Posts

]]> http://randomfractals.com/blog/2008/10/16/interactive-bitmapdata-perlin-noise-explorer/feed/ 1 Noise Test http://randomfractals.com/blog/2008/10/10/noise-test/ http://randomfractals.com/blog/2008/10/10/noise-test/#comments Fri, 10 Oct 2008 22:41:27 +0000 Taras http://tarasnovak.com/blog/?p=40 While attempting to build a sample video wall for my Flash video test drive, for loading all the video previews in a 9×9 grid I wanted to simulate that good old “no signal” image and noise you get from a tube.

Here is a sample:

Click on the image and mouse over the noise animation to hear that “no signal” sound effect. You can also View Source and download the tiny bit of code that generates this effect.

As I am sure you already know it’s generated with BitmapData.noise() function.

A while back I came across Keith Peters’s NoiseExplorer that was really handy to pick the color channel settings and other parameters of the bitmapData.noise() function to get that no signal image. The only part that nagged me was to click on the Render button every time I changed noise function parameters.

This sparked my interest in bitmapdata api and prompted me to explore Flex HSlider UI control capabilities, timers and sound effects. Before I knew it, I got too carried away and created an Interactive BitmapData Noise Explorer of my own to test those Flex features and find some use for Doug’s ResizableWrapper container at the time.

Here is my Interactive BitmapData Noise Explorer:

It provides informative tooltips for all the toggles. So, click on the image to pay with it. You can also view or download the source code.

What can you do with this?

I don’t think there are many practical applications of bitmapdata.noise() function. Video preloads and maybe some image transitions with alpha channel turned on is probably all you’d use this function for.

BitmapData.perlinNoise() on another hand is a powerful tool to generate natural textures and environments and will be the topic of my next blog post.

P.S.: unfortunately, I don’t recall where I got that nosingnal.mp3 anymore.

Related Posts

]]> http://randomfractals.com/blog/2008/10/10/noise-test/feed/ 0 My AIR Flair and some link drops http://randomfractals.com/blog/2008/01/27/my-air-flair-and-some-link-drops/ http://randomfractals.com/blog/2008/01/27/my-air-flair-and-some-link-drops/#comments Sun, 27 Jan 2008 02:38:51 +0000 Taras http://tarasnovak.wordpress.com/?p=3 Finally, after months of working with Flex, researching, prototyping and developing some real world projects on this wonderful RIA development framework, I am doing an internal presentation on Flex and AIR to our developers and designers.

I had already done a more hyped up presentation on Flash and Flex capabilities that was well received. It was mostly a recount of the great works of Picnik, before they partnered with Flickr, PaperVision3d, Dote Design image gallery, Flip , FotoFlexer, MixBook, Graphita, Visual Complexity catalog, 10×10 by J.J. Harris, FineTune, TuneGlue, Musicovery, ToneMine, BurstLabs, Mindomo, blinkx Video Search, Oskope, experiments by Mr. Doob, Andre Michelle, Lee Felarca, the quietly scheming Ely Greenfield and the great works of Keith Peters who I should thank for getting me hooked on all things Flash.

This presentation is different. I have J2EE, .Net and Ruby developers, IAs and visual designers in anticipation to see what Flex and Air bring to the table and how they are different from AJAX, XUL, OpenLaszlo, and Silverlight.

No prob. I am all giddy and excited about this presentation and mixing together all the goodies with the code and links from some good online sources to share the joy.

This is going to be a hands-on presentation for developers and designers. For designers, there will be some mods and remixes of Flex skins from Fle[ks]ray and ScaleNine. All the Flex effects are included for swapping the slides. I also added PaperVision3d effects from Tink, and Distortion Cube effects for the hack of it. Got to please those Ubuntu and Mac users somehow.

For developers, I got basic Flickr example, Yahoo weather and maps sample, simple mp3 player, mini browser with links to online Flex resources, Ely’s Display Shelf for the recommended books, and of course AIR Window Sampler. More than I could possible fit into a one hour hands-on presentation, but if you have other suggestions, please let me know.

I decided to keep text slides to the minimum and avoid slides with bits of code pulled out of context. Some working code with a walk-through in Flex Builder should give a better feel of what Flex and AIR is all about to get developers started.

I’ve done a similar type of presentation in the past for SVG. Setting up basic slideshow in Flex was much easier, and with the skins and effects added there is no comparison.

I’ll share with you the feedback I get from this presentation and hopefully the code too. In the meantime, here is the screenshot of my splash screen (Click on the image to see it full size).

Air Flair

How hot is that?

It’s a semi-transparent AIR Window with the city background image from Flekristal Flex UI skin. You can see that the window behind this presentation is Flex Builder that has my presentation project files open. I plan to switch back and forth between presentation and Flex Builder to show the code behind.

Oh, and I am going to start out with this energizing beat called “Bamboo Banga” by M.I.A. for the folks that want to get some mu shu out of it.

Related Posts

]]> http://randomfractals.com/blog/2008/01/27/my-air-flair-and-some-link-drops/feed/ 0