The Essential Guide to Flash CS4 friends of ED ADOBE LEARNING LIBRARY PHẦN 7 pps

Create separate static text fields for the following: days, hours, minutes, and seconds, and the phrase “Until our BIG SALE!” Position them intui-tively, as shown in Figure 8-21.. Rememb

5 Choose stark bold Cooper Black font at 30 points, as shown in Figure 8-20.

Now we need to give our viewers a context for the countdown timer It’s less to put anything on your site that doesn’t give users information or a reason

point-to come back

6 Create separate static text fields for the following: days, hours, minutes, and seconds, and the phrase “Until our BIG SALE!” Position them intui-tively, as shown in Figure 8-21

Now that we have our template set up, it’s time to get serious about controlling time The first thing we need to do is give our dynamic text field an instance

name Instance names allow you to refer to your objects in ActionScript, which

enables you to manipulate them In this case, we are giving our dynamic text field an instance name that we can refer to in our ActionScript to get the num-bers to count down to an end date

7 Click the Selection Tool , and then click your dynamic text field

8 In the Properties Inspector, give the dynamic text the instance name

If you are worried about the weight of your animation, due to file tions or the addition of other large elements such as photographs, you always

specifica-have the option of using system fonts System fonts are the basic fonts

installed on a computer’s operating system, and as such add little to no weight

to your Flash file, as there is no need to embed them—your system will be able

to display them from its memory with no embedding.

9 Select the dynamic text element and click the Character Embedding button from

the Properties Inspector

10 Select Numerals to display the numbers that you require in the dynamic text field

However, you are not only displaying numerals, but also a punctuation mark—the colon (:) Add this into the Include these characters field, as shown in Figure 8-23

Figure 8-19 The baby

countdown timer about to be

functional

Figure 8-20 Designing your

countdown timer

Figure 8-21 The template for

your countdown timer

12 Save your Flash CS4 document as ?kqjp`ksj*bh].

Our countdown timer is ready for ActionScript 3.0 to be applied to it! We’re going to give

it an end date—in this particular example, it is the date the sale is going to start First of

all, we’ll rename the existing layer

13 Open the ?kqjp`ksj*bh] document and rename the existing layer Timer by

double-clicking the layer’s title

14 Create a new layer on the timeline and call it Actions, as shown in Figure 8-24

Figure 8-24 Creating

the Actions layer for your ActionScript

15 Select Windows ¢ Actions to open the Actions panel

16 Enter the following code into the Script pane (as shown in Figure 8-25):

r]naj`@]pa6@]pa9jas@]pa$.,-,(-(-%7

pn]_a$aj`@]pa%7

Figure 8-25 Setting the finish date for your countdown timer

