Archive

Author Archive

Ellen’s iPhone Commercial

Haha “My fingers… are so much thicker than I remembered…”

This video was embedded using the YouTuber plugin by Roy Tanck. Adobe Flash Player is required to view the video.

Categories: General Tags:

Latest Flash & Flex Developer’s Magazine

May 5th, 2010 4 comments

In case anyone’s interested, the latest FFDM has been released.

Getting your hands on the PDF here:
http://download.ffdmag.com/en/ffdmag_03_2010.pdf

FFDM cover

;)

Categories: General Tags:

Flex 4 Auto-Resizeable TextArea Component

April 6th, 2010 29 comments

Sometimes I feel like a big dummy, especially when I spend a couple of hours trying to programmatically create an auto-resizeable TextArea in Flex 4.

There are several Flex 3 examples out there, some that call invalidateSize() and others that use methods in the mx_internal namespace for dynamically determining how many lines of text are displaying and resizing the component that way.

Nothing was working for me until I realized that Flex 4 has this functionality built right in! Of course…*bangs head on desk*.

The Spark version of the TextArea class has a “heightInLines” property which you can use to specify the height in lines (imagine that!?) of the component when not explicitly setting a “height” in pixels or a percentage. It turns out that you can set this property to NaN (or “Not A Number”), which then causes the component to resize itself automatically as the number of lines of text changes. Genius!

Remember, explicitly setting a height will prevent this action from working so use “minHeight” and “minWidth” instead to set the default starting size of the TextArea:

1
2
3
4
5
6
7
8
9
10
11
<?xml version="1.0" encoding="utf-8"?>
<s:Application 
	xmlns:fx="http://ns.adobe.com/mxml/2009" 
	xmlns:s="library://ns.adobe.com/flex/spark">
 
	<s:TextArea 
		id="resizeableTextArea"
		heightInLines="{NaN}"
		minHeight="50"/>
 
</s:Application>

Enjoy!

Categories: General Tags:

Flex 4 and Flash Builder 4 Released!

March 21st, 2010 16 comments

Not much else I can add…I’ve been working daily with Flex 4 for the past six months and I think it’s a major step forward in RIA.

Here’s the official announcement:

http://blogs.adobe.com/flex/archives/2010/03/flex_4_sdk_and_flash_builder_4.html

Categories: General Tags:

Flash Builder 4 Content-Assist / Code-Hint Bug

March 21st, 2010 13 comments

Working with a Beta anything can be frustrating at times ( read: a LOT of times). The Swiz Framework and Flash Builder 4 Beta have been no exception.

The latest issue I’ve stumbled upon was so frustrating I had to blog about it: the content assist (or code-hinting) in Flash Builder just seems to not work for some packages – most notably, the Flash packages.

After trying many different things, I finally discovered a message in the Adobe forums:

The latest builds of SDK 4.0 have been updated in preparation for including playerglobal.swc for Flash Player 10.1. Flash Builder Beta 2 can not find playerglobal.swc due to the addition of the {targetPlayerMinorVersion} variable found in the flex-config.xml file.

When using recent nightly SDKs with Flash Builder Beta 2, please modify them as follows:

1) Rename the folder <nightly sdk location>/frameworks/libs/player/10.0 to “10″
2) Edit the file <nightly sdk location>/frameworks/flex-config.xml and remove “.{targetPlayerMinorVersion}” and save

When you restart Flash Builder, we will now find a correct location for playerglobal.swc, allowing for code hints and many other features to work properly.

Jason San Jose
Quality Engineer, Flash Builder

There are a couple of instances of {targetPlayerMinorVersion} in the flex-config so remember to remove both.

My flash packages now show up again in the content-assist context menu and all is right with the world ;)

Categories: General Tags:

Adobe Flex 4.1 Language Reference

March 20th, 2010 70 comments

