Horizontal Scrolling Image JITTERY?

Hello, I just made a simple flash movie with one 3000 pixel
wide jpeg scrolling from left to right, I am using about 500 frames
at about 20 frames per second to scroll it using a simple motion
tween.
There is not much to this movie, but the image is jittery and
does not flow SMOOTHLY - any ideas how to to do this? Speedint the
frame rate up helps some, but I really need this to move slow.
Thanks

great, glad you were able to find the problem. Whoa, that's a
big image. Flash has a limit of 2880 for bitmaps and so on...
beyond that it's good luck, most of the time will throw an error. I
would think about getting the size down some, you could break it up
into pieces and bring them in and get rid of them when needed. btw-
what resolution is the image(dpi)?
2172, was an example, the ending position should be
determined by where you placed the image in the MC (center or at
0,0 ... ?) if positioned at the 0,0 it should start at 0 - width,
and end at 0 for left to right travel.
right, changing speed is fine, the number represents the
number of frames it will take to travel the distance, frame rate is
not effected by this. Leave it at 30 fps.

Similar Messages

Horizontal Scrolling Image Viewer

I am new to web design but certainly trying - my goal is to
include/make a horizontal scrolling image viewer like the one seen
on this site:
http://www.fraxel.com/patients.aspx
- any advice?
-JL

are you good with Flash?
http://board.flashkit.com/board/showthread.php?t=756627
Nancy O.
Alt-Web Design & Publishing
www.alt-web.com

Broad Question - Horizontal Scrolling Slideshow with Still Images

Hi everyone,
I have to make a horizontal scrolling slideshow using many images of different filetypes, sizes and DPI in Premiere Pro CS5.5. I have tried a few different methods but each has its own problems:
1. Arrange still images horizontally in the timeline, adjacent to eachother, and apply a custom Push video transition between each one. This is a consistent method that doesnt require much work but it's tough to control the amount of whitespace between the images, especially when the images are all different proportions.
2. Arrange still images both horizontally and vertically in the timeline, so that there is no white space between the images (the images overlap across multiple video lanes). Then, set up motion fx for the position of the image for each clip. This is tedious and I have to make every clip the same size and make sure the distance each clip travels (in the motion fx) is the same. So for instance, I have to set the starting key to 1200 on the x-axis, and the ending key to -300, for every single image (tedious when there are many). Another problem with this is that it becomes very difficult to change the duration of the motion fx once ive set it up for many.
3. To have an easier time composing the arrangement of images, I just make a single giant image by laying out dozens of photos in InDesign, then export a very wide jpeg. The great thing about this is it's fast, easy, and the composition is exactly how i want it. The bad thing is that premiere doesn't handle many megapixel images well, and furthermore the image quality is horrific compared to the quality of importing individual images.
The biggest problem with all of these is the image quality (extremely poor compared to viewing the source images on their own) and the animation smoothness (all three methods produce very jittery and erratic videos). The biggest question I have is: should I even be doing a slideshow in Premiere? Can someone recommend a better application I should be using for something like this? Do i have to learn Flash? I am not trying to make an interactive thing, just a video/animation where I hit play and dozens of images scroll horizontally, at the same speed, with a lot of control over the scaling of the images and their horizontal and vertical arrangement (the amount of whitespace between them).
Thanks for everyone's time and help!

Don't know if it is still being sold, but Grass Valley's Imaginate was the perfect application for your intended purpose. There are many others as well, but PR is not the program of choice for this.

How to adjust the space between images in a carousel or images with horizontal scroll

I use the next steps to create a carousel or horizontal scroll of images:
Webcenter portal: Spaces
Spaces
Manage Settings
Pages
Create page
Content management
Content presenter
Add images with Plus Icon
It works, but between every image has a lot of space, can you tell me how to reduce the space between every image.
My Oracle Version 11gR1 (11.1.1.3.0)
Regards
Tomas Reyes

Remove line 234 in your HTML code.
<p>& n b s p</p>
This is a redundant line of code. Your spacing should get resolved.
PS: I've given spaces between the tag because otherwise this forum would not display the line correctly.

Image horizontal scroll in interactive PDF or best next thing?