You created a variable called aj`@]pa in the second line of code This variable is where the new

@]pa object will count down to for the sale date January 1, 2010 Notice in the code that we

have entered 0 for the month, even though January is the first month This is because months

start with 0 in ActionScript Refer to Table 8-2 for the months and ActionScript equivalents

Table 8-2 Months and Their ActionScript 3.0 Equivalents

of the chapter if you need a refresher on the pn]_a statement.)Publish your movie by selecting Control ¢ Publish Movie You should see the Output window pop up with the information contained in your pn]_a statement, as shown in Figure 8-26 The pn]_a statement has been added to the code for testing purposes only

Figure 8-26 The trace statement sends information to the Output window.

The output has shown us the destination date for our countdown timer, January 1, 2010, which was described in the r]naj`@]pa6@]pa9jas@]pa$.,-,(,(-%7 code

Now that we have tested the code and we know it works, we are going to create a Peian object Peian objects are new to Flash CS4, and they exist solely to assist you in creating time-based applications The function of the Peian object that we are about to create is to update the countdown time every second

The third line of code creates a Peian object and stores it within the variable _kqjp`ksjPeian,

which is defined in milliseconds by the code jasPeian$-,,,% We then introduce an event

listener Event listeners are often also called event handlers, and they are functions that are

executed in Flash Player in reaction to specific events defined in ActionScript

In this case, our event listener is listening for the portion of the PeianArajp class

that we have specified as Peian, which occurs every 1000 milliseconds As this occurs,

it initiates another function, defined as the ql`]paPeia function in the line bqj_pekj

ql`]paPeia$a6PeianArajp%6rke`

Figure 8-27 Adding the countdown timer object via ActionScript

We’re now going to compare the current date and time with our target date, which is

essentially a basic mathematical equation

2 Add the following code under the existing last line of code:

3 Test your movie again.

What happens? Though the countdown timer isn’t yet working on the front end, we can see something happening on the back end The Output window once again pops up, and it changes every second, as shown in Figure 8-28 It is displaying the total milliseconds until the sale date is reached

Figure 8-28 The Output window updates every second.

But it’s not very intuitive to countdown in milliseconds, is it? In the next step, we are going

to transform those milliseconds into days, hours, minutes, and seconds

4 Delete the following code from your script:

wr]njks6@]pa9jas@]pa$%7r]npeiaHabp9aj`@]pa*capPeia$%)jks*capPeia$%7pn]_a$peiaHabp%7

y

5 Add the following code at the end of the ActionScript, as shown in Figure 8-29:

r]njks6`]pa9jas@]pa$%7r]npeiaHabp6Jqi^an9aj`@]pa*capPeia$%)jks*capPeia$%7r]noa_kj`o6Jqi^an9I]pd*bhkkn$peiahabp+-,,,%7r]niejqpao6jqi^an9I]pd*bhkkn$oa_kj`o+2,%7r]ndkqno6Jqi^an9I]pd*bhkkn$iejqpao+2,%7r]n`]uo6Jqi^an9I]pd*bhkkn$dkqno+.0%7oa_kj`o!92,7

iejqpao!92,7dkqno!9.07

Examine the code that you have just added to your ActionScript panel Doesn’t it seem like

a familiar, everyday mathematical equation? If it seems familiar, that is because it is ing down the time that is left into sections of time that we are more familiar with (i.e., day, hours, minutes, and seconds)

break-The following code creates variables that stores the end date and the time left in total seconds, minutes, and hours until January 1, 2010:

r]njks6`]pa9jas@]pa$%7r]npeiaHabp6Jqi^an9aj`@]pa*capPeia$%)jks*capPeia$%7r]noa_kj`o6Jqi^an9I]pd*bhkkn$peiahabp+-,,,%7r]niejqpao6jqi^an9I]pd*bhkkn$oa_kj`o+2,%7r]ndkqno6Jqi^an9I]pd*bhkkn$iejqpao+2,%7r]n`]uo6Jqi^an9I]pd*bhkkn$dkqno+.0%7However, this is not exactly what we want to display We want to display the time until the sale as it applies to the current hour

That is, we want the hours displayed as 23 and under, as there are 24 hours in a day, and the 24th hour should be displayed as 0 Likewise, we want the minutes displayed as 59 and under, with the 60th minute displayed as 0, since there are 60 minutes in an hour And of course we want the seconds to be displayed the same way as the minutes Applying this logic will ensure that days, hours, minutes, and seconds will be displayed as per our text fields: 000:00:00:00 For example, if there were 100 days, 11 hours, 12 minutes, and 25 sec-onds left until our destination date, it would be displayed on our timer as 100:11:12:25 Enabling this display of time is accomplished by the following piece of code:

oa_kj`o!92,7iejqpao!92,7dkqno!9.07Essentially, this code takes the total of the remaining time left and divides it by each denominator of time to calculate the days, hours, minutes, and seconds left Now that we have calculated the time remaining in terms that we can immediately understand, the fol-lowing code converts these numbers into strings that will be displayed in our dynamic countdown:

r]noa_6Opnejc9oa_kj`o*pkOpnejc$%7r]niej6Opnejc9iejqpao*pkOpnejc$%7r]ndno6Opnejc9dkqno*pkOpnejc$%7r]n`6Opnejc9`]uo*pkOpnejc$%7Finally, we define the number of digits we want to display for each unit of time Remember that when we created our countdown timer, we displayed on the stage the fields shown in Figure 8-30

The following code ensures that our seconds, hours, and minutes each display

no more than two digits, and where the number remaining is singular (e.g., 1), the number is displayed as two digits (i.e., 01):

Figure 8-30 The number of

digits defined for each time unit

The code is literally telling the Flash animation that if the number of seconds, minutes, or

hours is less than two digits, a 0 should be displayed in front of it

Now that we have specified the number of digits for each time unit, we simply create a

variable called peia that strings the numbers together to coherently display the

For the final step, we’ll just tidy up the code so that it doesn’t flash 000:00:00:00 before the

