Server Requirements

If you are creating web applications which run Flash and PHP obviously your server needs to have PHP installed. If you plan on creating many dynamic sites or applications going forward, you will probably want server space which allows for unlimited databases, has PHP5 and MySQL, and gives you the ability to install programs on the web server. If you are using shared hosting, that is fine, but keep in mind that you will probably want to go with a Virtual Dedicated solution at some point, simply because of the flexibility and responsiveness you receive from having your “own” server. For a virtual dedicated server I personally use GoDaddy, (see my article here about VDS), as I now have unlimited domains, unlimited databases, and root access to my server, so I can do a bit of shell scripting now and again. On top of that it is super-responsive which is really important for creating Flash applications which utilize networking. Otherwise if you want to pay less but still want unlimited domains and a fairly responsive system, I would go with Blue Host in North America or 1 and 1 for Europe (or other regions), and a shared hosting plan. I have experience with all three of these companies and the support is certainly top-notch.

Communicating with a Web Server

Let’s discuss three ways in which we might send data back and forth between a web server and Flash. These are by no means the only ways to do so, but they are fairly common, and you will find them to be popular ways to accomplish networking tasks.

Using GET or POST and Variables

If you are used to working with HTML front-ends and PHP (or another scripting language), this will be familiar to you. Using the GET or POST method, you can send and receive data from server-side scripts. In this scenario, we often output our data in some sort of url-encoded string, which contains variable “name and value” pairs. This is the method we will cover in this article.

Using XML

XML is one of the most important languages for communication between application, servers, and services on the Internet. One good reason to work with XML for loading data from a web server is that you will generally not have to know how the data is being processed, you will just have to know something about the particular XML formatting being used, so that you can process the data.

Using Flash Remoting

For more sophisticated integration with a server, you may want to utilize Flash remoting. If you are using Flex, you may work with Flex Data Services. If you would like an open-source solution, you might want to look into AMFPHP. We will not cover Flash remoting in this series.

Loading Variables

The first thing we will do is use GET to load variables from a PHP script. We will create a simple PHP document, called “dataLayer.php”. This page will act as our main communicator between our server and Flash.

File: dataLayer.php

<?php

$returnVars = array();
$returnVars['username'] = "John Doe";
$returnVars['email'] = "johndoe@hotmail.com";
$returnString = http_build_query($returnVars);

//send variables back to Flash
echo $returnString;

?>

So here we have our data layer. It consists of two variables: username and email. These variables are encoded using the http_build_query() function to send a properly formatted, compliant variable set from the server. Notice that this function takes an array as a parameter. It then just builds out of string in the format of name / value pairs, like so “varname=value&varname2=value”. It’s very handy.

Next, we will instruct the Flash player to load this data so that we can work with it.

Loading the Variables into Flash

Now let’s write some ActionScript to load our variables into Flash. We will do this in a document class which will be the main point of entry for our Flash movie. (If you are not familiar with the document class, see my tutorial here). Our document class will be called “Main.as” and we will utilize it with an .fla file called “main.fla”.

Complete Main.as code below. You can also download it here: data-loader.zip

package {

import flash.display.MovieClip;
import flash.events.*;
import flash.net.*;
public class Main extends MovieClip {

public function Main()  {

// Prepare request

var request:URLRequest = new URLRequest("http://www.yourserver.com/dataLayer.php");
request.method = URLRequestMethod.GET;

var loader:URLLoader = new URLLoader();
loader.dataFormat = URLLoaderDataFormat.VARIABLES;
loader.addEventListener(Event.COMPLETE, completeHandler);
loader.load(request);

function completeHandler(evt:Event) {

  var username = evt.target.data.username;
  var email = evt.target.data.email;

  trace ('username is ' + username);

  trace ('email is ' + email);

}

}

}

}

