29 November 2009

Flex UI design, skins, themes and tools

related post: flex components styling

If you ever wondered how to download Flex Style Explorer v3, one of the ways is to open link in a browser (IE) and search for specific swf in browser's cache folder. Now you can use Flex Style Explorer for making skins and themes. If you are interested to read more about this subject here is list of 15 Tutorials for Creating Skins and Themes (UI Design) in Flex.

You don't wanna anything to do with previous versions of Flex, then check this Introducing skinning in Flex 4 beta, written by Ryan Frishberg. More dev details on Flex 4 (Gumbo), advanced FXG and skinning at Andy Hulstkamp's blog.


Gumbo City Rating Demo

That's not all. Here is one small hidden treasure (at least for me :D) at Flexets, Flex Skinning resources. All of the Explorers like Flex 3 Charting Components Explorer, Custom Easing Explorer or Audio Visualization Explorer you can open in your browser and download for later use. Great.

*_*

25 November 2009

Playing online chess with a crazy bot

Adobe AIR application ChessJam is (no surprise) chess application which offers free playing of your favorite game with other enthusiasts around the globe right from your desktop. Visit and download ChessJam home page. Current application version is 2.1 and it brings some new features like multi-game support (up to 6 games), UI enhamcements, improved rating system etc.

You can read more about how this application is done in a post The making of ChessJam Flex/AIR + ColdFusion + LiveCycle DS = fun project! by author Greg Wilson. He reveals some of the code and application architecture used for making ChessJam.

Since this is commercial project they decided to buy third-party library for AI engine. I'm not totally convinced they did good job with it, as you can see from image below.

Adobe AIR chess application
Another thing I don't like about it is chat room within current game. Everyone can enter the game you're playing (no private game option) and watch game in progress. You get text notification about it "player238 is observing". Bad thing about it is you don't have an option not to see playing suggestions from others. That's very frustrating. Imagine real-world game where everyone is making comments about your next move, even worse in ChessJam you can't through at them angry, warning look!

Greg also mentioned in his post about more than 1000 users, but very often I'm lucky if I find anyone playing at all! That's it. Generally, I like the app and hope it will be even better in the future.


*_*

24 November 2009

Zen-coding: hi-speed HTML and CSS coding

I just wanted to mention excellent work of Sergey Chikuyonok, who developed a new speedy way of writing HTML code using CSS-like selector syntax. This is really great stuff every web developer should adopt. Take a look at presentation:





Already, plugins are available for few editor and for my favorite Aptana. Here is the instruction Using Zen Coding in Aptana/Eclipse.

*_*

17 November 2009

Simple Transparent AIR desktop ... thing

I read all those news about Adobe AIR and I check out new applications, even use few of them right now, but I haven't done much AIR coding myself. I wanted to change this sad fact and make my own 'hello world' AIR app, something very basic.

My reference was Adobe AIR for JavaScript developers, pocket guide. In this book, there is an example for hello world app using html page as content, but instead I wanted to include one of my previously made SWF files as main content, Windmill Simulation. Just as a test I'll take transparent background, so I need to modify my file a little bit, to remove gradient background and put new background behind controls.

AirWindmillSimulation.xml code:


<?xml version="1.0" encoding="utf-8" ?>
<application xmlns="http://ns.adobe.com/air/application/1.0">
<id>com.blogspot.flanture.AirWindmill</id>
<filename>WindmillSimulation</filename>
<name>Windmill Simulation</name>
<description>Desktop Windmill Simulation</description>
<version>1.0</version>

<initialWindow>
<content>AirWindmillSimulation.swf</content>
<title>Windmill Simulation</title>
<systemChrome>none</systemChrome>
<transparent>true</transparent>
<visible>true</visible>
<minimizable>false</minimizable>
<maximizable>false</maximizable>
<resizable>false</resizable>
</initialWindow>
</application>


I have SDK installed a long time ago and now all I have to do is type: adl airwindmillsimulation.xml within shell. Here is how it looks on my desktop, above Milky Way Center background.

adobe air application example
I need to change few more things so I can use this code in other projects, like drag and drop functionality and rezise feature. For 'hello world' - it's great!

*_*

05 November 2009

AS3.0 preloader part II : adding transparency

It occurred to me how it would be much better if loading bar and text field in as3.0 preloader from previous post change alpha during loading process. This is what I wanted to do: both elements (loading bar and text field) start with alpha zero, then it grows constantly to alpha 1 in a moment when 'percent' variable is 0.2 (which means loading bar is loaded 20%). After that alpha remains 1.0 until 'percent' is 0.8 and then starts to fade away so it has alpha 0.0 in a moment when loading is finished. Image explains this idea.


as3 preloader alpha hack

Code for this effect is simple one. Inside ProgressFunction add just few lines:


if (percent < 0.2) {
loadedTF.alpha = percent*5;
lBar.alpha = percent*5;
}
if (percent > 0.8) {
loadedTF.alpha = 1-(percent-0.8)*5;
lBar.alpha = 1-(percent-0.8)*5;
}

I'm not some math wizard, but this was really easy to conclude, I only had to draw the numbers on paper. So, it would be great if this works, but it doesn't. It needs one simple hack. Reason is this : as3.0 dynamic text field alpha hack . After I added blur filter to my text field everything worked, although I'm not quite OK with TF rendering quality.

*_*

03 November 2009

AS3.0 Flash Preloader With Moving TextField

This simple ActionScript3.0 preloader has two graphic elements, gradient filled loading bar and text field 'loadedTF'. Code contains two functions, progressFunction and completeFunction. Variable named 'percent' inside progressFunction can have values between 0.0 and 1.0. Since loading bar graphic width = 300 we use single line code:

loadedTF.x = percent * 300;

to move our text field along with loading bar, which we animate using scaleX property.

as3 flash preloader
Dummy page.swf which this preloader uses is small only 22kb, so in order to see preloader working you will have to use view - simulate download when you test preloader movie.

as3 flash preloader
If you have any questions, leave comment.


*_*

p.s. this is post number 200 !!!

 

template by blogger templates