timer kicks in The original static information, 000:00:00:00, was placed there to ensure

that the spacing was correct and that the countdown timer fit into the space that we

assigned it at the beginning of the exercise

6 Double-click the dynamic text to select it and delete it, as shown in

Figure 8-31

Your timer now counts down to January 1, 2010! Of course, you can easily tailor

this timer to count down to your own special date by changing the date value

in the first line of code:

r]naj`@]pa6@]pa9jas@]pa$.,-,(,(/,%

ActionScript 3.0 and XML

You can harness the power of ActionScript 3.0 and XML to create dynamic Flash CS4 sites

and applications XML stands for Extensible Markup Language, and it’s a common way

of sharing information over the World Wide Web Its main function is to store data, and

this is reflected in your XML document

Using XML in combination with Flash CS4 allows you to quickly and easily change the

con-tent of a Flash application without having to modify the FLA file Consider the following

example:

Figure 8-31 Deleting the

placeholder text

This example demonstrates markup and text within an XML document, albeit a very simple

one There are two different kinds of information in it: tags, which are 8cajasepdajru:,

8lnk`q_p:, 8ai]eh]``naoo:, and 8pahaldkjajqi^an:; and elements, which include all

of the information that occurs within the markup tags XML documents combine tags and text into a single file Tags declare the start and end of elements, which are the logical units of information within your XML document

We are now going to create a Flash CS4 application that pulls this information into the

Output window using the pn]_a command Ensure that you have downloaded the _d]l)pan4*tih document from the source files of this book

1 Open a new blank document in Flash CS4

2 Save the Flash document as _d]lpan4*bh] in the same directory that you have

saved the downloaded _d]lpan4*tih file, as shown in Figure 8-32

Figure 8-32 The XML file must be saved in the same directory

as your FLA file

3 Open the Actions panel by selecting Window ¢ Actions

4 Type the following code on frame 1 of layer 1 of _d]lpan4*bh]:

r]niuTIH6TIH7r]niuHk]`an6QNHHk]`an9jasQNHHk]`an$%7The first line of code creates a variable to hold the instance of the XML class The second line of code creates an instance of a QNHHk]`an class, which will load the XML file into the Flash CS4 document

5 Type the following code under the first two lines of code:

iuHk]`an*hk]`$jasQNHNamqaop$_d]lpan4*tih%%7The third line of code calls the appropriate XML file—in this case _d]lpan4*tih—into the Flash CS4 file

Now we need to create an event listener, which will ensure that the XML file is processed correctly As noted in previous exercises, an event listener is a function that is executed in Flash Player in reaction to specific ActionScript events The event listener is attached to the QNHHk]`an class instance in this case

6 Type the following code under the existing three lines of code:

iuHk]`an*]``ArajpHeopajan$Arajp*?KILHAPA(lnk_aooTIH%7

8

We’re almost done! In the previous line of code, the event listener also serves to trigger the

function lnk_aooTIH after the loading of the _d]lpan4*tih file has completed The next lines

of code will assign the _d]lpan4*tih file’s contents as the XML data of our XML variable

7 Now type the remaining lines of code under the existing code in the Actions panel,

Remember the pn]_a function from previously in this chapter In this case, the pn]_a function

will cause the information in the _d]lpan4*tih file to be displayed in the Output window

Figure 8-33 The ActionScript 3.0 code to call the XML file

8 Save your _d]lpan4*bh] file and publish it

The information should be displayed in the Output window, as shown in Figure 8-34

Figure 8-34 The Output window displays the information in the XML file.

If you were to change details such as the telephone number or the e-mail address in the

XML file, when you published the Flash document, you would see these details change

This is a very brief demonstration of how easy it is to update Flash CS4 documents using

XML files Basically, as you have seen, there are three steps:

1 Create a variable to hold the instance of the XML class

