Flex game for SEO contest

The flex game is open to all users...The URL for the game is http://labs.heymath.com/Fleximagically%20Searchable/...
The game is pretty straight forward. The term "Fleximagically searchable" is hidden in a set of images. The user has to find where the term is hidden within the time given. More the user plays the game, higher is the possibility of getting listed in the top 10 players.

Keeping my fingers crossed to see how google indexes the flash content :).

"Fleximagically Searchable" contest

Sometime back Ryan Stewart announced a Flex SEO contest  hoping that the community can learn the best way to expose data from a Flex application to search engines. Soon after the announcement came, my CTO Ananth was charged up to make use of this opportunity to create flex contents that are search engine friendly. So he urged my team mate Alagu (who is new to flex envi) to take part in the contest.

He took this as a challenge and started to learn flex and in a span of 25 days and he has completed a flex gaming application which is due for a public launch. The game follows the rules

• It has to be a Flex application


• “Fleximagically Searchable” must be dynamically loaded. It can’t be static text inside of your application. - But I don’t care how you load it, in fact that might make a difference in how Google ranks you.


• The first link must be deep linked directly into where you load “Fleximagically Searchable” into your application. Feel free to use any deep linking methods out there.


• Nothing in your code can dynamically load the phrase automatically. It has to be the result of a user interaction.


• You must provide source code and be willing to talk about exactly what you did.


• Multiple entries are allowed if you want to try different things.

The game has come out well in a short span of time. Soon i will post the URL for the game

Adobe Open Screen Project

Recently Adobe has announced that they are working on a revolutionary "Open Screen Project". This is a great news for flash developers in this planet. Open Screen Project enables developers and designers to publish their content across various devices like Mobile, Computers, Consoles, TV etc....

So it going to be "One Runtime....All Screens". This is clearly a sign of Adobe ruling the RIA world. Future of RIA looks exciting...Looking forward to this project :)

30onair at Chennai Flex User Group

March 1 2008 - Chennai Flex User Group officially launched Adobe AIR 1.0 and flex 3. The event was organized by Ananth and me, along with the support of John Koch. The event was scheduled for 11.00 am at HeyMath! office. Around 12 members from the group attended the launch event. The event was kicked off with a presentation by Kevin Lynch. The presentation was around 10-15 mins. After that it was time to distribute AIR t-shirts and Flex 2.0 text book to all the members. Thanks to Adobe for the support. Then we guys had discussions on Adobe technologies especially Flex and AIR. It was very very formal. Everyone had their chance to speak on it.
After the heated discussions we had snacks as refreshments. Thanks to HeyMath! for the support. As we reached the end of the event, we still haven't shoot the "30 sec on Adobe Technologies" video with the members. First to come up for the shoot was Sahil Haslani. He spoke about "Why Flex?" for 30 secs. Next it was my CTO Ananth, who initially took few minutes to think but came with a stunning explanation about "Why Adobe?". As usual he couldn't resist using the whiteboard :).
Next it was Viswanathan who spoke about "Why Flex?" and to follow him was my colleagues Umesh and Shankar

Anantharaman - 30onair - Why Adobe?


Sahil - 30onair - Why Flex?


Viswanathan - 30onair - Why Flex?



Umesh - 30onair - Why Adobe?




Sankar - 30onair - Why Adobe?

Create a table using CSS

Days back my colleague asked me to create a table without using <table> tag. So i did a small sample which uses CSS to create a table. Its pretty simple and straight forward. I have put down the HTML and CSS below

/***************************************HTML***********************************/
<html>
<head>
<link href="table.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="table">
<ul>
<li class="title">Player Name</li>
<li class="even">Sachin</li>
<li class="odd">Gilchrist</li>
<li class="even">Dhoni</li>
<li class="odd">Ponting</li>
</ul>
<ul>
<li class="title">Country</li>
<li class="even">India</li>
<li class="odd">Australia</li>
<li class="even">India</li>
<li class="odd">Australia</li>
</ul>
<ul>
<li class="title">Ranking</li>
<li class="even">1</li>
<li class="odd">2</li>
<li class="even">6</li>
<li class="odd">10</li>
</ul>
</div>
</body>
</html>


/************************************************table.css************************************/
.table
{
background:#333;

}
.table ul
{
float:left;
margin:0;
padding:0;
border:1px solid #C9C9C9;
}
.table ul li
{
list-style:none;
padding:5px 10px;
}
.table ul li.title
{
font-weight:bold;
background:#333;
color:#fff;
}
.table ul li.even
{
background:#fff
}
.table ul li.odd
{
background:#FFFFE6
}

Hope this helps css designers around.

Creating a curve through CSS (without using an image)

