Start learning with our library of video tutorials taught by experts. Get started
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.
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, firstname.lastname@example.org, 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 email@example.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.
Here are the FAQs that matched your search "":
Sorry, there are no matches for your search ""—to search again, type in another word or phrase and click search.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
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.