2 Create the QNHHk]`an class instance that loads the XML file

3 Communicate the XML file’s content to the XML instance variable when the file has

completed loading

This is but a very basic example of what you can accomplish when you combine XML and Flash CS4 Immediately, you can see how easy it is to update details from an external XML file In Chapter 9, we’ll take this exercise one step further when we use this powerful tool

to build a 3D carousel that calls the information from an external source using XML

ActionScript 3.0 and buttons

Buttons are ubiquitous in web design They are a classic and widely recognized call to action in websites, banners, widgets, and animations We use them to control videos, to submit information via forms, to trigger interaction, and for countless other uses

Learning how to implement buttons is crucial in creating engaging interactive design The plest ActionScript 3.0 buttons need two things in order to behave correctly: an event listener and a function to reciprocate calls made by said event Buttons are used in many instances in Flash animations, from calls to action in advertising banners, to buttons in forms

sim-This section will give you a brief understanding of event listeners on buttons

Understanding mouse events

In the following exercise, you are going to learn how to apply ActionScript 3.0 to a button

1 Open exercise file 4,-*bh] in Flash CS4

You will be greeted with a gray square Double-click it to see how it expands to the state timeline that is common to all buttons, as shown in Figure 8-35

four-Figure 8-35 The button’s four-state timeline

2 Return to the main stage by clicking the Scene 1 button at the top-left corner of

the stage

8

Buttons are four-frame movies clips Each frame has a specific function The

Up state reflects the button when it has no interaction applied to it (i.e., the

mouse is neither hovering over it nor clicking it) The Over state defines how

the button will appear on the stage when the mouse cursor hovers over it The

Down state defines the button’s appearance as it is being clicked, and the Hit

state defines the area of the button that responds to the mouse click.

We are going to give the button an instance name, which will allow us to refer to the

but-ton within the ActionScript

3 Click the button

4 Give the button the instance name of iu>qp in the Properties Inspector, as shown

in Figure 8-36

Figure 8-36 Assigning an instance name to your button

We’re now going to create some ActionScript that will make the button functional

5 Create a new layer on the timeline and call it Actions, as shown in Figure 8-37

Figure 8-37 Creating an Actions layer on

the timeline

6 Select Window ¢ Actions to open the Actions panel, and then click the first frame

in the Actions layer on the timeline

7 Enter the following code into the Actions panel, as shown in Figure 8-38:

iu>qp*]``ArajpHeopajan$IkqoaArajp*?HE?G(iu?he_gBqj_pekj%7

Figure 8-38 Adding an event listener to your button

This code tells the button labeled iu>qp to wait and listen for a mouse click If the button

is clicked, then the function iu?he_gBqj_pekj is called

8 Enter the following code, as shown in Figure 8-39:

bqj_pekjiu?he_gBqj_pekj$arajp6IkqoaArajp%6rke`w

pn]_a$_he_g%7y

This is a standard function definition Whenever the mouse clicks the button, the function traces the word _he_g to the Output window

Figure 8-39 The word click is traced whenever the mouse clicks the button.

Take a minute to test your file by selecting Control ¢ Test Movie You will see that whenever you click the button in the published SWF, the word click appears in the Output window, as shown in Figure 8-40 As you have seen throughout this chapter, using the pn]_a com-mand is invaluable when testing your ActionScript

Figure 8-40 Tracing the click command

8

The next line of code will create a IkqoaArajp listener This event listener is used to detect

all mouse behaviors, as listed following:

IkqoaArajp*?HE?G detects when a button is being clicked

IkqoaArajp*IKQOA[KQP detects when the mouse has moved from hovering above

the button to hovering off the button

IkqoaArajp*IKQOA[KRAN detects when the mouse rolls over the button

In the case of the following code, we are going to create a IkqoaArajp*IKQOA[KQP event

listener

9 Add the following code to your ActionScript, as shown in Figure 8-41:

iu>qp*]``ArajpHeopajan$IkqoaArajp*IKQOA[KQP(iu?he_gKqp%7

Figure 8-41 Adding the MouseEvent listener to your ActionScript

Again, this code tells Flash that it needs to perform an action when the mouse rolls outside

of the button’s perimeter The action is to perform the function iu?he_gKqp

We’re now going to see how the function iu?he_gKqp works by inserting a pn]_a

10 Enter the following code:

bqj_pekjiu?he_gKqp$arajp6IkqoaArajp%6rke`w

pn]_a$Kqp%7

y

The function iu?he_gKqp is called every time the mouse passes outside the button Note

that it is a rke` function, as it does not return a value Now test the movie Notice that

when you click the button, the output reads click, and when you roll off the button, the

output reads out

This is a simplistic representation of how you can create interactions using IkqoaArajp

lis-teners We will use this again in the final exercise of this chapter, where we’ll create a contact

form to harness the power of buttons, dynamic text fields, ActionScript, and PHP code

Text fields and ActionScript

Using ActionScript with dynamic text fields gives you the power to change text in your Flash CS4 movies on the fly Dynamic text fields give you a way of displaying information and messages that can change, such as the time and date, navigation, scoring, measure-ments, and even greeting messages Using a dynamic text field is very easy, as you saw in the countdown timer exercise previously in this chapter You simply need to ensure that your text field is a dynamic text field and that you have assigned it an instance name You will now create a dynamic text field that uses the button from the last exercise to display information about the mouse Continue along from the last exercise, or load up the exercise file 4).*bh]

1 Using the Text tool on the Tools panel, drag out a field, as shown in Figure 8-42

Figure 8-42 Placing a text field on the stage

under the button

2 Assign the text field an instance name of iuPatpBeah` in the Properties Inspector

Also ensure that the text field is set to Dynamic Text, as shown in Figure 8-43

Figure 8-43 Assigning an instance name and defining the

kind of text field in the Properties Inspector

3 Open the Actions panel, and add the following text field code under the first pn]_a

statement, as shown in Figure 8-44:

iuPatpBeah`*patp9_he_g7

8

Figure 8-44 Adding text field code to your ActionScript

4 Now add the following code under the second pn]_a statement, as shown in

