M Studio Labs

FDT How-To: FTP Your Production Files with Ant

admin — Thu, 01 Jul 2010 22:40:48 +0000

Ant is a great little build tool which allows you to automate all sorts of things like compiling code, moving/copying files, creating .zip archives and using FTP to upload. The latest version of FDT has a library of Ant commands specific to Flash. There are a bunch of articles listed below which explain some of the other features, but I’m going to focus on FTP here.

Whenever I have a project in FDT, I eventually want to post my bin directory to a server so that the client can review it. I usually also post a .zip of the folder so that they can deploy it on their own server. Here’s what I want my build file to do:

Compile the SWF
Export a clean “deploy” copy of the bin directory, without any .svn properties, etc.
Create a .zip of the “deploy” directory
Upload “deploy” files to the web server and delete the local copy
In the console, display the link to the site and .zip file so they can easily be pasted into an e-mail

Step 1: Install the FTP Java Libraries

The Ant build tool is installed with FDT, but it doesn’t include the FTP Java libraries. You can download them at the links below. Extract “commons-net-2.0.jar” and “jakarta-oro-2.0.8.jar” from the .zip archives and place both files in your ant bin directory, which probably looks something like “FDT\plugins\org.apache.ant_#####\bin\”

Java FTP Libraries:
commons-net-2.0.jar
jakarta-oro-2.0.8.jar

Note: If you want to skip the step-by-step, you can download the final Ant build file here.

Once those files are in place, you need to add them to the Ant classpath in FDT (image below). Go to “Preferences > Ant > Runtime”. Click the “Classpath” tab. Select the first entry, named “Ant Home Entries (Default)” and then select “Add External JARs…” Add the 2 jar files from above and then click Ok.

Step 2: Add Your Ant Build File

In your FDT project, right click and select “New > Folder”. Name it “ant”.
Next, right-click that folder and select “New > Other > XML > XML”. Name it “build.xml”.

In order to have FDT recognize this as an Ant file, go to “Window > Show View > Ant”. You’ll see the Ant window open. Drag your build.xml file into this window and FDT will recognize it properly.

Your project should look something like this:

Step 3: Declare your Project Properties

Open the “build.xml” in the editor and type the following:

These are the properties you’ll use in your Ant targets. You’ll need to edit the highlighted lines above as follows:

ftp.server: your FTP/IP address to upload deploy files to
ftp.dir: the remote directory to upload to
ftp.username: FTP username
ftp.password: FTP username
optional: version.num: this will append the version number to the remote directory

Step 4: Create your “Compile” Target

Next, add the following to the project node. This will create the SWF in the bin directory and open it in the External SWF Viewer:

Step 5: Create your “Export” Target

The “Export” target will create a temporary directory named “deploy” and export all files, minus any meta data or .svn properties. You can filter out additional file types by using the “exclude” element. Note, that we’re adding a dependancy here named “compile”. This means that before “export” runs, “compile” should first be run. We need to make sure the bin folder has a SWF before exporting it:

Step 6: Create your “Export” and “Zip” Targets

Step 7: Create a target to upload the deploy files, delete them locally and print out the urls.
Note that the target first creates a directory on the server using “mkdir” before uploading files:

That’s about it. You can grab my Ant file here, and you can see the full code here:

Links to other resources and tutorials:
FDT HTML Template using Ant
FDT and ANT | A User’s Guide – Part I

Papervision: Macmillan/McGraw-Hill

admin — Tue, 08 Jun 2010 20:11:59 +0000

We recently built a Papervision site for M/MH and SirenMG. The site is used by teachers and administrators to learn about Macmillan/McGraw-Hill’s software products. Users can filter by features like phonics, writing and vocabulary. They can also zoom in on each product to see details, videos and animations.

Check it out here.

Paramount Pictures

admin — Tue, 08 Jun 2010 19:24:47 +0000

We built the home page, media player and Top 10 Flash Widget for the Paramount Pictures website. All content within the Flash modules is loaded via XHTML from a Drupal framework.

Toyota: History of Tailgating

admin — Fri, 04 Jun 2010 20:53:16 +0000

