How to embed OpenOffice.org ODP (or office ppt) files as flash content on your webpages (including controls).
I spent some time working on this. It would have been nice to avoid "inventing" this stuff on my own, so I'm going to share it here for others to read.
My purpose was to convert my presentations to flash and then to embed them int my webpages along with nice controls. Something similar to what slideshare.com allows, but:you can do it on your websitethe slides are converted to flash using a nice and small script (which uses openoffice)First of all you need to convert your odp (or ppt or anything openoffice can read) into flash: to achieve this just open the file in openoffice and export as flash (really! openoffice can do that out of the box).
Now you can put your files on the web and serve them. If you are happy you are done :-)
If you would like to embed the flash content into the webpage you need to write something like the following into your webpage:
Now your slides are embedded but you can't control how they are played. Let's add some controls. First of all you need some javascript functions:
I spent some time working on this. It would have been nice to avoid "inventing" this stuff on my own, so I'm going to share it here for others to read.
My purpose was to convert my presentations to flash and then to embed them int my webpages along with nice controls. Something similar to what slideshare.com allows, but:you can do it on your websitethe slides are converted to flash using a nice and small script (which uses openoffice)First of all you need to convert your odp (or ppt or anything openoffice can read) into flash: to achieve this just open the file in openoffice and export as flash (really! openoffice can do that out of the box).
Now you can put your files on the web and serve them. If you are happy you are done :-)
If you would like to embed the flash content into the webpage you need to write something like the following into your webpage:
Of course <?php echo $filename; ?> must be replaced with your filename if you are not using php :-)
<div class="slides">
<object
type="application/x-shockwave-flash"
width="600"
height="450"
data="<?php echo $filename; ?>"
id="<?php echo $filename; ?>"
>
<param
name="<?php echo $filename; ?>"
value="<?php echo $filename; ?>"
>
</object>
</div>
Now your slides are embedded but you can't control how they are played. Let's add some controls. First of all you need some javascript functions:
function RewindSlides(slides)
{
var text = document.getElementById("Page_"+slides);
text.value = 1;
SlideGoto(slides);
}
function SlidePrev(slides)
{
SlideMove(slides, -1);
}
function SlideNext(slides)
{
SlideMove(slides, 1);
}
function SlideMove(slides, movement)
{
var flashSlide=document.getElementById(slides);
var text = document.getElementById("Page_"+slides);
text.value = parseInt(text.value)+movement;
SlideGoto(slides);
}
function SlideGoto(slides)
{
var flashSlide=document.getElementById(slides);
var totalFrames = flashSlide.TotalFrames();
var text = document.getElementById("Page_"+slides);
var n = text.value;
if (n<1)
n=1;
else if (n>totalFrames/2)
n = parseInt(totalFrames/2);
text.value = n;
if (n*2 >= totalFrames - 1 )
flashSlide.GotoFrame(totalFrames - 5);
else if (n<2)>
And then you can just out the following controls into your HTML:
<input type="button" value="Rewind" name="Rewind"
onClick="RewindSlides('<?php echo $filename; ?>');">
<input type="button" value="Prev" name="Prev"
onClick="SlidePrev('<?php echo $filename; ?>');">
<input type="button" value="Next" name="Next"
onClick="SlideNext('<?php echo $filename; ?>');">
<input type="button" value="Goto" name="Goto"
onClick="SlideGoto('<?php echo $filename; ?>');">
<input type="text"
value="1" name="Page_<?php echo $filename; ?>"
id="Page_<?php echo $filename; ?>">
The end result can be shown on my page:
