Archive for the 'Tips' Category

FDT Tip: Shortcut In Writing A Class’s Name

I have tried my best to make the title as self-explanatory as possible, but pardon me if you still have no idea what I’m referring to. However, more importantly is that this tip saved me a great deal of time, so I would suggest any FDT user to read this. ;)

When you have a constant declared in a class, it is always considered good practice to refer to it with the class name. Meaning,

1
2
3
4
5
6
7
8
9
10
11
12
13
package
{
    public class Test 
    {
        public static const APP_NAME:String = "fdt-tip";
 
        public function Test () 
        {
            // Best practice to include class's name
            trace(Test.APP_NAME);
        }
    }
}

As you can see from the above example, I referred to the constant using the class’s name. In our above example though, there is no issue since we’re only referring to the constant once.

Things start to worsen if the constant is referred to A LOT OF TIMES. Now it gets even worse if we had named our classes based on the display objects’ hierarchy, with class names looking like WrapperPageContentViewGenericSprite. *loL~* What if you actually have several classes with similar class names, e.g. WrapperPageContentViewUniqueSprite, WrapperPageGenericView, WrapperPage? At this point, even code-hinting will take you some time to filter through to the right class.

Solution

Head right on to Preferences > FDT > Editor > Templates and click on the “New…” button.

Here’s what I recommend to enter in the fields:
Name: tt (your own preference)
Context: AS2/AS3
Automatically Insert: Checked
Description: Fills in the current class (your own preference)
Pattern: ${enclosing_type}

FDT Tip Shortcut In Writing A Class's Name

After you are done creating this template, click the “OK” button. Try it out now! Simply type “tt” (or whatever is your shortcut), and press enter: the class’s name will now be automatically inserted for you. No fuss anymore, and no more excuses for not coding with best practices. :P

AddThis Social Bookmark Button

AS3 Support For Flash CS4 Missing In FDT 3?

[UPDATE: Thanks to Matt, I've added in OSX paths to the Flash Players.]

For those folks who have upgraded to Adobe Flash CS4 and also installed FDT 3 as your editor, you would have realised that when you create a new Flash project in FDT, there will no longer be a Flash_CS3 language type in the Project Language drop down. It is missing by default, but in this article, I’ll go through with you on how to get those much needed project languages back into your FDT development environment. :)

Step 1:

In your New Flash Project dialog, click on the “Configure defaults…” link button.
Step 1: New Flash Project

Step 2:

That will lead you to the Core Libraries dialog panel in Preferences, which you can usually access via the menu:
Window > Preferences… > FDT > Core Libraries

First, click on the AS3 Core Libraries tab, and then click on the Add button.
Step 2: Preferences

Step 3:

The Core Library dialog is where you will create your new core libraries. Choose Flash CS3 for type, and give your core library a name. In my case I gave it “CS4_FP9″, which stands for “Flash CS4 using Flash Player 9″. Of course, you can give any fancy name that you want. ;) To proceed in choosing a path variable for your core library, click on the Browse button.
Step 3: Core Library

Step 4:

Now the Link Libraries dialog will be opened, and it is here where we can choose which library to be used for the path variable. Click on the “New…” button.
Step 4: Linked Libraries

Step 5:

This is the final step. In the New Variable dialog, first give a name for your new variable. I chose to use the same convention when naming the core library, which is “CS4_FP9″. Again, it is up to your own fancy in giving it a name. In the Location field, click on the Folder button and browse to:
Windows XP: C:\Program Files\Adobe\Adobe Flash CS4\Common\Configuration\ActionScript 3.0\FP9
OSX: /Applications/Adobe Flash CS4/Common/Configuration/ActionScript 3.0/FP9

If you are working on Windows Vista or Mac OS, please kindly let me know the path by leaving a comment below. I’ll update this post thereafter. Thanks. :)
Step 5: New Variable

That’s it! You’re done! Well almost if you ask me. We do want to be able to use Flash Player 10 in our projects too right? ;) Click on all the OK buttons but stop when you are back in the Preferences dialog box. From here, repeat Step 2 to 5. The location for the Flash Player 10 swc is in:
Windows XP: C:\Program Files\Adobe\Adobe Flash CS4\Common\Configuration\ActionScript 3.0\FP10
OSX: /Applications/Adobe Flash CS4/Common/Configuration/ActionScript 3.0/FP10

Done!

After finishing the above, you can now truly click on all the OK buttons to get back to the New Flash Project dialog, and see that you can now target the correct Flash Player while developing with FDT. Happy coding! :D
Finished: New Project Languages Available

AddThis Social Bookmark Button

How Pixel Perfectness Drove Me Mad

I’m always overly obsessed when it comes to placement of text in Flash IDE. If the font is a pixel font, and it does not lie exactly on whole numbers in the x and y axis, then the font will appear blurred. From this habit that I had in handling pixel fonts, it soon spread to all objects that I had on the stage; I would want *everything* to be lying perfectly on whole numbers in both axis.

As you might have guessed, this pixel perfect habit of mine drove me rather mad whenever the rest of the team did not bother about it. I could easily spend hours just perfecting the coordinates. Yes, it’s highly possible more of a disease than a habit. *loL~*

Anyway, as I was playing around Flash IDE today, I found the cure! Snap to Pixels! Why haven’t I explored this in all my years with Flash?! :(

So if you are suffering from pixelperfectitis as well, here’s your medication.

View -> Snapping -> Snap to Pixels
Snap to Pixels

Ahh… How nice to find a cure… :D

AddThis Social Bookmark Button

FDT Tip: Organising Your Imports

The simplicity of executing this shortcut does not undermine the convenience of it. :D

This shortcut has already worked its way into my daily work flow and I can no longer code the same way as I did before, not with FlashDeveloper, not with Flex Builder. Nothing else comes close to what FDT offers.

FDT Organise Imports

Combined with the formatting shortcut, you’ll now be a true formatting king! :D

AddThis Social Bookmark Button

FDT Tip: Be A Formatting King

People are different; every developer codes in a different style. Some loves the additional white space here and there, while others could not live until their curly braces sits on a new line. You name it!

Back when I was using FlashDevelop, I was very conscious about writing beautifully formatted code. Don’t get me wrong though, I’m still exercising this, just that FDT made my life so much simpler now. The difference between now and then is that I had no choice but to code them properly so that they are pleasant to my eyes.

To each his own gripes, well for me is code formatting. Nightmare strikes whenever I have to take over a project from someone else who has no sense of formatting their codes. Trying to figure out those codes are just a plain waste of time.

FDT comes to the rescue by offering a way to auto format your code. What I love is the level of intricacy that FDT allows you to go into! Here’s the place to customise your preferences:
Window -> Preferences… -> FDT -> Code Style -> Formatter
FDT Formatter

After setting your preferences, you can now format your codes either by Source -> Format or Ctrl-Shift-F
FDT Format Shortcut

For those obsessed with their own formatting style who can’t live to see other styles (like me? *loL~*), you can _even_ format the generated codes from SWCs! ;)

Head over to Window -> Preferences… -> FDT -> Misc, and check the “Enable formatting of SWC code” option.
FDT Enable Formatting Of SWC Code

AddThis Social Bookmark Button