ScriptyInfiniteSlider.fwaction (2013-06-29) (Downloaded 308 times)
Contains:
Compatible: Pro 5, Pro 5.5, Pro 6, and Pro 7
Author: Walter Davis
javascript css effects prototype animation scriptaculous
Create an image slideshow that animates continuously. Use this element as a page background, or an in-page element, and use it in a responsive or flexible layout, too! The effect will degrade slightly on IE 8 and below, because the images will not resize to the size of the container.
Set your page to HTML5 output (or apply the HTML5 Page Action) if you are concerned about your page being valid.
Draw an HTML box where you want the effect to appear. Double-click inside it so you have a text cursor, and choose Insert/Graphic Item from the main menu. Import your first image. Press the right arrow key until your text cursor is flashing to the right of that image, and repeat until you have all of your images inside the box, one right after the other. The HTML box will grow to fit them, but we will fix that in a moment.
You may resize these inline images to be as large as you need, and whatever shape you need.
Click elsewhere, then click once on your HTML box. In the Inspector, set the Overflow property to Hidden. If you are using Freeway 6, be sure to set the Measurements segment to Height: Fixed and Width: Fixed (or Fixed %). Finally, set the dimensions to match your desired effect area.
To make a full-page animated background, set your HTML box to 100% width, 100% height, and Position: Fixed in Window; then use Item / Send to Back to make it into a fake background for the page.
There are two parameters – effect duration and effect interval. These are set in seconds. Test the effect and adjust the duration shorter to make the wipe effect faster. This is very sensitive to the dimensions of the element – larger elements need longer duration, or else the effect may look jumpy.
Alex Rollo
This is a great action. One wee thing I could do with but don't know if it's possible. I wanted my slides to consist of separate images, with a gap between them. The slider would be displayed on top of a background, which should show through between each image. The main problem with this is that the images in the slider, seem to be stacked on top of each other instead of sliding upward from the 'hidden' part of the div (as I thought it would). This means that instead of my background image showing through, I see a pile of garbage, composed from all the other images in the set.
Any way round this?
Walter Davis
It should very definitely not be doing what you describe. You should only be seeing one image at a time, and they should be perfectly matched to one another. It's a simple wipe from one image to the next. Can you please post a link showing the problem?
Walter Davis
Ah, wait, one thing that occurs to me here – are these images different sizes/aspect ratios? You need to ensure that they are EXACTLY the same pixel dimensions as one another, no exceptions. If you want to give the illusion of images that are not the same size / shape as one another, you must add some background color to each image – pad it out to the same common dimensions with a solid background of the same color as your page.
Alex Rollo
Thanks Walter, I'm not sure what you mean by all being the same pixel dimensions. The images (the final, viewable image I wanted to display in the FW action) were made up of different images of slightly different dimensions - but, the exported PNG's from Photoshop, were all exactly the same size - but I'm guessing that you mean I have to make all the individual elements the exact same size?
Meantime I'll try to put the page back to what it was before I placed a white background in the Photoshop image b4 exporting it and send you the link.
Alex Rollo
Here's the link Walter http://www.tres-belle.co.uk/
Aha - I just noticed that, when it was uploading - Panel1.PNG was followed by Panel1a.png, Panel1b.PNG etc. - even though there was only 1 PNG file - I'm guessing that each element in the png is sent as a separate file?
Walter Davis
Yeah, this is going to be difficult to pull off with this Action. For one thing, there is a 4-way gradient underneath, which means you won't be able to add a fake background under the slider area and have it look seamless. If you have control over the background, and you can create a gradient under that area that is perfectly even from left to right, then you could use a slice of that same background under each of the PNGs in your slider. You do need to have a background in these images – they must be opaque – otherwise yes you will see through to the rest of the layers. That's just how the effect works.
Alex Rollo
Thanks again Walter for your advice. I've implemented (of a sort) your suggestion. If you go back to that link you can see what I've managed to do - it's not perfect but I don't think many people will notice the small discrepancies.
florian
I would like to use this action as a "full-screen-backdrop". Unfortunately it shows the image slightly blurred, compared to the the action "BackgroundSupersizer", which does a similar effect. Is there any way around this?
Here an example, where i used both actions. If you change the size/format of the browser window, you will see, that the ScriptyInfiniteSlider displays the picture blurred.
www.soap-imaging.com/test
Florian
Marc Noël
does this acton work unter FW7 pro?
Sign In or to comment.