Running PHP Eclipse with FDT / FB & Ant

OK, so lately I have been doing a lot of work in both FDT & Flash builder and building data centric applications with PHP and mySQL back ends, it has been vital that my work flow has been up to scratch to ensure that these project's deadlines have been met and also so that I don't go crazy doing loads of crap that I don't need to do! As I have been very pleased with the ways things have run I though it best to share my set up with a wider audience.

Primarily I code in FDT so I am going to concentrate this walk through on my FDT set up, but if necessary I will direct any Flash builder relevant stuff in the right direction also seeing as that has also been a major part of it.

I am going to assume you already have FDT installed, which thankfully comes with ANT out of the box so there is no need for any set up here, however if you are using Flash builder or even Flex builder, unfortunately you will be lacking ANT support and so will need to be installed seperately. Thankfully this has been well documented and so if you google it you will find many blogs explaining the process or you can always click here and follow the run through.

Now so that we can code our PHP in FDT or FB with some great auto completion and almost FDT style live error highlighting we need to also install another plugin to our set up and this is PHPEclipse. To install this you simply go to Help/install new software and once the dialogue window opens up.

Here you will need to click the 'Add' button to add a new site. In the new site dialogue window that pops up enter a name for your site like PHPEclipse or something and enter this url: "http://update.phpeclipse.net/update/stable/1.2.x" then click OK. Then make sure it is chosen from the drop down and wait for it to connect and download the relevant data. Then click the box next to 'PHPEclipse Stable Builds', click next, next again, then accept the agreement and then wait for it to install. Once installed FDT or FB will need to be restarted. In the mean time we need to get a local server set up so that we can run PHP and mySQL directly from our development computer.

If you are on a PC then you can choose xampp or wamp or if you are on a mac then you can install mamp either way you want to download the installer and get these installed. During installation they should ask where you want to locate the root folders for the installation, I normally go for the c drive that way it is easy to find. The root folder will be sat within these directories, so on xampp, which is what I have installed it is C://xampp/htdocs. To get more info once you have the service installed and running, go to a browser window, type in http://localhost and it should connect directly to your root folder's bootstrap file and all the relevant information should be display there.

Now the main reason for all this for me, is when I am creating PHP scripts as part of a flash project I want to make sure that I have all my files together, rather than creating one project in the localhost root folder to test all my PHP scripts and a separate Flash project set up in my FDT dev folder. With the power of ANT I can develop PHP and Flash in the same project together side by side. So lets dig into to developing with PHP and FDT.

Open up FDT and you will notice that you can now access another perspective for PHPEclipse. This gives you some great functionality, such as being able to stop and start xampp services from within the Eclipse environment, viewing your script via the built in PHP browser, which targets by default your local host folder. You will notice also that coding PHP in PHPEclipse is also a breeze and makes coding PHP much more fun. So lets get back into the FDT perspective and start a new project to test our work flow. Call it what ever you want and just target pure AS3 and which ever SDK you want. Create a new class and call it whatever you want and after your constructor create a new function which will instantiate a URLLoader to target what will soon be a PHP script in our local host folder:

Actionscript:
  1. private function init() : void
  2.         {
  3.             var url:URLRequest = new URLRequest("http://localhost/test/returnVal.php");
  4.             var urlLoader : URLLoader = new URLLoader();
  5.             urlLoader.addEventListener(Event.COMPLETE, loaded);
  6.             urlLoader.load(url);
  7.         }
  8.  
  9.         private function loaded(event : Event) : void
  10.         {
  11.             trace(event.target.data);
  12.         }

As you can see we will be targeting a php script in our localhost root called returnVal.php, so lets get creating and testing it. Change your perspective to PHPEclipse and in your FDT project src folder create a new folder called 'php'. Then right click it, and select 'new PHP file' and give it a name of returnVal.php, press enter and the file is created. For the purpose of this run through, we are just going to echo a simple success statement:

PHP:
  1. echo "Successfully sent data from local host";

Now we need to test this script which currently is sitting in our FDT project folder but need to run in a PHP environment, so with the help of ANT we are going to instantly copy this file into our local host root. If you haven't used ANT before, I urge you to give it ago, you can get more details here. It simplifies tasks such as this to reduce the amount of extra work you would need to do like opening a folder and copying files each time it changes to run and test it. With ANT it is simply a click within FDT and the file is copied. The file we will be using is very simple and is made of the following:

Actionscript:
  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <project default="1. Copy to local host" name="Copy PHP Script">
  3.     <!-- Path to local host files -->
  4.     <property name="local_host_dir" value="C:\xampp\htdocs\test" />
  5.     <!-- Path to project php folder -->
  6.     <property name="target_directory" value="${basedir}/src/php"/>
  7.     <!-- Copy files to relevant directory -->
  8.     <target name="1. Copy to local host" description="clean up">
  9.         <copy todir="${local_host_dir}">
  10.             <fileset dir="${target_directory}">
  11.             </fileset>
  12.           </copy>
  13.     </target>
  14. </project>