Figure 8-45:

iuPatpBeah`*patp9kqp7

Figure 8-45 Inserting the output to appear on the stage

Let’s test the movie now Mouse over the button and you will see the output out appear in

the dynamic text field on the stage Click the button and you will see the output click

appear in the text field

These exercises might seem basic, but they are designed to give you an idea of the power

of buttons and text fields In the following exercise, the final exercise of this chapter, we are going to create a contact form, harnessing the power of PHP and Flash CS4

Sending e-mail with fields and buttons

This next section is a concise guide to sending variables to a server-side script Server-side scripting implements processes on a web server to create dynamic web pages In this case, the user will be sending an e-mail address entered from a text field in a SWF document The information entered into the form will then be e-mailed to your e-mail address This

is typical of the way that contact forms function It consists of a Flash SWF front end and a PHP script back end The Flash side passes the e-mail address to the back end The back end then takes the e-mail address and processes it through a PHP script, which composes the e-mail address as the content in an e-mail sent to you You don’t have to use PHP—you could use any server-side language, such as ASP or JSP We have chosen to use PHP due to its popularity in the market and the fact that it is open source—it doesn’t cost anything to use The exercise requires an environment that uses PHP 4 or later to work correctly, so make sure that your hosting platform is running PHP

Ensure that you have downloaded the exercise files from the friends of ED website to complete this exercise

1 Begin the e-mail contact form by opening 4,.*bh] You will see a brown strip with

some words, a light strip, and a Send button appear on the stage

2 Create a new layer on top of these background elements and call it inputText

3 With the inputText layer highlighted, select the Text tool and drag out a text field

the length of the rounded rectangle adjacent to the words Enter Your Email, as shown in Figure 8-46

Figure 8-46 Creating a text field on the stage

We’re now going to ensure that the text that the user inputs into the text field will sit nicely upon the stage

4 With the text field on the stage selected, give it an instance name of ai]eh=``naoo

in the Properties Inspector and ensure that it is assigned the type Input Text Change the Character Family to Arial, assign it a size of 12 points, and make the font color a dark brown Use the Eyedropper tool to match the text color to that of the dark brown in the background See Figure 8-47 for a guide to the settings

5 Save your document, as we will be using it in the next exercise

8

Figure 8-47 Assigning the font properties in the Properties

Inspector

Now that we have set up the input field where the user will enter their e-mail address, we

will enable the button to send the user-entered information to the PHP script on your

server, which will send the information directly to your e-mail address

6 Click the Send button on the stage (located next to the text field you have just

created)

7 Give the Send button an instance name of oaj`>qppkj

The groundwork has now been done, and all that remains is to apply the ActionScript to

the button

8 Create a new layer and call it Actions

9 Open the Actions panel by selecting Window ¢ Actions, and click the first frame of

the Actions layer on the timeline

10 You want to catch whenever a user clicks the Send button, so add an event listener

to your button by entering the following code, as shown in Figure 8-48:

oaj`>qppkj*]``ArajpHeopajan$IkqoaArajp*?HE?G(oaj`Ai]eh=``naoo%7