I had trouble locating the Flex 4 Beta Language Reference online today, although I had a location bookmarked (http://help.adobe.com/en_US/Flex/4.0/langref/), it no longer appears to work.

Figuring other folks may have a similar problem, I got a hold of the latest language reference (4.1.0.14883) and uploaded it to eonflex:

http://www.eonflex.com/flex/4.1/langref/package-summary.html

Here is the link to the Adobe Flex 4 LiveDocs also:

http://help.adobe.com/en_US/Flex/4.0/UsingSDK/index.html

I’ll update it as much as possible until Adobe publishes the reference permanently on their own.

Enjoy!

Categories: General Tags:

Building Swiz Framework from Github

March 13th, 2010 44 comments

Although you can easily just download the Swiz 1.0 Beta SWC (above), you can also check-out the project from github (the Swiz repository) into Flex Builder and build it yourself.

To do so (from scratch), try out these steps:

Install EGit

Create Flex Library Project and import from github

  • In Flex Builder, right-click in the Navigator pane, and choose “New –> Flex Library Project”. Give it a name, something like “SwizFramework”
  • Click Finish
  • Right click on the newly created project, and select Import –> Git –> Git Repository
  • On the Swiz github page (http://github.com/swiz/swiz-framework, you’ll see a read-only URI to the repository: git://github.com/swiz/swiz-framework.git
  • Copy that link into “Source Git Repository” import window (URI field) that opened up in Flex Builder
  • The rest of the fields should auto-magically populate
  • Click Next to see the existing branches for this repo…just check the “master” and hit Next
  • In the Directory field, click Browse, and navigate to the “src” folder of the library project you just created
  • Uncheck the “Import projects after clone” checkbox and click Finish
  • The Swiz framework will be checked-out from github into your src folder
  • Right-click on the library project and choose properties
  • Access Flex Library Build Path from the left menu, then under “Main source folder”, click Browse and find the src folder within the code you just checked out from github. The path will probably be “src\swiz-framework\src”.
  • Now access “Flex Library Compiler” option from the left menu and add this to the “additional compiler arguments” field:

-keep-as3-metadata+=Inject,Autowire,Outject,Mediate,Dispatcher,PostConstruct

  • Right above that in the Namespace URL field, type “http://swiz.swizframework.org”
  • Underneath that, in the Manifest file field, Browse to the manifest.xml file that’s in your src folder and click OK

That’s it…now you can include this Library Project in any Flex project you may already have by adding it to the Library Path tab under the Flex Build Path property screen in your project’s Properties, or you can grab the newly compiled SWC from the framework project’s /bin folder if you need more portability.

Hopefully this process is relatively clear for those of you that need the latest up-to-the-minute version of Swiz ;)

Categories: Adobe Flex, Swiz Framework Tags:

Xuland on Facebook

March 4th, 2010 80 comments

My little Flex 4, Swiz and ColdFusion powered social networking experiment, Xuland, now has a Facebook “fan” page for anyone that’s uses that site (eh…what’s that site again…”facebook??”):

http://www.facebook.com/pages/Xuland/302813766356

I’ll periodically post updates (generally non-technical), screenshots and whatever else I can to keep anyone interested up-to-date. I think it’s a brilliant idea for a site, the design/UI is easy & clean and I think everyone’s going to like it.

A lot.

xuland

Categories: General, Xuland Tags:

Swiz Framework 1.0 BETA Released

March 3rd, 2010 9 comments

The latest and greatest release for the little-framework-that-could Swiz has finally been promoted to “BETA” status. Grab the SWC here: http://www.swizframework.org/files/swiz-v1.0.0-beta.swc. Read the full list of changes/additions here: http://swizframework.org/2010/03/swiz-1-0-0-beta-now-available/

I’ve been using the Swiz Framework for my Xuland project (still in development) for the last four months and have been quite happy with the tried-and-true 0.6.4 “pre-alpha” release. Even though the versioning of Swiz has been a hotly debated topic in the Swiz forums, I have felt through my own experiences with Swiz that 0.6.4 was as Production-ready as you could get.

Still I’m excited about the new things the Swiz team has introduced and decided today to catch up on all of the forum postings (http://groups.google.com/group/swiz-framework) and blog rolls.

If you’d like to learn how to check-out the project for yourself from github, see my article regarding Swiz here.

How to add a SWF to PowerPoint 2007

February 15th, 2010 16 comments

I was in the process of writing up a PowerPoint that discussed Flex 4 States, Styling & Skinning and merely wanted to add an example states SWF to the document (rather than switch out of PowerPoint during the presentation and over to a browser to view the example) and much to my dismay found out it wasn’t that easy!

After trying to figure it out myself through the tool, I eventually had to resort to several Google searches for my answer. I landed on this page tucked away deep in Microsoft’s Support libraries: http://support.microsoft.com/kb/291875, which reads:

PowerPoint 2007
Make sure that the Flash Player is installed on the computer. Then, follow these steps:

1. In PowerPoint, display in normal view the slide on which you want to play the animation.
2. Click the Microsoft Office Button, and then click PowerPoint Options.
3. Click Popular, and then click to select the Show Developer tab in the Ribbon check box under Top options for working with PowerPoint, and then click OK.
4. On the Developer tab, click More Controls in the Controls group.
5. In the list of controls, click Shockwave Flash Object, click OK, and then drag on the slide to draw the control.
6. Resize the control by dragging the sizing handles.
7. Right-click the Shockwave Flash Object, and then click Properties.
8. On the Alphabetic tab, click the Movie property.
9. In the value column (the blank cell next to Movie), type the full drive path, including the file name (for example, C\:MyFile.swf) or uniform resource locator (URL) to the Flash file that you want to play.

Make sure you resize the control to the visual layout of the embedded SWF (otherwise you’ll see some oddly colored “whitespace” around the SWF).

Anyway, I tried these steps and was successful. Hopefully this also saves someone else some time ;)

Categories: General Tags:

Flex 4 & ColdFusion 9 Remoting Recap

December 29th, 2009 27 comments

It’s been a couple of years since I worked with ColdFusion and Flex together, but I remember I always like the combination and chose it for my new little Xuland social networking project I’ve been working on (see previous posts).

I had to remember how the whole Flex-ColdFusion remoting setup would work again and I had to overcome a couple of hurdles. I thought I’d share the experience as it would have helped me get up to speed quickly.

Here’s a quick recap of setting up your Flex application to remote to ColdFusion:

  1. Install ColdFusion (I installed mine to the default C:\ColdFusion9 directory)
  2. In FlexBuilder, create a new Flex project
  3. While creating the project, select an Application server type of “ColdFusion” and check the “Use remote object access service” with the “ColdFusion Flash Remoting” option selected.
    .
    servertechnology
  4. On the next screen, in my case I’m using a Standalone installation and had to uncheck the “Use default location for local ColdFusion server”. Of course, the root folder was C:\ColdFusion9. I clicked Validate Configuration which validated that the root folder existed.
    .
    serverlocation
  5. I happen to use ColdFusion primarily for access to a MySQL datasource, so I had to setup the datasource in the ColdFusion admin first (this information should be readily available anywhere)
  6. Once the datasource was setup, I first created a value-object (VO) in ColdFusion to represent the object (in this case, a User) I wanted to pass back to the Flex application
    .
    UserVO.cfc:

    1
    2
    3
    4
    5
    
    <cfcomponent output="false" alias="com.xyz.coldfusion.vo.UserVO">
    	<cfproperty name="userID" type="numeric"/>
    	<cfproperty name="username" type="string"/>
    	<cfproperty name="password" type="string"/>
    </cfcomponent>
  7. After the VO, I created a data-access object (DAO) to query the datasource for a user and return a UserVO to the calling Flex application
    .

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    
    <cfcomponent output="yes">
    	<cffunction name="getUserByID" 
    		access="remote" 
    		returntype="com.xyz.coldfusion.vo.UserVO">
     
    		<cfargument name="userID" type="numeric" required="yes"> 
     
    		<cfquery name="getUser" datasource="xuland">
            	SELECT * 
    		FROM tblUsers
    		WHERE userID = '#userID#'
    		</cfquery>
     
    		<cfreturn getUser>
     
    	</cffunction>
    </cfcomponent>
  8. Back in the Flex project, I setup my RemoteObject tag to point towards the ColdFusion DAO component I created in the last step:
    .

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    
    <!-- Remote Services -->
    <mx:RemoteObject id="userService"
    	 destination="ColdFusion"
    	 source="com.xyz.coldfusion.dao.UserDAO"
    	 showBusyCursor="true">
     
    	<mx:method name="getUserByID" 
    		   result="resultHandler(event)" 
    		   fault="faultHandler(event)"/>
     
    </mx:RemoteObject>
  9. Create your result and fault handlers (here we just display an Alert)
    .

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    
    <fx:Script>
    	<![CDATA[
    		import mx.controls.Alert;
    		import mx.rpc.events.FaultEvent;
    		import mx.rpc.events.ResultEvent;
     
    		private function resultHandler( event : ResultEvent ) : void
    		{
    			Alert.show( event.result.toString() );
    		}
     
    		private function faultHandler( event : FaultEvent ) : void 
    		{
    			Alert.show( event.fault.faultString );
    		}
    	]]>
    </fx:Script>
  10. Finally create a button or method to call the service:
    .

    1
    
    <mx:Button click="userService.getUserByID( 1 )"/>
  11. Much of this logic may be abstracted off into controllers, delegates, commands or other framework-specific components but this is a fairly simple example of installing, configuring and executing a remote object service call from Flex to ColdFusion.

Categories: Adobe Flash, Adobe Flex, ColdFusion, Events Tags:

Adobe Flex 4 LiveDocs Documentation & Language Reference

December 29th, 2009 29 comments

At work, I wanted to review some information on the Adobe Flex 4 LiveDocs help documentation and had a lot of trouble finding it online.

Luckily at some point in the past, I managed to bookmark it at home and am reposting it here in case anyone else might be interested. Here is the link to the Flex 4 help documentation, which is a fantastic resource. I hope it comes in handy ;)

