Tom Ortega II

Archive for the ‘Flash*Flex*AS’ Category

Future of ActionScript (via ECMAScript) and language talk

In Cell, Flash*Flex*AS, Playstation3, Programming, Technology and Software on October 30, 2007 at 4:47 pm

Josh wrote up a nice post on the proposed ECMAScript 4 language. He basically took the 40-page spec and ripped out the juicy parts for all to see.

It’s funny to me the path of languages. Every language evolves over time. This evolution includes supporting functions/classes that are found in older languages. These languages become all the rage, then become old and lose out to newer language upstarts. Those upstarts in turn then take the time to evolve and garner all the functionality of the older languages.

Granted, I’m simplifying things greatly. Sure each language brings something new to the table, lest why would we abandon the old ones to begin with? Things become faster and older concepts can be implemented in cooler, more efficient ways.

The things that I’ve been hearing lately is that horizontal scaling is becoming more important than vertical scaling. Meaning, instead of writing code that uses a processor at 100% for 1 second. You need to learn to write your code so that it can parse that work to 100 processors that take 10 milliseconds each to compute it’s part. That’s why I bought my PS3 last year. If life ever settles down long enough, I hope to be able to learn to how create apps that utilize all the cores in the Cell processor like the Interactive Ray Tracing (IRT) app. This youtube vid shows the IRT in action and visually shows each processor in use. Friggin’ sweet.

Yeah, Flash player is single threaded, but Flash/Flex ain’t everything, right? Plus, Adobe has smart folks. They’ll figure out something to utilize those multi-core processors out there, besides video encoding. 🙂

New Flex Blog to add to your Favorite Feed Reader

In Business, Flash*Flex*AS, Programming, Technology and Software, Workday on August 31, 2007 at 9:43 am

Workday UI Blog at http://workdayui.wordpress.com(feed)

As many of you know, I joined Workday, Inc. back in June. Many people have asked, “Where do you go after eBay?” Well, for this developer, it was a company that’s doing some crazy, exciting things with Flex. Workday is an ERP SaaS company. For our frontend, we use Flex.

The exciting thing is that Workday’s choice of Flex wasn’t on a whim. They specifically chose Flex because of the amazing things that Flex can do that traditional web apps cannot. Here’s our app in a nutshell. It’s a custom built Flex VM built atop of Cairngorm. A UI server sends us a view and a model, which we then render together on the fly. We, the developer, create low-level components that the application makers then use as building blocks for our products. Therefore, the things we do vary greatly from creating a custom component one day, to creating an effect on another or tracking a logic issue in Cairngorm. And I literally do mean day to day as those were my last 3 days. One thing you will never be at Workday is bored.

At eBay, my users were a group of 20. Here, it’s literally the entire company (138 people and still looking for more). I say that on two levels. First, it’s our HCM system. We use our product just like our customers to track employee data. Secondly, our products (HCM, Financials, Payroll, etc.) are built on inhouse tools. Those tools are the exact same system as the final product. There’s nothing more rewarding than walking around the office and seeing YOUR work on EVERY employee’s screen. It’s just awesome to know you empower not only end customers, but also your coworkers.

One thing Workday is looking to do is give back some of our knowledge and experiences back to the community. The way we will do that is by sharing items on the Workday UI Blog at http://workdayui.wordpress.com(feed). There you will find posts on hard hitting technical Flex issues such as Memory Leaks in Classes to lighter UI topics like Fun with Icons. The things we’re doing here are pretty amazing and I hope you follow along not only to learn from us, but to share your knowledge with us as well.

Saffron – My prayers have been answered

In 360Flex, Business, eBay, Flash*Flex*AS, Programming, Technology and Software on May 31, 2007 at 12:24 am

Ryan dropped a post on Saffron. Recently, I did a big write-up internally at eBay about a tool to help our XUNI development (Flex-based framework) go smoother when integrating with the Java folks.