The ant file sits in your project root and to activate it, make sure you have an ANT window within your perspective, and just drag the file over to it. The above xml data will appear as one task called '1. Copy to local host'. If you click this you will see the script start to build in the console window and presto! the files should be copied over to a new folder in your local host root called 'test'. Now if you type the url 'http://localhost/test/returnVal.php' in your PHPEclipse perspective's PHP browser window you will see the success message displayed in the browser window, meaning that everything is working perfectly.
Lets now go back into our FDT perspective, debug our application and you should get a trace statement made up of the success message from the php script running in localhost's root! This whole process as you can see smooths out the whole php script writing process with your flash applications, whilst also keeping your project folder structure solid.

All files for this run through are available here including the ant script.

swffit – great javascript utility for controlling browser windows



Ever had a problem where a site or application you are creating looks great when scaled to the browser window at a large screen size but crap when viewed on smaller screens? A major issue with sites that are embedded via SWFObject and set to 100% x 100% is that when viewed via a smaller screen size resolution, things get messed up and overlap each other and some elements become un-viewable, which of course provides for nightmare positioning issues if done via actionscript within the application. I have had this problem myself a few times recently and was looking for a way to implement the resizing via javascript within the browser when I stumbled across a fantastic utility called swffit. Swffit is incredibly simple to use and works well with SWFObject. What it actually does is control how the browser window interacts with your flash application's resize settings, once it gets smaller than your defined window size it adds a scollbar, when it is bigger the scrollbar dissappears. As an example, my main site now uses swffit and in the main javascript which I use to embed my swf I have simply included the fit() function of swffit like so:

Actionscript:
  1. <script type="text/javascript" src="http://libs.ultravisual.co.uk/js/swfobject/swfobject.js"></script>
  2. <script type="text/javascript" src="http://libs.ultravisual.co.uk/js/swffit/swffit.js"></script>
  3. <script type="text/javascript">
  4.  
  5.         var flashvars = {};
  6.         var params = {};
  7.         var attributes = {};
  8.        
  9.         params.menu = "false";
  10.         params.quality = "high";
  11.         params.scale = "no_scale";
  12.         params.bgcolor = "#FFFFFF";
  13.         params.allowFullScreen = "true";
  14.         params.AllowScriptAccess = "always";
  15.        
  16.         attributes.id = "flash";
  17.        
  18.         swfobject.embedSWF("MainLoader.swf", "myContent", "100%", "650", "9.0.0", "expressinstall.swf", flashvars, params, attributes);
  19.        
  20.         swffit.fit("flash");
  21.        
  22. </script>

As you can see via swfobject I have defined a window height of 650 pixels, swffit registers this and listens out for when the browser window goes below this size, when it does it adds a vertical scroll bar so that when a user with a small window size views the site they are able to view the site properly rather than all squashed up! There are loads of other features available as can be found within the example folder of the downloadable swffit source files. More details can also be found on the swffit site.

Breaking up bitmaps

The Flash plugin is required to view this object.

Click the screen for transition in then again for transition out.

Well it has been some time since my last blog post - nearly three and a half months and now finally I seem to have found a little free time to dedicate to some writing, I tell you dispite all of the fuss in the press lately with the Apple - Adobe thing and also Flash vs HTML5, it seems to me that it sure is a great time to be a flash developer as we seem to be so in demand!

Anyway, to ease my self back into my blog writing I am going to post a little class which I knocked up when working on a project recently as a nice transition effect for adding / removing images. It is simlilar to an experiment I posted on my very bare lab site some time ago. The class is called Broken image and it does just that. It is a simple class which takes any movieclip / sprite / bitmap passed as one of its parameters, the image passed can be added to the stage already or not it doesn't matter. Other parameters include, x & y positions that you wish the final image to sit on, width and height of each pixel and whether you wish the transitions to be 'in', 'out' or both. The below code, would add an asset called 'image' as the image to be broken apart, set it in the middle of the stage, with an in & out transition, and each 'pixel' as they are defined in the class would be 15 x 15 pixels.

Actionscript:
  1. var bi:BrokenImage = new BrokenImage(image, (stage.stageWidth - image.width) * 0.5, (stage.stageHeight - image.height) * 0.5, "inOut", 15, 15);

It then reacreates the image as a series of smaller bitmaps made up of the original which are then ready to be animated. As a basis of the class I have included a simple tweenIn and tweenOut, which of course can easily be adjusted to suit your needs.

As you will see if you explore the code, the actual inner workings of the class are very simple and pretty self explnatory. In the example document class which I have included with the source, I have used a loader to load in a bitmap, this is mainly to reduce overall file size so that it can easilt be loaded onto this blog page, but you can easily use any asset from flash by giving it a linkage ID or even just an instance name. Of course as the example included is 100% actionscript, if you do compile in flash you will to define a document class. The class also requires tweenlite as its tween engine so you will also need that defined in your library preferences.

Get the source files here.

Powered by WordPress | AT&T Cell Phones for Sale at iFreeCellPhones.com | Thanks to PalmPreBlog.com, MMORPGs and Online Shopping