New Feature: Playlist Center! Pick a topic and let our playlists guide the way.

Start learning with our library of video tutorials taught by experts. Get started

Creating a First Web Site with Flash Professional CS5
Illustration by

Sending data to an email address


From:

Creating a First Web Site with Flash Professional CS5

with Paul Trani

Video: Sending data to an email address

The last step in my contact form is taking all of this data that the user enters and then sending it out to an email address. So I'm going to double-click on this Contact movie clip. And as you can see right in here, I have my input text fields, even a feedback text field. And then associated to this button, I have some ActionScript. So let's take a look at that. In this first frame of the Actions layer, I can open up the Actions panel and view all of that code.

Watch this entire course now—plus get access to every course in the library. Each course includes high-quality videos taught by expert instructors.

Become a member
please wait ...
Creating a First Web Site with Flash Professional CS5
2h 45m Beginner Jul 27, 2010

Viewers: in countries Watching now:

Creating a First Web Site with Flash Professional CS5 shows how to make a fully functional, dynamic web site in Flash Professional CS5. This course covers the fundamentals of creating and importing content, adding smooth 2D and 3D transitions, and adding button functionality that goes beyond links. This course will also show how to integrate and control video and audio as well as how to implement a gallery and a contact form. Exercise files are included with the course.

Topics include:
  • Understanding web design
  • Creating buttons and web graphics in Photoshop
  • Formatting text with the Text Layout Framework
  • Using the Timeline
  • Creating a custom looping animation
  • Loading images in a gallery
  • Creating invisible buttons
  • Adding music and video to a site
  • Customizing video playback controls
  • Optimizing and publishing a web site
Subjects:
Web Interaction Design Projects
Software:
Flash Professional Illustrator
Author:
Paul Trani

Sending data to an email address

The last step in my contact form is taking all of this data that the user enters and then sending it out to an email address. So I'm going to double-click on this Contact movie clip. And as you can see right in here, I have my input text fields, even a feedback text field. And then associated to this button, I have some ActionScript. So let's take a look at that. In this first frame of the Actions layer, I can open up the Actions panel and view all of that code.

So currently, I'm tracing out that data, which means it's just appearing in my Output panel, but what I want to do is I want to take all of this data. And I want to package it up into one variable package. And then send it to a specific URL. So the nice thing is is I can replace these comments with my own comments if I want to. And that's what I want to do right now. I'm going to just create a variable container, okay. And I'll just delete this line real fast.

All right, and this is basically going to be called var. I'm creating a new variable, and it's called allVars. All my variables are going to go in this big box called allVars. It is URLVariables. And as I type in URLV, I can see URLVariables. And it highlights it. I can hit Enter. And it will automatically add that word for me. And I'm basically creating a new URLVariables container URLVariables().

All right, so now what I need it to do is need to copy this. And inside of this Variables container, I need to have it contain the name, which is going to be equal to the text in this instance name field here. So same thing right here, allVars.email, within that Email variable, contains that information. And then message contains any text that's in this instance name field here as well.

Okay, so within this sort of box contains these three variables. All this information gets packed up into this nice little variable container right here. And then what I can do is I can then go ahead and send that information out to a URL. So that's what I'm going to do next. I'm going to create a new URL. Let me just add another comment, so, //Send info to a url. So I'm creating a new variable called mailAddress.

I'm making a URLRequest and again as soon as it highlights it, I can hit enter. And it will add that whole word, new URLRequest. Again, it highlights that line. I can hit Enter. And now I can go ahead and type in the URL that I want this information sent to. In my specific case, it's going to be jillgraphicdesigner.com/gdform.php. So this is basically a PHP page provided by my hosting company, which happens to be Go Daddy.

So they provide me with this PHP page. And this PHP page takes all of that information and sends it out to the email address that I have defined through Go Daddy's control panel. But the point here is you just need to check with your hosting company to see how they deal with PHP forms, because they might have a different name or location for their form.php file, but in general that's where the data is going to be sent. And this is just all through this URLRequest. And what I can do now is I need to make sure I attach that data to that URLRequest.

So I need to say mailAddress. Well, the data for that mailAddress is going to be all my variables. So again, I'm making sure these names match up because it's going to take all this data and attach it to the data property of my mailAddress. Next thing I need to is just go ahead and post that information to the URL mailAddress.method. Again, as soon as the word is highlighted, you can hit Enter, URLRequestMethod.POST because it's going to post this information to this URL, okay.

So that's what it's going to do. It's going to post it there. Okay, so the data is there. It posts it. And that's the sort of the method that it's going to send it. Technically, I need to actually do a sendToURL(mailAddress). So this is technically the final sort of send of all of this information. So I didn't use a Navigate toURL or anything. The nice thing about this chunk of code is that it sends the data behind the scenes if you will, without interrupting your experience.

But again, it seems like a lot of code, but this does all the work sort of behind the scenes. Post that data to the PHP page. And again, notice where I've put it, okay. So I've just started typing it right in here. Well, I mean what if they haven't filled in all of these fields? Well, what I need to do is I need to take all of this information. And I will cut it. And I'm going to put it right in here in this else statement, because I want this to happen, of course, if they have filled in all the fields, then send the data.

Another neat sort of cleanup feature you can do is you can click this sort of fifth button in, the Auto format. If I click that, it will sort of indent everything appropriately. And you can see my large else statement. That really does all of the work if all the fields are filled in. So with that good to go, I can go ahead and do a Test Movie. Go to my Contact page. Enter in my email address, something like that. Send the message.

Click Send. It says thank you! And then if I go to basically my email that I've defined with my hosting provider, I should see that email in my Inbox. Here it is, my Inbox, right here, the email that was sent, my information. And everything is working out just great. So again, that was just a quick example of how to take that information that was in Flash and send it to a PHP page that does most of the work doing the final step of actually sending the email.

Find answers to the most frequently asked questions about Creating a First Web Site with Flash Professional CS5.


Expand all | Collapse all
please wait ...
Q: I followed all the steps and suggestions in the "Adding a progress bar" video, but when I add the progress bar to my web site, I can’t remove it once the index.swf file loads up. The progress bar remains on the homepage and the rest of the pages. How do I make it disappear once the site loads?
A: To make it disappear, just make sure the progress bar is only in frame 1. If it’s on its own layer, then right-click on the 2nd frame in that same layer and select "Insert Blank Keyframe." That will make it disappear.
Q: Despite following the steps in the "Adding a progress bar" video, I cannot figure out how to keep the progress bar from appearing on a movie that has finished loading. How can I make the progress bar disappear?
A: Just add the red line below to the preloader.fla file. This will make the progress bar invisible: 
"function contentLoaded(evt:Event):void { //Optionally change to a clip holder and set progressbar visibility. addChild(contentLoader); progressbar.visible = false; }"
 
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.
Upgrade now


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

join now Upgrade now

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Creating a First Web Site with Flash Professional CS5.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Are you sure you want to delete this note?

No

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.