Adobe Flex 4 Documentation:

http://help.adobe.com/en_US/Flex/4.0/UsingSDK/index.html (PDF)

Flex 4 ActionScript Language Reference:

http://livedocs.adobe.com/flex/gumbo/langref/index.html

Download the trial copy of Flash Builder 4, read the above documentation and experiment by building your own test applications.

There are quite a few changes from Flex 3 to Flex 4 and the earlier you get acclimated to the new features, the better prepared you’ll be when the final product ships ;) Good luck!

Categories: Adobe Flash, Adobe Flex, Events Tags:

The Flex Chronicles Part 2 : Swiz Framework 1.0.0 alpha update

December 24th, 2009 2 comments

Just to re-cap my previous post on the subject: I started a new Flex 4 project (an experimental social networking app now entitled “Xuland“) using the Swiz framework and I must say I’m quite impressed with it thus far.

What suprised me however was the release of the latest version of the swc, 1.0.0 alpha last week! I had begun this project using the latest 0.6.4 swc (for Flex 4) and voila, just in time for Christmas, Ben Clinkinbeard issued a notice on the Swiz Framework google group (http://groups.google.com/group/swiz-framework) stating that the alpha had been released.

The new alpha contains a host of new features I’m excited to get my hands on (do other folks really get this excited about frameworks?):

  1. Autowire:
    New and improved. Works much like the mx:Binding tag in MXML and supports a new “destination” attribute
  2. Dot-notation:
    Autowire now supports dot-notation (someClass.someProperty) rather than the former “property” attribute
  3. Setter injection:
    Swiz now supports single argument setter injection
  4. Custom metadata processors:
    Umm, wow. Create your own Swiz [Metadata] annotations using Swiz’s reflection API…fantastic!
  5. VirtualBean:
    A new tag included with Swiz that allows you to “beanitize” (is that a word?) a property on another bean.

In upgrading Xuland to 1.0.0, I encountered an issue with the AbstractController class in Swiz, which is now missing. Granted this abstract class just allowed my service controller to call “executeServiceCall” directly, but since these are just wrappers around static methods in the main Swiz class, I figured I could just reference those methods directly from my controller but alas I cannot.

These methods are completely gone from this version of Swiz, as is SwizConfig!

I’m either stuck with staying with 0.6.4 or modifying the 1.0.0 version to add the functionality back in (so I can still continue development of Xuland) or wait until the Swiz team comes up with another release. $%@$!

I suppose I *could* update my Application to remove the reference to SwizConfig, then move the RemoteObject definitions from Beans.mxml to my controller classes, then remove the executeServiceCall’s.

I’ll re-post what I end up doing hopefully with some code samples for anyone out there that’s curious.

Kudos to the Swiz team and I hope they continue finding time for this semi-brutally simple micro-architecture. :)

