Wednesday, December 9, 2009

Aviary Design Apps

Impressive use of the Flash Platform for an impressive set of applications http://aviary.com/tools.

Image Editor - Phoenix : http://aviary.com/tools/phoenix

Image Mark up tool - Falcon : http://aviary.com/tools/falcon . Use it along with the Firefox extension Talon

Effects Editor - Peacock : http://aviary.com/tools/peacock

Vector Editor - Raven : http://aviary.com/tools/raven

Audio Mixer - Myna : http://aviary.com/tools/myna

Colour Swatch / Palette Editor - Toucan : http://aviary.com/tools/toucan

Follow Aviary blog at http://aviary.com/blog

Founders of Aviary also created http://www.worth1000.com/ , a community site for digital artists to participate in daily contests.

Saturday, December 5, 2009

How to render transparent png images in IE6 with AlphaImageLoader filter

It’s a well documented fact that IE6 does not render transparent png images properly. You would see a greyish patch in place of the transparent areas .For instance if you had the following div tag

<div id=’layer_with_transparency’>inner html</div>

and its associated style was

#layer_with_transparency
{
background-image:url(‘images/transparent_bg.png’);
}


you’d end up with problems while viewing the page on IE6.

To fix the problem, make use of the AlphaImageLoader Filter http://msdn.microsoft.com/en-us/library/ms532969(VS.85).aspx from Microsoft.
The css for this filter would be
 filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,src='images/transparent_bg.png’, sizingMethod='scale');

To make IE6 alone use this filter, use the underscore format so that the later version of Internet Explorer ignore the filter style specs.
The final css would take the form

#layer_with_transparency
{
background-image:url(‘images/transparent_bg.png’);/* style for IE6 fix */
_background-image:none ; /* remove the above bg image as we are going to use the filter */
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, src='images/transparent_bg.png’, sizingMethod='scale'); /* use the filter for transparency support in IE6 */
}

Sunday, November 29, 2009

Tuesday, November 17, 2009

Glimmer: Visual jQuery Design Tool

Glimmer is a free interactive design tool to create jQuery effects and interactivity for your web pages.

The installer for Glimmer can be downloaded from http://code.msdn.microsoft.com/glimmer/Release/ProjectReleases.aspx?ReleaseId=2578

Glimmer offers a few options for applying jQuery effects. You can use one of the wizards like image sequencer, drop-down, etc or open up an existing file and apply custom jQuery actions from scratch.

Official Glimmer samples can be downloaded from http://mschannel9.vo.msecnd.net/o9/mix/labs/glimmer/glimmersamples.zip

I found this tool thanks to this post http://www.techsutram.com/2009/03/glimmer-jquery-designer.html

Silex : Open Source Flash CMS

Silex is an open source Flash CMS that lets you create flash web sites .

It comes with a WYSIWYG editor and the ability to target different versions of flash – version 7, 8, 9 and 10 are supported.

What I liked about the application is that the site you create can be made SEO-ready with deep links.

Download Silex from : http://sourceforge.net/projects/silex/files/

The installer comes with a set of templates to get you started and additional templates/ themes can be downloaded from http://silex-ria.org/?/themes/

The developer API can be found at http://silex-ria.org/api-v1/

The documentation for Silex can be found at http://silex-ria.org/?/help/#/documentation/home .
I must warn you though; some of the content (tutorials) is still in French. Here is a forum in English that might be of help http://silex.hoyau.info/forum_en/

Monday, November 9, 2009

Sunday, November 8, 2009

Adobe BrowserLab : Web page testing tool

I had recently posted about two services that allow you test how your web pages render in various popular browsers http://ravindrabharathi.blogspot.com/2009/10/tools-for-testing-browser-compatibilty.html.

BrowserLab is a similar service fro Adobe with several Browser - Operating System combinations.

Thursday, November 5, 2009

Sunday, November 1, 2009

Applying TextFormat in AS3

Let’s say you wanted to apply a TextFormat to a TextField with the setTextFormat method and you script the following code in AS3

var t:TextField=new TextField();
var tf:TextFormat=new TextFormat();
tf.font="Verdana";
tf.size=24;
tf.bold=true;
tf.color=0xff0000;
t.width=160;
t.setTextFormat(tf);
t.text="test text";


To your surprise, the resultant text does not get the textFormat you applied. The result is




Do not panic. Just swap the last two lines of code like below.

var t:TextField=new TextField();
var tf:TextFormat=new TextFormat();
tf.font="Verdana";
tf.size=24;
tf.bold=true;
tf.color=0xff0000;
t.width=160;
t.text="test text";
t.setTextFormat(tf);


And everything’s fine.




If you were to set the text once again with, say, t.text=”Another text”, you should apply the desired TextFormat once again with the SetTextFormat method. This is because every time you set the ‘text’ property of a TextField, it is the DefaultTextFormat which will be applied.

In fact if you were doing quite a bit of text handling, you are better off setting the DefaultTextFormat of the TextField with the following code

t.defaultTextFormat=tf;