In our current development cycle, I’d say 20 to 30% of our Flex dev time is building the actual Flex code for the UI parts, the remaining 80 to 70% is spent on integration. When you try to do concurrent development of the front and middle tiers, the part that suffers is communication and clarification of your data model. Let me show you the problem that we experience:

  1. Middle tier gives you a Transfer/Value Object (i.e. what gets sent from them to you that houses the data they have and you need) at the beginning of the project
  2. You (the flex peep) code to that object
  3. If you’re lucky, you get a stub web service call that sends you back one of these objects
  4. You test your code against the stub and tweak your code until it works perfectly
  5. Middle tier changes the object for justifiable reasons. However, due to schedule and delivery timeframe, they forget to inform you of the change and most definitely do not update the stub web service
  6. Integration testing comes and it doesn’t work obviously
  7. You tweak your code so it works with the new object
  8. After all integration bugs are solved, you hand it back to the Business Systems Analysts or user for a test run. They say the data is wrong and needs to change again
  9. Both you and the middle-tier folks make the changes and finally wrap up the project

Sound painful? Yes, it is. What would help is a tool that all parties (users, Business Systems Analysts, java devvers, Flex devvers, heck even QA) can use to visualize the data objects and spit out code for the front and middle tier developers to stay in sync with.

The parts of Saffron that I’m most excited about are:

  • Wireframe editor allows both developers and/or designers to create wireframes for their projects
  • Allows for Actionscript 2, Actionscript 3, PHP4 and Java Code generation directly from the app.
  • Enterprise level capability having the ability to support models with hundreds of classes without performance degradation
  • Integrated Version Control

I’ll admit that I don’t know Samuel Agesilas Paste personally, but if you do tell him to drop a line to info@360flex.com because the developer world needs him to speak about Saffron at our 360|Flex Conference in August!

Flash: Can get you rich and/or provide a better UI

In Business, Flash*Flex*AS, Programming, Technology and Software on May 30, 2007 at 10:10 pm

This is why I love the Flash platform. Jeff Atwood has two good posts (Yes, more Jeff, I tend to “catch up” on blogs when the post count gets high in the Google reader)

Post 1: How to Get Rich Programming

This is something that I hope to do someday. Hopefully, I’ll be as successful as Paul Preece with his Desktop Tower Defense. To be honest though, monetary success isn’t even a requirement. I’d be happy doing something like Snowcraft. That little game had me playing for hours back in the day, and still takes up too much of my time when I open it. (Yes, I realize that it was made with Director, but the same could be accomplished in Flash now.)

Flash is so incredibly good at creating fun little games. Heck, Flex can even let you build games as Joe’s Connect Four shows you. I think that’s why I like being a Flex programmer. While I may be programming “serious” apps during the day, I know that all that time put into coding is going to pay off someday. I’ll be playing with my boys and wham! Inspiration is gonna hit. I’ll quickly jot down the idea and all my flexy flashing knowledge will later help it take shape. Now, if I could just find where I last left inspiration.

Post 2: Zoomable Interfaces

This post deals with something that I’ve always felt is missing in UIs, zooming. I have to agree that it is by far the most intuitive thing to the human mind. We manually zoom to objects in our daily lives by walking up to them. Movies and photos all take advantage of zooming to play with our emotions. It’s just something we know intrinsically.

Adobe Lab’s JamJar app utilized zooming to create an ever expanding workspace. The best use case for this type of interface though is best explained in Aza’s talk at Google. He demos this little experiment that you should take for a spin. An hour into the talk is when he shows the tool. During the demo, he talks about how his dad was helping a company work with the medical field. Nurses were given a tool that let them zoom in and out from patient’s medical charts. When the zoomed in far enough, they were able to edit. It took the nurses 45 seconds to figure out how to use the system. That’s is sickly fast and all apps should dream of a 45 second learning curve. The nurses themselves then began thinking higher and said, “Don’t stop at just charts, zoom out to see the room, zoom out to see the ward, zoom out to see the floor, zoom out to see the hospital, zoom out to see the chain of hospitals.”

I’ve currently got two experiments going on in Flex. When I finish those two things, I’ll move onto a zoomable experiment. I can’t wait to do my take on this UI concept. If you know of other examples that use zoom very well, please post links in the comments so I can check them out.

HTML 5: Is this how Flex 4 will be made?

In Ajax, Flash*Flex*AS, Programming, Technology and Software on May 29, 2007 at 4:00 am

Ajaxian has started this monthly Ajax roundup. It’s a pretty good read, even if you’re not an Ajax developer. I’m a Flexer, so most of the news items aren’t relevant to my daily life, but I think it’s important to keep tabs on tech in general.