Categories: Adobe Flex, Swiz Framework Tags:

The Flex Chronicles

November 7th, 2009 3 comments

Today I officially start coding a new Flex project. This isn’t associated with 24 Hour Fitness at all. It’s more or less a personal side project that, if I’m lucky, could actually turn into something at best. At worst, it would still be a great learning experience.

Our applications at 24 Hour Fitness are built on Flex 3 and Cairngorm (with a few tweaks). Although this has worked out just fine in the end, the roadmap to a finished product with Cairngorm was wrought with struggles.

We came up with a couple of different ways for a Cairngorm Command class to notify the View after execution. We originally had tried to decouple our components as much as possible by dispatching custom events to the parents, which in turn would dispatch a Cairngorm event to trigger some service call. This amounted to a lot of extra code and wiring that just made our applications more difficult to maintain.

We’ve moved off most of the logic contained in our Views to Commands, but there’s still more to go. Now we have hundreds of Commands, and many views that string together to support several different flows to our Application.

Needless to say, I’ve been looking for an easier alternative to Cairngorm and I’m willing to give a new framework a try.

“Swiz represents best practices learned from the top RIA developers at some of the best consulting firms in the industry, enabling Swiz to be simple, lightweight, and extremely productive.”

Sounds good to me! Thus, my new project – a Flex-based social networking site hopefully much different that anything else out there in Facebook-land, will be comprised of the following technologies and frameworks:

