Simple image rotator using Fireworks

I have Design Premium CS4. So I have Flash, Fireworks, Dreamweaver, etc. I'd like to create a simple slide rotator to put on the site. I've created a photo gallery with Fireworks. It's easy but I don't want all the header information and navigation buttons. I just want a simple box on the page where the images will rotate automatically without headings, nav buttons, etc. I know there are simple java scripts out there but I want to try something which is easily configurable and easily modified as the images will be changed frequently.
Is there a way to configure the Fireworks gallery to not display the header information? Is there another way to accomplish what I want using other programs in Design Premium CS4?
Thanks in advance for the help.
Steve

A quickie way would be to design it as an animated GIF in Fireworks, but save it in Flash format. If you'd like to try this, add the images to seperate 'States', and then choose File > Save As > Adobe Flash SWF. Click the Options button in the Save As Window to set the SWF export options.

Similar Messages

Simple image rotation

Hi all,
Have a couple of pages on a site i'm building where i need a simple image rotation / image swap.
It doesn't have to be anything flash, it's purely for a 200px square image to automatically swap every 5 seconds or so. It doesn't need any user buttons to go to next / previous, or enlarge when clicked.
I've tried a couple of free jquery ones, but these won't load the starting image until all the images have been loaded into the browser, so you end up with a blank spot, then after say 10 seconds the images appear.
Looking through the programs forums, it seems that the jquery i'm downloading isn't configurable to preload the images, so maybe i'm going down the wrong route completely!
Whats the best / simplest way to do this and can you recommend anywhere to read up on how to implement it?
Thanks
Dan

