rss twitter

FDT Tutorial series pt.1

Hey everybody out there - this tutorial covers the first steps with Powerflasher's FDT 3 showing how to setup it for Flash Player 10 and compiling the first Actionscript 3 project with it. Everyone familiar to FDT might be interested in the following tutorials in which I'm talking about Asset-Workflows, Library-Handling, Debugging with FDT, Best of Workflow-Tips and AIR-Compiling. So just come back in a couple of days if you like to.

Setting up FDT for the first launch with Flash Player 10

As usual everything starts with a download. We are going to install FDT as a standalone Application and not as an Eclipse-Plugin, because Actionscript-Guys don't like anything else than Actionscript, do we? :)

Go to the official Download Page and on the right side chose your operating system. After this, just install it - I'll take the PURE version for Windows. While you're waiting you can also start the Download of the latest Flex SDK (I'm going to tell you later why). Go to this page and chose the latest Stable Build (currently 4.0.0.6898). Take the .zip File.

Once installed it is going to start itself and asking for a workspace. This workspace will be your best friend and you should chose a path which you like in order to sum up your upcoming projects in it. If you're sure check "Use this as the default and do not ask again" - if not, well, you will be asked the next time you'll start FDT. Different workspaces don't make sense in my mind but there are guys out there having 10-20 workspaces with different libraries to use. But in our case we should come along with one not to lose the plot. After booting up you are asked for a Product Key. We can skip this by just clicking Try FDT - which obviously sounds cool. You will see a fresh Welcome-Screen which - besides it's awesome graphics - shows us some options to go now. We chose "Workbench" as we're so hot to start. What you've got now is your best friend. I know, it looks somehow odd and boring in comparison to Adobe Flash's Timeline, Stage and fancy Property-Panels, but I promise you, your new friend doesn't need that superficial stuff. Okay, so first of all we need to update our compiling Shell for the Flash Player 10. Please don't ask me why there ain't a more simple way to do so but we do have to take 5 steps for this. But once it's done we're fine and ready. So here we go:

  1. Unzip the Flex SDK downloaded before to a folder we won't change anymore. I've chosen the FDT-install folder and created a subdir in the plugins-folder called Flex4_SDK.
  2. In FDT go to Window -> Preferences -> FDT -> Core Libraries -> AS3 Core Libraries (got that so far? :))
  3. Click "Add...". As Type chose Pure AS3 (Flex 3) for FP 10, as Name (which is irrelevant) "FlashPlayer 10 with Flex 4 SDK".
  4. Click Browse (at Path Variable). Click "New...", call it Flex4_SDK and Click on "Folder...". Now chose the folder you just extracted the Zip-File to.
  5. Press ten times (well, it's five times) "OK" until you're back on your friend's surface, the workbench.

Follow these steps carefully, they are correct and I know, it's somehow complicated but doing it step by step, word by word you'll get it.
When you've done everything correctly you see.. still nothing, but we're gonna check if everything worked out fine now. On the left side of your workbench you see the Flash Explorer. It will list you every project including classes, packages, binaries, assets, whatever. So Rightclick anywhere in it and create a

New -> New Flash Project. Type any Name you want, check "Use default location" and as the Project Language you chose the just created one, called "FlashPlayer 10 with Flex 4 SDK". Last but not least check "Create seperate folders for sources and binaries" - this will help us not messing up our project-folders. Press Finish (or Next if you're interested in different things).

A new project appearing in the Flash Explorer, expand it by clicking the plus next to it. You now should see some folders and two files. The src is the most essential as we it will provide us a virtual folder-structure we can navigate in when using packages e.g. To make it short - in this folder we are going to work.

Right-Click on the src-Folder -> New -> AS Class.

You can now type in different things just as it's Package, Name, Superclass, Interfaces and so on. We just gonna type in a Class Name (nevermind, just take anyone) and a Superclass (flash.display.Sprite). Press Finish. This - should - look - pretty - cool - now! Expand the src folder to see where our new class is located. Okay, let´s write the following to check if our new Flex SDK is working correctly (you should do this on your own to see the awesome code-completion features!):

Actionscript:
  1. package {
  2.     import flash.display.Sprite;
  3.  
  4.     public class FlashTest extends Sprite {
  5.         public function FlashTest() {
  6.             var rect : Sprite = new Sprite();
  7.             rect.graphics.beginFill(0x000000);
  8.             rect.graphics.drawRect(50, 50, 200, 200);
  9.             rect.rotationY = 20;
  10.                
  11.             addChild(rect);
  12.         }
  13.     }
  14. }

Now press Alt + Shift + X (and then!) M. A new External SWF Viewer should open, showing us a rotated black rectangle. Thus the 3D-rotation properties are only available in Flash Player 10 this is the proof for a working new Flex SDK. So there we go, the first step into developing with FDT has been done. In the upcoming tutorials I'm telling you exactly what we've done so far, what's beyond the shortcut Alt+Shift+X and how we can start working on cooler things than a rotated Rectangle! So stay tuned.

Another topic: Compiling AIR projects with FDT

8 Responses to “FDT Tutorial series pt.1”

  1. [...] FDT Setup Tutorial | Beautify Code Blog [...]

  2. [...] for reference, a howto. Also worth noting this issue getting FDT to notice the changed  SDKs in existing projects, since [...]

  3. [...] FDT Setup Tutorial for Flash Player 10 | Beautify Code Blog __________________ * Flash-Junkie ≠ Musiker & Grafiker # Marvin B. # The finer Art of [...]

  4. Dallas Jeromey says:

    I'm so very happy to see there is actually some great content to find on this on the internet. I'm so tired of google sending me junk.

  5. jav666 says:

    good job! simple and working!

  6. Xinerama says:

    Really cool! Thanks.
    When's part 2 coming out?

  7. Superb tutorial! You saved me a hell of a lot of grief. Honestly, thanks.

  8. Webdesigner says:

    You're in point of fact a just right webmaster. The website loading velocity is incredible. It kind of feels that you are doing any distinctive trick. Moreover, The contents are masterwork. you've done a fantastic activity on this topic!

Leave a Reply

Powered by WordPress | Free T-Mobile Phones for Sale | Thanks to Palm Pre Blog, Video Game Music and Get Six Pack Abs