Flex 4 (currently in Beta 2)
Swiz Framework
ColdFusion 9
BlazeDS
MySQL 5 (or SQL Server 2008)

I went with ColdFusion primarily because I’ve worked with it quite a bit before and as a bonus, ColdFusion 9 comes bundled with BlazeDS! This combination, for me, provides the fastest route possible in achieving a finished product.

I’ll keep a running log here of my hurdles in creating this project and I’m excited to begin the adventure!

Categories: Adobe Flex, General, Swiz Framework Tags:

Senior Flex Programming Job Available (CA)

October 22nd, 2009 49 comments

I work for 24 Hour Fitness as a lead Flex analyst (“evangelist” I like to think) and recently a position has opened up for a Senior-level Flex developer.

We’re looking for someone with serious chops but we’re also not building any missile-defence applications so I invite anyone with intermediate to advanced level experience with Adobe Flex to apply. It’s a permanent-hire position, near the beach in northern San Diego county and a free gym membership comes with the package, of course!

If you’re interested, have excellent communicative abilities, and are comfortable in a team environment leading a hefty Flex project, feel free to contact me directly or apply through HotJobs: http://hotjobs.yahoo.com/job-J90XJB4407X

24 Hour Fitness

Thanks and good luck!

Categories: General Tags:

I want to go to MAX!

September 15th, 2009 9,344 comments

I want so desperately to visit Adobe MAX 2009 this year and unfortunately my company has put a freeze on the training budget for a while.

If anyone knows of a way to get me in (without holding open a “backdoor” like you used to do in movie theaters), then let me know!

Categories: General Tags:

Flex Sub-applications, Sandboxes & SWFLoader (Part 1)

August 18th, 2009 123 comments

A few months ago, I embarked on a project for 24 Hour Fitness that involved something I had only heard about at the 2008 Adobe MAX conference in San Francisco – “flex sub-applications”. There, I attended a lecture by Alex Harui on Flex Framework Features to Support Large Applications (listen to the lecture here on Adobe TV). I must admit the lecture had probably put many to sleep, but I was fascinated by the concept and to this day (granted, MAX was just a few months ago) I believe this will become a very important topic to many as the complexity and possibilities available in large-scale Adobe Flex applications becomes ever apparent.

For this reason, I appended a “Part 1″ to the title of this article as I don’t know if I can squeeze my experience with sub-applications into just one writing and I certainly plan in the coming months to venture even farther into these murky waters.

I think Alex’s main point behind his lecture was to unveil the new Marshall Plan bundled with Flex 3.2 (released during MAX). But before I can describe what the Marshall Plan is, it’s important to know why it came about.

Most applications you’ll ever build in Flex are probably on the smaller scale, ranging from anywhere between a few hundred kilobytes (final SWF size) to several megabytes of compiled Flex code (including the Flex framework). This doesn’t include embedded images or other assets which could dramatically increase that size (I typically try very hard NOT to embed assets to keep the final SWF as lean as possible). Some applications could be significantly larger, spanning hundreds or thousands of commands (if you use Cairngorm or other such MVC architecture), classes and MXML.

It’s always very important to understand that the entire application frame of your final SWF will be downloaded to the client in one shot. This could be a lengthy wait for some and the solution has always been to break up that large application into pieces, or “modules” that could be loaded and unloaded during runtime.

