Have a merry x-mas… compiz style

One of the cooler, lesser-known plugins for Compiz, xglsnow, was sadly left in the dust with the inclusion of Compiz Fusion into Ubuntu 7.10. That doesn’t mean, however, you can’t still get it working in time for the holiday season! Check out the video below to see the plugin in action.

Here is a screenshot of what it looks like on my machine:

Note: This tutorial assumes that you have Compiz or Compiz fusion setup already. If you don’t, however, try searching the forums– there is a huge number of guides floating around on getting Compiz running for different graphics cards.

Ready? Here goes…

I. Installing xglsnow

First, you need to install the necessary packages to build the plugin. Open up a console (alt+F2 -> “gnome-terminal”),
and type:

sudo apt-get install compiz-bcop compiz-dev build-essential libxcomposite-dev libpng12-dev libsm-dev libxrandr-dev libxdamage-dev libxinerama-dev libstartup-notification0-dev libgconf2-dev librsvg2-dev libdbus-1-dev libdbus-glib-1-dev libgnome-desktop-dev x11proto-scrnsaver-dev libxss-dev libxslt1-dev libtool

Create a directory in your home folder to install the plugin to:

mkdir -p ~/compiz/

Download xglsnow and extract it to the directory you just created:

wget -O /tmp/snow.tar.gz "http://gitweb.opencompositing.org/?p=fusion/plugins/snow;a=snapshot;h=01d0ff6ec71dae4699bc990e0114569c8ad4e083"

tar -xf "/tmp/snow.tar.gz" -C ~/compiz/

Finally, navigate to the directory, compile and install:

cd ~/compiz/snow

make
make install

Now you just need to install some textures, configure xgl, and you’re done!

*The above steps are based off a tutorial by Scott at the Compiz Fusion forums. Thanks!

II. Adding textures

The above tarball doesn’t include any snow textures, so by default all you would see are some floating white blocks… not very pretty… The package from the xglsnow homepage, however, includes a texture which looks pretty nice. To set it up, go to the xglsnow project homepage and download xglsnow-0.2.0.tar.gz. Extract the files, and copy the file “snowflake2.png” to any location you would like, e.g. ~/.compiz/images or /usr/share/images:

tar -xf xglsnow-0.2.0.tar.gz

cd xglsnow-0.2.0/

mkdir ~/.compiz/images

mv snowflake2.png ~/.compiz/images

If you haven’t already, restart Compiz to load the new plugin (alt+F2 -> “compiz –replace”) and run the Compiz settings manager: alt+F2 -> “ccsm”. Find the “Snow” plugin and check the box to the left of it to enable it.

Now click on the plugin’s name to modify its settings. Next go to “Textures” -> “add” -> “browse” (click the folder icon). Navigate to the location where you saved the texture from above and hit “okay.”

All done!

Press “Super + F3″ to start xgl snow. If you don’t see anything, check to make sure the the PNG plugin for compiz is enabled, and that the hotkey for xglsnow is in fact “super + F3.”

If you want to install some different snow textures, try the Snowflakes pack on Gnome-look.

III. Wallpapers

Finally, if you want to find some wintry wallpapers to go along with your new snow-covered desktop, take a look at Blue Christmas
from digital blasphemy (that is the one in the screenshot above). Gnome-art has a nice picture of a winter landscape in Alsace, France You can also find some winter wallpapers at Gnome-look and Kde-look.
Try searching for “winter” or “snow.”

That’s all!

Feel free to write any suggestions, or a link to a screenshot of your own holiday desktop

Getting started with Flex development, and why it’s worth learning

Why Flex?

Some of you may have already read
Pierre’s earlier post on Flex 2 where he demonstrated a simple “Hello World” type program using only a few lines of code. This is an example of one of the tasks Flex seems ideally suited for- developing (attractive) interfaces for web applications. Another potentially useful application of Flex programs that may not be as obvious however is for displaying information in a meaningful way.

Let me take a step back for a second though and make something clear in case some of you aren’t familiar with what exactly Flex is. Flex is an alternative way of creating Flash animations. That’s somewhat of a simplification but in the end that is one way to think of Flex- as a free alternative to Adobe Flash CS3.