Kevin Yank, over at SitePoint, has an interesting post on the HTML 5 working group. HTML 5!? You ask/say in disbelief. Yeah, I was surprised to see it too. With Ajax and browser apps becoming more and more prevalent, this has got to be the toughest “release” of HTML to date. As Kevin notes, anyone can join the working group so if HTML gets you buzzing, head on over and join the HTML working group.

The part that I found most interesting in the post was the section entitled “HTML 5 Issues on the Table”. It talks about various different things that make me glad I don’t spend most of my days in HTML anymore. However, when I came across the “Extending HTML Semantics” item, I got a bit sad for being a straight Flex developer. Flex, while being incredibly powerful and easy to use, does have some major drawbacks: not easily searched and not being able to contribute to the semantic web.

Alas though, Flex 3+ will be open-sourced. Now we, who care about semantics and crazy items like that, will be able to help make them a reality in future Flex releases. Right? I don’t know, but I’m hoping so.

Will we have working groups for Flex 3.x and Flex 4? Will these working groups be open to the public? Or will they be “invite only”? Will we have committees on topics like Logging, Unit Testing, Charting, Semantics, Styles, Component Library, etc? Or will there just be two committees: ActionScript and MXML. I don’t know. I sure hope we find out soon though.

I think that’s why the Open-Source announcement hasn’t whet my appetite yet. Yeah, an open Bug Base is nice…but I need a little more meat before I can take a bite.

Flex Component Kit: Step by Step

In Flash*Flex*AS, Programming, Technology and Software on May 1, 2007 at 3:22 am

I’ll show you step by step how this new kit works.

Now, I know all the hype about Open Source has everyone’s attention. However, the Flex Component Kit for Flash CS3 is the bigger news in my opinion. It’s going to take some time before we see the fruits of the Open Source project. The kit, however, is going to deliver some beautiful eye-candy, very quickly. Everyone needs to give a big thanks to Glenn Ruehle (Glenn, start a blog!) and Ely Greenfield for making this wonderful little tool. Now, you can see Glenn give a nice demo of this here, and you should watch it cuz Glenn can deliver himself a mean connecto (breezo). You can also read the instructions that come with the kit, and you should cuz it makes things clear. However, if you don’t want to do either, here’s a little step by step with screenshots and SWFs to help you understand.

First and foremost you need to install Flash CS3, the Flex Component Kit and prep Flex Builder. Go check out the Labs site for that info.

We’re eventually going to build this simple app. As you can see, it’s just a simple ball component that grows and shrinks. Now, the neat thing here is that you’re not just going to be building and seeing the finished product. You’re going to be seeing the various levels of the kit. You’ll come to see how labels become states, how animations become transitions and how the boundingBox works and why. The beauty and true power of the kit is not clear until you see AND understand all those pieces.

The path I’m taking is complete newbie on both Flash CS3 and Flex Builder 2. Each step has a number, the app to use, a corresponding image and a series of substeps. The image is to help you visualize the substeps and has red “highlights” to show emphasis.

Warning: This little experiment is not for the faint of heart. It is quite lengthy. I promise though, by the time you’re done, you’ll know why the kit is so exciting. Sorry for the crappy Step 1.1 style. I wanted and wrote Step 1.A and so on, but WordPress doesn’t want to keep the Letter list type. Let’s get started.

Step 1: Draw the BlueBall
App: Flash CS3
Step 1 Image

  1. Switch to the Oval Tool (Top Red Rectangle on Tool Palette on Step 1 Image)
  2. Pick Black for the Stroke Color and Blue for the Fill Color. (Bottom Red Rectangle on Tool Palette on Step 1 Image)
  3. Draw a circle on stage. You can hold the “Shift” key down to maintain a perfect Circle. Make sure it’s big enough so you can shrink it later (Mine is 174 pixels)

Step 2: Convert drawing to symbol
App: Flash CS3
Step 2 Image

  1. Select the entire image and in the “Modify” menu, choose “Convert to Symbol…” (Top Red Shape on Step 2 Image)
  2. In “Convert to Symbol” dialog box, make sure “MoviClip” is selected and name the symbol “BlueBall”. Leave all other settings alone.
  3. Click “OK”. This adds the “BlueBall” symbol permanently to your library while leaving a “copy” of that symbol on the stage.

