iD Blog Author: admin
February 13th, 2009 by: admin
Flex gives you a great deal of control when skinning your applications, but some of the options are less apparent than others. Although styling individual components of an application is easy accomplished through CSS file inclusion, there are global methods too.
The Pre-Loader
If your project is ambitious, you’ll probably want to design your own pre-loader to replace the default Flex one. If you aren’t that interested in re-skinning the default, however, you can simply turn that default Flex-blue pre-loader off. In your application MXML declaration, add usePreloader=”false”, like so:
Getting Rid of the Default Flex Blue
You know it when you see it – a Flash app starts to load and you see that familiar blue (#869ca7, or this color, in case you were wondering). Tracking down all the places it crops up can be a pain, but setting the default background color in your Flex Compiler options is an easy way. Right-click on a project, then choose Properties. Select compiler options and you’ll see the screen shown here. Simply add -default-background-color 0x######, where ###### is the html color code you want to use. Now Flex will generate the html template files with your color instead of the dreadful blue.
Changing the Skin Globally
You’ll also notice in the screen shot above that I have another option highlighted: -theme ‘myflexskin.css’. Using this option you can set the global (per project) use of that particular CSS file, versus having to include it individually in each MXML file.
February 13th, 2009 | Tags: code, css, flex, skin, style, theme
Posted in: iD Tech Bloggers
February 9th, 2009 by: admin
Most people fluent in Flash Actionscript are familiar with unary and binary operators, but there is also a ternary operator that can be quite useful. First, a refresh on operators:
Unary: count++;
Binary: count = count * 2;
Ternary: var result:String = (count == 0) ? “Empty” : “Not Empty”);
So what does this mean? You can use the ternary form of the if statement as a shorthand. Let’s look at the equivalent full if-else statement:
var result:String;
if (count == 0) result = “Empty”;
else result = “Not Empty”;
Of course, using the ternary operator cuts down on code readability, but three lines can effectively be cut down to one. Remember, the form is this:
(condition) ? ifTrueDoThis : ifFalseDoThis;
February 9th, 2009 | Tags: Actionscript, code, conditionals, CS4, Flash, programming, ternary operations
Posted in: iD Tech Bloggers
January 9th, 2009 by: admin
Adobe Flex is a complimentary product for Flash. In fact, if you are familiar with Actionscript 3 you’ll find that Flex is not very difficult to pick up at all. I use both Flash and Flex regularly and one of the best aspects of Flex is the ability to design UIs quickly and alter them easily using standard Web CSS techniques.
One of the best ways to get inspiration for a Flex (or even Flash – they share some of the same libraries) is to use the multitude of Visual Explorers available. What began as simple component and style browsers has now been extended to many library features of Flex. Here are the explorers that I use frequently within my work-flow:
Style Explorer
Style Explorer w/ Kuler
Component Explorer
Enhanced Button Skin Explorer
Audio Visualization Explorer
Chart Explorer
Filter Explorer
Easing Explorer
Custom Easing Explorer
Reflections Explorer
Distortion Explorer
Another benefit of the explorers is that most provide the source code. By right-clicking in the Explorer and choosing View Source you can view and even download the entire project. This ability makes recreating the examples very simple.
January 9th, 2009
Posted in: iD Tech Bloggers
December 19th, 2008 by: admin
For those of you moving from Actionscript 2 to 3 (with a heavier focus on proper object-oriented principles), you may find that accessing your Main class and Stage isn’t as straight-forward. In this post we’ll highlight organizing your classes to properly reference your main class. First, let’s take a look at our Main class:
package {
import flash.display.Stage;
import flash.display.MovieClip;
public class Main extends MovieClip {
private static var _instance:Main = null;
public function Main() {
_instance = this;
}
public static function getInstance():Main { return _instance; }
public static function getStage():Stage { return getInstance().stage; }
}
}
First we define a static variable, _instance, to hold a static reference to Main. We are assuming throughout this that we will use Main statically. In other words, there will only be a single instance of our Main class. Next, in our constructor, we use the line _instance = this; to set our static version of Main to the one that is created when the constructor is called.
We will use two methods to get access to Main and the main stage. First, getInstace() is a static function that always returns a copy of _instance. If you want the stage instead, use getStage(). All getStage() does differently from getInstance() is return the stage property of _instance rather than the object itself. Using this format simplifies your code in other classes.
Now let’s say you want to use these functions in other classes to add something to the stage. Let’s pretend we have a Tree class that needs to add itself to the main stage when it is created. You could use this code:
package {
import flash.display.Sprite;</code>
public class Tree extends Sprite {
Main.getStage().addChild(this);
x = Math.random() * Main.getStage().stageWidth;
y = Math.random() * Main.getStage().stageWidth;
}
}
You can see that we can easily get properties of the stage (stageWidth and stageHeight) simply by statically referencing Main. Note that we could have used the following lines instead:
x = Math.random() * Main.getInstance().stage.stageWidth;
y = Math.random() * Main.getInstance().stage.stageWidth;
It really just depends on which example you find more elegant. One additional benefit of using the techniques described here is that you can use the getInstance() to determine if Main has loaded. Simply do:
if (Main.getInstance() != null) { /* some function */ }
Hope that gives you an easy framework for accessing your stage and Main class in AS3!
December 19th, 2008 | Tags: Actionscript, AS3, Classes, Flash, Objects, Stage
Posted in: iD Tech Bloggers
You know it when you see it – a Flash app starts to load and you see that familiar blue (#869ca7, or this color, in case you were wondering). Tracking down all the places it crops up can be a pain, but setting the default background color in your Flex Compiler options is an easy way. Right-click on a project, then choose Properties. Select compiler options and you’ll see the screen shown here. Simply add -default-background-color 0x######, where ###### is the html color code you want to use. Now Flex will generate the html template files with your color instead of the dreadful blue.
