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

Creating a First Web Site with Flash CS4 Professional

Passing data out of Flash


From:

Creating a First Web Site with Flash CS4 Professional

with Paul Trani

Video: Passing data out of Flash

Once you have created some input text fields, you want to be able to take that content that is in here, whatever the user types in, and you want to pass it out of Flash. So I need an Enter button and I need to take whatever data is in here and pass it out of Flash and I can do that if these are input text fields. So let me close down that text file. And let me go to my Timeline. I'm going to double-click on this content movie clip. I'm going to scroll down to the Contact section. So if I double-click on it. This is where I want to add my 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 CS4 Professional
3h 8m Beginner Apr 15, 2009

Viewers: in countries Watching now:

Information on how to learn Flash is prevalent, but it can be frustrating to understand how to make an entire working web site using this unique technology. Here's a course that cuts through the clutter and offers practical tools for creating a dynamic web site, even for first-time developers. In Creating a First Web Site with Flash CS4 Professional, veteran Flash instructor Paul Trani simplifies the process of integrating animation, video, audio, and user interactivity to create a site that is dynamic and appealing. The goal of this hands-on workshop is to teach web site-building skills for today's demanding interactive industry. Exercise files accompany the course.

Topics include:
  • Manipulating images for the best results
  • Integrating assets from other Adobe products
  • Creating buttons with ActionScript
  • Embedding links to external web sites
  • Exploring text layouts
  • Customizing interactive contact forms
Subjects:
Web Web Design Projects
Software:
Flash Professional
Author:
Paul Trani

Passing data out of Flash

Once you have created some input text fields, you want to be able to take that content that is in here, whatever the user types in, and you want to pass it out of Flash. So I need an Enter button and I need to take whatever data is in here and pass it out of Flash and I can do that if these are input text fields. So let me close down that text file. And let me go to my Timeline. I'm going to double-click on this content movie clip. I'm going to scroll down to the Contact section. So if I double-click on it. This is where I want to add my code.

And just to review, I can select any of these input text fields. The first one is called name_txt, second one is email_txt, third one is message_txt. So here are my text fields. I now need to create a button that is going to pass that data out. So I'm going to delete this Submit text and I'm going to go to Window, down to Common Libraries, and I'm going to go to Buttons and I'm going to go ahead and grab a button from this Common Library. I'm going to go with this buttons rounded and I can select any one of these. I like this blue one at the top, so I'm just going to click and drag it into my Timeline, into my Contact movie clip. I can close that Common Library and position this button just below those input text fields.

All right, with that button selected I'm going to give it an instance name. I'm going to call enter_btn. That is my Enter button. Now I need to create an event listener for that button. So at the very top of all my layers, in my Contact movie clip, I'm going to create a new layer and I'm going to call it ActionScript. And in this very first frame, that where I'm going to add my code, I'm going to go to Window, to Actions. So I'm going to create this button, as if I'm creating any button, it's going to be the same way. I first need to state what I need to listen for. It's going to be the Enter button and I need to add an event listener. Soon as that's highlighted I could hit Enter to add it. I'm going to listen for a mouse event. That Click in particular.

And once you click on this button, it's going to fire off this function called sendData. Now let's write the function to sendData. It's going to be a mouse event and it's not going to return anything. I'm going to add an open curly brace and a closing curly brace and within those curly braces that's where I'm going to write more code. And I'm going to start out with some trace calls. So for instance I want to trace out whatever is in the name text field. So name_txt is the name of that movie clip and I want to take anything that's in the text property. The name_txt.text. That's going to be traced out. It's going to be put in my Output panel.

So I'm going to do that for the name _txt. I also want to trace out the email_txt.text just to make sure this is working. I'll trace out the message_txt, whatever property is in that. Text property for a message_txt as well. Now it doesn't matter whether there are spaces in here or not. People prefer it different ways. I'll just space it out a little bit. But in general this is ready to go. So when I click on the Enter button, it's going to fire off this sendData function and in my Output panel it will trace whatever is in these text fields.

