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 :)
Friday, May 2, 2008
Friday, March 14, 2008
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?
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?
Thursday, March 6, 2008
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.
/***************************************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.
Tuesday, February 12, 2008
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;
}
Thursday, October 4, 2007
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
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
Tuesday, August 21, 2007
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
Monday, August 20, 2007
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
Wednesday, August 8, 2007
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 :)
Tuesday, July 24, 2007
My first feel of Adobe Flash CS3
Today i got a chance to get a feel of the latest version of flash - Adobe Flash CS3. It took a lot of time to install the application compared to flash 8. Once done i was really eager to use it.
This is just my first feel of Flash CS3. The support of AS3.0 will be a gift for flash developers who turned to flex. Is Flash CS3 the straight competitor for Flex 3 :). Now it will be a tough time for Silverlight. Lets wait n watch
- The first thing i noticed is the "TOOLBOX" in which all the tools are single lined, which can be toggled to the old way (double lined).
- Then i noticed the way all the panels are arranged. It was amazing. The panels can be grouped with or separated from each other (fig fl9.1)
- The coolest feature i see in this release is that you can skin the components in no time. Just double click on the component, the EDIT mode of that component movieclip will be opened up and you will see all the UI of the component for all the states. So you can directly change the skin from here.
- Then i thought i should do a sample application. So i placed a button component on the stage and added the AS 3.0. I added the following snippet
import flash.events.MouseEvent;
clickme_btn.addEventListener(MouseEvent.CLICK,clickHandler);
function clickHandler(event:MouseEvent):void{trace("You clicked me");}
clickme_btn.addEventListener(MouseEvent.CLICK,clickHandler);
function clickHandler(event:MouseEvent):void{trace("You clicked me");}
When i run the application my attention turned to the output panel and compile errors panel, which is being combined with properties,filters,parameters panel.
- Then i thought of checking how the compiler errors are thrown, i made a syntax error at
clickme_btn.adEventListener(MouseEvent.CLICK,clickHandler);
To my surprise the button component which was placed on the stage collapsed (fig fl9.2). This is the first bug i came across in Flash CS3.
- The compiler errors was good to watch. This kind of interface will not be new for flex developers. The error thrown is now more specific. For the above code i got an error
1061: Call to a possibly undefined method adEventListener through a reference with static type fl.controls:Button
And at the bottom of the panel you will see a "Go to source" button which will take you to the line of the code where you made the mistake. This will add more value for the developers while debugging the application.
fig fl9.1 fig fl9.2
This is just my first feel of Flash CS3. The support of AS3.0 will be a gift for flash developers who turned to flex. Is Flash CS3 the straight competitor for Flex 3 :). Now it will be a tough time for Silverlight. Lets wait n watch
Sunday, July 15, 2007
I turned into a component developer
Now i am a component developer :). It took two years for me get into this. I was never intrested in doing this. But today i was forced(requested) to create a component, and it was a good one.
Now i firmly believe that a good Actionscript programmer should be able to develop components. Developing a component actually increases the programming skill. A good component has its own requirements.
1. It should be loosely coupled. The member variables and methods has to be encapsulated. Not all the varialbes can be exposed. The developer has to identify the right set of variables for exposing
2. The component should be re-usable at any point of time.
3. Should use getters and setters option. The member variables in the component should not be direct exposed. It has to be exposed through the get and set keywords
eg:
private var _age:Number
private function set age(val:Number):void
{
_age = val;
}
private function get age(val:Number):void
{
return _age;
}
The above code is self explanatory. Instead of exposing the variable _age directly, we are using setters and getters for variable age which directly affets _age.
4. A good component should allow the user to capture the changes that is happening in it. This can be achieved through Event metatag and dispatchEvent method.
To dispatch an event use dispatchEvent(new Event("click"));
If you are trying to dispatch a custom event you should use metatag
eg:
[Event(name="modified",type="flash.event.Event")]
5. If you are developing a flash component, it should allow the user to customize through component inspector
These are the main services a component should provide.
To get more information about the component development check here
Now i firmly believe that a good Actionscript programmer should be able to develop components. Developing a component actually increases the programming skill. A good component has its own requirements.
1. It should be loosely coupled. The member variables and methods has to be encapsulated. Not all the varialbes can be exposed. The developer has to identify the right set of variables for exposing
2. The component should be re-usable at any point of time.
3. Should use getters and setters option. The member variables in the component should not be direct exposed. It has to be exposed through the get and set keywords
eg:
private var _age:Number
private function set age(val:Number):void
{
_age = val;
}
private function get age(val:Number):void
{
return _age;
}
The above code is self explanatory. Instead of exposing the variable _age directly, we are using setters and getters for variable age which directly affets _age.
4. A good component should allow the user to capture the changes that is happening in it. This can be achieved through Event metatag and dispatchEvent method.
To dispatch an event use dispatchEvent(new Event("click"));
If you are trying to dispatch a custom event you should use metatag
eg:
[Event(name="modified",type="flash.event.Event")]
5. If you are developing a flash component, it should allow the user to customize through component inspector
These are the main services a component should provide.
To get more information about the component development check here
Subscribe to:
Posts (Atom)