Tasmanian Devil
05-31-2004, 10:42 AM
Hello yall~
I have a vml script below that I was wondering if svg can do the exact same thing though? I know you can create animation with svg but can it do what is in the script below?
<xml:namespace ns="urn:schemas-microsoft-com:vml" prefix="v"/>
<body>
<script language="">
var pic=new Array("pic1.bmp","pic3.bmp","pic2.bmp")
var message=new Array("Test 1","test 2","TEST 3")
var fnt="Arial Black"
var formwidth=450
var fillcolor="#FFFFFF"
var backdepth=10
var speed=10
var opacity="100%"
var filltype="frame"
var pause=2
var stopafterdisplay=false
var postop=50
var circlemark=" "
var i_angle1=0
var i_pic=0
var i_message=0
var posleft=0
var pagewidth
var pageheight
var longestmessage=0
var emptyspace=" "
var flagstarted=false
pause*=1000
var opera=navigator.userAgent.match(/Opera/)
var ie5=document.getElementById&&document.all&&!opera?1:0
for (i=0;i<=message.length-1;i++) {
if (message[i].length>longestmessage) {
longestmessage=message[i].length
}
longestmessage+=4
}
for (i=0;i<=message.length-1;i++) {
var emptyspace=""
var i_emptyspace=(longestmessage-message[i].length)/2
for (ii=0;ii<=i_emptyspace;ii++) {
emptyspace+=circlemark
}
message[i]=emptyspace+" "+message[i]+" "+emptyspace
}
function initform() {
pagewidth=document.body.clientWidth
pageheight=document.body.clientHeight
posleft=(pagewidth-formwidth)/2
if (postop=="middle") {
postop=pageheight/2
}
document.getElementById('rectid').style.left=posleft
document.getElementById('rectid').style.top=postop
preload()
}
function preload() {
var i_preload=0
for (i=0;i<=pic.length-1;i++) {
var imgref=eval("document.n"+i)
if (imgref.complete) {i_preload++}
}
if (i_preload>=pic.length-1) {
window.status=i_preload
var timer=setTimeout("changeform()",pause)
}
else {
var timer=setTimeout("preload()",50)
}
}
function changeform() {
i_angle1+=speed
if (i_angle1==360) {
pausenow()
}
else {
if (i_angle1==250) {
i_pic++
i_message++
if (i_pic>=pic.length) {i_pic=0}
if (i_message>=message.length) {i_message=0}
document.getElementById('fillid').src=pic[i_pic]
document.getElementById('textpathid').string=message[i_message]
flagstarted=true
}
document.getElementById('extrusionid').rotationangle=0+","+i_angle1
if (stopafterdisplay && i_message==0 && flagstarted) {
document.getElementById('textpathid').string=""
}
else {
var timer=setTimeout("changeform()",20)
}
}
}
function pausenow() {
i_angle1=0
document.getElementById('extrusionid').rotationangle=0+","+i_angle1
var timerendpause=setTimeout("changeform()",pause)
}
if (ie5) {
document.write('<div id="preloadimages" style="position:absolute;left:-5px;top:-5px;visibility:hidden">')
for (i=0;i<=pic.length-1;i++) {
document.write('<img src="'+pic[i]+'" name="n'+i+'" width=1 height=1>')
}
document.write('</div>')
document.write('<v:curve id="rectid" strokeweight="2pt" style="position:absolute;" from="0,0" to="'+formwidth+',0.1">')
document.write('<v:extrusion id="extrusionid" on="true" type="perspective" color="'+fillcolor+'" backdepth="'+backdepth+'" diffusity="2.5" metal="true"/>')
document.write('<v:fill id="fillid" opacity="'+opacity+'"color="'+fillcolor+'" type="'+filltype+'" src="'+pic[0]+'"/>')
document.write('<v:path textpathok="t"/>')
document.write('<v:textpath id="textpathid" on="t" style="font-family:\''+fnt+'\';" fitpath="t" string="'+message[i_message]+'"/>')
document.write('</v:curve>')
window.onload=initform
}
</script>
Thanks
Devil
I have a vml script below that I was wondering if svg can do the exact same thing though? I know you can create animation with svg but can it do what is in the script below?
<xml:namespace ns="urn:schemas-microsoft-com:vml" prefix="v"/>
<body>
<script language="">
var pic=new Array("pic1.bmp","pic3.bmp","pic2.bmp")
var message=new Array("Test 1","test 2","TEST 3")
var fnt="Arial Black"
var formwidth=450
var fillcolor="#FFFFFF"
var backdepth=10
var speed=10
var opacity="100%"
var filltype="frame"
var pause=2
var stopafterdisplay=false
var postop=50
var circlemark=" "
var i_angle1=0
var i_pic=0
var i_message=0
var posleft=0
var pagewidth
var pageheight
var longestmessage=0
var emptyspace=" "
var flagstarted=false
pause*=1000
var opera=navigator.userAgent.match(/Opera/)
var ie5=document.getElementById&&document.all&&!opera?1:0
for (i=0;i<=message.length-1;i++) {
if (message[i].length>longestmessage) {
longestmessage=message[i].length
}
longestmessage+=4
}
for (i=0;i<=message.length-1;i++) {
var emptyspace=""
var i_emptyspace=(longestmessage-message[i].length)/2
for (ii=0;ii<=i_emptyspace;ii++) {
emptyspace+=circlemark
}
message[i]=emptyspace+" "+message[i]+" "+emptyspace
}
function initform() {
pagewidth=document.body.clientWidth
pageheight=document.body.clientHeight
posleft=(pagewidth-formwidth)/2
if (postop=="middle") {
postop=pageheight/2
}
document.getElementById('rectid').style.left=posleft
document.getElementById('rectid').style.top=postop
preload()
}
function preload() {
var i_preload=0
for (i=0;i<=pic.length-1;i++) {
var imgref=eval("document.n"+i)
if (imgref.complete) {i_preload++}
}
if (i_preload>=pic.length-1) {
window.status=i_preload
var timer=setTimeout("changeform()",pause)
}
else {
var timer=setTimeout("preload()",50)
}
}
function changeform() {
i_angle1+=speed
if (i_angle1==360) {
pausenow()
}
else {
if (i_angle1==250) {
i_pic++
i_message++
if (i_pic>=pic.length) {i_pic=0}
if (i_message>=message.length) {i_message=0}
document.getElementById('fillid').src=pic[i_pic]
document.getElementById('textpathid').string=message[i_message]
flagstarted=true
}
document.getElementById('extrusionid').rotationangle=0+","+i_angle1
if (stopafterdisplay && i_message==0 && flagstarted) {
document.getElementById('textpathid').string=""
}
else {
var timer=setTimeout("changeform()",20)
}
}
}
function pausenow() {
i_angle1=0
document.getElementById('extrusionid').rotationangle=0+","+i_angle1
var timerendpause=setTimeout("changeform()",pause)
}
if (ie5) {
document.write('<div id="preloadimages" style="position:absolute;left:-5px;top:-5px;visibility:hidden">')
for (i=0;i<=pic.length-1;i++) {
document.write('<img src="'+pic[i]+'" name="n'+i+'" width=1 height=1>')
}
document.write('</div>')
document.write('<v:curve id="rectid" strokeweight="2pt" style="position:absolute;" from="0,0" to="'+formwidth+',0.1">')
document.write('<v:extrusion id="extrusionid" on="true" type="perspective" color="'+fillcolor+'" backdepth="'+backdepth+'" diffusity="2.5" metal="true"/>')
document.write('<v:fill id="fillid" opacity="'+opacity+'"color="'+fillcolor+'" type="'+filltype+'" src="'+pic[0]+'"/>')
document.write('<v:path textpathok="t"/>')
document.write('<v:textpath id="textpathid" on="t" style="font-family:\''+fnt+'\';" fitpath="t" string="'+message[i_message]+'"/>')
document.write('</v:curve>')
window.onload=initform
}
</script>
Thanks
Devil