QueTwo's Blog

thouoghts on telecommunications, programming, education and technology

Monthly Archives: October 2008

Flash Player 10 and Flex!

,,,,

So, you now know that Flash Player 10 has been released, and all the goodies that come with it, like 3D support, and the ability to work with files locally (without involving a remote server)…  But how do use Flex to program against it, and use these new features?

You really have three options right now —

1.  You can wait for the update to Flex Builder 3, or purchase Flex 4 (Gumbo) when it comes out.

2.  You can use Flash Player CS4.  Yeah, my thoughts exactly.

3.  You can update your copy of Flex Builder 3, and setup a copy of the SDK that includes support for FP10.

While option 1 isn’t available yet, and option 2 is for Flash heads, option 3 is a pretty easy and viable option.  Below is the directions on how I did it :

  1. Close Flex Builder, if it is already running. 
  2. Download a version of the Flex SDK that has FP10 support.  You can grab a copy at: http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+3.  You will want the "Adobe Flex SDK", as it includes copies of the Debug Flash player.  I used the
    3.2.0.3794  version, but any version after that should be OK to use.
  3. Extract the SDK into a new folder within your frameworks directory. For a default install on Windows, this directory is : C:\Program Files\Adobe\Flex Builder 3\sdks.  I extracted the contents of the SDK ZIP file to the C:\Program Files\Adobe\Flex Builder 3\sdks\3.2.0-fp10\ directory.
  4. Modify the sdk config file to force Flex Builder to force the compiler to use FP 10, instead of FP9.  You can download my manifest file here.  This should be in the "frameworks" directory within the file you just extracted.  If you don’t use the download, you need to replace the {targetPlayerMajorVersion} macros in the file with 10.
  5. Install Flash Player 10 Debug edition on your PC, if you haven’t already.  You can grab the latest version at : http://www.adobe.com/support/flashplayer/downloads.html
  6. Launch Flex Builder. 
  7. Either open an existing Flex Builder project, or make a new one.  The settings of the project don’t really matter.
  8. Right click on this project name, in the Project Explorer, and go to properties.  Go to the Flex Compiler page.
  9. Click on the "Configure Flex SDKs" link on the upper-right corner of the screen.
  10. Click on "Add…" button to add a new SDK.
  11. Select the location of the SDK you just unzipped.  Give the SDK any name that you choose — I used "3.2.0-Flash 10".  This item will appear in the drop-down list on the SDK Compilers screen.
  12. Click OK. You are all set to use the new features!

With this new SDK now installed, and the FP 10 features at your finger tips (and intellisence too!), you just need to instruct Flex Builder to use this new SDK, and to target FP10.

  1. Open the project you wish to target to FP10, (and use its new features).
  2. Right click on the project name, in the Project Explorer, and go to Properties.  Click on the Flex Compiler Page.
  3. Select the "3.2.0 – Flash 10" option from the "use a specific SDK version" drop-down.
  4. In the "Require Flash Player Version" option, make sure you enter a version greater than or equal to 10.0.0.  Click OK
  5. You should be all set!  The nice thing is that if you no longer want to target the newest version, you can just switch these two options back to their defaults!

Looking for a quick and easy project to test some of the features of FP10?   I’ve gone one right here (with the source view turned on, so you can download it and play with it yourself!).

Flash Player 10 – 3D Text Demo

Enjoy your new toys!!

Mandel Brots In Flex

,,,,,,,

Sample #3 is a bit more complex than the last two, but just as fun.  This application is a renderer of the Julia Mandel Brot set.  You know those patterns that you can keep zooming in, and zooming in to get really neat repeating, yet seemingly random patterns? Yeah, this lets you play with them. Again, the view source is available by right clicking on the app, and going to View Source.

The app itself, has a few controls on the bottom of the screen.  The most important one is the "Generate" button which will generate a set at the (-2,1) , (-1,1) set.  From there you can draw a box on the screen to zoom in, or Control-Click to zoom out.  You can control the colors by the three horizontal slider controls at the bottom.  They are in the order of Red, Green, Blue, and will cause the value to increase by the number that you selected for each iteration (making the color more intense as it gets to infinity).  Black in this application designates an infinite number.   Finally, to the right there is a stepper that will allow you to set the number of iterations that each pixel is tested for to see if it gets closer to infinity. Each additional test will make the render slower, but it will make the drawing more accurate and crisp.