Step 3: Clear Stage and Create Empty BallComponent Symbol
App: Flash CS3
Step 3 Image

  1. After the symbol is created, select the blue ball on the stage canvas and delete it. The stage should be empty now. Note: This just deletes a “copy” of the symbol.
  2. Verify that the BlueBall symbol is in your library. (Lower Red Rectangle on Step 3 Image) If it’s not, start over.
  3. Now that the canvas is empty, in the “Insert” menu choose “New Symbol…”.
  4. This will open up the “Create New Symbol” dialog box.
  5. Name the new symbol “BallComponent”. Leave all other settings alone.
  6. Click “OK”. This adds the blank “BallComponent” symbol directly to your library.

Step 4: Add BlueBall to BallComponent
App: Flash CS3
Step 4 Image

  1. Click on “BlueBall” symbol in the “Library Panel”. (Small Red Rectangle on Step 4 Image)
  2. While still holding the mouse button down, drag the symbol onto the white canvas and release the mouse button. (Large Red Square on Step 4 Image)
  3. Drag the “BlueBall” symbol on the stage and move it towards the center of the canvas. (Red Arrow on Step 4 Image)
  4. Align the black cross-hair (aka plus sign aka registration point) of your “BlueBall” symbol to the cross-hair in the center of the stage. They should overlap completely and appear as one. (Small Red Square on Step 4 Image)

Flex expects the registration point to be the top-left corner of the component.

Step 5: Rename Layer and Add a Keyframe
App: Flash CS3
Step 5 Image

  1. In the timeline, double click the text “Layer 1” and replace it with “BlueBall”. (Red Rectangle on Step 5 Image)
  2. Right click on frame 25 for the “BlueBall” layer and pull up the pop up. (Red Square on Step 5 Image)
  3. Choose “Insert Keyframe”. Note: Be sure to choose correctly and do NOT choose “Insert Blank Keyframe”.

Step 6: Animate BlueBall
App: Flash CS3
Step 6 Image

  1. Verify you’re still on Frame 25, the pink playhead should be on Frame 25. (Check against Step 6 Image)
  2. Click on the “BlueBall” symbol on the canvas.
  3. Make sure “Constrain” is checked in Transform Panel. Note: If you do not see the Transform Panel, in the “Window” menu choose “Transform”.
  4. Change the value of the height or width from “100.0%” to “50.0%”. (Red Rectangle on Step 6 Image)
  5. Right click on Frame 24 or lower on the “BlueBall” layer and choose “Create Motion Tween”.

Step 7: Create Flex Project
App: Flex Builder 2
Step 7 Image

  1. From the File Menu choose “New” then “Flex Project”. (See Step 7 Image for visual aid)
  2. Select “Basic” for “How will your Flex App access data?”. (Top Red Square on Step 7 Image)
  3. Give “BallTest” as your project name. (Bottom Red Square on Step 7 Image)
  4. Write down the default location. It will be in the “Flex Builder 2” directory, which by default Flex Builder puts in your “Documents” (Mac) or “My Documents” (Windows).
  5. Click “Finish”. This will create then open up the BallTest.mxml file.

Step 8: Set Frame rate and Export BallComponent
App: Flash CS3
Step 8 Image

  1. Click on some white space on the canvas. (Small Upper Red Square on Step 8 Image)
  2. This will show the Document properties, which includes the Frame rate.
  3. Change the Frame rate from “12” to “24”. (Lower Red Rectangle on Step 8 Image)
  4. In the “Commands”menu, choose “Make Flex Component”. Note: This will add the UIComponent clip to your library.
  5. Right click on “BallComponent” in the Library Panel. Note: Do not right click on “BlueBall” in the library.
  6. In the pop up, choose “Export SWC File…”. Note: Popup is moved in Step 8 Image for demo purposes. (Red arrow from Library on Step 8 Image)
  7. Browse to your Flex Builder 2 “BallTest” directory and name the file “BallComponent.swc”. (Large Red Square on Step 8 Image)