The possibility of caching some code in the client’s Flash Player for re-use by other applications was also created by using Runtime Shared Libraries (RSL’s). But because of “full class integration” (the ability to reference classes in the RSL by classname), the RSL must be compiled with the same version of Flex as the main application. RSL’s also have the disadvantage of not being unloadable. Once an RSL has been loaded at the onset of application startup, it’s there to stay.

Modules are another example of re-using functionality. Modules are collections of classes compiled into a SWF and are loaded by ModuleLoader. Classes in modules are not directly referenced by the main application. Instead both refer to a shared interface (IDataGrid, for example). This is called “partial class integration”. Modules can also be unloaded and removed from memory. Unfortunately because the main application and module share at least some assets, modules, too must be compiled by the same version of Flex as the main application.

Which brings us to a new concept called “sub-applications”, released as a part of Flex 3.2 in November, 2008 at Adobe’s MAX conference in San Francisco. Sub-applications have NO class integration, which is needed to support multi-versioning .

Sub-applications are completely individual, separate applications (identified by the root tag), compiled into a SWF that is loaded by a parent application through the SWFLoader component (you can also use Loader and added the loader object as a child to SWFLoader).

Previously, Flex 2 also supported the concept of sub-applications in that you could use SWFLoader to load another SWF application. You could even access properties in the sub-application from the main application using the SystemManager class. Unfortunately, Flex 2 was only able to load the sub-application into the same “SecurityDomain” (or sandbox) as the parent application. By playing in the same sandbox, the sub-application could have unrestricted access to variables in the main application…an unwanted side-effect especially if the sub-app is untrusted (say, written by a third-party).

With Flex 3.2, you have a little more control over how the sub-application SWF is loaded, primarily through two properties of SWFLoader. One is trustContent (which existed in Flex 2) and the other is loadForCompatibility (new as of Flex 3.2). And the changes in the Flex source code revolving around the new loadForCompatibility feature really serve as the basis for the new Marshall Plan.

The trustContent property specifies whether the sub-application is loaded into the same SecurityDomain as the host. This property is defaulted to false, which means SWF content loaded from separate domains (xyz.com instead of abc.com) will load without error if the separate domain does not have a crossdomain.xml policy file declaring that your domain has rights to access its content. This is preferred behavior, however your parent application would not be able to access the SWF content (via SWFLoader.content). This property is directly tied to the SWFLoader.loaderContext.securityDomain property and can also be set manually via ActionScript.

Setting trustContent to true is equivalent to copying the loaded SWF to your own server and loading it from there. This is one way to get around any security sandbox restrictions you might experience, however I also noticed that it also can cause other complications, most notably with singleton’s like Cairngorm’s ServiceLocator (which I’ll discuss in a later post).

The loadForCompatibility property specifies whether the sub-application is loaded into a peer ApplicationDomain as the parent (when set to true), or into a child ApplicationDomain (when set to false). This flag only pertains to applications loaded within the same SecurityDomain (if trustContent == true).

Child ApplicationDomains inherit classes from the parent (like UIComponent, Container, etc). This can cause obvious problems if both applications were compiled with different versions of Flex. A child sub-application written in Flex 3.2 may not wish to inherit the UIComponent definition of its parent application that was written in Flex 4. The loadForCompatibility flag forces SWFLoader to load the sub-application into a separate ApplicationDomain (when true) which keeps the definitions for these classes separate. This is most needed for multi-versioned applications. This flag should only be set to true if you know both applications will always be compiled with the same version of Flex.

In my next article, I’ll discuss some of the pitfalls I ran into with sub-applications and specifically, Cairngorm-based sub-applications. Stay tuned!

Categories: Adobe Flex Tags:

Flash Builder 4, Flex 4 SDK and Flash Catalyst Betas Released

June 2nd, 2009 85 comments

Yesterday Adobe announced the release of three public betas:

They previewed much of Flash Catalyst at 360Flex, San Jose and at Adobe MAX, San Francisco last year. In general, the design community is very excited about the possibility of blurring the lines between designer and developer. According to the Adobe AIR Team blog, Flash Catalyst is the “new interaction design tool for rapidly building application user interfaces without coding”.

I think it’s amazing! See for yourself with several Flash Catalyst demo’s on Adobe TV:

http://tv.adobe.com/#se+Flash%20Catalyst