So the first thing I want to do is just double-check my code. So I'm going to click the Check syntax, it does say this script contains no errors. So I'm going to go ahead and run this. Control > Test Movie. Contact section, so whatever I type in here, and here, and here is what should be shown in my Output panel. So when I click this button, I can see that it did, take whatever was in those fields and it prints out in my Output panel. Paul Trani, paul@paultrani.com, and then the message, whatever message that might be.

So we know everything is working, it's working great. Now I just need to pass that data out. Now there are many different ways to do this. There are more complex ways, using some server-side scripts, some middleware pages, using PHP, JSP that sort of thing. But for our needs I'm just going to pass this data out and it's going to open up your default email application with this information already in it. So this is going to be done by creating a variable called mailAddress.

So I need to type in the mailAddress. This could be anything. I could call this theEmail. It doesn't matter. But this is what matters is the URLRequest. Because that's what I'm doing. I'm making a URLRequest. I'm passing all this data through a URL string. I'm going to make this really clear in a second. I'm going to create a new URLRequest and this is the string. I want to pass all this information to this specific email address. And I'm going to say mailto, you might be familiar with mailto, it's a Web term, HTML. I'm going to mail to john@johndoe.com. That's where it's going to be sent, and this is where the magic happens, because I want to not only open up your default email client such as Outlook, but I want to pass all of this data into their perspective fields in that email.

So it's going to open up a new email. It's going to have john@johndoe as the To, so it's going to send that email to john@johndoe and the From, if I do ?from=, that's where I want to add the email text that you have typed in. So I need to take this same chunk of code. So I'm actually going to select it, copy it and write down here, as part of this string I'm going to add it, plus and then paste it and now whatever they type in here is going to appear in this URL request in their email client. So email _txt.text +. I want to add a couple of more items to this string. The next thing is going to be the subject. And in the subject I want to include that this is from the Web site. So that's just a personal message. So John knows that this email came from someone who visited his web site and the body of the email is going to equal whatever they have in this message text field. So again I'm going to select this. I'm going to copy it and I'm going to body. I'm going to make that equal to, paste the text whatever is in the message text field.

And lastly I needed to type in the From and this is just a simple message saying 'this is from,' and this is going in the body as well. It's from whoever typed in the name in the From field, name_txt.text. And again, this matches up with what's right here. If they type in their name here, it's going to appear in the message body is what's going to happen. And what I did here is I have added also an extra little note saying that this is from this person.

So I'm actually going to see whatever I type in here is going to be in the body of the email. So that is looking pretty good but keep in mind any parenthesis that I open, I have to close. So down here at the end, I want to close that parenthesis. Now I have just made a URL request but I have not sent it yet. And that's what I need to do now is I want to navigate to that specific URL and the URL in this case happens to be the email. So I'm going to select that, right click, Copy, click in here and paste it, just like that.

So again we are tracing everything. We did that earlier, we know it works. I take all that information and make it part of this mailto string right in here, and all this information does is it populates the email that pops up, whatever the default email client is. So in this case it's Outlook and you will see what that looks like right now. Last thing I need to do is make navigateToURL call that takes all that information that's in here and passes it along that URL.

So let me go to Control > Test Movie. Contact section, type in my name, email address and the message, just like that. Click the Enter button. I should still get the trace statement but I should also see my Outlook email pop open. And sure enough it does say that it's going To John Doe, from the Web site, personal message I have added, and this is whatever they typed in the message text input text field, and then lastly is of course their name.

Again this is a simple way to send someone an email to have it somewhat customized and this doesn't require backend programming. So this is really the simplest way you want to do things. Of course there are other ways but for our needs right now this works out perfect.

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


Expand all | Collapse all
Please wait...
Q: If I create a website using Flash CS4 on a Mac, can I edit it on a PC using Flash CS4?
A: As long the file is saved as a .FLA file with the extention ".fla" typed at the end of the filename when saving on a Mac, it should open with no problem on a PC.
Share a link to this course
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.

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 CS4 Professional.

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


OK

Course retiring soon

Creating a First Web Site with Flash CS4 Professional will be retired from the lynda.com library on April 24, 2014. Training videos and exercise files will no longer be available, but the course will still appear in your course history and certificates of completion.


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
Welcome to the redesigned course page.

We’ve moved some things around, and now you can



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.

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