Step 9: Modify Layout and Add 2 Buttons
App: Flex Builder 2
Step 9 Image
Step 9 SWF

  1. In the mx:Application tag, change the value of the layout property from “absolute” to “horizontal”.
  2. Add a button with the label property value of “Make Small”.
  3. Add a second button with the label property value of “Make Big”. (Finished code is visible on Step 9 Image)
  4. Run the application. (It should look like Step 9 SWF) The buttons don’t do anything yet and there’s no BallComponent.

Step 10: Add BallComponent.swc to BallTest Project
App: Flex Builder 2
Step 10 Image

  1. Right click on the BallTest Project folder in the Navigator Panel.
  2. Choose “Properties”.
  3. In the “Properties for BallTest”, choose the “Flex Build Path” on the side. Note: This is NOT the section open by default. (Big Red Square on Step 10 Image)
  4. Click the “Add SWC…” button. (Small Red Rectangle on Step 10 Image)
  5. Browse to the “BallTest” project directory and select “BallComponent.swc”
  6. Click “OK”.

Step 11: Add BallComponent tag to BallTest Application
App: Flex Builder 2
Step 11 Image

Step 11 SWF

  1. Note: The one sad thing that images and text cannot show is how nice these next steps are. You can start to type “BallComponent” in the editor and it should create the following code for you.
  2. Add the: xmlns:local=”*” property to the application tag.
  3. Add the <local:BallComponent/> tag between the two buttons. (Added code is highlighted in blue on Step 11 Image)
  4. Run the application. (It should look like Step 11 SWF)

If you’ve made it down this far, congrats. This is where it starts to get fun! Yeah, it was pretty boring up to that point. Sorry, but it was needed so that we could have some files to work with. At this point in the project, we see how Flex auto loops the animation from Flash. The animation is of the ball shrinking, never growing. This is because we’re seeing frame 1 to frame 25, over and over. We also see how Flex is constantly updating the width of the BallComponent to match the constantly changing ball animation.

Step 12: Stopping the Loop
App: Flash CS3
Step 12 Image
Step 12 SWF

  1. Add a new layer to the BallComponent Timeline. (Click the icon in the Small Red Square on Step 12 Image)
  2. Rename the layer “ActionScript”. (See step 5A if you don’t remember how to rename a layer)
  3. Right click on Frame 1 in the ActionScript layer.
  4. Choose “Insert Keyframe”. (All the above steps on one half of Step 12 Image, all the below steps on the other half)
  5. Click on Frame 1, then in the “Window” menu choose “Actions”.
  6. Type the code: Stop();
  7. Close the “Actions” Panel.
  8. Re-export the BallComponent.swc to the BallTest Flex directory. (See steps 8.6 & 8.7 if you don’t remember how to export the component)
  9. Re-run the Flex Application. (It should look like Step 12 SWF)

When you build your Flex app this time, you’ll notice that the looping is gone. This is because we specifically added the code “Stop();” to Frame 1.

Step 13: Adding Flash Frame Labels
App: Flash CS3
Step 13 Image

  1. Add a new layer to the BallComponent Timeline. (See step 12.1 if you don’t remember how to add a new layer)
  2. Rename the layer “State Labels”. (See step 5.1 if you don’t remember how to rename a layer)
  3. Right click on Frame 1 in the State Labels layer.
  4. Choose “Insert Keyframe”.
  5. Click on Frame 1 in the State Labels layer.
  6. In the Properties Panel, make the Frame Label equal “big”. (Steps 13.3 to 13.6 on one half of Step 13 image)
  7. Right click on Frame 25 in the State Labels layer.
  8. Choose “Insert Keyframe”. (See steps 12.3 and 12.4 if you don’t remember how to add keyframes.)
  9. Click on Frame 25 in the State Labels layer.
  10. In the Properties Panel, make the Frame Label equal “small”. (Steps 13.7 to 13.10 on the other half of Step 13 image)
  11. Re-export the BallComponent.swc to the BallTest Flex directory. (See steps 8.6 & 8.7 if you don’t remember how to export the component)

Step 14: Using Labels as States in Flex
App: Flex Builder 2
Step 14 Image
Step 14 SWF

  1. Add the value “myFlashBall” to id property of the BallComponent tag.
  2. On the “Make Small” button, add this code to the click event: myFlashBall.currentState=’small’;
  3. On the “Make Big” button, add this code to the click event: myFlashBall.currentState=’big’;
  4. Re-run the Flex Application. (It should look like Step 14 SWF)