Categories: General Tags:

Creating Flex Sequence Effects in ActionScript

May 13th, 2009 20 comments

I just started building a small administrative application and in addition to having the 24 Hour Fitness logo appear in the upper left-hand corner of the main Panel, I wanted to spice it up with a cutesy bounce effect.

At first, I created my own bounce effect by using the Sequence effect, shipped in the Flex SDK’s effects package (mx.effects.Sequence). The Sequence effect “plays multiple child effects one after the other, in the order in which they are added”. The sequence effect would combine a series of AnimateProperty effects (mx.effects.AnimateProperty) that would move the “y” value of an image from a starting y-position value to an end y-position value and then back and forth to simulate an object bouncing:

1
2
3
4
5
6
7
8
9
10
11
<!-- Define factory sequence class -->
<mx:Sequence id="bounceSeq">
	<mx:AnimateProperty property="y" fromValue="-70" toValue="45" duration="500"/>
	<mx:AnimateProperty property="y" fromValue="45" toValue="-35" duration="450"/>
	<mx:AnimateProperty property="y" fromValue="-35" toValue="35" duration="350"/>
	<mx:AnimateProperty property="y" fromValue="35" toValue="-15" duration="250"/>
	<mx:AnimateProperty property="y" fromValue="-15" toValue="30" duration="150"/>
	<mx:AnimateProperty property="y" fromValue="30" toValue="5" duration="150"/>
	<mx:AnimateProperty property="y" fromValue="5" toValue="25" duration="150"/>
	<mx:AnimateProperty property="y" fromValue="25" toValue="23" duration="150"/>
</mx:Sequence>

I gave the first fromValue a starting position of “-70″, which for this application meant the logo would first appear off-screen. But in the end, I had trouble configuring the values to make the bounce look right. I also had trouble moving the sequence component inside it’s own mxml class definition since flex effects aren’t listed as the typical UI Components used as mxml components.

So I decided to write an ActionScript version of a Sequence effect. It was then I discovered that Flex already had incorporated several easing behaviors into the effects package. Great news!

I set off to write a sequence effect class in ActionScript that incorporated the Move easing effect. The class was incredibly easy to write since the Sequence class itself contains only one method (initInstance). By overriding that method, creating a new Move easing effect and adding that object to as a child to the sequence, the bounce effect I was looking for was easily achieved:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
package 
{
	import mx.effects.IEffectInstance;
	import mx.effects.Move;
	import mx.effects.Sequence;
	import mx.effects.easing.*;
 
	/**
	 * Custom sequence to depict bounce effect
	 */
	public class Bounce extends Sequence
	{
		public function Bounce()
		{
			super();
		}
 
		override protected function initInstance( instance : IEffectInstance ) : void
		{
			//create new Move effect
			var _move : Move = new Move();
				_move.yBy = 92;  //specific to this particular example
				_move.duration = 2000; //in milliseconds
				_move.easingFunction = mx.effects.easing.Bounce.easeOut;
 
			//add Move effect as a child to this sequence
			this.addChild( _move );
 
			//call super to ensure parent's original logic is still executed
			super.initInstance( instance );
		}
	}
}

Now as you might have noticed, this sequence contains only one effect (Move), but multiple effects could be added easily to the method above by creating a new Effect and adding it as a child to the Sequence object.

The end result looks like this (click to restart animation):

Categories: Adobe Flex Tags:

How to disable all Firefox and I.E. plugins and add-ons

April 9th, 2009 4 comments

I think applications are complex enough without having to worry whether browser add-ons, plug-ins, toolbars or any other factors (like ServiceCapture) might be affecting our end-user experiences, testing, etc.

One way to dumb all that down to mitigate those effects might be to open up your Internet Explorer or Firefox browser in “safe mode”. Safe mode disables all add-ons and active-x controls from initializing on startup.

To Open Internet Explorer in Safe Mode:

Click Start –> All Programs –> Accessories –> System Tools –> Internet Explorer (No Add-ons)

To Open Firefox in Safe Mode:

Click Start –> All Programs –> Mozilla Firefox –> Mozilla Firefox (Safe Mode)

I found that you have to have all Firefox windows closed before opening up a new window in safe mode (not so in I.E.). But, once you do, you’ll see a preferences window open up where you can fine-tune your Firefox safe-mode settings:

Categories: General Tags: