Adding flash animation to a website

How do you

import your flash animation

into your website?

Presentation by www.bubblefruit.com – Website design & development

First save your file in a
known folder


Now click on publish settings


Ensure you are on the
formats tab

Check boxes flash &
HTML are checked


1. Click on HTML tab

2. Depending how you would
like the animation to run
check and un-check the
required boxes.

In our example we want
the animation to run when
loaded and play just once.

By checking loop for
example would cause 3. Click publish
the animation to keep
repeating.


Once you have clicked publish Flash will
generate 3 files in the folder you saved the
animation in.


Now these file are stored locally on your PC in
your named folder.

We have to get these 3 files onto your website
domain. If you have created your own website and
used a website design package then you should
be able to upload the files via the FTP facility.

If you have no idea what I'm talking about then we
do have a free user guide to FTP Coming soon on
this blog. Don't be scared this is just a way of
getting files from your PC to a website......cont


If your using a 3rd party design package like
Webeden or 1on1 websites the these will have a
container to drop the flash Java script into.

I know this part can get complicated as there is so
many methods and packages that can do this FTP
process. To list and show you all these would take
a lifetime :-)

In this example I'm going to use FileZilla, this is a
FTP (file transfer protocol) program and free to
download and use, we like free stuff :-)


1. Enter your website FTP settings,
Host, username & password


2. This window contains your local ( that's files on your PC's hard disk)
Find the folder you saved you flash animation in.


3. Once Filezilla connects to your website these boxes will fill with folders and
files. These are folders and files that make up your websites file structure. Just like
your PC choose a destination for this flash animation. Note, remember where you
save this so you can find it on your websites URL e.g. www.bubblefruit.com/demo/


4. Highlight the folder with the files in and left click, this now brings up an upload
window. Click Upload and the file transfer process will start to upload the folder
to your designated location on your website .


Once this process completes you will see the new folder
appear on the your websites file structure


We can now test the animation on the website,
the animation will run in a web browser under
the URL that you saved it in.

In our example we saved the “demo” folder in
the root directory of our website e.g.

www.bubblefruit.com/demo/

The file the browser will run is the .html file. We
saved our animation as demo so the file will be
demo.html. Full URL will be

www.bubblefruit.com/demo/demo.html

Although we have managed to test and run our
animation within the browser, this does not help
use get this snippet of animation into a website
page with other text and images.

We need to copy the Javascript code that has
been placed in the demo.html file and paste it
into our desired website page.

This is easy to copy …... cont


1. Go to the browser displaying the animation and
right click the blank part of the page away from the
animation. Now select view page source.


2. The code we need to copy is between
and including the <object & …. below

</object>


Once you have highlighted this text copy with holding the two
keys on your keyboard, CTRL & C. This copies the text, now
save this into a notepad or word file by holing CTRL & V this
pastes the text into notepad or word.


We now have the Javascript code for the flash
animation safe.

This code can be added to flash content fields in
3rd party website software like 1on1 & Webeden.

If you have a website developer you can email
them this code to insert into the website.

If your self developing them using your website
design software add this in to the area you wish
to display it.


If you are unsure about how to do this just email
or reply to this blog and we will happy to help.

With so many website development and design
packages its impossible to show how to do this
with each one.

Note, if you change your animation in anyway
the Javascript code will change and you will
have to re-copy and paste into your site.

Also remember to size your animation at the
beginning of your design as this cannot be
resized after within your website.

Remember we are here to help so please feel
free to ask us any questions either via email or
via our contact form on the website.

Also feel free to comment or add a reply to the
blog as your input is always welcome, and
thank you for viewing.

Our email address is paul@bubblefruit.com


Adding flash animation to a website

Recommended

Recommended

More Related Content

What's hot

What's hot (19)

Similar to Adding flash animation to a website

Similar to Adding flash animation to a website (20)

Recently uploaded

Recently uploaded (20)

Adding flash animation to a website