Playing with this SWF, you can see how the frame labels from Flash automatically turned into states in Flex for that component. No extra code needed from us to create those states. A Flash Frame Label = Flex Component State. We just point them out in our code. How sweet is that? Ah, but what about that animation we have on the timeline? Can’t we use that? We sure can.

Step 15: Adding transition labels
App: Flash CS3
Step 15 Image

  1. Add a new layer to the BallComponent Timeline. (See step 12.1 if you don’t remember how to add a new layer)
  2. Rename the layer “Transition Labels”. (See step 5.1 if you don’t remember how to rename a layer)
  3. Right click on Frame 1 in the Transition Labels layer.
  4. Choose “Insert Keyframe”.
  5. Click on Frame 1 in the Transition Labels layer.
  6. In the Properties Panel, make the Frame Label equal “big-small:start”. (Steps 15.3 to 15.6 on one half of Step 13 image)
  7. Right click on Frame 25 in the Transition Labels layer.
  8. Choose “Insert Keyframe”. (See steps 12.3 and 12.4 if you don’t remember how to add keyframes.)
  9. Click on Frame 25 in the Transition Labels layer.
  10. In the Properties Panel, make the Frame Label equal “big-small:end”. (Steps 15.7 to 15.10 on the other half of Step 13 image)
  11. Re-export the BallComponent.swc to the BallTest Flex directory. (See steps 8.6 & 8.7 if you don’t remember how to export the component)

Step 16: Adding transition code
App: Flex Builder 2
Step 16 SWF

  1. NO ADDITIONAL CODE!
  2. Re-run the Flex Application. (It should look like Step 16 SWF)

As you can see, just be adding another set of labels in Flash you automatically get transitions in Flex. This requires no other code input into the Flex file. As long as you follow the convention of: {StartingFrameLabel}-{EndingFrameLabel}:start and {StartingFrameLabel}-{EndingFrameLabel}:end. Not only that, but the Component Kit is smart enough to use one animation in two different directions (big to small and small to big). That, to me, is just pure genius.

This is because of how Flex tries to find transitions. From the docs, Flex searches for frame labels that match the view state change in the following order:

  1. currentViewState-destinationViewState (no wildcards)
  2. currentViewState-destinationViewState (reversed)
  3. *-destinationViewState
  4. *-destinationViewState (reversed)
  5. currentViewState-*
  6. currentViewState-* (reversed)
  7. *-*

You can swap out the term StartingFrameLabel for currentViewState and EndingFrameLabel for destinationViewState. Those terms make more sense to me since you have to add the “:start” and “:end” suffixes to the start frame and end frame, respectively.
There is only one thing left though; That is the auto resizing of the Flex component during Flash resizing animation. We want Flex to keep using the same width, regardless of state or transition.

Step 17: Adding a bounding box
App: Flash CS3
Step 17 Image

  1. Add a new layer to the BallComponent Timeline. (See step 12.1 if you don’t remember how to add a new layer)
  2. Rename the layer “BoundingBox”. (See step 5.1 if you don’t remember how to rename a layer)
  3. Click on any frame in the BoundingBox layer.
  4. Choose the rectangle tool. (Wide Red Rectangle on Tools Panel on Step 17 Image)
  5. Find Stroke Color and Fill Color. (Tall Red Rectangle on Tools Panel on Step 17 Image)
  6. Choose “Black” as the Stroke color and make the Fill Color is the white box with red strike, i.e. “invisible”. (Follow the colors on Step 17 Image )
  7. Draw a square that is the size and height you want your Flex component.
  8. Select the entire BoundingBox image and in the “Modify” menu, choose “Convert to Symbol…”. (Note: Make sure you only have the box selected and not the blue ball.)
  9. After the symbol is created, click on it.
  10. Type “boundingBox” as the Instance name. (See Small Red Box at bottom of Step 17 Image)
  11. Re-export the BallComponent.swc to the BallTest Flex directory. (See steps 8.6 & 8.7 if you don’t remember how to export the component)