We all know that many of the current methods for visualizing biological data leaves something to desire. This is where flex could potentially come in handy! Flex programs can be written using ActionScript which in it’s recent incarnation (AS3) looks and feels pretty similar to many of the other object-oriented programming languages we have come to know and love. Furthermore, it is probably one of the easiest methods for generating fairly simple graphics (GD::Simple is another.) Add on top of that built-in regexp, database and xml support and you now have in my opinion a pretty good reason to learn Flex

Setting up a free flex development environment on windows

You need essentially three things to create flash (.swf) files on windows using the free Flex 2 sdk: an editor, the Flex 2 SDK/compiler and a flash player. While any text editor would work, FlashDevelop is especially useful in that along-side of some other nifty features it can be set-up to compile your flex applications.

Basic steps

1. To get started, download the Flex 2 SDK and extract to desired location, e.g. C:\flex_2_sdk.
2. Download and install the latest version of FlashDevelop 3.
3. Open FlashDevelop. Click on Tools -> Installed Plugins -> AS3 Context -> Settings.
4. Find where it says “Flex 2 SDK Location” and add the path where you extracted the sdk to, e.g C:\flex_sdk_2.
5. Make sure the .swf (Flash file) extension is associated with a flash player. The Flex 2 SDK comes with a flash player which you can find in the “\player\debug\” folder (C:\flex_sdk_2\player\debug\SAFlashPlayer.exe)
6. Copy and Paste the code, and save as “Test.as”:

   package {
       import flash.display.Sprite;
       public class Test extends Sprite {
           public function Test() {
               init();
           }
   			
           private function init():void {
               graphics.beginFill(0xff0000);
               graphics.drawEllipse(100, 100, 100, 100);
               graphics.endFill();
           }
       }
   }
   

7. Done! Hit the button to build (Control + Enter) and the flash player should pop-up on your screen displaying a masterful work in contemporary art:

 

Adding support for debugging (trace)

The last thing you will want to do is add “trace” support. Actionscript has a useful function called trace() which works similar to STDERR. Any output sent to the trace function will only show up during debugging. Adobe Flash CS3 has an output window to show this by default. For FlashDevelop you have to set this up yourself. The easiest way I found to handle traces with FlashDevelop is to use a provided tool called FlashConnect. It requires adding a couple more lines of code to your file, but for most purposes should be sufficient.

1. Find the location of the included file FlashConnect.as (e.g. C:\Program Files\FlashDevelop\FirstRun\Library\AS3\classes\org\flashdevelop\utils\FlashConnect.as)
2. Add an import statement of the code to include the FlashConnect library, org.flashdevelop.utils.FlashConnect.
3. Add the following directive to specify where the compiler should find it:

   
   /***
   @mxmlc -source-path=C:\\Program Files\\FlashDevelop\\FirstRun\\Library\\AS3\\classes\\
   */
   

4. Call the trace function with FlashConnect.trace(“some string…”).
5. Your modified code should now look something like:

   package {
       import flash.display.Sprite;
       import org.flashdevelop.utils.FlashConnect;
       public class Test extends Sprite {
       /**
       * @mxmlc -source-path=C:\\Program Files\\FlashDevelop\\FirstRun\\Library\\AS3\\classes\\
       */
   
           public function Test() {
               init();
           }
   
           private function init():void {
               graphics.beginFill(0xff0000);
               graphics.drawEllipse(100, 100, 100, 100);
               graphics.endFill();
               FlashConnect.trace ("bla");
           }
       }
   }
   

6. That’s it! Compile as before and you should now see the text you passed into trace() displayed under “output” at the bottom of FlashDevelop.

Now what?

Hopefully as I become more familiar with actionscript I can write a couple more tutorials on things like parsing xml or generating simple graphs. For now though.. I’m going to sleep.

Credits & References

The example source-code used above comes from the excellent book Foundation Actionscript 3.0 Animation: Making Things Move by Keith Peters.

For more information on using trace() with FlashDevelop along with several alternative methods check out this forum post on FlashDevelop and trace.

–edit–
Philippe over at the FlashDevelop forums has pointed out that the @mxmlc directive used above to show trace output will only work for quick-builds. For more information see the forums post on the topic mentioned above. Thanks Philippe!