You will want to replace the path (”http://www.yourserver.com/”) with your actual server and directory.

This code is very simple. You will see that we have imported appropriate classes for working with networking, and that our class (being the document class) extends MovieClip.

The first part of our constructor class prepares a request, and it uses the GET method to do so. Here we make an instance of the URLRequest object, passing it the actual web path to our php file.

var request:URLRequest = new URLRequest("http://www.yourserver.com/dataLayer.php");
request.method = URLRequestMethod.GET;

We then make a URLLoader object, specifying its dataFormat property to be “VARIABLES”. This will ensure that we can bring the variables output by PHP into Flash using the same names, and those variables can easily integrate into the scope of our Flash movie.

var loader:URLLoader = new URLLoader();
loader.dataFormat = URLLoaderDataFormat.VARIABLES;

Next we define an event handler, which is key for handling the loading of the variables. We are listening for the “COMPLETE” event, which is an event thrown by the URLLoader object that we just created. Notice that we define a handler, called completeHandler, which will do the work of processing our variables for us. This event handler will take the form of a “nested” function – a new feature in ActionScript 3 which allows us to place functions inside of functions. (I love this). After we define a handler, we then call the load() method of the URLLoader object, passing it the request objet.

loader.addEventListener(Event.COMPLETE, completeHandler);
loader.load(request);

Our completeHandler() function does the work of getting our variables from the COMPLETE event. We created a parameter called “evt”, which is populated by the event object itself when this function is called. We get the variables from PHP using the “evt” object and the following syntax: “evt.target.data.variableName“. This allows us to specify the exact variable we want to access. Lastly, we trace this data to the output window.

function completeHandler(evt:Event) {

  var username = evt.target.data.username;
  var email = evt.target.data.email;
  trace ('username is ' + username);
  trace ('email is ' + email);

}

And that’s it! This is a very simple example, but it should get you going with getting data from your PHP scripts into Flash. Obviously there is a lot more to learn about communicating with a server from Flash, but in any case, AS3 makes it simple! In the next tutorial we will talk about sending and receiving data using POST. Good luck!

Why Should I Learn FTP?

Practical knowledge of FTP is essential for just about anyone who wants to update actual HTML pages or other files, which will reside on a web server. Typical users of FTP include web designers, Flash designers, webmasters, system administrators, new media Public Relations professionals, and especially web programmers. Even though there are an abundance of tools to update website content without doing any programming (such as WordPress), you will probably need to transfer some files using FTP software at some point, whether it be to install plug-ins, transferring files to another person or organization, editing templates, or doing actual hand-coding of web pages (which I highly recommend! )

How Long Will it Take To Learn It?

Good news - not long at all! I suggest you spend at least good ten minutes on the basic concepts of FTP. Then, if you don’t have one already, you will need to get an FTP client (suggestions below), which you can download from the Web. Next, assuming that you (or your organization) has some type of web server account to transfer your files to, you will be able to upload or download in no time! (Now would be a good time to make a cup of that favorite home or office beverage.) OK, let’s get started.

What is FTP?

FTP stands for File Transfer Protocol. Basically it is a method we employ to “transfer”, or send and receive, files between computers. It can be used between any two computers that have FTP software running on them, whether its your laptop and someone’s desktop in the same room, or your laptop and a web server in another part of the world. The word protocol is used because the computers have to have some standard of doing this communication; they both need to follow the same protocol to make it happen.

FTP has been the standard for transferring files to a web server for many years now, and we expect it to continue to be in the future.

What do I need to Use It?

To use FTP you need some type of software, referred to as an FTP client, which will allow you to send files to other computers, as well as receive files from other computers. If you are working with web sites, the computers that you will send files to will most likely be called ‘web servers.’

You will also need a web hosting account. (Tip: If you are looking for dependable and affordable web hosting, you might want to try Omnis or Blue Host. Generally any hosting account will come with FTP instructions on how to connect to a particular web server (just make sure you are able to contact support when you need them).

So again, you need an FTP client, which you need to install on your computer. There are many FTP clients out there, ranging from the free (or shareware), to commercial full-fledged web design software. Below is a short list of FTP clients that I find useful for both Mac and PC, and links to download them – you can skip this section if you already have an FTP client on your computer.

FTP Clients (Short List) - Macintosh

Free

Cyberduck - Cyberduck is a free, no-nonsense, open source FTP client that is very easy to use. It allows you to maintain ‘bookmarks’, or favorites that you can connect to with one-click, once you have the details setup. Cyberduck is overall a fairly responsive application and a great value (free!). However, Cyberduck will not really help you to manage your websites locally or integrate into your design workflow. If you plan on designing and/or managing several sites, such as client sites or in-house sites for your organization, you will probably want to look at a commercial app. But all in all, it is worth taking the time to download, as it gets the job done and doesn’t take up much memory or processor resources.

Commercial

Fetch - Fetch has more features than Cyberduck that you may find appealing down the road, such as support for archived files (.zip, etc), as well as the ability to edit text files right on the server (this can be very handy). It also integrates very well with OS X by including a dashboard widget and Automator and AppleScript support. Fetch is definitely ‘battle-tested’ in the world of FTP and is a good value (only $25 at time of writing). If you use FTP a good deal, you won’t go wrong with Fetch.

Dreamweaver CS3 - If you are a web designer or producer who needs a complete solution for web publishing, including visual editing of HTML files, drag-and-drop menus, multiple language support, CSS editing, automatic code writing, and ease of use with Photoshop, Flash, Illustrator, Quick Time, and other file formats, you will want to take a good look at Dreamweaver CS3. One big feature of CS3 is the “Manage Sites” functionality which allows you to synchronize local and remote files (the ones on the server), so that you can update all your changes with one click, eliminating much of the repetitive nature of web site updates. This really helps with large projects.

Yes there are many software applications out there which do one thing (such as FTP) well for a lot cheaper – however in Dreamweaver you are basically getting a visual ‘web publishing studio’ in one package that can write all that messy HTML, CSS, and JavaScript for you, and allows you to automatically transfer your files to the server for easy updating. It definitely takes away a lot of the messiness of web site design. Although Dreamweaver is not only an FTP program, as a site management application it really has become a standard in the design and interactive media world.

FTP Clients (Short List) - Windows

Free or Shareware

SmartFTP - This is one of my favorite Windows “no-nonsense” FTP clients. SmartFTP is free for non-commercial use, and under $40 for a single-user license. Like Fetch and Dreamweaver, Smart FTP has remote editing of files, so that you do not have to download them to your computer to make changes — you can do them right on the server, saving you time. It also features a synchronization tool which will allow you to maintain consistency between your local and remote website, giving you some basic site management, along with some drag’n'drop support. All in all, Smart FTP is a good value and a solid Windows program.

Core FTP - Core FTP comes in a free (LE) version or a Pro version. The LE version is certainly adequate for most basic FTP needs, and it features basic site management, and the ability to drag-n-drop files between the client and server. It is also fairly no-frills and will give you what you need to get started.

Cute FTP - Cute FTP has a few more features than the average lite FTP client — it features a fairly user-friendly HTML editor so that you can edit your files without having to use an external program, as well as folder synchronization and compression. It is a step up for the other Windows FTP clients mentioned here, and a popular choice in this price range.

Dreamweaver CS3 - Still my favorite site management and web publishing tool for both Windows and Mac. See my review above for more information about Dreamweaver.

Gather Your Web Server Information

Now that you have your FTP client, you need to connect to the web server. To do this, you will need 3 pieces of information. These are:

The FTP host name

The FTP host name is usually a domain name or address that you will connect to. Some examples could be: yoursite.com, ftp.yoursite.com, or www.yourorganization.edu. The format of the name really depends on what your web host (or your system administrator) decided upon.

The FTP username

The FTP username will be the name on the user account that you will use to connect to the server. This username will go hand-in-hand with the FTP password (next section). You will have a unique username for your web server that you (or several people) will use to connect and transfer files to and from the server.

The FTP password

Your password will be given to you by your system admin or your web host, and you will need it whenever you connect to the server.

Note: A good FTP editor will allow you to save the host, username, and password for your web sites, so that you will not have to remember them when you want to connect.

Connect to the Server

Although each of the FTP clients may have slightly different menu items and appearances, the process of connecting to a web server via FTP will basically be the same. You will need to enter your hostname, username, and password to connect. Below are examples of FTP windows. Usually you will need to find a button or menu item that is labeled ‘Connect’, ‘Connect to Site’, ‘Connect to Server’, ‘New Connection’, ‘New site’, or something similar. You will eventually get a window which asks for your information. (In Dreamweaver, you can go do ‘Manage Sites’) and choose ‘New’)

Here are some visual examples of connecting via FTP:

The ‘Open Connection’ Button in Cyberduck — click this and you will the be able to enter your site details.

After you click ‘Open Connection’ in Cyberduck, you will be prompted for your FTP details. Easy!

In Smart FTP, the site details are always visible in the top bar. Convenient, huh?

In Dreamweaver, use the ‘Site’ pull-down option from the main menu and choose either “New Site” or “Manage Sites”

In Dreamweaver, if you choose ‘New Site’, you will get a wizard which will take you through the process of adding site details (Screen 2 of wizard shown)
This is also known as ‘Basic’ view.

(Dreamweaver) If you click the ‘advanced’ tab , you will be able to add your remote info directly. (Actually saves time compared to the basic method)

Other Options: Port, Host Directory, Passive FTP, SFTP

When you are connecting to a server, you will often see other options, such as:

Port Number — This will generally be 21 by default, unless your web host tells you otherwise. You can generally leave this field alone.

Host Directory — This is used if you want to immediately ‘jump’ to a certain directory on your web server, and is very useful for bookmarking. You will use this feature once you get used to FTP.

Passive FTP — This will need to be used for many FTP servers, so you may need to check it to get a connection. You can ask your host if it needs to be checked.

SFTP — This means ‘Secure FTP’ and is a more secure method of sending information over the Internet than standard FTP. Unless your host tell you otherwise, you generally won’t need to use it.

Transferring Files

The last (and perhaps most important) practical knowledge you will need is to be able to transfer files between your computer and the remote computer. If you are using a good FTP client or site management tool, you will hopefully be able to ‘drag’n'drop’ files between the two. If you are transferring files that will be viewed on the web in a browser, you will generally need to transfer your files to a ‘public’ directory. This could be named anything (check with your web host or system admin), but is generally called ‘public_html’, ‘public’, ‘www’, or even ‘Sites’.

I just connected to a web server using Cyberduck. Now I need to navigate into the “public_html” file to place my web files there, so they can be seen on the World Wide Web.

Using GET

Once you get this far, you should be able to copy (download) files to your computer (usually by right-clicking on a file, or dragging it to your desktop, finder, or local view in your FTP program). This is called a ‘GET’ operation in FTP parlance and is standard in FTP clients. You will often see a menu item called ‘get’ file or ‘download’ file.

Using PUT

You can usually upload by finding a ‘put’ command, or dragging into a folder on the server. If you have a good FTP client, it should be fairly intuitive.

Changing Directory

You will often need to change directories on the remote server. This will generally done in a similar fashion to browsing your local computer, by clicking (or double clicking) on folders, and using the ‘Up a directory’ method to get back to where you were.

Creating Directories

You will often need to create a directory on your web server. This is often done by going to File->New Directory, or perhaps right clicking on an item and choosing ‘New Directory,’ depending on your FTP program.

Permissions

Note that you will need correct permission to create files, upload, edit, and delete files and folders on a webserver. Depending on your access level, you should be able to change permissions to some (or all) of the web server files. This is often done by right-clicking (ctrl-click Mac) on a folder or file and choosing a ’set permissions’ option from a menu. It also often appears under the ‘File’ or ‘Edit’ main menu items. In a ‘permissions’ window, you will need to tell your server who can access that file. A permission window will often show numbers like ‘755′ or ‘555′, or contain ‘read’, ‘write’, and ‘execute’ checkboxes.

You generally do not need to change permissions unless instructed to. For example, if you are installing Word Press plug-ins, you will often need to change permissions on a directory to ‘777′, making it ‘writeable’. In this case you would check all of the boxes to make that specific directory writeable. You also often have the option of making a change to a folder ‘recursive’, which means that all folders and files inside that folder, will be affected by the change in a ‘recursive’ loop. (Neato huh?)

Below are some examples of permissions windows in Dreamweaver and Cyberduck:

Setting permissions on a file in Dreamweaver, done with a right-click (ctrl-click Mac)

…In Cyberduck right-click (ctrl-click Mac) and choose ‘Info’ to get to setting permissions on a file or folder.

Typical “Permissions” window.

Conclusion

Well that’s it for this FTP tutorial. Hopefully you came out unscathed, or better yet, totally ‘geeked’ about FTP! Whoo hoo! You made it. I bet your coffee didn’t get even get cold.

As you can see, using FTP is not very difficult once you know the basics. You should be able to handle most, if not all, of your FTP operations with ease from this point onward. As you get used to your FTP client, you will begin to eliminate repetitive tasks, which will save you a lot of development time in the long run. Lotsa Luck!

Cheers,

Jay

Links:

About FTP (Wikipedia)
Dreamweaver CS3