Flash, Flex and ActionScript

Adobe Catalyst - Preview

noreply@blogger.com (OmPrakash Muppirala) — Thu, 08 Jan 2009 20:12:00 +0000

Here is a session MAX 2008 session from Adobe TV that talks about the basics of Adobe Catalyst. This is a very exciting new technology from Adobe that attempts to bridge the gap between designers and developers using Adobe Flex at the core.

How to restrict the Backslash(\) character

noreply@blogger.com (OmPrakash Muppirala) — Sat, 08 Mar 2008 02:07:00 +0000

In ActionScript, if you want to restrict the characters that can be entered into a TextField (or TextInput), you use the restrict property. Check here for documentation.

For example, input_txt.restrict = "A-Z";
This restricts the characters to upperspace characters and disallows everything else.

And input_txt.restrict = "^0-9";
The ^ symbol indicates that whatever comes after that is disallowed. Here, the numbers 0 to 9 are not allowed, everything else is allowed.

The interesting part is what if you want to restrict the Backslash(\) character?

Apparently, the right way to do it is:
input_txt.restrict = "^\\\\";

Explanation?

From the livedocs documentation:
"You can use a backslash to enter a ^ or - verbatim. The accepted backslash sequences are \-, \^ or \\. The backslash must be an actual character in the string, so when specified in ActionScript, a double backslash must be used. "

So, the first two backslashes are as required, when you add the third backslash, the flex compiler thinks that you are trying to escape the " character. Hence you need the fourth backslash in the string.

Very interesting!

Shutterfly Gallery

noreply@blogger.com (OmPrakash Muppirala) — Fri, 08 Feb 2008 02:00:00 +0000

I have been working on the flash part of Shutterfly Gallery for the past few months. It went public today. Hence thought I'd promote it on my blog. The pictures were taken during my Seattle trip during 2008 New Year's. Head over here to see this photobook in more detail and for more such beautiful photobooks.

Click here to view this photo book.

Flex Builder on Linux! Rejoice!

noreply@blogger.com (OmPrakash Muppirala) — Wed, 12 Dec 2007 21:15:00 +0000

For a long time the Linux platform was completely ignored by Adobe. In the past, when rest of the world moved from Flash 7 to Flash 8, there was no Flash Player 8 for Linux at all. So, all the nice features that Flash 8 brought in (video, real time filters, etc.) were not available for Linux users. Ex. Youtube would not work on Linux. Linux users were definitely a frustrated lot! Imagine not being able to watch skateboarding dogs 'natively' on Linux :-)

Then Adobe declared that they are skipping Flash Player 8 for Linux and going for version 9 directly (it was called 8.5 for sometime). People were extremely unhappy and quite skeptical about this move.

Then in May of 2006, there was this post by Mike Melanson over at Adobe that changed everything. After months in development, Flash Player 9 for Linux was launched

Come October 2007, Adobe showed more love towards the Linux community by revealing their plans for Flex Builder running on Linux. Check out this cool video of the first sneak peek of Flex Builder on Linux (also taking a dig at vi and emacs while at it)

Well, enough of history for now. Lets get into the nitty gritty of Flex Builder on Linux. You can download the alpha version here. It is available only as a plug-in, which means that you need to have Eclipse already installed on your machine. Go ahead try it out. It is definitely better than your vi/emacs/gedit, etc :-)

The official story is that this release is supported only on SuSE, RedHat and Ubuntu flavors of Linux. I installed mine on Fedora and it works perfectly fine! I also copied over an existing project from my Windows machine over and opened it with it. I was pleasantly surprised that it opened without any issues. I could compile the project and debug it just fine.

A few details that you need to know:
1. It has a number of features from Flex Builder 3 (which is available as beta here, only for Windows though). But Adobe says that these two products are NOT the same and that they will have separate timelines.

2. It does not 'yet' support the cooler features in Flex Builder 2 such as Design View, States View, Refactoring(FB3), etc. Also, the part that I was most interested in - Adobe AIR support is not in yet. I hope they fit in somehow soon.