Step 18: Adding boundingBox code
App: Flex Builder 2
Step 18 SWF

  1. NO ADDITIONAL CODE!
  2. Re-run the Flex Application. (It should look like Step 18 SWF)

The reason why you don’t need any additional code in your Flex file is because again of the kit. Flex will look for a movieclip with the name of “boundingBox”. When it finds it, then it uses that as the set width and height of your application.

I hope this post turns out to be helpful for those who are wondering about the kit. I can’t wait to try some more advanced stuff with the kit. When I do, I’ll post them here to my blog as well.

For those who want the “Solution” code, here is a zip of the completed Flash CS 3 fla file and the completed Flex Builder 2 Project.

Flash Exodus is over.

In Flash*Flex*AS, flex training, Programming, Technology and Software on April 18, 2007 at 9:54 am

I just saw a demo of the new Flash CS3 and Flex 2 integration. I was a flash guy, strictly for RIA stuff back in the day. I left the timeline behind though and never looked back when Flex came out. After what I saw today though, I’ll be returning to the promise land. Timelines will once again fill my screen

Flash components are full class citizens in Flex. You just set the registration point to 0,0, i.e. top left corne. You can then add properties and events inside of Flash, do a quick little export ditty, and their available in Flex for you to access and do as you bid. The export process from Flash creates a swc that you add to your project property. Once added, it becomes available to you like any other component. Flash Frame Labels auto equal Flex States. Tweens can then map to transitions. It’s amazing.

I’ll be sure to share the connect recording of this at my next Silvafug meeting on May 10th. Flash/Flex Integration AND Doug McCune yapping about building crazy custom components! You gotta be there! =)

ASDoc: What comments get used and where do they go?

In Flash*Flex*AS, Programming on April 5, 2007 at 3:36 pm

Josh Buhler was tweeting about ASDoc on Twitter. ASDoc is a little rough to get going, mainly because it’s command-line driven (unless you use Farata Systems Eclipse plugin). I’m not going to get into syntax and such in this post. Instead, Josh wanted a sneak peak at the two files I have on my hard drive. I reckoned if he wanted a peek, some other ASDoc’r would too. Therefore, I’m posting it here for all to view.

What is it?

Basically, the zip has two files of code: 1 mxml file (MXMLTest.mxml) and 1 AS file (ASTest.as). There’s no real code in these files, but there are ASDocs in em. Some start “Used:” while others start with “Ignored:”. The point is to see which ASDoc tags get used and which ones get ignored depending on their location in each of the file types. I keep this posted on my wall and if I have a question, I can glance at them and see when and were to add an ASDoc.

The zip also has the compiled ASDoc output in the ASDocTest folder. To view the output, just unzip the folder and double click the index.html in the ASDocTest folder. Then open to .mxml and .as files in FlexBuilder to see which tags show up in which places.

If you have any questions, let me know. The zip file can be found here: http://360flex.com/downloads/ASDocTest.zip

Note on June 23, 2008: The ASDocTest.zip file has been reuploaded.  Sorry for the inconvenience.

Adobe: Google’s Best Kept Secret Enemy

In Business, Flash*Flex*AS, Technology and Software on April 2, 2007 at 8:49 am

Everyone has been blogging and hyping the Adobe vs. Microsoft feud. The real power struggle is actually between Adobe and Google. I know this may sound a bit farfetched, but I think I have some valid points that prove my case.

Flex vs Google Web Toolkit (GWT)

Both are aimed at Java Programmers. Regardless of your thoughts on Java, you can’t deny the numbers. Thousands of enterprises have deployed this technology and therefore, there are A LOT of developers in the Java space. As Bruce Eckel pointed out, Java has not provided a nice way to deliver Rich Internet Applications on the web and that’s where Flex and GWT come in.

Both tools facilitate a simple framework to build dynamic web apps, but utilize different output formats. Flex spits out a swf file that runs in the Flash Player. GWT spits out AJAX code that runs in a browser. Both claim to eliminate the need to program for different browsers, a bane that turns off a lot of non-web developers. Whose version will Java developers buy? I don’t know, but whoever wins this battle will pull ahead in the enterprise space as all the Java-heads will preach that technology solution to those who sign their paychecks.

Apollo vs Firefox (via Netscape)

