Finally…Support for Arabic in Adobe Flash CS5

Posted October 24th, 2010 in Flash by Nabil

Adobe released a powerful new text engine in Flash Player 10 called Text Layout Framework (TLF). At the time, there was no tooling support in Flash Professional to take advantage of it. In Flash CS5, however, there’s full support for easily doing things such as linked containers, multicolumn text, exotic ligatures, and enhanced support for languages such as Arabic and Japanese. Let’s take a tour of some of these new features.

To use that engine :
Create new ActionScript 3.0 Flash Document because the TLF is written entirely in ActionScript 3.
Select the Text tool (T) and drag out a new text field that fills the top half of the Stage. At the top of the Properties panel you’ll notice a pull-down menu that by default is set to TLF Text. If you don’t want to use the new text engine you can change this to Classic Text, which is the name for the old text engine. There’s some additional file size and overhead with using TLF, so if you need simple text, it’s better to stick to classic text.

Arabic Text

To use Arabic change the font to Adobe Arabic . Select Show Right-to-Left Options from the flyout menu at the top of the Properties panel. Now in the Paragraph section, you can change the Direction property to Right to Left.

Further Information

Go to Adobe Text Layout Framework Technology Center for features and tutorials.

Colorful Content Accordion, CSS & jQuery

Posted March 30th, 2010 in JQuery, demos by Nabil

This is an eye-catching accordion with the help of CSS, jQuery and the easing plug-in for some fancy effects.

Demo

Original Tutorial

ZURB Playground : A showcase of creative experiments and new ideas.

Posted December 16th, 2009 in demos by Nabil

Designers at ZURB have a creative ideas in there playground . I like there way of design its clean and simple.

Some of showcases at ZURP Playground:

Inline Form Labels

With some CSS tricks and a few lines of javascript we can create inline labels that don’t suck.


Simple Drop-In Modals

How to create a very simple modal element using CSS3 and a single line of javascript.


Newspaper Layouts with CSS Columns

Creating a newspaper-like layout is easy using the new CSS column elements.


Super Awesome Buttons with CSS3 and RGBa

Using a combination of CSS3 and new RGBa color values, we can create an easily scalable suite of awesome buttons, complete with gradient, drop shadow, and more.


Polaroid Images with Only CSS3

Using nothing more than a grid of linked images and CSS3, we echo the title text of our links and use CSS3 to create “randomly” tilted polaroid-style images.

Text to Speech via HTML5 Audio

Posted December 16th, 2009 in HTML5 by Nabil

Recently Google Translate announced the ability to hear translations into English spoken via text-to-speech (TTS).
Looking at the Firebug Net panel for where this TTS data was coming from,
I saw that the speech audio is in MP3 format and is queried via a
simple HTTP GET (REST) request:
http://translate.google.com/translate_tts?tl=en&q=text.
Google Translate notes
that the speech is “only available for short translations to English”, and it turns out
that the TTS web service is restricting the text to 100 characters.
Another restriction is that the service returns 404 Not Found if the request
includes a Referer header (presumably one that is not for translate.google.com).

In spite of the limitations of the web service which certainly reflect
the intention that the web service is only to be used by Google Translate,
thanks to the new HTML5′s Audio element and
rel=”noreferrer”,
the service may be utilized by client-side web applications like following (Google Chrome 4 recommended):

Here is a nice mashup that marries HTML5 Audio support in modern browsers with the new Google Translate API that does text to speech (for them) , also try French Ubiquity command.