On a personal note, I have never had Linux as my development machine. I never had the right tools on Linux. Now that Flex Builder is available on Linux, I might give it a try for a few days. I am sure there are bugs and issues around, I hope to provide feedback as I keep working on it... Still, the features like refactoring, Adobe AIR support are very important to me. I think I will stick to my beloved Windows box for now :-)

Bug in Flex mxmlc Compiler?

noreply@blogger.com (OmPrakash Muppirala) — Tue, 19 Jun 2007 19:18:00 +0000

Flex Ant is a tool to build Flex projects using Ant. You can automate builds by using these Ant scripts. I've recently started using it and it works great! Except for one little thing.

In every Flex project there is a folder: html-template. This folder contains all the templates required to create the html wrappers around the out .swf that the Flex project creates. The most important file is index.template.html.

For example, if your index.html (the wrapper for index.swf) needs to contain a few javascript functions, all you do is add those functions in index.template.html. Then, every time you compile your Flex project, the new index.html is generated from the index.template.html file. Pretty neat!

But, when you want to do this with Flex Ant and the mxmlc compiler, no matter what customizations you do in index.template.hml, they do not appear in the output index.html file. Apparently, the command line mxmlc compiler does not look at the index.template.html file when its building the index.html file. I have searched all the documentation, but there is no way to specify which template file to use while compiling (there IS a 'template' attribute, but is for determining flash-client install options, history management, etc.)

So, the only workaround for this is to hard code the javascript functions in index.html and check them into version control. And not generating the html in the ant process.

If you anyone knows how to do this, please post a comment. That would be a very useful thing.

Relative paths for embedded images

noreply@blogger.com (OmPrakash Muppirala) — Tue, 08 May 2007 19:43:00 +0000

I was having a lot of problems with embedding images into my classes which were in nested packages. After a lot of head breaking and googling, I found an elegant method to solve this issue. There is some discussion about this problem here. The solutions given there do not exactly solve the problem, but it definitely made me think in the right way.

Anyways, here is the problem and the solution:

If you want to embed images into your icons or for any other purposes, you use something like this:

[Embed(source="sourcepath")]

Now, if you have a complex project structure like this:

Project
..assets
....images
....styles
..src
....com
......companyname
........projectname
..........ui
............MyClass.cs
............MyComponent.mxml
...........
...........
...........

Now, if your MyClass.cs uses an Embed tag, you have a few options.

1. Use an absolute path
Ex.: [Embed(source="C:/Documents and Settings/computername/My Documents/Flex Builder 2/projectname/assets/images/icon.jpg")]

Of course, this is not an elegant solution. And also, if you have a team of developers working with this project, each person has to change the path everytime they check out their code. This is definitely NOT acceptable.

2. Use a complex relative path
Ex. [Embed(source="../../../../../../../../icon.jpg")]

Does this work? Yes, but is it an elegant solution? Of course not. This is not readable at all.
And btw, what happens if you decide to refactor your project? You need to go and change the path in each and every instance of the Embed directive. Not such a good option.

3. Now, there is another option that works very well and is quite elegant too. i.e. use the forward slash(/) operator to indicate the root. But what is root in this project? Apparently, the Flex compiler considers the 'main source folder' to be the root. Hence when you say '/', you are actually referring to the 'Main source folder' (which you can set in Project>Properties>Flex Build Path>Main source folder), which in most cases would be set as the 'src' folder.

So, all you have to do then is this:
[Embed(source="/../assets/images/icon.jpg")]

Here you are first accessing the root, i.e. the 'src' folder, go one level up, and then give the path of the image, that is assets/images/icon.jpg.

You can use the same exact path anywhere in your package hierarchy.

Flash, Flex and ActionScript

noreply@blogger.com (OmPrakash Muppirala) — Wed, 25 Apr 2007 22:53:00 +0000

Hello world!

I am a long time Flash/ActionScript developer. I currently work as a software developer in the Bay Area.

Having recently started working full time with Flex 2 and ActionScript 3, I have been facing a number of issues while trying to get things done. Many a time, a blog post by some Flex developer somewhere in the world explaining how he/she solved a particular problem has helped me a lot.

The same way, I am going to start posting about how I solved certain issues/challenges while working with Flex. Also, I will be posting about unsolved issues that I cant figure out solutions for; hopefully someone would respond :-)