Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 6 of 6
  1. #1
    Member mark4man's Avatar
    Join Date
    Aug 2003
    Posts
    65
    Member #
    2599
    People,

    Can someone take a look at this scrolling graphic (implemented via scripting); & tell me how I might recreate it as an animated .gif?:

    http://mysite.verizon.net/vze3yjbu

    I had wanted to add a graphic of a sound wave to my new site (created in Dreamweaver MX...which will be a resource site for digital musicians when complete); & to have it scroll across the page to resemble an audio track during playback in a computer-based digital audio workstation.

    I created the graphic myself; & thought I had it configured properly with an appropriate java script to scroll correctly…but when I uploaded the site, the script caused it to scroll beautifully, allright…but the cursor on the page undergoes a rapid-fire toggling between the cursor arrow & the hourglass.

    A java programmer tells me it’s because the cursor is switching between normal & busy…because the code is making a server call at the same rate the script causes it to scroll.

    He suggested I would be better off with an animated .gif.

    In anticipation of this (it was going to be my first choice for implementation)…I made the graphic twice as long as the width of my page…so as to consecutively frame it for movement in an area as wide as the page.

    But that’s as far as I got…I’m drawing a blank on how to get it done.

    Can anyone offer any suggestions on the correct method for a wide scrolling animated .gif image?

    (I’m using Image Ready.)

    Thanks very much,

    mark4man

  2.  

  3. #2
    Member J Dot's Avatar
    Join Date
    Feb 2005
    Location
    Brisbane, Australia
    Posts
    30
    Member #
    9088
    Use the same script that they have:

    <script>
    function moveBackground(x) {
    var obj = document.getElementById('imageName');
    obj.style.backgroundPosition = ""+x+"px 0px";
    setTimeout("moveBackground("+(x-1)+")",25);
    }
    </script>

  4. #3
    Member mark4man's Avatar
    Join Date
    Aug 2003
    Posts
    65
    Member #
    2599
    J Dot,

    Thanks.

    Who is "they"?

    mark4man

  5. #4
    Member mark4man's Avatar
    Join Date
    Aug 2003
    Posts
    65
    Member #
    2599
    J Dot...

    ...follow up...

    the only thing I could see different about your script was "imageName"...so I changed it in the code & it doesn't work.

    mark4man

  6. #5
    Member J Dot's Avatar
    Join Date
    Feb 2005
    Location
    Brisbane, Australia
    Posts
    30
    Member #
    9088
    Mark4Man,

    give your gif image an id and then change the imageName in the script to match the id you gave the image.

    By they I mean the people that coded the same thing on the link that you provided.

  7. #6
    Member mark4man's Avatar
    Join Date
    Aug 2003
    Posts
    65
    Member #
    2599
    J Dot...

    OK...there's 3 parts to this script (as it was written.) The first is:

    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    <script>
    function moveBackground(x) {
    var obj = document.getElementById('testy');
    obj.style.backgroundPosition = ""+x+"px 0px";
    setTimeout("moveBackground("+(x-1)+")",25);
    }
    </script>
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

    ...where the script writer referred to the layer ID as 'testy'...

    ...the 2nd is:

    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    <body onload="moveBackground(0);">
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

    ...this component appears on the very next line after the script's closing tag (</script>)

    ...the third component is the layer itself, which contains the graphic (I added some layer coding myself, so as to get absolute positioning...so the graphic scrolled at the height & location on the page where I wanted it to):

    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~
    <div id="testy" style="background:url(SoundWave3.jpg) repeat-x; position:absolute; left:0px; top:285px; height:58px; width:800px;">&nbsp;</div>
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~

    ...those are the 3 components. The only thing I changed in the layer was to add the absolute positioning.

    Now...when I re-define the ID as the image name the script doesn't work (the image doesn't scroll)...'cause the ID refers to the layer (<div>.) If I change both the ID name & the <div> name, of course it works the same as it does now.

    That's where I am on this.

    Thanks,

    mark4man


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Search tags for this page

photoshop animated gif scrolling

Click on a term to search for related topics.
All times are GMT -6. The time now is 02:04 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com