I have been supplied a long (horizontal) timeline image to place into an interactive PDF.
I have found ways of scrolling using Folio states etc but it seems this wont work in an interactive PDF.
Does anyone have any suggestions of a way I can scroll left and right in an image box or have a similar effect that will be compatible.
At the moment I'm thinking I should animate the file and play a video instead - but this isn’t ideal.

You are more likely to get an answer if you ask in the Acrobat or InDesign forum.

Horizontal scrolling with captioned images?

Hey everybody I'm helping a friend with his new site and need help figuring this out:
- I want to add left-aligned text captions below each of the horizonal scrolling images.
- I also want the images/captions to automatically resize to fit every window size (as the images currently do) - would be great if the image caption texts would automatically resize and become smaller with smaller window sizes.
Example here (this is a test without captions): http://briankokoska.com/indextest2.html
If somebody could please try to code the page including the word "caption" left-aligned underneath each of the images I would be very greatful. This way i can add the proper captions myself.
Thanks in advance for your help!!!

Horizontal scrolling and fixed divisions don't work well in mobile devices.
Try this code in a new, blank document and SaveAs test.html. This works much better in mobile/tablet devices.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>BRIAN KOKOSKA</title>
<meta name="viewport" content="width=device-width, initial-scale=1">

<style>
margin: 0;
padding: 0;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
body {
width: 98%;
color: #000;
padding: 0 1%;
font-size: 125%;
font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
header {
position: fixed;
top: 0;
right: 3%;
margin: 0;
width: 35%;
font-weight: bold;
text-align: right;
background: rgba(255,255,251,0.5)
header * { padding-right: 1% }
header address a {
padding-top: 25px;
margin-bottom: 0;
color: red
header p { margin-top: 25px; }
header h2 a {
color: blue;
font-size: 75%;
margin-top: -10px;
section { display: table; }
article { display: table-row; }
/**Captions**/
article p {
display: table-cell;
vertical-align: middle;
margin: 2%;
padding: 2%;
color: red;
/**re-usable classes**/
.center { text-align: center }
.right { text-align: right }
.red { background: rgba(255,0,0,0.5); }
.white { background: rgba(204,204,204,0.5) }
.blue { background: rgba(0,102,204,0.5) }
/**links**/
a img { border: none }
a {
text-decoration: none;
color: #000;
display: block;
line-height: 2em;
a:hover, a:active, a:focus { text-decoration: underline }
/* Special Rules for Mobile, Tablets */
@media only screen and (max-width: 1024px) {
body { font-size: 90% }
img { width: 100% }
header {
width: 100%;
position: static;
padding: 0.5%
article p {
display: block;
padding: 0;
font-size: 90%
</style>
</head>
<body>
<header>
<h1 class="right">BRIAN KOKOSKA</h1>
<address>
<a href="mailto:[email protected]">[email protected] </a>
</address>
<h2><a href="http://mfineart.ca/artists/brian-kokoska-selected-works/" target="_blank">Macaulay & Co. Fine Art</a></h2>
<p class="blue"><a href="http://briankokoska.com/installationviews">INSTALLATION VIEWS</a><p>
<p class="white"><a href="http://briankokoska.com/selectedworks">SELECTED WORKS</a></p>
<p class="red"><a href="http://briankokoska.com/info">INFORMATION</a></p>
</header>
<section>
<article>
<p>Caption goes here...</p>
<p><a href="http://lvl3gallery.com/post-hope-1262013-2172013/#1" target="_blank">
<img src="http://briankokoska.com/briankokoska_posthope_smallest.jpg">
</a> </p>
<p>Caption goes here...</p>
<p><a href="http://lvl3gallery.com/post-hope-1262013-2172013/#1" target="_blank">
<img src="http://briankokoska.com/briankokoska_posthope_smallest2.jpg">
</a> </p>
<p>Caption goes here...</p>
<p><a href="http://voxpopuligallery.org/exhibitions/painting-bitten-by-a-man/" target="_blank">
<img src="http://briankokoska.com/briankokoska_paintingbittenbyaman_smallest.jpg">
</a> </p>
<p>Caption goes here...</p>
<p><a href="http://voxpopuligallery.org/exhibitions/painting-bitten-by-a-man/" target="_blank">
<img src="http://briankokoska.com/briankokoska_paintingbittenbyaman_smallest2.jpg">
</a></p>
<p> Caption goes here... </p>
<p>image here</p>
Etc.....
</article>
</section>
</body>
</html>
Nancy O.

Horizontal scrolling. Help with large images.

Putting together a .pdf publication for iPad.
I have content that fits a standard iPad format BUT I also have these very long timelines (170cm x 21 cm). These need to be displayed zoomed in - with the reader swiping right to accessing the remainder of the content. So a horizontal scroll! Whenever I test it on the iPad it display the full image (so zoomed out and tiny). The other images are displaying fine.
So how do I make sure I view them as I require?
Thanks!

I also need this feature, to view and mark up street plans that are long narrow landscape format pages with "match lines" at the left and right sides. What I want is similar to Acrobat's existing "Enable Scrolling" -- but in the horizontal direction. Planners need this for road and path plans. Musicians and composers need this for viewing multi-page sheet music so they can browse the entire "timeline" of the piece. And as the OP notes, schedule planners need this for reviewing timelines such as Gantt charts.
Adobe, please add this feature. I'll gladly pay for an upgrade (currently using Acrobat Pro XI Mac).

Multi-image (300+) horizontal scroll bar buttons

I am new to DreamWeaver, and need some guidence: I need to
create 300+ square image buttons in a horizontal scroll bar, but
haven't been able to find how to yet. Can someone direct me to
where I may find out how to create this?

So what are you having trouble with exactly -- Making 300 +
images with
your image editing software or making a horizontal scroll bar
in DW?
Why exactly do you want to make people scroll through 300+
image buttons?
Is this supposed to be an image gallery or something? Sorry
for all the
questions but it's hard to picture what you're trying to do
without more
facts.
--Nancy O.
Alt-Web Design & Publishing
www.alt-web.com
"J. Donovan Smith" <[email protected]> wrote
in message
news:fc1iks$4td$[email protected]..
> I am new to DreamWeaver, and need some guidence: I need
to create 300+
square
> image buttons in a horizontal scroll bar, but haven't
been able to find
how to
> yet. Can someone direct me to where I may find out how
to create this?
>

Help with code for inserting horizontal scroll bar in photo gallery in Business Catalyst site?

Hi,
I am using Business Catalyst and Dreamweaver to create a trial site.
I am not sure if this is the correct forum to post this request but anyway I have inserted a photo gallery module at the bottom of the sidebar in the homepage of my test site.
Can anyone advise on whether jquery or any other code can be inserted into the page or module code that will replace the "next" hyperlink below the first 4 photos with a horizontal scroll bar at bottom of the gallery so users can just scroll through all 12 images ?
Kind Regards, Matt.
http://craftime-bs6.businesscatalyst.com/

Alyssa,
Have you tried putting this rule back as it was originally:
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
    left: auto; /*was 9px*/
    color: #EF9CCF;
    background-color: #FFF;
That is, changing your 9px back to auto.
And giving us a link (as you did) is much better than printing out the code for us! Thanks!
Beth

Help with scrolling image gallery?

Hi, using the code for a scrolling image gallery found here (Build an Infinite Scrolling Photo Banner With HTML and CSS | Design Shack). When I pasted in the CSS and HTML, it displayed all vertically and broke my title div. Not a professional, so I could use an expert eye to point out any mistakes. Trying to make title in vertical center of page, scrolling image gallery horizontal in the middle, and links directly below. HTML is below:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Marc Moss Art</title>



<link href="style.css" rel="stylesheet" type="text/css">
<link href="../../../../style.css" rel="stylesheet" type="text/css">

</head>
<body topmargin="600">
<div id="wrapper">
<div class="container">
<header></header>
<div id="content" style="height:300px;width:1000px;float:left;"><h1>art by marc moss</h1>
</div>
    
    <div class="photobanner">
        <img class="first" src="../../../../mosspictures/DSCN0038.JPG" alt="">
        <img src="../../../../mosspictures/DSCN0040.JPG" alt="">
        <img src="image-3.jpg" alt="">
        <img src="image-4.jpg" alt="">
        <img src="image-5.jpg" alt="">
        <img src="image-6.jpg" alt="">
        <img src="image-1.jpg" alt="">
        <img src="image-2.jpg" alt="">
        <img src="image-3.jpg" alt="">
        <img src="image-4.jpg" alt="">
    </div>
    <nav>
    <div id="navigation">
    <ul>
    <li><a href="#">bio</a></li>
    <li><a href= "#">inspiration</a></li>
    </ul>
    </div>
    </nav>
</article>
<footer>
</footer>
</div>
</div>
</body>
</html>

Is this supposed to be a WordPress site? None of these images are found on the server. Those folders don't exist either.
<img class="first" src="mosspictures/DSCN0038.JPG" alt="">
   <img src="mosspictures/DSCN0040.JPG" alt="">
   <img src="wordpress/wp-content/themes/MarcMossTheme/image-3.jpg" alt="">
   <img src="wordpress/wp-content/themes/MarcMossTheme/image-4.jpg" alt="">
   <img src="wordpress/wp-content/themes/MarcMossTheme/image-5.jpg" alt="">
   <img src="wordpress/wp-content/themes/MarcMossTheme/image-6.jpg" alt="">
   <img src="wordpress/wp-content/themes/MarcMossTheme/image-1.jpg" alt="">
   <img src="wordpress/wp-content/themes/MarcMossTheme/image-2.jpg" alt="">
   <img src="wordpress/wp-content/themes/MarcMossTheme/image-3.jpg" alt="">
   <img src="wordpress/wp-content/themes/MarcMossTheme/image-4.jpg" alt="">
Nancy O.

Horizontal scroll a movieclip in iOS

Hello,
I'm trying to found some extension or library to horizontally scroll a movieclip in a iOS aplication made with AIR 3.5.
I tried some, but the perfomance are not so good, even in iPhone 5 or iPhone 3Gs, so if anyone knows a good way to do it, i'll be thankful.

I just played a little with tweenlite, and bought a GreenSock Club membership, to get all the plugins. A bit expansive, but totally worth it, now my scroll works very well when moving a very big image, even in the old iPhone 3Gs.
Thank you for your advices.

Horizontal Scroll Box in Adobe Edge

Hello!
I am very new to html and css coding. I've been teaching myself adobe edge animate to build a website from scratch since it is very similar to After Effects, a program i am comfortable with.
I was wondering how would i go about making a horizontal scroll container that would house image files.
Here is an example: http://golfwang.com/fall-winter-2013-lookbook/
This site translates very well to mobile as well, you can swipe with your fingers in either direction to get the box to scroll. Thank you in advance for any input on the subject.

Thank you Zaxist.
I actually ended up using your post from this thread to solve my problem: http://forums.adobe.com/thread/1144336
I just did everything you said, i took all my pictures and made them a symbol followed by changing the overflow size and setting it to auto.
The only problem im getting now is it wont switch to the custom scroll bar. Does it specifically only work with Text? Like i said before, i have no knowledge of html or css, i just barely understand the concepts and where to drop in my div tags, etc.

[UNSOLVED] Synaptics Touchpad & Firefox: Horizontal Scroll

Hey guys.. i'm having a problem with my laptop's Synaptics Touchpad and Firefox.
I can't seem to get my touchpad to allow me to scroll horizontally in the browser (when, say, there's a wide image on a page for instance). Whenever I try to scroll by sliding my finger side-to-side on the bottom edge of my touchpad, the page scrolls up and down, just like the vertical scroll on the right edge!
At first I thought it was a problem with horizontal scrolling on the Synaptics driver in general, but I discovered that if I have something like File Browser open, I can scroll horizontally with the touchpad, so the problem lies ONLY with Firefox.
I have looked for solutions already and everything I find only talks about a possible issue where Firefox might treat the Touchpad's horizontal scrolling and Forward and Back actions and how to fix this. But this is not the problem I am having. But I do have mousewheel.horizscroll.withnokey.action set to 1 in my about:config, which from what I've read is supposed to be correct to allow h. scrolling.
Any ideas?
Last edited by flintmecha (2008-12-01 23:24:37)

FYI, with my Synaptics touch pad and firefox, it works, but I have the mousewheel.horizscroll.withnokey.action set to 0 (default). In fact, all of the settings in about:config with 'mousewheel' in them are all at the default setting. I just had to setup the xorg.conf (old way) or the the /etc/hal/fdi/policy/11-x11-synaptics.fdi (new way) correctly to enable the horizontal scrolling.
Good luck!
Scott

Horizontal Scrolling

Hey guys, I'm trying to make a section of my web page scroll horizontally. I have found several working examples of this but they all make the entire <body> tag scrollable. I want just the blue outlined section in the following image to scroll and for everything else, including the background, to stay fixed to the page.
You can visit the live site at http://www.kylelord.com. I will also include the code to the body section here to make it easier but you can view the source on the live site if you'd rather.
<body>
<div id="container">
          <div id="header"></div>
    <div id="content">
                    <div id="about">
                              <div id="aboutHead"></div>
                              <div id="aboutBody">
                      <p>Graphic designer in the Philadelphia and New York area.</p>
                      <p>Driven and hard-working person with an excellent sense of design.</p>
                      <p>Specialties include publication, advertising, and web.</p>
            </div>
                              <div id="contact">
            <p><a href="mailto:[email protected]"><img src="images/mail-02.png" /> [email protected]</a></p>
            <p>   <img src="images/phone-02.png" />     <span class="mobile"><a href="tel:18459268873">845.926.8873</a></span></p></div>
                    </div>
                    <div id="featured">
                        <div id="featuredHead"></div>
                          <div id="row1">
                      
                            <span class="imagePlaceholder"><a href="images/portfolio/fullsize/ps3_1.png" rel="lightbox[ps3]" title="Playstation 3 Ad Campaign"><img src="images/portfolio/thumbs/ps3_thumb.png" class="imageCenter" /></a>
                          <a href="images/portfolio/fullsize/ps3_2.png" rel="lightbox[ps3]" title="Playstation 3 Ad Campaign"></a>
                    <a href="images/portfolio/fullsize/ps3_3.png" rel="lightbox[ps3]" title="Playstation 3 Ad Campaign"></a>
                </span>
                
                <span class="imagePlaceholder"><a href="images/portfolio/fullsize/mod1.png" rel="lightbox[modern]" title="The Modern Restaurant Identity and Menu | Dinner Menu"><img src="images/portfolio/thumbs/modern_thumb-02.png" class="imageCenter" /></a>
                          <a href="images/portfolio/fullsize/mod2.png" rel="lightbox[modern]" title="The Modern Restaurant Identity and Menu | Dinner Menu"></a>
                    <a href="images/portfolio/fullsize/mod3.png" rel="lightbox[modern]" title="The Modern Restaurant Identity and Menu | Dinner Menu"></a>
                    <a href="images/portfolio/fullsize/mod4.png" rel="lightbox[modern]" title="The Modern Restaurant Identity and Menu | Drink Menu"></a>
                    <a href="images/portfolio/fullsize/mod5.png" rel="lightbox[modern]" title="The Modern Restaurant Identity and Menu | Drink Menu"></a>
                    <a href="images/portfolio/fullsize/mod6.png" rel="lightbox[modern]" title="The Modern Restaurant Identity and Menu | Dessert Menu"></a>
                    <a href="images/portfolio/fullsize/mod7.png" rel="lightbox[modern]" title="The Modern Restaurant Identity and Menu | Identity"></a>
                </span>
        </div>
                  <div id="row2">
                      
                            <span class="imagePlaceholder"><a href="images/portfolio/fullsize/lud1.png" rel="lightbox[lud]" title="Ludwig & Son's Corporate Identity"><img src="images/portfolio/thumbs/lud_thumb-02.png" class="imageCenter" /></a>
                          <a href="images/portfolio/fullsize/lud2.png" rel="lightbox[lud]" title="Ludwig & Son's Corporate Identity"></a>
                </span>
                
                <span class="imagePlaceholder"><a href="images/portfolio/fullsize/ed1.png" rel="lightbox[ed]" title="Alternative Press Editorial"><img src="images/portfolio/thumbs/ap_thumb-02.png" class="imageCenter" /></a>
                          <a href="images/portfolio/fullsize/ed2.png" rel="lightbox[ed]" title="Alternative Press Editorial"></a>
                          <a href="images/portfolio/fullsize/ed3.png" rel="lightbox[ed]" title="Alternative Press Editorial"></a>
                          <a href="images/portfolio/fullsize/ed4.png" rel="lightbox[ed]" title="Alternative Press Editorial"></a>
                </span>
                  </div>
                  <div id="row3">
                      
                            <span class="imagePlaceholder"><a href="images/portfolio/fullsize/ad1.png" rel="lightbox[kindle]" title="Kindle Advertising Campaign"><img src="images/portfolio/thumbs/ad_thumb-02.png" class="imageCenter" /></a>
                          <a href="images/portfolio/fullsize/ad2.png" rel="lightbox[kindle]" title="Kindle Advertising Campaign"></a>
                    <a href="images/portfolio/fullsize/ad3.png" rel="lightbox[kindle]" title="Kindle Advertising Campaign"></a>
                    <a href="images/portfolio/fullsize/ad4.png" rel="lightbox[kindle]" title="Kindle Advertising Campaign"></a>
                </span>
                
                <span class="imagePlaceholder"><a href="images/portfolio/fullsize/cal1.png" rel="lightbox[calendar]" title="Circular Typographic Calendar"><img src="images/portfolio/thumbs/cal_thumb-02.png" class="imageCenter" /></a>
                          <a href="images/portfolio/fullsize/cal2.png" rel="lightbox[calendar]" title="Circular Typographic Calendar"></a>
                    <a href="images/portfolio/fullsize/cal3.png" rel="lightbox[calendar]" title="Circular Typographic Calendar"></a>
                    <a href="images/portfolio/fullsize/cal4.png" rel="lightbox[calendar]" title="Circular Typographic Calendar"></a>
                    <a href="images/portfolio/fullsize/cal5.png" rel="lightbox[calendar]" title="Circular Typographic Calendar"></a>
                    <a href="images/portfolio/fullsize/cal6.png" rel="lightbox[calendar]" title="Circular Typographic Calendar"></a>
                    <a href="images/portfolio/fullsize/cal7.png" rel="lightbox[calendar]" title="Circular Typographic Calendar"></a>
                    <a href="images/portfolio/fullsize/cal8.png" rel="lightbox[calendar]" title="Circular Typographic Calendar"></a>
                    <a href="images/portfolio/fullsize/cal9.png" rel="lightbox[calendar]" title="Circular Typographic Calendar"></a>
                    <a href="images/portfolio/fullsize/cal10.png" rel="lightbox[calendar]" title="Circular Typographic Calendar"></a>
                    <a href="images/portfolio/fullsize/cal11.png" rel="lightbox[calendar]" title="Circular Typographic Calendar"></a>
                    <a href="images/portfolio/fullsize/cal12.png" rel="lightbox[calendar]" title="Circular Typographic Calendar"></a>
               </span>
        </div>
              </div>
        <div id="caseStudy">
                  <div id="type">
            <h1><a href="marfan.html" title="National Marfan Foundation">Click</a></h1>
            <h2>this guy to hear his story</h2>
            </div>
            <div id="stick">
            <a href="marfan.html" title="National Marfan Foundation"><img src="images/stick.png" onmouseover="this.src='images/stick-over.png'" onmouseout="this.src='images/stick.png'" /></a>
            </div>
        </div>
    </div>
    <div id="footer">
              <div id="downloads">
        <h1>Downloads</h1>
        <p><a href="downloads/KyleLord_portfolio.pdf">Portfolio</a></p>
        <p><a href="downloads/KyleLord_resume.pdf">Resume</a></p>
        </div>
        <div id="contactlinks">
        <h1>Contact</h1>
        <p><a href="mailto:[email protected]">[email protected]</a></p>
        <p><span class="mobile"><a href="tel:18459268873">845.926.8873</a></span></p>
        </div>
        <div id="copyright">
        <a href="http://www.facebook.com/eyeamthekiller0" target="_blank"><img src="images/facebook.png"/></a>
        <a href="https://twitter.com/#!/Kyle_Design" target="_blank"><img src="images/twitter.png" /></a>
        <a href="http://www.linkedin.com/pub/kyle-lord/32/a94/125" target="_blank"><img src="images/linkedin.png" /></a>
        <p>© 2012 Kyle Lord.</p>
        </div>
    </div>
    <div id="underFooter"></div>
</div>
</body>
After researching horizontal scrolling on some sites it seems that I will have to use JQuery to add a "smooth scrolling" effect the page. I also plan to add a link that will lead to an anchor that will exist outside of the visible area (to the right), that is when I plan for the scrolling effect to take place. I want it to animate by scrolling from right to left all the way to the anchor that is linked to. Here are some links to sites I have read up about it on. They also demonstrate the type of effect that I want.
http://www.sitepoint.com/side-scrolling-site-layout-with-css-and-jquery/
http://tympanus.net/codrops/2010/06/02/smooth-vertical-or-horizontal-page-scrolling-with-j query/
http://css-tricks.com/how-to-create-a-horizontally-scrolling-site/
It may be an easy fix but I don't have much experience with JavaScript or JQuery. Any help or ideas would be appreciated. I would not object to alternate ideas.
-Kyle
Graphic Designer
[email protected]

Place all you want to scroll inside of a movieclip, and give it a instace of dragMe, then paste this code into your timeline
var ease:int = 6;
var targY:int = dragMe.x;
var drag:Boolean = false;
var ptY:Number = 0;
dragMe.addEventListener(Event.ENTER_FRAME, dragHandler, false, 0, true);
dragMe.addEventListener(MouseEvent.MOUSE_DOWN, downHandler, false, 0, true);
stage.addEventListener(MouseEvent.MOUSE_UP, upHandler, false, 0, true);
function dragHandler(e:Event):void
          if (drag)
                    targY = mouseX + ptY;
          e.target.x += (targY - e.currentTarget.x) / ease;
function upHandler(event:MouseEvent):void
          drag = false;
function downHandler(e:MouseEvent):void
          ptY = e.currentTarget.x - mouseX;
          drag = true;

Horizontally centering flash .swf" and disallowing horizontal scroll??

Is it possible to center a flash .swf file on a website, and then disable horizontal scrolling?
I made my website in Flash Catalyst, and I made the width 1700px and the height 1200px. I made the width large because I wanted it to look good in the largest screen resolutions, but my biggest problem now that I've finished making the website is putting it up. Simply embedding it makes it scroll horizontally all the way to 1700px, which isn't good for those with small browsers.
Originally, I was planning on making the flash file the background in CSS (using body {background: url(FILE.swf) no-repeat #000 top center}) but then I found out you can't put .swf's as backgrounds.
Basically, I want to know if it's possible to center the .swf horizontally, and then disallow horizontal scrolling. I want to keep vertical scrolling,
Any help appreciated!

Is it possible to center a flash .swf file on a website, and then disable horizontal scrolling?
Yes, but it introduces other problems. With scrolling disabled, you might not be able to see all the page. I DO NOT recommend what you are trying to do. Flash scaling would most likely give you better results.
Background images if intended to cover a large area are typically very small images which are repeated to create a pattern. Using one large image will still never cover all the possible screen resolutions or page sizes... for example larger than 1700 or taller than 1200 pixels.
Centering requires a set dimension, like 1700 so auto set margins would center it, but it still may not cover 100% as using a width of 100% would.
That being said, turn off horizontal scroll and leave vert on with:
overflow-y: auto !important;
overflow-x: hidden !important
then you'll need to use z-indexing to lay anything else over the top of you background .swf
Here a sample page that should get you going... dimensions are smaller so you can see how it works... the principle is the same.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>No Scroll</title>
<style type="text/css">

</style>
</head>
<body>
<div id="main_container">
<div id="flash">
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="800" height="600" id="overflow" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="overflow.swf" /><param name="quality" value="high" /><param name="bgcolor" value="#ffff00" /><embed src="overflow.swf" quality="high" bgcolor="#ffff00" width="800" height="600" name="overflow" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
</div>
<div id="content">
<p align="center">This is the center</p>
</div>
</div>
</body>
</html>
Best of luck!
Adninjastrator

Horizontal Scrolling Image JITTERY?

Similar Messages

Maybe you are looking for