Dynamic Text Under Mask in Flash CS3

Having trouble displaying dynamic text under a mask in Flash CS3? So was I! I figured it out, so here's how to do it. This one's going to be short and sweet.

All you need to do to fix this problem is embed the text when the movie publishes. You can do this by selecting your dynamic text box and clicking the "Embed" button in the properties panel.

When the window pops up asking you which glyphs to select, do not select all! I accidently did this and wound up embedding every single character for each language into my file. Assuming you're building an English speaking flash site, you would select 'Uppercase', 'Lowercase', 'Numerals', and 'Punctuation'. This will take care of all characters in the English script.

Test your movie, and voila! You have dynamic text appearing under a mask!

I hope this has been of some help to somebody. Leave me a comment if you liked or hated this one. Take care.

- Koz

Simple Contact Form With PHP

In this post I'm going to teach you how to build a simple contact form using PHP. This post does not cover form verification or headers, but I plan on writing a few articles in the future about these topics. For now we'll just build a functional form with php integration.

The first thing that we'll need is a simple form. Lets use the following:

<form action="contact.php" method="post">
     Name: <input name="name" size="50" type="text">
<br />
      E-mail: <input name="email" size="50" type="text">
<br />
      Subject: <input name="subject" size="50" type="text">
<br />
      Message:
<br />
      <textarea rows="20" cols="50" name="message"></textarea>
<br />
      <input value="Submit!" type="submit">
</form>

Simple enough eh?

I'm going to assume that you know the different parts of the form. Just as a refresher know that the action property tells what page to send the browser to to process the form, and the method property tells you how the variables will be sent to the server. You can use either the "get" method or the "post" method. The main difference between the two is that the "get" method will include the variables in the URL in the address bar, and the "post" method will not. GET methods are typically good in inventory systems where you would like a user to be able to bookmark a specific item, while POST methods are better for form usage.

Anyway, back from one of my tangents. Save that form in whatever file you'd like and send it up to your server.

Now start a new text file and go ahead and save it as contact.php. This is going to be the file that processes the form, and mails the message to the user.

First the code, and then the explanation:


<?php

// Step 1
$name = $_POST['name'];
$subject = $_POST['subject'];
$email = $_POST['email'];
$message = $_POST['message'];

$to = "akozlik@gmail.com"; // The e-mail address you want the message sent to

// Step 2
$header = "From: " . $name . " < " . $email . ">";

// Step 3
mail($to, $subject, $message, $header);

// Step 4
header("Location: thankyou.php");

?>

Step 1:

Set a few variables and get their values using the $_POST prefix. If you used the "get" method on your form replace this with $_GET['name'] etc . . .

Step 2:
I know I said that I wasn't going to put in headers, but I felt this is a pretty good one to include in this tutorial. I go more into headers on a different post, but know that this one is great to have. The header variable winds up with the form "From: Andrew ". When you've received e-mail you've probably noticed that the sender's name shows up in the From field in your inbox. This is because of the way the header was set up. When the user sends a message from your page, the name they provided will show up in your inbox.

Step 3:
The meat and potatoes of this project is PHP's mail() function. This is setup in the format mail(to, subject, message, header). Notice that there is no "from" parameter. This is why I included the From in the header, as that's how the mail servers read that information. We simply include our variables and let our sendmail server do the rest.

Step 4:
After mail is sent, you can then redirect the user to a thank you page. Remember that this header() function must be used before any text is displayed to the browser. If you use any echo statements or straight HTML before this point, the redirect will not work and you will get an error.

Well, that's about all I have to say on the topic of simple forms. Hopefully somebody finds this to be a useful article and is able to get some work done thanks to it. As usual, I'll put my shameless plug in here and ask that you click a few ads before departing, if you like the article. Better yet, subscribe to my RSS feed located to the side of this post. Thanks for reading, and take care.

-Koz

Importing Photoshop to Flash

I recently began working with a client who had a design for a website in Photoshop but wanted to have the site built using Flash CS3. Flash CS3 has some great features for importing to Photoshop and can make the transitions between the two programs quite painless.