This website is an interactive book detailing a fictional history of tailgating parties. The 16 chapters correspond to weeks in the 2009-2010 NFL football season. Each week, a new chapter is unlocked. There are 3 additional chapters throughout the book, highlighting features of Toyota SUV/Trucks.

For this project, we also developed an application using Facebook Connect. Users can log in using their facebook account. Based on their friends, location, and name, we pair them with a chapter in the book such as “chicken wings” or “cheesehead”.

View it here.

eBay ECG: 2010 Webby Honoree

admin — Thu, 03 Jun 2010 19:52:03 +0000

The eBay Classifieds Group website was chosen as an official Honoree. Check out the Flash modules we developed here, here and here.

A Few Quick Eclipse Tips

admin — Thu, 03 Jun 2010 19:51:51 +0000

Eclipse is great, but sometimes the option menus are a little overwhelming. Every time I install a fresh copy of Eclipse, I pull my hair out looking for a handful of preferences. Here they are — hopefully someone will find this useful:

Change the editor font:
Preferences > General > Appearance > Colors and Fonts > Basic > Text Font

These are great fonts, btw: “proggy_fonts”

Remove the annoying vertical line in the editor window (print margin):
Preferences > General>Editors > Text Editors: “Print Margin”

Remove the line highlight in the main editor:
Preferences > General>Editors > Text Editors : “Highlight Current Line”

Cosmo’s Ultimate Hair Makeover Tool

admin — Wed, 21 Apr 2010 01:31:03 +0000

For Cosmopolitan Magazine, we developed a quiz which allows a user to determine her ultimate haircut and style. The results are based on the shape of the user’s face and the type of her hair. The results also offer haircut and styling tips. The client can also customize the tool to highlight hair products from a sponsor.

Check it out here.

Seventeen: Prom Dress Finder

admin — Sun, 21 Mar 2010 01:35:32 +0000

We created a Flash front-end and content management system for Seventeen’s Prom Dress Finder. The tool allows a user to search a database of over 2000 dresses and filter by color, price range, designer and style. The user can then save her results and print them or post them directly to her Facebook wall.

Check it out here.

eBay Classifieds Group

admin — Mon, 13 Jul 2009 17:32:58 +0000

We recently developed a handful of Flash modules for the newly launched ECG website, designed by Sisu.

Papervision 3D home page module
ECG Timeline
Brand Map and Video Player

AIR: Drag and Drop Batch Image Resizer

admin — Tue, 02 Jun 2009 19:03:36 +0000

Here’s a little utility that allows you to batch-resize or crop images and output as JPG — along with the source code. If you’re not familiar with AIR, you just need to download AIR first before you download & install the Image Resizer:

Download Adobe AIR here

Download the AIR Image Resizer here

Download the source files here

Also a few notes that might be of interest to developers:

For developers working in Eclipse/Flex: there is an ANT build file in the root directory of the .zip. Be sure to update “build.properties” with the location of your Flex SDK and project directory. Also, be sure to add “lib.swc” to your classpath.

For developers working in Flash: You can publish “build.fla”, but be sure to add “com.Main” as your document root.

–

If you’re trying to resize a display object’s bitmap for output, you can use the Matrix class. Let’s say we want to resize “target_mc” to 50% of it’s width and height:

var matrix : Matrix = new Matrix();
matrix.scale(.5, .5);
var bmp : BitmapData = new BitmapData(target_mc.width * .5, target_mc.width * .5, true);
bmp.draw(_target_mc, matrix);
// if you just want to crop the image from the upper-left, you'd leave off the matrix param:
bmp.draw(_target_mc);

–

If you want to save an image as a JPG or PNG from Flash, you” first need to grab corelib from Google Code.

You can pass an image’s bitmapData to the encoder and then write the file using FileStream. For example, we want to save “target_bmd” BitmapData as a JPEG named “output.jpg” in the user’s “Documents” folder:

var jpgEncoder : JPGEncoder = new JPGEncoder(100); // this param is the JPG quality from 0-100
var jpg : ByteArray = jpgEncoder.encode(target_bmd);
var stream : FileStream = new FileStream();
var file : File = File.documentsDirectory.resolvePath("output.jpg");
stream.open(file, FileMode.WRITE);
stream.writeBytes(jpg, 0, jpg.length);
stream.close();