Few days back i was just browsing through one of the website casually, and one thing that drew my attention was the curve used in the website. Immediately i started to inspect the code and i was amazed to see that no images were used to create that curve. It was done purely through CSS. Then i spent few hours to learn the CSS trick and i prepared my own.

I have put my HTML code and the CSS that i created. I am sure that this will help the CSS designers around the world.

/****************************HTML code**************************************/

<html>
<head>
<link href="curvedbox.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="curvedBox">
<span>
<span class="r1" ></span>
<span class="r2" ></span>
<span class="r3" ></span>
<span class="r4" ></span>
</span>
<div class="content">
Flex is a cross-platform development framework for creating rich Internet applications (RIAs). Flex enables you to create expressive, high-performance applications that run identically on all major browsers and operating systems.
</div>
<span>
<span class="r4" ></span>
<span class="r3" ></span>
<span class="r2" ></span>
<span class="r1" ></span>
</span>
</div>
</body>
</html>

/**************************curvedbox.css*****************************************/

body {background-color:#000;}

.curvedBox
{
width:300px;
}
.curvedBox .r1, .curvedBox .r2, .curvedBox .r3, .curvedBox .r4
{
background-color:#fff;
display:block;
overflow:hidden;
height:1px;
font-size:1px;
}
.curvedBox .r2, .curvedBox .r3, .curvedBox .r4
{
border-width:0 1px;
border-left:1px solid #fff;
border-right:1px solid #fff;
}
.curvedBox .r1 {margin:0 6px;}
.curvedBox .r2 {margin:0 3px;}
.curvedBox .r3 {margin:0 2px;}
.curvedBox .r4 {margin:0 1px;height:2px;}

.curvedBox .content
{
background:#fff;
border-left:1px solid #fff;
border-right:1px solid #fff;
padding:0 5px;
}

Cross borwser compatiblity - some facts for web developer

I just came across some interesting facts for a web developer.

Internet Explorer(both IE 6 & IE 7) is being used by around 65% of the users, Where as firefox is being used by around 25% of the users, and the remaining percentage goes to browsers like Safari, opera....
So if you are a web developer you should be aware of these facts and the application you develop should atleast support IE and Firefox. You should test your application for these two major browsers which takes up 90% of the market.

And when we look at the Operating Systems usage, Windows dominates the market with around 95% of the users, remianing 5% is being shared by Mac and Linux. So it is not a harm if you neglect the testing for mac and linux.

When we look at the screen resolutions being used, 1024 x 768 takes up 50% of the users and the remaining percentage covers all other resolutions. So the application you develop should look good in all the screen resolutions.

For more precise stastical data look here

Number handling - Actionscript

Round a number to few decimal places:

To round a number to few decimal places use the following samples

Round to one decimal place
Math.round(35.2499 * 10) / 10 // returns 35.2

Round to two decimal place
Math.round(35.2499 * 100) / 100 // returns 35.25

Round to three decimal place
Math.round(35.2499 * 1000) / 1000 // returns 35.25

Round a number to the nearest multiple of an integer:

To round a number to nearest multiple of an integer use the following samples

Round a number to nearest multiple of 5
Math.round(35.2499 / 5) * 5 // returns 35

Round a number to nearest multiple of 10
Math.round(35.2499 / 10) * 10 // returns 40

Capture the end of audio play - onPlayStatus

Few days back i was working with playing FLV through RED5 server. I got everything right except for capturing the end of audio play. I was trying to capture the end of play through "Netsream.Play.Stop" event. But this event got trigerred during the middle of the play. So i was looking for other options for capturing the STOP event.

I came through a event called onPlayStatus which gets trigerred after the audio plays completely. The code is

ns.onPlayStatus = function(info:Object)
{
trace("End of audio play");
}

For more information about this event check here

Fixing the "base" attribute for Flash embedded in IE

Few days back my tech lead helped me to crack the problem of relative URL issue in embedding flash in HTML document. Normally if you embed a SWF file in a HTML document which is placed at different level of that SWF, and if you try to load external resources(image,swf) relative to the swf, then SWF will look for the resource relative to the HTML.

To solve this issue you should use base attribute in the EMBED tag. The base attrribute should point to the directory of SWF file. So once this is done, the SWF will load the external resources correctly.

And today when i checked this in great Internet Explorer, it didn't work. To be frank i was not stunned to see this. IE has always been a nightmare for the developers. Then i tried various workarounds. One workaround worked for me. IE doesn't compile the EMBED tag. It renders the output based on the OBJECT tag and the PARAM tag. So i added a new PARAM tag with NAME attribute as base and VALUE attribute points to the directory of SWF file.

So now i am a happy man :)