Solved

I Need assistance converting short PHP script to ActionScript

Posted on 2009-05-13
16
348 Views
Last Modified: 2013-11-11
Hello,

I am building a weather page for a beach town that I work for. I found a simple PHP/VML script of a Tide Clock online that works great in IE but not any other browser, because it uses VML which is only supported by IE.

I would like to convert it to Flash/ActionScript. Could you please take a look at the PHP/VML example code below and help me create an ActionScript from it. I have experience with Flash, but I am not very good at writing ActionScript from scratch.

Thanks to anyone that can help.
<HTML xmlns:v="urn:schemas-microsoft-com:vml">

<head>

<style type="text/css">

<!--

v\:* {behavior:url(#default#VML);}

-->

</style>

 

</head>

<body>

 

<table>

<tr>

<th>

 

 

<!-- start of tide clock code -------------------------------------------------------------------------->

<?

putenv("TZ=US/Eastern");                                    // time zone of the place you want to predict tides for

$last_synchronised_with_the_high_tide = '11 May 2009 9:32pm'; // tide from which all calcs are made - reset occasionally

$icon_diameter=100;                                             // clock diameter in pixels

$stroke_thickness=3;                                           // the thickness of the lines used to draw the clock

 

// nothing below here should need changing

$now=time();

if (($timestamp = strtotime($last_synchronised_with_the_high_tide)) === -1)

	{echo "the string ($last_synchronised_with_the_high_tide) does not return a valid date and time <br>";}

$tide_cycle_in_seconds=44700;

$seconds_since_last_synchronised=(time()-$timestamp);

if ($seconds_since_last_synchronised > $tide_cycle_in_seconds)

	{$seconds_since_last_high_tide= $seconds_since_last_synchronised % $tide_cycle_in_seconds;}

else	{$seconds_since_last_high_tide=$seconds_since_last_synchronised;}

$required_rotation_from_12oclock_position=($seconds_since_last_high_tide/$tide_cycle_in_seconds)*360;

$vml_degrees=$required_rotation_from_12oclock_position-90;

if ($vml_degrees<0) {$vml_degrees=$vml_degrees+360;}

$rotation_modified_for_vml=deg2rad($vml_degrees);

// calculate co-ordinates ------------------------------

$hypotenuse=($icon_diameter/3); // clock hand length

$x=(cos($rotation_modified_for_vml))*$hypotenuse;

$y=(sin($rotation_modified_for_vml))*$hypotenuse;

print "

<DIV style=position:relative;top:0px;left:0px>

<v:arc title='Tide Clock' href='http://www.WalneyIsle.co.uk/tideclock-faq.php' strokeweight='" . $stroke_thickness . "pt' startangle='0' endangle='360' strokecolor = '#ff0000' style='position:relative;top:0;left:0;width:" . ($icon_diameter-$stroke_thickness) . ";height:" . ($icon_diameter-$stroke_thickness) . "' ></v:arc >

<v:line style='position:absolute;top:" . (($icon_diameter+$stroke_thickness)/2) . ";left:" . (($icon_diameter+$stroke_thickness)/2) . "' strokecolor='blue' strokeweight='" . $stroke_thickness . "pt'  from='0pt,0pt' to='" . $x . "pt," . $y . "pt'>

<v:stroke endarrow=classic/></v:stroke/>

</v:line>

</div>";

?>

<!-- end of tide clock code ---------------------------------------------------------------------------->

 

 

</th>

</tr>

</table>

 

</body>

</html>

Open in new window

0
Comment
Question by:multiplex79
  • 10
  • 6
16 Comments
 
LVL 22

Expert Comment

by:rascalpants
Comment Utility

I had to google what a Tide Clock is...

http://www.cabelas.com/prod-1/0048901618695a.shtml

:)

but it looks like this is just your typical clock, and every 12 hours you have high tide.... right?

well then you should be able to adapt this normal clock example then.


one made with AS 2.0:


http://www.kirupa.com/developer/actionscript/clock.htm


for AS 3.0:


http://help.adobe.com/en_US/ActionScript/3.0_ProgrammingAS3/WS5b3ccc516d4fbf351e63e3d118a9b90204-7f0e.html



rp / ZA


0
 
LVL 1

Author Comment

by:multiplex79
Comment Utility
Thanks for the reply. It is actually not like a regular clock.

A Tide Clock is based on the moon. It only has one hand on it and one revolution of the clock equals 12 hours and 25 minutes or 44700 seconds. This is different than a time clock with three hands.

Also, with a tide clock you have to give it a date and time to start from, which is the last high tide during a full moon, which would be a static date and time entered as a variable.

So, basically the clock works like this:

Set the time of the last high tide during full moon in a config variable.
When the clock loads get the current date and time from the server
Compare current date and time with the stored date and date and time of the last full moon high tide
Do some math with difference between dates, 44700 seconds and 360 degrees to come up with the clock arm pointing in the right direction.

It's the math part that I am not understanding. I was hoping someone could look at the example php/vml code and help me understand the math. Or, just convert the script to AS for me :)

Thanks.
0
 
LVL 22

Expert Comment

by:rascalpants
Comment Utility
okay... below is the code... but you need to varify with a real Tidal Clock to make sure it is working  :)