Dan, download the cycle plugin pack first: http://jquery.malsup.com/cycle/download.html. You can copy/ paste in a new .js file and store it locally on your site folder. Or, you could also use the cloud link as I've given below. Both will work.
Then, include the jQuery library to before closing your </head> tag:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
Now, include the jQuery cycle plugin library before your </head> tag:
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script>
Define the DIV that will animate with cycle plugin before your </head> tag:
<script type="text/javascript">
$(document).ready(function() {
    $('.slideshow').cycle({
fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
</script>
In the above code, Div with class slideshow will keep cycling with a fade effect. Note that for some effects to work, you may require the jquery easing plugin. But, fade will do just fine for your original question.
Then, structure your image container:
Based on your original code:
<p class="pagetext">    <img src="images/hgsindeximg1.png" alt="School pupils" width="300" height="233" class="fltrt">Welcome to our school website, we hope that you enjoy looking around the site. <br>
    </p>
You have to restructure it this way:
<p class="pagetext">
<div class="slideshow">
<img src="images/hgsindeximg1.png" alt="School pupils" width="300" height="233" class="fltrt">
<img src="images/hgsindeximg2.png" alt="School pupils" width="300" height"233" class="fltrt">
<img src="images/hgsindeximg3.png" alt="School pupils" width="300" height"233" class="fltrt">
</div>
Welcome to our school website, we hope that you enjoy looking around the site. <br>
    </p>
In the above code, I've added 2 more images that will rotate on your page. Change the filenames to whatever you desire. Also, ensure you retain the image dimensions same across all 3 images for best results.
If you notice, I've just moved the images into a DIV called 'Slideshow'. As defined previously, all 3 images with <img..> within the div with class slideshow will keep rotating.
On a sidenote, please please please please change the background color from red to something 'non-distractive'! Seriously, I went searching for moisturizing drops for my eyes once I opened up the test page you had posted!
Trust this helps.

Simple image pan using Flash CS3

I need help panning a long jpeg image resting on the bottom layer of my first Flash project.
I simply need to pan the image from right to left in a continuous loop, which I'm sure is a simple thing to program, yet I can't seem to locate instructions or a tutorial that explains it.
Can anyone help?

Try the following tutorial...
http://www.tutorialized.com/view/tutorial/Continuously-Scrolling-Image/2520

Image Rotation with AE SDK

Hello all,
I am wondering if someone could suggest a desription of image rotation using Adobe AE SDK - in a Forum entry or in some other related document. While some elements of rotation may be considered available in SDK sample projects - Shifter for all pixels, CCU for individual pixels manipulation - I will appreciate more details for variable subpixel processing and neighbouring pixel interpolation for variable row-by-row shift. It is assumed the angle of rotation is fixed during the effect, and there are no worries about the appearance of out-of-border picture elements since there is a background. Speed will not be an issue as well.
Thank you in advance.

well, the easiest way for rotating an image through the sdk is by using transform_word().
it takes a matrix (or matrices for motion blur), so you can do any transform operation concievable via a matrix.
here's a thread with some detail about this function:
http://forums.adobe.com/message/1970939#1970939
as for line by line transformations...
there are some toos in the SDK, but they're available only for AEPGs of type "artizan" (the plug-ins that render whole comps),
so if you're planning a layer effect, these tools are out of the question.
you can do that calculation manually in a few ways.
you can create a tranformation matrix and run each pixel through it, which would probably be the fastest most versitile way.
or you can use trigonometry, which would probably be the easiest to implement but the slowest to process.
using the sdk's subpixel sample functions would complete the tools you need, but keep in mind that this would be the slowest possible way of rotating an image.

How to use Image Rotator with Firefox??

Since the latest update of Firefox , my image Rotator will not show my images in my forum. They work fine if I use IE but I much prefer to use Firefox as my browser.
IPlease help, I don't want to use IE.
Thanks in advance.

Make use of Firefox Addons
*https://addons.mozilla.org/en-us/firefox/addon/rotate-image/

Im trying to make a simple 360 rotation for a 3d logo in CC 2014 but when i tried to create the 1st key frame the image when out axis

im trying to make a simple 360 rotation for a 3d logo in CC 2014 but when i tried to create the 1st key frame the image when out axis

I find that if you have multiple 3d object they must be merged into a single 3d layer their positions reset to align to the same axises then sized and positioned along them. The layer should then be able to be animated well around an axis like the y axis. Here a Sphere, Cylinder and ring. http://www.mouseprints.net/old/dpr/McAssey-CC.mp4

Editing text in bitmap image using Fireworks

Hello,
I would like to know how to edit the text in the attached bitmap image using Fireworks. I have attached the image for reference. Any assistance would be greatly appreciated.
Best,
C. Lee

I'm sorry, but you cant. A bitmap file doesn't contain editable text, it only contains a grid of colored pixels. What you need to do is create a new image. For that, you'll need to know the color and the font.
If you don't have the hex code for the color, you can sample with the eyedropper tool. Since the font is so thin, sample at the thickest area you can find to minimize anti-aliasing color blending.
If you don't know the font, try one of these sites:
Identifont http://www.identifont.com/
WhatTheFont! http://new.myfonts.com/WhatTheFont/
(It looks a bit like Century Gothic, but it isn't.)
Good luck!

Adding Image to Simple Button Dynamically Using AS3

Hi,
I need some help trying to figure out how to dynamically add an image (PNG or JPEG) that I can place in the library to a simple button also dynamically created in AS3.
Is there a way to (1) add the image instead of using a text label and have it centered in the button?
Here's the AS3 for the simple button without the image (currently uses text label but would prefer if possible to substitute an image for the text:
        var mc2:MovieClip = new MovieClip();
        mc2.addChild( bgRed2 );
        mc2.addChild( txt2 );//currently uses text label; would prefer to use an image istead of text
        var mc2a:MovieClip = new MovieClip();
        mc2a.addChild( bgRed2a );
        mc2a.addChild( txt2a );currently uses text label; would prefer to use an image istead of text
        var clearBtn:SimpleButton = new SimpleButton();
        clearBtn.upState = mc2;
        clearBtn.overState = mc2a;
        clearBtn.downState = clearBtn.upState;
        clearBtn.hitTestState = clearBtn.upState;
        clearBtn.x = 0;
        clearBtn.y = 0;
        addChild( clearBtn );
        clearBtn.x = 55;
        clearBtn.y = stage.stageHeight-clearBtn.height;
Any help appreciated.

assign your image a class name (eg, Img1). you can then use:
var img1D:BitmapData=new BitmapData();
var img1:Bitmap=new Bitmap(img1D);
cleanBtn.upState=img1; // for example, button's upstate is the image.
// if you wanted some background and the image centered on the background, create your background (sprite or movieclip), use addChild to add img1 to your background and center it. then assign your button's upState etc to be your background

Pixel-slop in Photoshop image rotation

See three small bitmaps attached: <<original.bmp>>; <<45cw.bmp>>; <<45ccw.bmp>>.
The original is a simple 21x21 pixel test pattern, black except for white pixels in the center and corners. It's appearance should be the same whether rotated 45 deg clockwise or counterclockwise, and the appearance should keep the symmetry of the original.
I used "Bilinear Interpolation". I used a gamma = 1 profile, and to be extra-safe set Edit>Assign Profile>Don't Color Manage ...
I set the background color to black in the toolbox. Thank you John Joslin.
Then I rotated the original image 45 deg clockwise and counterclockwise to make the other two files. Why to the resulting images look so different? Why are they lacking in symmetry? With the other interpolation methods too, clockwise and counterclockwise rotations give quite unlike images. A partial explanation could be that Photoshop rotates about a point not in the image center, but this doesn't explain enough. I tried 20x20 patterns which showed similar problems.
I'm mostly interested in bilinear interpolation because this is supposed to conserve the total pixel value. Each white pixel in the original has value 255, so the blob resulting from this pixel should have total value 255. Look at <<45cw.bmp>>.The blob on the left has total value 69+94+13+5+18+1=200. The blob on the right is an almost perfect antipode with total value 1+18+6+13+95+68=201. The blob at the bottom doesn't resemble the side blobs and has total value 42+56+40+3+55=196. The blob at the top has total value 40+41+56=137. Clearly Photoshop has lost the top of the top blob. (It also does this with 45 deg counterclockwise rotation, and also with 135 deg rotation.) The blob in the center has total value 49+49+48+47=193. All of the blobs fall far short of 255. Photoshop might be excused for messing up edge pixels, but not a central pixel.
Photoshop messes up rotation at the single pixel level. I made a test pattern with clusters of 4 white pixels and the rotation of this did conserve the total value for the central four. Edge pixels still showed problems. Photoshop image rotation appears to be based on sloppy code.

Then how do you account for my post 11? How to you account for X2 detecting a extra hidden row on the left and top side of of the image? There is no hidden row on the bottom or rightside.
Adobe digimarc did not detect anything.
Paint Shiop Pro X2 digimarc did.
I have posted the proof. It is not my fault that Adobe digimarc addon cannot detect the watermark.
The watermark is there.
dcouzin wrote:
Fantasy watermark. First of all a black pixel isn't a watermark. It can't "hide" a watermark. Hiding has no meaning in this context. If the file header has a digital ID that's fine, but it's not "hidden" in the image, not under a black pixel.
All of your reported O=255 data is not in the image either. There aren't enough bytes in the file to specify opacity at each pixel. This is a 24-bit RGB image not a 32-bit RGBO image. Maybe O=255 is specified globally somewhere in the header, but I don't see "FF" anywhere in the header. More likely full opacity is presumed for a RGB image.
THERE IS NO WATERMARK.
I suggest you download BinViewer 2.0 and BinEditor 2.0 which are freeware. Look at the file <<original.bmp>>. You will count 114 zeros between the first "FF FF FF" and the next "FF FF FF". 114 divided by 3 equals 38 so "00 00 00" appears 19 times between the "FF FF FF"s. Hey, that's the 19 black pixels between two of the corner white pixels. Now you can use BinEditor 2.0 to change some of the "0"s or "F"s to anything you want. You can write "dec9" in there. Save and open in Photoshop to see what you've painted. It's great fun creating colors and shapes by poking numbers into a file. It's the opposite of Photoshop's glistening gliding paintbrushes, and it has a powerful truth.
This is why I want to know what Photoshop does when, for example, it rotates an image.

Love this but can I do something like this using Fireworks?

Hi all,
Saw this site recently and really liked the background, http://www.rareview.com/ the subtule colours and gradients etc. I do not want to recreate this in Flash I am looking to hopefully do this in Fireworks for my site.
I would love to use the image attached and add very subtle colors and gradients to this. Am I pushing it with Fireworks? I have Photoshop and never really got into it, its just to complicated for its own good ;-)
Any thoughts or advice would be great.
Thanks, P.

Yes I do have Firefox and I see what you mean. Hmmm I guess if you know these things it is very simple, posted this in Flash also and it has been pointed out there also.
I am toying with the idea of either trying this as a static image in Fireworks for my site or even venturing into trying to create a similar effect using Fireworks then Flash.
Attached is the image I love and would like that as the main image with only a third of it being displayed behind a solid header or footer, do you think in Fireworks I could add the type of subtle rainbow and vapor effect with gradients over the image?
My strengths have never been good with gradients and messing with colours in both Fireworks and Photoshop, I tend to make so much work for myself I then end up hating the result ;-)

Loss of sharpness upon image rotation: Aperture vs. other software

I have carefully studied the resulting loss of sharpness upon rotation/straightening of images. This topic does not apply to 90/180 degree rotations.
When any image is rotated (be it JPEG or uncompressed), there will be a slight loss of quality (seen as a loss of sharpness) due to interpolation. The method of interpolation applied will affect the degree of quality degradation.
Simply put, professional applications such as Adobe Photoshop and even Adobe Lightroom use superior interpolation methods when performing rotations (and who knows, perhaps for other transformations/scalings also?!). Apple Aperture, on the other hand, uses an interpolation method that renders a loss of image sharpness on par with inferior consumer-level software such as Google Picasa or iView Media Pro. Yes, folks, here's a clear reason to select Adobe Lightroom over Apple Aperture.
Please take a close look at the comparison yourself:
http://web.mac.com/rishisanyal/iWeb/Homepage/Sharpness.jpg
Make sure you are viewing the image I have posted at 100%, not scaled, in order to clearly see the inferior quality of images rotated with Aperture & Picasa.
Apple needs to address this problem by implementing a better interpolation algorithm with its straighten tool. It is sad that we are using and paying for a 'Professional' application that yields results on par with FREE software such as Google Picasa.
As much as I like Aperture for its other features/integration into Mac OS X, I am switching to Lightroom as of now. Straightening/rotating images is an absolute must, used by every photographer on a daily basis. The loss of image quality, therefore, is unacceptable.
Please post to this thread if you have experienced the same problem or are simply concerned over this. The more people that show concern, hopefully, the more likely Apple is willing to do something about this ASAP.

Surely any rotation (apart from the 90/180/270 ones) is by-definition a smoothing operation ? You have to take the values from adjacent pixels and combine them based on the rotation, then average (or use a point-spread function) them to rescale the values back into range.
Looks to me as though the Adobe products are just applying a sharpen operation immediately after the rotation, whereas Aperture isn't. Or Aperture could be using a simple average of the values, where Adobe is doing a gaussian summation-of-components or something similar.
My guess would be that they "do a quick sharpen", otherwise it would take longer to do the rotate. The only way you'll ever know is if the developers tell you though...
-=C=-

Thunderbird 31.3.0 why is the attached image rotated

I just updated to 31.3.0
The first email I send with an attached image...
saved as a draft...
The portrait image appears rotated to be landscape.
Looks broken to me ?

Thanks for the reply.
I can understand your thoughts on Microsoft and mostly agree.
But Office was cheap, for me at least, and it does the simple image things I want to do. (Crop, rotate, resize and that's about all)
Is it really a good thing to restrict Thunderbird to those people who don't use Microsoft Office. ?
I opened the image in Paint and the orientation is correct.
I created a new email in Thunderbird, attached the image and saved it as a draft. On viewing the draft, the image has been rotated right 90 degrees.
I sent the email. When it was received, the image was rotated 90 degrees, just like the draft view.
Perhaps there is something strange about the Image.
I've attached it if that helps.
Am I the only one seeing this.?
It only started happening since I upgraded Thunderbird.

Photo Gallery in Dreamweaver using Fireworks

How do I add images to a photo gallery that I created in
Dreamweaver using Fireworks? I created a photo gallery and I
changed my background color and other settings, but I need to find
any easier way to add images without messing up my settings. Each
time I add a photo, I don't want to have to change 40+ web pages.
Can someone please help? If there is an easier program to use, then
I will change programs.
Thanks for your help!

Sorry in advance if the following comment is missing the
point of your question.
Ans: You need to export (>File > Export) the image that
you have manipulated in Fireworks to an images folder in your
dreamweaver website. You will be prompted for an optimum file
output (JPEG, GIF etc) during this process. Then close Fireworks
and open DW. Then place your curser at the point in the webpage
where you want to insert the image and then select Menu > Insert
> Image. Browse to the image that you have created in Fireworks
and press enter. Job done! Fireworks is a fantastic s/w application
... and there's no need to look elsewhere.

Multiple image upload CRASH!!! but works with simple image upload

I'm getting MAD.
I'm using php and GD
While the simple image and re size works like a charm, the multiple image upload or the multiple file upload have a strange behavior.
It opens the pop-up with flash, then eventually shows me files or thumbnails but when I try to up load I just wait and get the typical "system becoming unstable" flash error.
As I can see the directory is always generated (I've tried also to put a static directory) but after stargin the upload the flash uploader just crashes and no result.
Any help would be really appreciated

Hi Fonzie,
as the folder is getting created, the issue you´re having is not related to wrong folder permission - it´s something else...
As I wrote before, che common upload and resize function works perfectly
this one works perfectly, because it´s just one file to upload and to process, wheras doing that with multiple files might collide with some settings on your server
So for sure it's not a simple issue as the max filesize
Are you sure ? Did you check the current "max_upload_filesize" setting ? As long you don´t check it, you can´t know :-)
As a general rule of thumb, it´s important to be aware of the fact that uploading & resizing images on the server might collide with several PHP settings -- and the more images you upload and resize in one swoop, the closer you´re getting to these limits respectively might even be exceeding them. The following "directives" are those which have an effect on whether your image/file upload & processing will work or not:
- "max_upload_filesize" :: is sometimes set to just 8 MB on a shared hosting, sometimes 16 MB, sometimes more. This setting will affect the file upload procedure only
- "set_time_limit" (e.g. 30 seconds) :: if the execution time of a script exceeds this limit for whatever reason, the server simply shuts it down without letting you (respectively the flash uploader) know it´s been shut down. This *might* be the reason why ADDT´s flash uploader hangs respectively returns that error message after some time, because it´s waiting for some response from the server which never comes.
- "memory_limit" (e.g. 8 MB) :: this directive is a sort of "allocated server RAM" for your account, and it´s in particular the image resizing process which will grab more or less memory resources -- the higher the the resizing factor is, the more RAM is spent, and the more images are getting resized in one swoop, the worser it gets.
However, all these PHP directives can be changed, and your host might even be so courteous to increase the currently defined values of those abovementioned directives for you -- and that´s what I´m suggesting at this point.
Cheers
Günter Schenk
Adobe Community Expert, Dreamweaver

Image rotation with fade effect

I am new to the spry framework and have just started going
through the examples to see if I could create an image rotator that
fades the images into each other when changing. I have taken
snippets from different places to do this and think I have the
answer but really wanted some feedback to sanity check and let me
know if this is the best way of doing it. If it is, then I hope
others will find it useful.
Here is the url to the example:
Image
rotation example
And here is the code:
<!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"
xmlns:spry="
http://ns.adobe.com/spry">
<head>
<title>Sample Image Rotation</title>
<meta http-equiv="content-type" content="text/html;
charset=iso-8859-1" />
<meta http-equiv="X-UA-Compatible"
content="IE=7;FF=3;OtherUA=4" />
<meta name="author" content="www.baytree-cs.com - Peter
Barkway"/>
<meta name="copyright" content="(C)2006 Baytree Computer
Services, All right reserved."/>
<meta name="abstract" content="ISM Homepage" />
<meta name="description" content="ISM Homepage" />
<meta name="keywords" content="ISM Homepage"/>
<meta name="robots" content="all,index,follow"/>
<meta name="distribution" content="global"/>
<meta name="mssmarttagspreventparsing"
content="true"/>
<meta name="rating" content="general"/>
<style type="text/css">
.element{
float:left;
position: relative;
width: 350px;
text-align: center;
#display{
opacity: 0;
filter: alpha(opacity=0);
#animate{
left: -350px;
opacity: 1;
filter: alpha(opacity=100);
</style>
</head>
<body>
<noscript><h1>This page requires JavaScript.
Please enable JavaScript in your browser and reload this
page.</h1></noscript>
<div id="container">
<div id="display" class="element"
spry:detailregion="dsImg"><img src="<?php echo
$rootDir.$baseDir;?>/{@base}{@path}"/></div>
<div id="animate" class="element"
spry:detailregion="dsImg2"><img src="<?php echo
$rootDir.$baseDir;?>/{@base}{@path}"/></div>
<p class="clear"></p>
</div>
<script type="text/javascript"
src="js/xpath.js"></script>
<script type="text/javascript"
src="js/SpryData.js"></script>
<script type="text/javascript"
src="js/SpryEffects.js"></script>
<script type="text/javascript">
var dsGalleries = new Spry.Data.XMLDataSet("spry.php",
"galleries/gallery", { method: "POST", postData:
"c=1&d=<?php echo $baseDir;?>", headers: {
"Content-Type": "application/x-www-form-urlencoded; charset=UTF-8"
var dsImg = new Spry.Data.XMLDataSet("spry.php",
"gallery/photos/photo", { method: "POST", postData:
"c=2&d=<?php echo
$baseDir;?>/{dsGalleries::@base}&s={dsGalleries::sitename}",
headers: { "Content-Type": "application/x-www-form-urlencoded;
charset=UTF-8" } });
var dsImg2 = new Spry.Data.XMLDataSet("spry.php",
"gallery/photos/photo", { method: "POST", postData:
"c=2&d=<?php echo
$baseDir;?>/{dsGalleries::@base}&s={dsGalleries::sitename}",
headers: { "Content-Type": "application/x-www-form-urlencoded;
charset=UTF-8" } });
var imageInterval = 8000; // 8 seconds
var imageFadeInterval = 4000; // 4 seconds
var image2Loaded = null;
var effect = new Spry.Effect.Fade('animate', {from: 100, to:
0, toggle: true, duration: imageFadeInterval});
// Prepare an observer that will change the opacity of the
initially
// hidden element in oposition with the initially visible
element
var obs1 = new Object;
// On each effect step we calculate the complementary
opacity for the other image container.
obs1.onStep = function(ef){
if (typeof otherEl == 'undefined')
otherEl = document.getElementById('display');
var opacity = 0;
if(/MSIE/.test(navigator.userAgent)){
opacity = Spry.Effect.getStyleProp(ef.element,
'filter').replace(/alpha$opacity([0-9]{1,3})$/, '$1');
otherEl.style.filter = "alpha(opacity=" + parseInt(100 * (1
- opacity), 10) + ")";
}else{
opacity = Spry.Effect.getStyleProp(ef.element, 'opacity');
otherEl.style.opacity = (1 - opacity);
// Attach the observer to the Fade effect
effect.addObserver(obs1);
function fadeInContent() {
// 1st time in so set the current rows so that the 'animate'
set is 1 ahead of the 'display' set
if(image2Loaded == null) {
dsImg.setCurrentRowNumber((dsImg.getCurrentRowNumber() + 1)
% dsImg.getData().length);
dsImg2.setCurrentRowNumber((dsImg.getCurrentRowNumber() + 2)
% dsImg.getData().length);
image2Loaded = 0;
} else {
if(image2Loaded) {
dsImg.setCurrentRowNumber((dsImg.getCurrentRowNumber() + 1)
% dsImg.getData().length);
image2Loaded = 0;
} else {
dsImg2.setCurrentRowNumber((dsImg.getCurrentRowNumber() + 1)
% dsImg.getData().length);
image2Loaded = 1;
effect.start();
var obs2 = {
onPostLoad: function() {
setInterval("fadeInContent()", imageInterval);
dsImg.addObserver(obs2);
</script>
</body>
</html>

I think that I might have got this going now. Here is the
code if anyone wants to use it.
<!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"
xmlns:spry="
http://ns.adobe.com/spry">
<head>
<title>Sample Image Rotation</title>
<meta http-equiv="content-type" content="text/html;
charset=iso-8859-1" />
<meta http-equiv="X-UA-Compatible"
content="IE=7;FF=3;OtherUA=4" />
<meta name="author" content="www.baytree-cs.com - Peter
Barkway"/>
<meta name="copyright" content="(C)2006 Baytree Computer
Services, All right reserved."/>
<meta name="abstract" content="ISM Homepage" />
<meta name="description" content="ISM Homepage" />
<meta name="keywords" content="ISM Homepage"/>
<meta name="robots" content="all,index,follow"/>
<meta name="distribution" content="global"/>
<meta name="mssmarttagspreventparsing"
content="true"/>
<meta name="rating" content="general"/>
<style type="text/css">
.element{
float:left;
position: relative;
width: 350px;
text-align: center;
#display{
opacity: 0;
filter: alpha(opacity=0);
#animate{
left: -350px;
opacity: 1;
filter: alpha(opacity=100);
</style>
</head>
<body>
<noscript><h1>This page requires JavaScript.
Please enable JavaScript in your browser and reload this
page.</h1></noscript>
<div id="container">
<div id="display" class="element"
spry:detailregion="dsImg"><img src="<?php echo
$rootDir.$baseDir;?>/{@path}"/></div>
<div id="animate" class="element"
spry:detailregion="dsImg2"><img src="<?php echo
$rootDir.$baseDir;?>/{@path}"/></div>
<p class="clear"></p>
</div>
<script type="text/javascript"
src="js/xpath.js"></script>
<script type="text/javascript"
src="js/SpryData.js"></script>
<script type="text/javascript"
src="js/SpryEffects.js"></script>
<script type="text/javascript">
var dsGalleries = new Spry.Data.XMLDataSet("spry.php",
"galleries/gallery", { method: "POST", postData:
"c=1&d=<?php echo $baseDir;?>", headers: {
"Content-Type": "application/x-www-form-urlencoded; charset=UTF-8"
var dsImg = new Spry.Data.XMLDataSet("spry.php",
"gallery/photos/photo", { method: "POST", postData:
"c=2&d=<?php echo
$baseDir;?>/{dsGalleries::@base}&s={dsGalleries::sitename}",
headers: { "Content-Type": "application/x-www-form-urlencoded;
charset=UTF-8" } });
var dsImg2 = new Spry.Data.XMLDataSet("spry.php",
"gallery/photos/photo", { method: "POST", postData:
"c=2&d=<?php echo
$baseDir;?>/{dsGalleries::@base}&s={dsGalleries::sitename}",
headers: { "Content-Type": "application/x-www-form-urlencoded;
charset=UTF-8" } });
var imageInterval = 4000; // 8 seconds
var imageFadeInterval = 2000; // 4 seconds
var effect = new Spry.Effect.Fade('animate', {from: 100, to:
0, toggle: true, duration: imageFadeInterval});
// Prepare an observer that will change the opacity of the
initially
// hidden element in oposition with the initially visible
element
var obs1 = new Object;
// On each effect step we calculate the complementary
opacity for the other image container.
obs1.onStep = function(ef){
if (typeof otherEl == 'undefined')
otherEl = document.getElementById('display');
var opacity = 0;
if(/MSIE/.test(navigator.userAgent)){
opacity = Spry.Effect.getStyleProp(ef.element,
'filter').replace(/alpha$opacity([0-9]{1,3})$/, '$1');
otherEl.style.filter = "alpha(opacity=" + parseInt(100 * (1
- opacity), 10) + ")";
}else{
opacity = Spry.Effect.getStyleProp(ef.element, 'opacity');
otherEl.style.opacity = (1 - opacity);
// Attach the observer to the Fade effect
effect.addObserver(obs1);
function fadeInContent() {
// 1st time in so set the current rows so that the 'animate'
set is 1 ahead of the 'display' set
//use this flag to avoid the effect running on load
if (typeof image2Loaded == 'undefined') {
dsImg.setCurrentRowNumber((dsImg.getCurrentRowNumber() + 1)
% dsImg.getData().length);
dsImg2.setCurrentRowNumber((dsImg.getCurrentRowNumber() + 2)
% dsImg.getData().length);
var curRow = dsImg.getCurrentRow();
image2Loaded = 0;
} else {
if(image2Loaded) {
var img = document.getElementById('display');
dsImg.setCurrentRowNumber((dsImg.getCurrentRowNumber() + 1)
% dsImg.getData().length);
var curRow = dsImg.getCurrentRow();
image2Loaded = 0;
} else {
var img = document.getElementById('animate');
dsImg2.setCurrentRowNumber((dsImg.getCurrentRowNumber() + 1)
% dsImg.getData().length);
var curRow = dsImg2.getCurrentRow();
image2Loaded = 1;
var imgPath = '<?php echo $rootDir.$baseDir;?>/' +
curRow["@path"];
var gImageLoader = new Image();
gImageLoader.onload = function()
effect.start();
gImageLoader.src = imgPath;
var obs2 = {
onPostLoad: function() {
setInterval("fadeInContent()", imageInterval);
dsImg2.addObserver(obs2);
</script>
</body>
</html>

Simple image rotator using Fireworks

Similar Messages

Maybe you are looking for