After your design is done in Photoshop it's time to import it to Flash. This is quite easy. All you need to do is go to File > Import to Stage or File > Import to Library.

Before doing this I make sure that I'm inside the movie clip that I'm wanting to import to. If you have a section for an About Us page, and have an About Us movie clip, open that clip up and do the importing.

Flash will give you the option to flatten the layers or keep them as they are in Photoshop. I typically choose to keep the layers as they are so you can make any adjustments that are needed. This gives you much more flexibility with your project.

After choosing your option you'll get a window that asks you which layers you'd like to import. If you kept your layers in Photoshop organized in folders, you can choose to import them by folder. This is especially useful if your Photoshop file has each section in it's own folder.

After that it's just a matter of positioning your graphics and adding all the interactivity.

I hope this is helpful to you in your next project. Take care until next time.

Loading External Text in Flash CS3

I've been out of the Flash game for quite a while now. The last version I've been using was Flash MX. Imagine my surprise when I downloaded Flash CS3 and found that it now uses purely Actionscript 3.0. All my previous methods of programming Flash were rendered useless by all the new standards. Alas, I began my quest to find useful information, and hit a few roadblocks.

Adobe's livedocs are ok, but it really helps to find real world examples. I tried searching for the various things I needed, but to no avail. I finally found some screencasts on youtube that helped, so I got my problem solved. It was at that point that I decided to write my own articles to help people achieve specific tasks using Flash, PHP, DHTML, and whatever else I can come up with.

Now, enough of my Rant. Lets code!

So my main task for this article is to load an external file into a flash app, and display it in a text box. This is specifically good for loading text that will be changed periodically. Rather than open flash, edit the file, re-publish, and upload the new file, you can just pull all the data from a txt file and display it there. We can even render the text as HTML!

We'll build this app using the TextArea component. Just go to Window->Components to pull up the components window. Drag a TextArea component to the stage, and give it an instance name. We'll call ours external_faq.

Now for the code. I'll give the code, and then I'll go ahead and explain it. All of the following code goes in the timeline on the same frame as the objects it references.

var faqLoader:URLLoader = new URLLoader(); // Step 1
faqLoader.load(new URLRequest("test.txt")); // Step 2

faqLoader.addEventListener(Event.COMPLETE, onComplete); // Step 3

function onComplete (event:Event):void // Step 4
{
var faq:String = event.target.data; // Step 5
external_faq.text += faq; // Step 6
}

Step 1
We need to make a new URLLoader, so we define the variable faqLoader as a URLLoader, then call a new URLLoader() object. The URLLoader will hold the data returned by the URL.

Step 2
We go ahead and load the url, using the URLRequest() object. We use the load method of the URLLoader object, and open a new URLRequest object, which contains the path to our text file. Simple enough.

Step 3
Now we go ahead and add an Event Listener to our faqLoader to listen for when the loading as been complete. An event listener is the equivalent of using an "onWhatever" event with older Action Script. There are many different Event Listeners and Event types. For instance you could have an event:MouseEvent and check for when MouseEvent.CLICK occurs to see when a user clicks their mouse on the object the code is attached to. That's getting on a tangent though.

Step 4
We set a String variable to hold the text that is loaded from the file. This will enable us to do any string manipulation we may wish to do. However, we're going to keep this one simple, and just display the text to the TextArea component.

Step 5
Finally, we set the text property of the TextArea component to our String variable. Note that we I am not using external_faq.text = faq. I am using external_faq.text += faq. Also, if you wanted to use html formatted text, you would use the htmlText property.

Finally, the text file that you have written doesn't need any variables inside it. All it needs to contain is the text you wish to display.

I hope this tutorial is useful for anybody who had the same trouble I did. I know it's a relatively simple application, but making that migration from Actionscript versions can be tough.

On a shameless side note, if you liked the article and found it to be useful, click on an add or two at the top of this page. I'm a starving college student after all, and every little bit helps. :-D

~Koz