Both will perform a lot of the same functionality in the future. Google has the main Firefox guys on their payroll and obviously Adobe has the Apollo guys on theirs. What’s funny (in a weird way, not the “ha, ha” way) is how both companies can thank Netscape for their platforms. Netscape took Macromedia’s cash back in the day to include a new plug-in called the Flash Player, while Firefox got its first start toward the end of Netscape’s brief life.

Netscape publicly announced that it was going to take on Microsoft and win. This did do two things though: made Microsoft play catch-up (i.e. asked Macromedia if it could include the Flash Player too) and accelerated the browser as a platform (via the browser wars). Unfortunately, you shouldn’t challenge a giant until you know you can win, Netscape missed that somehow.

Now, both of these technologies are fixin’ to deliver on the timeless promise of a “Write Once, Deploy Anywhere” platform. Firefox wants you to program for its platform and Apollo wants you to build on theirs. Apollo will let you do Flash (Flex), HTML (AJAX) and PDF with any mix in between. Firefox will let you build apps on their platform frameworks such as XULRunner, XPCOM, etc. I’m fairly certain that a future version of GWT will likely support exporting code to the XUL platform. It would only make sense.

The holy grail is both technologies support the 3 big OSes: Windows, Mac and Linux. There’s one big difference to this support though. Adobe wants the OS to stick around, their tools depend on them. Google, however, does not and that leads me to my last point.

Desktop vs Nettop

One day, and sooner rather than later, Google wants the desktop to die. They want the world’s computers to run on their NetOS. I’m not here to speculate exactly what that entails, but let’s look at their profit model. The more time you spend online, the more money they make.

Adobe, however, have tools that run on OSes. They make money off these tools (Photoshop, Flash IDE, Flex Builder, Acrobat Professional, etc.) and they give away the runtimes that deploy content built with their tools (Acrobat Reader, Flash Player, Apollo, etc.) They don’t want the desktop to die anytime soon. In fact, if you look, Adobe seems to be trying to expand its tools to support all 3 major OSes.

Final Thoughts

As you can see, Adobe and Google are squarely pitted against one another. The only problem is that they both share a common enemy: Microsoft, who is bigger and tougher than both of them combined. There’s an old saying, “Keep your allies close and your enemies closer.” While Adobe and Google both want to win this war, it seems they want to kill their common enemy first. However, if Microsoft was to pick up on this secret rivalry and bring it to the forefront, Microsoft could force everyone into a 3-way battle. The key question will be how resolved Google and Adobe are at taking Microsoft down. If Microsoft tries to turn the two against each other, will they be strong enough to resist the bait? If not, can Adobe and Google handle fighting two battle fronts? I don’t think they can. If the war between these two goes live and loud, I think Microsoft will have a better chance on trouncing both. I guess only time will tell what happens, but it’ll be an interesting war to track nonetheless.

My 360Flex Cairngorm Session – What do you want?

In 360Flex, eBay, Flash*Flex*AS, flex training, Programming, Technology and Software on March 2, 2007 at 6:04 am

Hi Folks,

I’m doing the Cairngorm Session on Monday and was wondering, what do you all want to hear? I have like a bazillion ways to take the talk. I’ll list a few, then you can choose. By all means however, post your own ideas if you would like.

Here’s my ideas, in random order with commentary :

  1. Straight up – This is Cairngorm
    This talk would cover what cairngorm is. No code other than the framework. I feel that this has been overdone, but I’ll do it y’all want.
  2. Simple App Gone Cairngorm
    It would be nice to see why you need Cairngorm. A lot of people get the idea of frameworks, but would be at a loss to convert their apps. I could take a simple app that has “gone ugly” and make it “frameworky pretty.” I could do a lot of pre/post Cairngorm code comparisons.
  3. Cairngorm @ eBay
    While technically, the talk will be @ eBay. I was thinking more along the lines of Cairngorm in action at eBay. I could show what we’re doing with Cairngorm inside eBay.
  4. eBay Pre/Post Cairngorm
    This would just be a mix of ideas 2 and 3 from above.

Those are the few paths I was thinking of taking. Please, please give me some feedback and let me know what you want. I don’t want the twitter chatter to be, “This dude is boring!”, ” We’ve heard this crap already!” or “This isn’t really very useful.”

Thanks in advance for your assistance.