This application is to showcase some internal event handling, such as the mousing control, and how to use the ENTER_FRAME event to split up complex functions so that Flash can take care of housekeeping items while your function runs (like updating graphics, or changing the mouse cursor).  Another thing that is showcased in this app is the ability for a user to split up their components and make them extensible — for example in this app, you can download the source and input in your own formula (via the getCycles(…) function) to get other patterns.  Wikipedia is a great source for additional mathematical patterns you can generate.

The hardest thing about this app that layed me up for a few days was the zoom-in function.  For some odd reason I was having a real hard time with the different planes having different numbering schemes (pixels -> r).  Once it clicked, it was much easier than it should have been :)

Have a suggestion for the next sample??  I need some ideas.  I like working on these samples every so often, as it lets me play with the side of Flex and Flash that I never play with in my day job.  I’m starting to tire of the math examples, but if you have a compelling one, I’m up for it :)

Colorful Tree Fractals in Flex

,,,,,,,

So, in my continuing series of simple Flex examples, I am posting an example of how to build mathematically generated Fractals. In this app, we have a button, a color picker, a numeric stepper, and of course, our friend the Canvas.

To use the example, choose a “trunk” color from the color picker, and click somewhere in the Canvas (which is pretty much the entire stage).  It will call a function that will draw the tree. This function is iterative, meaning it calls itself over and over again to create the proper number of branches, etc.  At each iteration, it will also make the color more ‘green’, and the line weight one pixel smaller.  We pass in a few seed variables to get it started, including an initial direction (pointing straight up), the initial color, and an X and Y coordinate to start at.  The last variable we pass in also dictates how think the trunk should be (and therefore setting how many iterations deep the function should go).

Again, you can view 100% of the source code of this application by clicking on the image above and running the app, right clicking, and going to View Source.  I encourage comments on the example and code — let me know if this is useful at all!  This app should be a good example on some of the math and graphics functions in Flex.  There is also a demonstration on how to break up an RGB value and modify it programmatically, in addition to recursive functions.

Hope you have fun, and enjoy!   I think I only have one more example based on math stuff, so if that bores you, there is other cool stuff to come!

Edit:  Be careful with the "trunk size" or the number of iterations. Slower PC’s have a hard time with numbers larger than 10. Only choose a number > 13 if you have a really slick pc.

Conway’s Game of Life in Flex

,,,,

So, over the past few months, I’ve collected a rather large set of examples that I have used in various classes, presentations and how-tos.  They’ve been sitting on my hard drive, rotting for the most part, so I’ve decided to post them on my blog. 

All the examples that I will be posting over the next few weeks (as I get time to clean them up and make them pretty) have the "Right-Click -> View Source" enabled. I encourage you to download the samples and play with them.  I’ve opened up the licensing on them so you can pretty much whatever you want with them (although, if I see my name in a book, or credit in a cool applicaiton, I might giggle like a school girl) :)

The first example I’m posting is a "Life Simulator".  It’s not as cool as it sounds, but it is based on the 1970’s works of the British mathematician John Horton Conway. His game (the Game of Life) is one of the best-known examples of cellular automation. 

Conway's Game of Life -- Click to Play

It is also considered a "zero player" game. You set up the seed of the game (by hitting Randomize), and then watch it go (watching it go, means starting the timer).  The cells will follow the rules of the game and show their results on the screen.  The rules, as per this wikipedia article state :

The universe of the Game of Life is an infinite two-dimensional orthogonal grid of square cells, each of which is in one of two possible states, live or dead. Every cell interacts with its eight neighbours, which are the cells that are directly horizontally, vertically, or diagonally adjacent. At each step in time, the following transitions occur:

  1. Any live cell with fewer than two live neighbours dies, as if by loneliness.
  2. Any live cell with more than three live neighbours dies, as if by overcrowding.
  3. Any live cell with two or three live neighbours lives, unchanged, to the next generation.
  4. Any dead cell with exactly three live neighbours comes to life.

This example shows how to use some of the basic "native" graphics capabilities in Flex, how to extend a component to make your own, and a good example of the seperation of the business layer and the display layer (the model is baked into the business layer in this example because of its simplicity).

Check it out and let me know what you think!!

Follow

Get every new post delivered to your Inbox.

Join 27 other followers