then your Flash application needs to have a circle with a pointer...  The pointer click should have the movieclip flipped up in a negative Y location... the registration point of the pointer needs to be set to the bottom center.

this is so that when it rotates, it goes around the bottom of the clip.


let me know if you need further explanation...


rp / ZA

 

var theYear:int = theYear == undefined ? 2009 : theYear;

var theMonth:int = theMonth == undefined ? 4 : theMonth; // months use zero index

var theDay:int = theDay == undefined ? 11 : theDay;

var theHour:int = theHour == undefined ? 21 : theHour;

var theMinutes:int = theMinutes == undefined ? 32 : theMinutes;

 

 

var tidalSeconds:int = 44700;

var lastSetDate:Date = new Date( theYear, theMonth, theDay, theHour, theMinutes);

var currentDate:Date = new Date();

 

var cTime:Number = Number( currentDate.getTime() );

var lTime:Number = Number( lastSetDate.getTime() );

 

trace( cTime + " - " + lTime );

 

var diffSeconds:Number = ( cTime - lTime ) / 1000;

var secSinceTide:int;

trace( diffSeconds );

 

if( diffSeconds > tidalSeconds ) secSinceTide = diffSeconds % tidalSeconds

else secSinceTide = diffSeconds;

 

 

 

var rot:Number = (secSinceTide / tidalSeconds) * 360;

trace( rot );

tidalClock_mc.dial_mc.rotation = rot;

Open in new window

0
 
LVL 1

Author Comment

by:multiplex79
Comment Utility
Thank you very. I am excited to give this a try. What should the pointer movieclip be called?

I am not sure what you mean by the movieclip being flipped up in a negative Y location.

Bryan
0
 
LVL 1

Author Comment

by:multiplex79
Comment Utility
Nevermind. I see it should be dial_mc and it should be contained within a tidalClock_mc movieclip.
0
 
LVL 1

Author Comment

by:multiplex79
Comment Utility
But I'm still not sure what you mean by "flipped up in a negative Y location."

Thanks.
0
 
LVL 1

Author Comment

by:multiplex79
Comment Utility
I am getting the following compiler errors for lines 1, 2, 3, 4, 5, 8, 18

The class or interface 'int' could not be loaded.
0
 
LVL 22

Expert Comment

by:rascalpants
Comment Utility
okay... I have attached a screen shot of what I mean...  there is a normal Cartesian grid that I drew over top of the screen shot.

the 0,0 position is where you put the center of the pointer graphic in the dial_mc movieclip.  and make sure that it is point in the negative Y position...  so if you click on the graphic and you look at the x,y properties in the properties panel, it would should be sitting in the -X, -Y area of the grid...  meaning both the values should be negative.

The reason why you want to do this, is so the the registration point (center of the movieclip) is where you want the dial to rotate around.


rp / ZA

tidal-screen.jpg
0
Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

 
LVL 22

Expert Comment

by:rascalpants
Comment Utility
the code in written for AS 3.0  if you need AS 2.0, you will need to change the "int"  to "Number"


rp / ZA
0
 
LVL 1

Author Comment

by:multiplex79
Comment Utility
That was excellent help. I think I have it working now. The only not we didn't account for was server offset time. The server is 2 hours different than my local time which appears to be throwing the dial off by 2 hours.

