Creating Time Delays withing your CFM pages

Well, this is my second post and I thought it would be a good one to share. I needed to find a way to cause a user's browser to be redirected upon a certain time and in my search I found 2 useful ways to tackle this task. The first is client-side and the second-one is server side.

Client-Side
For the client-side solution I used the following javascript method: window.setTimeOut(expression/function,milliseconds)

This method is used to call a function or evaluate an expression after a specified number of milliseconds. If an expression is to be evaluated, it must be quoted to prevent it being evaluated immediately. Note that the use of this method does not halt the execution of any remaining scripts until the timeout has passed, it just schedules the expression or function for the specified time.

The following example redirects the current window and uses the setTimeout method to call the reloc() function which relocates it after five seconds (5000 milliseconds)

 function reloc(){

   location='urlToGoHere';
 }
 self.document.write("This window will redirect automatically after \ 
five seconds. Thanks for your patience");
 self.setTimeout('reloc()', 5000);

Server-Side
Excerpt from Ben Forta's Advanced CFMX 7 Application Development
For the server-side solution I took advantage of the underlying Java platform available to Coldfusion.

The Java API defines a "thread" class that has a method allowing you to make the currently executing thread "sleep" (temporarily cease execution) for a specified number of milliseconds. That method is perfect if you need to cause a delay withing a cfm page. To call it all you have to do is this:

<cfobject type="java" action="create" class="java.lang.Thread"  name="thread" />
OR 
<cfset thread=CreateObject("java","java.lang.Thread")/>

Then to simply call the class and its method, you can do this:

<cfset thread.sleep(5000)/>

The only problem I had with the solution above is that for some reason cflocation did not work after placing the thread to sleep. Even though other coldfusion actions such as a cfoutput or loop worked the cflocation did not. I will investigate this more, but for now the non-working and working example is below.

// NON - WORKING
<cfobject type="java" action="create" class="java.lang.Thread"  name="thread" />
<cfset thread.sleep(5000)>

 >cflocation addtoken="no" url="urlToGoHere" <

// WORKING 
<cfobject type="java" action="create" class="java.lang.Thread"  name="thread" />
<cfset thread.sleep(5000)>

 <script language="javascript">
 location='urlToGoHere';
 </script>

Eventhough these examples are simple and only use a redirection method I am sure you can find more ways to use them. The main difference between using client or server side is, what action needs to occur, a client or server side. I hope this was informational to some as it was to me.

JC

Flash scrolling-Loop Image Bar

Well this is my first post and I am doing it because everywhere I looked for a tutorial on a flash scrolling-loop Image Bar with navigation, kept coming up short. I am also very impatient and searching gets on my nerves at times, but enough about my bad habits.

Below is an exmple of the .swf file. If it looks choppy it is because I reduced the site to fit in the blog.

The actual movie is used in the Laura Munder Website : One of my Client's

The creation of this flash movie was a joint effort of mine and one of my contractors. Our first version of the movie used tweening actions which were ok until it caused all the images to wiggle while scrolling. It also was a nuisence to edit the speed of the animation. You would have to extend the tweens and play around with the frames. To make a long story short, it was not very efficient and any future update or request would take more time then I wanted to.

So how did I do it? Well, I took my contractor's file stripped all tweenings and used all actionscript to control the animation. The movie consist of the following symbols.

1. 15 Buttons (one for each image)
2. 2 movie clips
   • photos
     This holds all the 15 button/images
   • mc_scrolling
     This holds two instances of the photos movie symbol, it is only one frame.

Now that we have all our symbols it only took a couple of lines of actionscript to make it all work. In my _root timeline on the first frame I wrote the following:

// PART 1 VARIABLES
var mySpeed:Number;
var myCount:Number=0;
var keepMoving:Boolean;
keepMoving=true;
mySpeed=1;

// PART 2 FUNCTION
_root.onEnterFrame = function(){
 
 // CHECK FOR RESTART
 if (myCount >= 2473){
 
  _root.thisBar_mc._x=-739;
  myCount=739;
 
 }else{
  
  // CHECK FOR MOVEMENT OF SCROLLING MOVIE
  if (keepMoving){
   _root.thisBar_mc._x -= mySpeed;
   myCount+= mySpeed;  
  }
 
 }
 
}
stop();

So what does all this mean? Simple I will explain.
The first section of the script sets all my variables that I need so I can control all the actions for the movie.

mySpeed: Controls the speed of the movement of the clip
myCount: Lets me know the movie clip is currently on
keepMoving: A simple boolean vale to control the movement action

The second part takes care of the movement by utilizing onEnterFrame.

First I check if myCount is greater than or equal to 2473 (this is the total length of my movie clip in pixels). If it is what I do is set the current x position of the movie clip to -739 and set myCount to 739. This automatically places the clip back to the location where the images continue to loop. Why did I choose 739, well because my main movie's width is 738px.
If myCount is Less than to 2473 I just continue the motion of the clip and keep increasing the value of myCount.
At the end of the script there is a stop() action. THis keeps the movie from looping back to the preloading scene.

That's it, simple huh?!

I know, you are asking how do I stop the animation, well that is simple too. Within the photos movie clip every button has the following actionScript:

 on (rollOver) {
  _root.keepMoving=false;
 }
 
 on (rollOut) {
  _root.keepMoving=true;
 }
 
 on (release) {
  getURL("urlHere"); 
 }
 

Ok so here is the breakdown;

The first action on (rollOver) sets the keepMoving variable to false which if you look at the first chunk of code, there is a check if keepMoving is true. If keepMoving is true the movie clip will continue movement and the variable myCount continues to increase.
The second action on (rollOut) set the keepMoving variable to true, which allows for the movie to continue movement.
THe third action on (release) is where you set a url to go to.

NOW THAT IS SIMPLE RIGHT!

You can download the source here, hope this was useful to some of you.

I know there are more things that I can do streamline it even more, like use only one image on the buttons and write the magnification in actionscript and create forward and backwards movement. Maybe that will be my next post.

JC