judah’s blog

Don’t be hatin yall. I’m down. I’ve invested a lot of time and resources in my life into the Flash Platform for various reasons. I see a huge amount of appreciation for Flash in the consumer field (people love youtube, hulu, flash image galleries, etc) but in the tech field I still read comments and get the feeling there is some bitterness. Some friends included.

Here is why I develop for the Flash platform:
* WYSIWYG - What you see is what you get. Where I lay things out on the stage are exactly where they show up in the browser.
* Cross browser support - I only have to write one flash project and it runs the same and looks the same in IE, Firefox, Safari, Opera, etc. When I do HTML, CSS and JavaScript I shudder trying to get a design and behavior to work right in all browsers and in all versions. In fact I refuse to ever take on any HTML projects. To be balanced there are people who have mastered this art but at what cost?
* Easy animation, filters and effects - It’s easy to do animation, add special effects filters and effects.
* Flex Builder - There is an IDE called Flex Builder that makes development RAD (again). It is because of this software and the Flex SDK that I develop for the Flash player platform. In other fields outside of the Internet there are advanced RAD (Rapid Application Development) IDE’s that allow you to build sites and applications in a fraction of the time. Up until now there have been little that let you focus on making a great application. You would typically spend 10% of your time on the design, actually the normal amount of time on a design and then 90% more time getting it to work in and for all the various browsers. The problem being compounded every time a new browser version is released. This is called “compatibility”. Say it with me class. The Flex Builder IDE let’s me focus on my project instead of on making it work. As a creative type originally (we all are just admit it) that’s what I want.
* Icing on the Cake - These are the features that are icing on the cake, hd video (with support for mpeg4), audio (mp3), photoshop level graphic filters, vector graphic support, microphone streaming, webcam streaming, 3D (in version 10), place phone calls from your browser (see http://ribbit.com), AIR support that lets you take your web application / project to the desktop as a fully featured, first class citizen in a few minutes.

I like to be balanced in my assessment. I wouldn’t develop for the Flash Platform if it wasn’t for the quality of work in the Flex Builder IDE and the Flex SDK. Neither would millions of other developers.

But let’s be honest. Think about it. Are you or were you bitter about it? Has this changed? I’ll be honest, I didn’t like Adobe Acrobat until version 8 I think? Whenever they changed the interface and made it load faster. Now I don’t mind it. And for Flash, I will not make another “application” in the Flash IDE. I would use it only for animation and simple projects. Well, the new version of Flash (not out yet) is supposed to support inverse kinetics and 3D so we’ll see…

So is it because Flash has been used for ad’s? Is it because to create Flash content you need to purchase development software? Or because there has been no support for the back and forward buttons? Is it because the Linux version was always one version behind and had poor support?

Update! I hit a big issue this week. SEO or Search Engine Compatibility. The term SEO is used loosely to mean how friendly, accessible, compatible etc, is my site / data / application to the search engines which in turn results in how my site / application and site information / data is then found in those same search engines. Up to this point there have been a lot of valid SEO issues and hacks to work around these issues. Apparently, Google and Yahoo have both made changes to search inside of a swf and follow links. There is testing going on right now in the Flash / Flex community to see how well this works and if we have to follow a practice or if that matters.

I’ve been waiting for the new Flex 3 and Adobe AIR books for quite some time now. As I was browsing through my local Barnes and Noble I came across “Beginning Adobe AIR” by Rich Tretola. I checked the price and it cost more than the other books in the same category. I hesitated but then I thought about a conversation my previous boss and I had. The decision to buy books or software came down to a formula, “How much does it cost right now?” and “How much time will it save you?”. If you can prove to your boss / manager that a resource will save you time which will save them money then they are much more likely to purchase it.

For example, using this formula you could say that this book will give you back a theoretical $550 in the short term with possibly more in the long term. This is in exchange of $44 in the immediate. Does that make sense? It makes more sense as a consultant who bids on a project for a set amount. So for example, you or your boss bids a project at $5000. If buying a $44 book will save you 20 hours of research and you work at a rate of $30/hr you have just prevented spending ~$600.

If you could accurately estimate how much time a resource will save you you can use this formula to see how much that translates monetarily:

Total Return on Your Initial Investment = (Hourly Rate * Hours Saved) - Book Price;
Total ROI = ($30 an hr * 20 hr) - $44;
Total ROI = $600 - 44;
Total ROI = $556;

You spent $44 and because of the information you received you were able to get the project done sooner which works out to a figure of $556.

For me, if it saves me 1 hour of time, it has paid for itself. In addition to time, i benefit from someone else’s research and explanation of any issues I might encounter on my own. In a real world example, the book I purchased contained all the examples in an easy to find location. It saved me nearly 20 to 30 hours plus an unknown amount in the future.

The point of this post is to convey that even in a world with google, blogs, forums and online documentation having a good book with all the information in one place still has amazing potential and benefits.

Well, there is another point too. The second point is that if you need something at your job, software, books or any sort of resources, use the formula above to calculate the money it will save your company and then present that to your boss. When you show them the numbers you will be speaking their language.

Update: I don't know if this pattern is accurate. In my case it works but at any rate please post your comments.

I spent quite a lot of time on this today so I thought I'd post this for myself and others. I was pulling in an HTML page as XML and I wanted to get everything between a specific tag. With E4X this would be easy. But after numerous attempts with no results I ran the HTML through a validator in Dreamweaver and found out that it was "malformed" XML. So E4X was out of the question. Now I thought it would be easy to just use a RegExp pattern I found online but because of nested tags of the same name it was not able to handle this. I'm not an RegExp expert but I've been using them for as long as I can remember. So I finally found one online and in a program called RegExp Buddy. RegExp Buddy clearly showed me that the pattern wasn't finding a match because it was over multiple lines. After reading more about the dot metacharacter in RegExp buddy I came across this line, "The dot matches a single character, without caring what that character is. The only exception are newline characters. ". Now we are on to something. So I read further, "All regex flavors discussed here have an option to make the dot match all characters, including newlines. In all programming languages and regex libraries I know, activating single-line mode has no effect other than making the dot match newlines." Seemed simple enough. So once I enabled single-line mode the pattern found a match.

Here is the code I used to find the beginning and end of a specific tag. This is in ActionScript 3:

If there's another method please let me know.

A close friend of mine told me a few years ago to drop everything I was doing in Flash and switch to Flex. We talked about it for a few hours over the next couple of days. It took a few weeks of research and a lot of soul searching to risk dropping everything and get into Flex. It wasn't long before I came to the conclusion that this is where I wanted to be. It is now two years later. During that time I've surveyed the Flex landscape and I've come up with somethings I think you'll like.

This week only I'm having a special for a new software package I have creatively titled "A lot of Flex Stuff for an insane price". It contains well over $1200 worth of new Flex related components, classes and examples that I'm offering for $399 prerelease price. This includes the source code on these products. Why am I doing this? For the lulz. And for feedback and to get the word out there. Take a look at it and let me know. Flex Prerelease Sale .

PS If you figure out what the Data Component is then you will not wait on this offer.

Road Map for 2008

Q1
Release commercial versions of the beta components in the Flex Package
This pack includes the HTML Component with source code, Icon Component aka Status Indicator, Data Component, Date and Time Component, Countdown Component (people love these things), Label Component, Position Class (you know when you are trying to position something in the center of the screen or container or upper right hand corner of the screen or wherever, this helps you), Wordpress Header project for adding your own SWF to your Wordpress blog, CallLater class (when you want to call a function after a predetermined set of milliseconds), Contact Form project (a simple contact form for your website), etc. blah blah blah etc etc etc so on and so forth.

After Q1
More components - TBD, etc
Calligraphy CMS - A Flex based CMS to go along with the Data Component
Richer Text Editor for Flex - Think of the features you'd like, I'm pretty sure they are already planned...
Shopping Cart for Flex - Basic shopping cart class or component for use with PayPal.
AS3 Physics engine - Complex multipoint collision detection among other requested features in a physics engine...
Alarm Clock 2000 - A better Alarm Clock in my opinion
Time Tracker 2000 - Time Tracking Software
The Flex Foundation - A site that receives enough income from subscriptions to address the needs of the Flex community. This means that as income comes in then resources come out. These so called resources would be in the form of components, examples, live Flex help chat, moderated Flex forums, moderated Flex mailing lists (or help answering questions on FlexCoders), live chat and forum support on open source projects, patching and maintenance of open source projects, contributers to Flex documentation and more. Feedback and investors please contact me here at http://drumbeatinsight.com/contact.

I'd like to setup the Flex Foundation, physics engine and the Richer Text Editor so any investors will help speed up this project.

I have been looking at the projects Adobe has been working on to integrate Flash and Flex and I decided to write a guide for myself. I wrote this during the Flex 3 beta and updated it over the last few days. Even so there may be technical inaccuracies or missing content. I'd like to hear about those so I can make it more useful.

From the project

This guide will help you use the power and features of Flash within your Flex project. You will be creating a Flex Component from your Flash project.

Note: This information was compiled from the official documentation from Adobe. Please read the Adobe documentation preferably along with this guide.

I had put this together using the beta version of Flex Builder 3 so there may be technical inaccuracies or incomplete information. For others sake please add feedback, questions, comments etc here.

Finally, here is the link,
Flex Component Kit Docs

One of the things that was hard to wrap my head around when learning Flex was transitions. But they couldn't be simpler. Although this bug caused me to abandon them at first. Please vote for this bug to get fixed. Before we get into this article take a look at this site http://www.flexcapacitor.com/flashusers/. This site uses transitions and states. When you click on the links in the upper right hand corner you are taken from one state to another. As you move between each state you can see the transitions applied.

Before I go into how transitions work I want to share somethings I've learned about them. When your application uses states, I recommend that you create a new base state off of the master state and then add states to that. So your design one level deep and then the content two levels deep. This way you can very easily have different designs and layouts in the same application. This allows you also to transition in the first state and it will provide you with a few other benefits that you will notice as you work on your project.

So lets move on to the definition of transitions. Taken from the documentation:

The Transition class defines a set of effects that play in response to a change of the view state. While a view state definition defines how to change states, a transition defines the order in which visual changes occur during the state change.

To understand how transitions work you first need to understand how states work. Transitions define the animations or effects, the order of those animations and also the order of the changes that happen when switching between states.

So Flex allows you to define different states in your application. One state can have a graph and chart. Another state might remove that graph and chart and add a submission form. Each state definition instructs the framework with what to add, remove or change. With a state you define in mxml what changes from the base state. When you switch states the Flex framework handles applying those changes. Summarized from the documentation:

The State class defines a view state, a particular view of the Application or view of a component. You can only define states at the root of an application or a custom component, not on child controls. For example, the base state of the application could be the home page and include a logo, a sidebar, and some welcome content. When the user clicks a button in the sidebar, the application dynamically changes its appearance (its state), replacing the main content area with a purchase order form but leaving the logo and sidebar in place.

In Flex, you can add this kind of interactivity with view states and transitions. A view state is one of several views that you define for an application or a custom component. A transition is one or more effects grouped together to play when a view state changes. The purpose of a transition is to smooth the visual change from one state to the next.

You change view state by setting the currentState property to the id of the view state. When the state changes components are added or removed, properties and styles can change along with event handlers.

You use the "State" class in the "states" property of the Application class or custom component to define states. The State class defines all the actions that will change from the base state. This includes adding or removing components from the base view state, setting properties, setting styles or setting event handlers. In the transitions class you define the order of all of those actions. Transitions and states are very much interrelated. The changes that occur in the state are declared again in the transitions definition. If you do not apply a transition to a state the changes of that state are applied instantly and no transition occurs.

Lets look at example code:

You can have different transitions from different states. You use the toState and fromState properties of the Transition class to specify what states to apply the transition to. By default, both the fromState and toState properties are set to "*", meaning apply the transition from any state to any state.

You can use the fromState property to explicitly specify a view state that your are changing from, and the toState property to explicitly specify a view state that you are changing to. If a state change matches two transitions, the toState property takes precedence over the fromState property. If more than one transition match, Flex uses the first definition in the transition array.

With transitions you can specify to run the changes in Parallel or Sequence order. For example,

Parallel effects run in parallel. Sequence run in order one after another. Lets take a look at an example project. In this example we have two states...

(vote for this project in the comments)

Visit this page for the latest information on installing Subclipse in Flex Builder. This is mainly a post for a reference for myself later.
http://subclipse.tigris.org/install.html

1. Goto Help > Software Updates > Find and Install.
2. In the pop up window select "Search for new features to install."
3. click on the New Remote Site button
4. In the pop up window enter:
   
   Name: Subclipse 1.2.x (Eclipse 3.2+)
   
   URL: http://subclipse.tigris.org/update_1.2.x
   
   Click OK
5. Make sure the site you added is selected and click Finish.
6. The search results window will show you some products to install. Select Subclipse Plug in > Subclipse (version number here) and click Next
7. Accept any license agreements even if its power of attorney and click next.
8. The next window will show you the products to install. It should list Subclipse. Click Finish.
9. You may have a Verification window appear warning you about installing an unsigned feature. Go ahead and just click Install.
   You may be prompted to restart Flex Builder (Eclipse). Restart.
10. Finally, after restarting Eclipse, the first thing you will typically want to do is open the Subclipse Repository perspective where you can define your repositories. Be sure to also check the online help as well as the Subclipse preferences located under Team -> SVN.

Happy New Year! :)