Is there an easy way to resolve that? I don't want to take up too much more of your time.

Thanks,

Bryan
0
 
LVL 22

Accepted Solution

by:
rascalpants earned 500 total points
Comment Utility

did you decide to go with AS 3.0 or 2.0?  I would highly recommend going with 3.0

here is some code below, that is cleaned up, that you can use to pass in the 5 top values from the server, using FlashVars or via an attached querystring appended to the end of the file name.  

eg.  fileName.swf?theYear=2009&theMonth=4&theDay=11&theHour=21&theMinutes&curYear=2009&tcurMonth=4&curDay=11&curHour=21&curMinutes&


the top lines of code check to see if you passed in a value, and if not, they use a default value.


hope this helps...


rp / ZA


// for AS 3.0

 

var loaderObj:Object = LoaderInfo(this.root.loaderInfo).parameters;

 

var curYear:int = loaderObj.curYear ? 2009 : int( loaderObj.curYear );

var curMonth:int = loaderObj.curMonth ? 4 : int( loaderObj.curMonth ); // months use zero index

var curDay:int = loaderObj.curDay ? 11 : int( loaderObj.curDay );

var curHour:int = loaderObj.curHour ? 21 : int( loaderObj.curHour ); // uses 24 hours instead of 2, 12s 

var curMinutes:int = loaderObj.curMinutes ? 32 : int( loaderObj.curMinutes );

 

var theYear:int = loaderObj.theYear ? 2009 : int( loaderObj.theYear );

var theMonth:int = loaderObj.theMonth ? 4 : int( loaderObj.theMonth ); // months use zero index

var theDay:int = loaderObj.theDay ? 14 : int( loaderObj.theDay );

var theHour:int = loaderObj.theHour ? 14 : int( loaderObj.theHour ); // uses 24 hours instead of 2, 12s 

var theMinutes:int = loaderObj.theMinutes ? 30 : int( loaderObj.theMinutes );
 

 

var tidalSeconds:int = 44700;

var lastSetDate:Date = new Date( theYear, theMonth, theDay, theHour, theMinutes );

var currentDate:Date = new Date( curYear, curMonth, curDay, curHour, curMinutes );

 

var cTime:Number = Number( currentDate.getTime() );

var lTime:Number = Number( lastSetDate.getTime() );

 

var diffSeconds:Number = ( cTime - lTime ) / 1000;

var secSinceTide:int;

 

if( diffSeconds > tidalSeconds ) secSinceTide = diffSeconds % tidalSeconds

else secSinceTide = diffSeconds;

 

var rot:Number = (secSinceTide / tidalSeconds) * 360;

tidalClock_mc.dial_mc.rotation = rot;

Open in new window

0
 
LVL 1

Author Comment

by:multiplex79
Comment Utility
I got it working with AS 3.0.

Thank you for the new code. Is there a way to adjust for server offset? It doesn't look like it in the new script?

Thanks Again.
0
 
LVL 22

Expert Comment

by:rascalpants
Comment Utility

you do that outside of flash...  because you need to use server-side code to get that information... client-side code will only get the information from the users machine...  so my machine settings will most definitely be different than yours  ;)


rp / ZA
0
 
LVL 1

Author Comment

by:multiplex79
Comment Utility
Oh, ok...if it is getting my local time then it should work perfectly.
0
 
LVL 1

Author Comment

by:multiplex79
Comment Utility
Excellent help rascal pants! It appears to be working great! Thanks for your time and patience.
0
 
LVL 1

Author Closing Comment

by:multiplex79
Comment Utility
You rock rascalpants.
0

Featured Post

Free Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

Popularity Can Be Measured Sometimes we deal with questions of popularity, and we need a way to collect opinions from our clients.  This article shows a simple teaching example of how we might elect a favorite color by letting our clients vote for …
I have found that much of my time doing support ends up being a constant repetition of the same steps to different people.  Early on I stated using web pages with Frequently Asked Questions (FAQs) to alleviate most of the burden.  Sometimes this jus…
The goal of the tutorial is to teach the user how to how to record live broadcast.
This Micro Tutorial will teach to how to utilize bit rate in Adobe Flash Media Live Encoder.

743 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now