Figure 8-48 Adding an event listener to the ActionScript

This code attaches a mouse click event listener to the oaj`>qppkj instance on the stage When a click is performed, the oaj`Ai]eh=``naoo function is called Now you need to add the oaj`Ai]eh=``naoo function

11 Enter the following code to the Actions panel, as shown in Figure 8-49:

bqj_pekjoaj`Ai]eh=``naoo$arajp6IkqoaArajp%6rke`w

Figure 8-49 Adding the sendEmailAddress function to your ActionScript

This line defines the function as a rke` IkqoaArajp function All code inside this function

is carried out whenever a user clicks the button

12 The next line is the workhorse of the contact form Enter the following, as shown in

8

This statement must be customized with your own URL Here, we have used

the very real-sounding sss*iuSa^Oepa*_ki, but you will need to use your own

for this exercise to work If you are unsure about hosting, ask your Internet

provider for more details about web hosting packages, and make sure they

support PHP 4 or later.

This statement utilizes the oaj`PkQNH command This is the command you use to move

data from ActionScript to your server The data used in this example comes from a form

where the user enters their e-mail address and clicks the Send button You can also use

this command to send data from any ActionScript variable, such as a high score in a game

The oaj`PkQNH command requires that you encode your variables with URL formatting

That means that you use the jasQNHNamqaop$% command to point to the server script

file In this case, the ai]eh*LDL script is sitting in the root of the iuSa^Oepa directory Use

the quotation mark to signify you are about to pass variables In this case, the variable

name is ai]eh, and you are making it equal to whatever has been entered in the input text

field If you wanted to pass the variable j]ia instead of ai]eh, the line of code would read

as follows:

oaj`PkQNH$jasQNHNamqaop

$dppl6++sss*iuSa^Oepa*_ki+ai]eh*LDL;j]ia9'j]ia*patp%%7

Obviously you would need to create another input text field to cater for the extra j]ia

variable If you wanted to pass both variables, you would use the ampersand (") to signify

additional variables As an illustration of this principle, to pass both the ai]eh and j]ia

variables, the preceding line would read

oaj`PkQNH$jasQNHNamqaop

$dppl6++sss*iuSa^Oepa*_ki+ai]eh*LDL;j]ia9

'j]ia*patp%%7

We are going to add a line of code that will clear the field once the information has been

sent to the server

13 Add the following code so that the text field becomes cleared after you have

clicked the Send button, as shown in Figure 8-51:

The form will appear, but if you were to enter your e-mail address and click the Send button, nothing would happen There are two reasons for this, the first being that the oaj`PkQNH command is trying to contact an ai]eh*LDL script file that does not exist yet Secondly, all the files need to be located on your server (usually a different computer from the one you are using) Once you are finished writing the PHP script, you should use an FTP client, such

as Filezilla, to upload the SWF and PHP files to your server

With the Flash front end complete, now we can jump into PHP mode! We will do this in the following exercise

1 Open a simple text editor; on Windows you can use Notepad, and on the Mac you

can use TextEdit

2 Enter the following PHP script:

8;LDL ]``naoo9 [NAMQAOPW#ai]eh#Y7i]eh$iuAi]eh=``naoo<okiasdana*_ki( ]``naoo( ]``naoo%7

;:

This PHP script uses the command [NAMQAOP to fetch the variable ai]eh that is being passed

from the Flash movie The string ai]eh is then stored in the PHP variable ]``naoo The i]eh command is then used to create and send an e-mail to iuAi]eh=``naoo<okiasdana*_ki The e-mail address is used as the subject line and body copy of the e-mail that is delivered to your inbox

As a note for future reference, the PHP mail command uses the following syntax:

We are now going to complete our PHP

3 Save the file as ai]eh*LDL Ensure that you actually type the *LDL suffix to ensure

that the text editor saves the file as a PHP file, not as a text file Notice that this is the same name used in the preceding ActionScript

4 Upload the ai]eh*LDL and _kjp]_p*osb files to your own web server The

preced-ing ActionScript code used sss*iuSa^Oepa*_ki as the address of the web host directory, so you would use an FTP client to upload the two files to the root direc-tory of sss*iuSa^Oepa*_ki If you wanted the contact form to appear on dppl6++na`pki]pkao*_ki+sa^l]ca+_kjp]_po, you would have to upload the files to that location