UPDATE: The special is over but I have a new special being created right now. Please check it out at http://drumbeatinsight.com/super

As a holiday special I am putting the Label component up for free this month (January 2008). What is the Label? Well, its a Flex component that enhances all the other components in your app. Why is it free? One, I really like this component and want to see more people use it. Two, it makes increasing and decreasing text input fields (number fields) easy due to mouse wheel support, keyboard support and label drag / slider type support. And three, I think it will make Flex apps more professional over HTML forms. Whether you use all the features or not I think you will find something in it to like. Read more about it here, http://drumbeatinsight.com/label. Click download trial. Yes it says trial on the site but it is a full licensed copy you can use it in your commercial applications. You can get it now for free. Don't wait because after this month it will go back to regular price.

PS Some people have said this component was unintuitive blah blah blah. My response is that its an abstract component and you aren't used to it yet and don't know all the features it adds. It doesn't do much by it's self but it decorates the other components. BTW, this type of label is used in Adobe Photoshop and numerous popular Mac software. My suggestion is to just try it dudes. Put it in your application, setup the features you want to use and see if anyone (your clients and customers) notice.

PSS I try to keep this blog about Flash and Flex tutorials, tips and errors and will be back to those again soon.

Cheers,
Judah

I'm not sure if newer TV's have this feature yet, but I it would be nice to have an option or button to dim the brightness. I know that people leave tv on when they go to sleep or other times just to hear the news. Besides convenience I think it could also save power.

Can you imagine what it would be like to create a Flex, Flash AS3 or AIR app or game and distribute it on the PS3, 360 or Wii??? Or all three? Or all 6 when you include the PC, Mac and Linux.

I want to bring this to your attention because this is one of features being debated in the next version of AIR. Developing for these platforms opens up so many more opportunities. What would it be like to develop a game or application that will run on all systems? In addition, with network connection you could play the same game across multiple systems.

You can voice your opinion and vote on this issue here.
https://bugs.adobe.com/jira/browse/FB-11304

Please follow this link and click the VOTE link.

Note: Please vote for any other issues posted by a user named "boobiestar". ;)