|
Level: Intermediate
Duration: 5-7 minutes
In this tutorial we will
learn how to build a project, add it to an existing HTML file and upload
it to your web-server.
You will need to be familiar with uploading
HTML files to your web-server, have an FTP application like CuteFTP and
have login information such as username and password. If you have just
completed Tutorial 3 - you need only look briefly through this tutorial
to see the differences between Java and Flash.
Launch the 1 Cool Button Tool application
and Open an Existing Project called tutorial-navbar-f.1cb.
This project is a navbar with some animation and sounds
so you can see a few of the features of 1CBT working in a live environment.
| Step
2: Test and Build the project |
To test the project in your browser you will need to change
tabs to Build Flash.
This is where you can set the Build Folder in which
1CBT puts all the necessary files for you to add the applet to your web
page. It defaults to a folder with the same name as your project
located inside of your 1 Cool Button Tool folder.
It also shows you the generated HTML code that you will
need to paste into your own HTML page and the size that the Flash file
will be.
Simply click the Test Flash File in Browser and 1CBT
will build your Flash file, open a browser window and run your Flash file.
OK, after you have checked that it works fine on your local
machine - lets see what files we will need to put on your live server.
Use Windows Explorer to view the Build Folder - it
is located inside of the 1 Cool Button Tool folder and will be called
tutorial-navbar-f (you will also notice a backup folder - it is
just a backup of all the resources needed to rebuild your project).
Alternatively you can view the contents of the Build Folder
by clicking on the Build Folder link displayed just below the build
folder location dialog.
The Build Folder contains the following files:
| tutorial-navbar-f.bak |
Backup of the project
file - by keeping this on the live server many people have been saved
a rebuild when their PC fails. |
| tutorial-navbar-f.html |
The HTML page created when you select Test
in Browser - only displays the Flash file. |
| tutorial-navbar-f.swf |
The Flash file - it contains
all the images, sounds and animation shown in your project. |
OK. Lets upload these files to your web-server.
| Step
3: Upload the project
|
Start your FTP application and login to your web-server.
Upload the entire contents of the Build Folder to
the area where your HTML files are stored.
That's it!
Now check that it has worked. Open a new browser and go
to http://www.yourdomainname.com/tutorial-navbar-f.html - you
should be looking at the same page that you saw when you tested the Flash
file in your Browser earlier.
Now we will see how to add the navbar to a different HTML
page.
| Step 4:
Adding your buttons to an HTML file
|
In order to demonstration how this works we have prepared
a pretty basic web-page that has a place holder for where your Flash file
will go. There is nothing special about the HTML page we have used so
you can use this technique on any HTML page you may have.
First, have a look at the web page that we will insert the
applet into. It is located in your 1 Cool Button Tool application folder
- it is called tutorial4.html.
Notice we have put a text place holder where we will put
the Flash file. This is a good idea as it makes it a little easier when
you are pasting the 1CBT HTML code into the file.
The following step could be done is any HTML editor - we
will use Notepad.
Notepad is good for a couple of reasons, we know you have
it and if you can do it in Notepad, you will be able to do it in anything
else.
Launch Notepad (or WordPad if you can't
find Notepad) and open tutorial4.html (you will need to use the
All files *.* filter or you will not see the file).
OK - lets get the HTML code from 1CBT and paste it into
the tutorial3.html file. Switch back to 1CBT and click the Copy HTML
to Clipboard on the Build Flash tab.
Switch back to Notepad and highlight ++-- insert 1CBT
Flash file HTML code here --++ with your mouse and paste the
1CBT HTML over it by either pressing Ctrl-V or using the Edit->Paste
menu option.
Now save the HTML file and exit Notepad. You can
preview the HTML in a browser now if you like - but all you will see is
a white box where the Flash file should be. This is because the HTML expects
the contents of the Build Folder to be in the same folder.
To see if it has worked you will need to copy the tutorial4.html
into the Build Folder and then open it in a browser. Try
this now.
OK. Now lets put that on your live server to see it in action.
Start your FTP application and login to your web-server.
This time you can just upload the tutorial4.html file to
the area where HTML files are stored.
That's it!
Now check that it has worked. Open a new browser and go
to http://www.yourdomainname.com/tutorial4.html
Well done! You have completed this tutorial.
You are ready to try your own project - good luck!
|
