
Take a look at tis web site...
Look at this web site, and explain to me. Why is this html/php looking web site looked like it has flash but doesn't. http://www.becomeinteractive.co.uk

Nothing magic or even hard...
...just a bunch of "layer writing". Careful control of the visibility and positioning of "layers". Not even hard in MSIE 5 and 6. Probably not in NS 6 or 7. Tougher in NS 4.<BR><BR>Don't get me wrong: It's very clever and it was a lot of *TEDIOUS* work to get everything right, but once a patterned way of doing things was in place, the rest was pretty easy. A lot of the same thing over and over again.<BR><BR>Just do a VIEW  SOURCE of the page, yourself, to see what is happening.<BR><BR>

RE: Explanation needed
I want to use this function to make a layer move across the screen and slow down as it gets closer to the end point.<BR><BR>Can you explain how to call this function? I have never seen one used this way before.<BR><BR><BR><BR><SCRIPT language="JavaScript" type="text/JavaScript"><BR><BR><BR>// My function<BR>function move_layer(x) {<BR> var layer = document.getElementById('Layer1'); <BR> layer.style.posLeft += x;<BR>}<BR><BR><BR><BR>/////////// BACK EASING: overshooting cubic easing: (s+1)*t^3  s*t^2 //////////////<BR>// back easing in  backtracking slightly, then reversing direction and moving to target<BR>// t: current time, b: beginning value, c: change in value, d: duration, s: overshoot amount (optional)<BR>// t and d can be in frames or seconds/milliseconds<BR>// s controls the amount of overshoot: higher s means greater overshoot<BR>// s has a default value of 1.70158, which produces an overshoot of 10 percent<BR>// s==0 produces cubic easing with no overshoot<BR><BR>//*** This one ***<BR><BR>Math.easeInBack = function (t, b, c, d, s) {<BR> if (typeof s == "undefined") s = 1.70158;<BR> return c*(t/=d)*t*((s+1)*t  s) + b;<BR>};<BR><BR><BR>Any ideas on how to make this work?<BR><BR>jc<BR><BR></SCRIPT>

It's just a math formula...
Assume "s" is zero, to start with, for simplification (no overshoot...the thing just slides to the stop point.<BR><BR>So then the formula becomes<BR> t = t / d; // was "t/=d", expanded for clarity<BR> return c * t * t * t + b<BR><BR>As it says, "CUBIC" easing. <BR><BR>Though unless t is a fraction, I don't see how that works. If t is an incrementing integer, then that value (t cubed) just gets *huge really really fast. If t is a fraction of the total time, then as it climbs from 0.001 to 0.999 the cubed value climbs with acceleration from 0.0000001 to 1.0. So I would think you would want t do be decremented???<BR><BR>I'd have to see it in actual use in code to analyze it more.<BR><BR><BR>

DOH on me!
Of *COURSE* "t" is a fraction!<BR><BR>It comes in as an integer (or real number greater than 1), but then you *DIVIDE* it by d in order to convert it to a fraction!<BR><BR>And, yes, t *should* be given succesively *smaller* values, starting at d and going to zero.<BR><BR>Here's a demo of using the formula in VBScript, just to see the "numbers":<BR><BR>**********<BR><HTML>&# 060;BODY><BR><%<BR>Function Ease( byval t, byval b, byval c, byval d, byval s )<BR> t = t / d<BR> Ease = c * ( t * t * ( (s+1)*t  s) ) + b<BR>End Function<BR><BR>start = 0<BR>mult = 100<BR>gopast = 1.70158<BR>dist = 100<BR><BR><BR>' Response.End<BR><BR>For tick = dist to 0 step dist/20<BR>' Response.Write tick & ": " <BR> Response.Write tick & ": " & Ease(tick, start, mult, dist, gopast) & "<br/>"<BR>Next<BR>%><BR></BODY></HTML><BR>**************<BR><BR>The formula is overly complicated. There is no reason to have "b" and "c" as part of it. For that matter, there's no reason to do the "t/d" as part of it.<BR><BR>Here's effectively the same thing, but hopefully easier to understand and easier to set up and control:<BR><BR>**********<BR><HTML> 0;BODY><BR><%<BR>Function CubicEase( byval t, byval s )<BR> CubicEase = t * t * ( (s+1)*t  s)<BR>End Function<BR><BR>' define starting and ending positions<BR>startat = 200<BR>endat = 300<BR>' and how many steps you want to take to get there:<BR>steps = 25<BR><BR>dist = endat  startat<BR>' choose your overshoot:<BR>overshoot = 1.70158 ' 10%<BR>overshoot = 3.4 ' 30%<BR>overshoot = 2.6 ' 20%<BR><BR>For tick = steps To 0 Step 1<BR> Response.Write FormatNumber( endat  dist * CubicEase(tick/steps, overshoot), 2 ) & "<BR>"<BR>Next<BR>%><BR></BODY></HTML><BR><BR><BR><BR>

Is this what you were after???
Give it a try.<BR><BR>****** flier.html ******<BR><HTML><BODY onClick="bodyClick( );"><BR><BR><DIV ID="Fly" <BR> STYLE="position:absolute; left:50px; top:100px; width:30px; height:30px; <BR> clip:rect(0px 30px 30px 0px); <BR> backgroundcolor:green;"<BR>><BR></DIV><BR><SCRIPT Language="JavaScript"><BR>var STEPS = 300;<BR>// note: because of the time it takes to execute each step,<BR>// the value of SECONDS should be somewhat less than how long<BR>// you want it to *REALLY* take...but how much less depends<BR>// a lot on the machine the browser runs on.<BR>var SECONDS = 2;<BR>var MILLIS = SECONDS * 1000 / STEPS;<BR><BR>var moving = false;<BR>var startX;<BR>var startY;<BR>var endX;<BR>var endY;<BR>var distX;<BR>var distY;<BR><BR>var ticker;<BR><BR>var overshoot;<BR>// choose your overshoot:<BR>// overshoot = 1.70158 ; // 10%<BR>// overshoot = 3.4; // 30%<BR>// overshoot = 2.6; // 20%<BR>// overshoot = 0;<BR>overshoot = 2;<BR><BR>var flier = document.getElementById("Fly");<BR>var fstyle = flier.style;<BR><BR>function bodyClick( )<BR>{<BR> if ( !moving )<BR> {<BR> moving = true;<BR> startX = parseInt(fstyle.left);<BR> startY = parseInt(fstyle.top);<BR> endX = window.event.clientX;<BR> endY = window.event.clientY;<BR> // set up to move the flier<BR> distX = endX  startX;<BR> distY = endY  startY;<BR> ticker = STEPS;<BR> fstyle.visibility = "visible"; <BR> fstyle.backgroundColor = "red";<BR> fly( );<BR> }<BR>}<BR><BR>function cubic( t, s )<BR>{<BR> return t * t * ( (s+1)*t  s);<BR>}<BR><BR>function fly( )<BR>{<BR> var cfactor = cubic( ticker/STEPS, overshoot )<BR> var flyX = endX  distX * cfactor;<BR> var flyY = endY  distY * cfactor;<BR> fstyle.top = flyY;<BR> fstyle.left = flyX;<BR> if ( ticker <= 0 )<BR> {<BR> fstyle.backgroundColor = "green";<BR> moving = false;<BR> } else {<BR> ticker;<BR> setTimeout( "fly( )", MILLIS );<BR> }<BR>}<BR></SCRIPT><BR></BODY></HTML><BR><BR> <BR>
Posting Permissions
 You may not post new threads
 You may not post replies
 You may not post attachments
 You may not edit your posts

Forum Rules

