PDA

View Full Version : Aditional question Moving Light



Niv Hamagniv
05-18-2008, 09:00 AM
hi,

jscheuer1 answered cheri about the moving light effect directions and duration:

http://www.dynamicdrive.com/forums/showpost.php?p=18428&postcount=5


My question is: can you modify the code so i can choose a different color instead of black? ( acording to the background color of any page... )

thanx

Niv

jscheuer1
05-18-2008, 10:46 AM
I would direct you here:

http://msdn.microsoft.com/en-us/library/ms533011(VS.85).aspx#

for all the technical specifications on the filter used in this script. It may help you to get what you want out of it.

Also, to help you, I will explain some of the concepts of filter light. It is an attempt to mimic light. White light is a combination of all colors at peak brightness, and black isn't light, it is the absence of brightness and of color.

To shine a light, you must have a dark place to illuminate. If you take a flashlight, or even a strong spotlight out on a sunny day, you will notice little effect from it.

Now, the images that you are going to shine your light on also have color (light) at various levels throughout. This will blend with the ambient light of the filter to create the apparent light value of the unilluminated portion. So, unless you use black as the ambient color, and a relatively low degree of illumination, there will be blending. How this works out will vary from image to image. If your images are all similar in their illumination values, it could be relatively uniform in appearance, but there will generally be no set value you can use, it would be more a case of trial and error to match the background color of a page. Black (the absence of all color) is easy, as I say because black is black, and all black matches.

I will play around with this script to see if I can offer any more specific help for this in a later post.

jscheuer1
05-18-2008, 12:15 PM
OK, after playing around with this script a bit more, I've discovered that for some reason, if you give the image an ambient light, the movement routines will no longer work. This is not the case however in the script that this one was originally developed from. I'm taking about:

http://www.dynamicdrive.com/dynamicindex4/spotlight.htm

Still, even when one gives an ambient light, it is overridden by the spotlight. The spotlight can then be given color, but the unilluminated area will still be black or tending to black, not lending itself to blending in with a page's background color if other than black.

So, as far as I can tell, what you are asking for cannot be done with this filter.

Niv Hamagniv
05-19-2008, 01:04 PM
hi john,

thank you for your time,

your explanation was enlightening.

Niv

jscheuer1
05-19-2008, 01:22 PM
It just occurred to me that the effect you are looking for might be able to be achieved relatively easily by using an alpha channel transparency png image. It could be made to look like a spotlight in a way by being completely transparent in a circular center area the size of your 'spotlight' and blending (anti-aliasing, in image editing terms) to a solid color that matches your background color at the edges. It could then be positioned over the images and moved about. The details are a little tricky, but workable. I did something like this for text at one point, so I'll see if I can find that.

On the plus side, it's cross browser, while the filter is not. It will need some help in IE 6 though, because that browser doesn't do alpha channel png images correctly, but usually can be made to do so.

jscheuer1
05-19-2008, 02:12 PM
OK, I found the previous work. It's all in black and white, but the colors (unlike with the filter) can be fairly easily changed precisely to suit:

http://home.comcast.net/~jscheuer1/side/flashlight/

and perhaps more interesting because it shows that this can do what filter cannot (to wit, 'shining' a dark onto a light):

http://home.comcast.net/~jscheuer1/side/flashlight/dark.htm

If this looks like it has at least the basics of what you have in mind, let me know - when I have more time I will see if I can adapt it to the type of automatic action the script we were originally talking about in this thread has. Or, if you have a different sort of effect in mind, now is the time to be specific.

Niv Hamagniv
05-20-2008, 07:10 PM
Hi John,

I accept your offer to be specific…


The background color of the page I'm talking about is #B4B5AF

Or : Hue=47, Sat=9, Lum=168.
Or : R=180 , G=181, B=175
( one kind of grey )


The idea of the desired effect is this:

An image, on this background color, would be "invisible", until the "moving light"
or the "spot light" will - sort of - "Bring it to life" ( let it shine in its own true colors)

In a "right to left" moving effect… …and then let it 'disappear' again in the gray background,
in the same manner. (…and on and on…)


Actually, it doesn’t matter if the image "starts" invisible or visible.
What matters is the way of it disappearing in the background…
And showing up again.


So far the desires….


I thought, maybe, to limit the necessary parameters of the function,
to those of the gray color… …But maybe I'm "out of my element" here, Dude.


Thank you very much, again


with respect,

to you, and the BIG Lebowski

Niv

jscheuer1
05-21-2008, 12:25 AM
Before you replied, I began playing around with this idea some more:

http://home.comcast.net/~jscheuer1/side/flashlight/pg_s.htm

If that's at all close to the idea (I know the color is different) let me know. Also let me know any other areas where it would need to be different (besides the color).

jscheuer1
05-22-2008, 02:25 PM
Still a work in progress, but we are definitely getting there:

http://home.comcast.net/~jscheuer1/side/flashlight/180_181_175_m_oo.htm

What do you think?

Niv Hamagniv
05-23-2008, 09:04 PM
Hi John,

this is almost perfect.:):):):):D

a few thing though:

1.the round shape of the spotlight. can you make it rectangle or
something...?
( the effect of a vertical "line" instead of a round shape,
creating a horizontal wipe)

[ just as it is, but not round ]

2. can you make it possible to change the desired color of the effect?
( to choose any RGB values or #, to be the "default" color of the effect)
( to be able to change it easily in the code)

3.if it is possible, i want to be able to set the size ( width of visible part of
the image).
for example: if the image is 700X150,
i want to be able to choose the size of the "running rectangle spotlight"
so always 300X150 will be visible,
Or 650X150 will be visible [ basicaly- to start showing the image and
when reaching the end, start fading it...]

what i want is just to be able to control the size of the effect by myself...




3.this one (http://www.dynamicdrive.com/forums/s...28&postcount=5 )

goes from side to side,

i want it to be a full wipe from one side to the other, and then again...
{ instead of
left to right
right to left,

a full wipe from right to left ( untill the image is invisible again )
and then
again: a full wipe from right to left.}



thank you very much for your time again.


Niv

jscheuer1
05-24-2008, 04:37 AM
OK, this may take more than one response to clarify things for you, but I'm willing to keep after it if it takes a bit of explaining. But you might get what I am saying on the first go. To a degree it will depend upon how familiar you are with the .png image format - the creation and optimization of images in it. The one capability of the .png image format that it possesses that other web image formats do not that makes it ideal for this is the ability to exhibit gradient degrees of opacity. That is, rather than solid/transparent, it can do solid to slightly solid to less solid to totally transparent along a gradient, all in one image.

Here goes - The script we are currently looking at differs significantly from the script at:

http://www.dynamicdrive.com/forums/showpost.php?p=18428&postcount=5

That script used the IE 5.5+ proprietary light filter, so was only good in those browsers, and had the limitations of that filter as discussed before.

This current script uses instead an alpha channel .png image as a mask that is positioned and moved over the image(s) that we want to apply this affect to. As a result, it will work in any modern browser, and can do things that the IE proprietary filter cannot. And the exact way that it moves over the underlying image is controlled by the script routines and the style we set for it. This image can be any color, size, or shape required, and isn't that complex to create in a decent image editing program, but must be optimized (using any of the several free utilities available for doing so - I like pngcrush) for use in the script if it isn't to look bad in some browsers. Optimization will also reduce its byte size, making things load faster as well.

It's a little more complex than that, only because IE 6 and less cannot render alpha channel .png graphics properly without another proprietary IE filter, but that part is handled by the script, so you need not concern yourself with that aspect of the new script much, except if you are interested.

Now to your points:


1.the round shape of the spotlight. can you make it rectangle or
something...?

The spotlight is an image with a gradient transparency in the middle. So it can be any shape or size you like, except that the larger it is, the longer it will take to load. A smaller image could be scaled up by the browser though, so some file size savings could be had there, as long as the scaling up wasn't too much - at a certain point resolution would suffer.


2. can you make it possible to change the desired color of the effect?
( to choose any RGB values or #, to be the "default" color of the effect)
( to be able to change it easily in the code)

In addition to shape and size, color is also at your discretion. However, it cannot be scripted solely in the code, it depends upon the image, which can be made as one wishes.


3.if it is possible, i want to be able to set the size ( width of visible part of
the image)

That's possible. It would be controlled by the .png image's size (its actual size and any modification to that size imposed by its style).

The bottom line is that much of the effect is governed by the image used.

In closing (for now) I just want to add a question or so and a statement:

Does this make sense to you? Did I answer your questions? How familiar are you with image editing in general, .png editing in particular?

The statement - Please forgive me for being so wordy here, but if you are to use this, I think you will need to know all of this stuff (at least in a general sort of way). It isn't as complicated as it might seem, and the code can take care of some of it, just not as much as I think you envisioned. If you get all this, great! If not, ask some more questions.

Niv Hamagniv
06-03-2008, 03:26 PM
Hi John,

pls excuse me for the delay....

if i understand correct:

instead of filtering the image, the script creates a situation of moving a gradient .png image ( transparent to any desired color ) over the certain image in the page.

and we create any kind of .png image ( size, shape, color )
that we want for our desired effect...

that sounds good....

i'll have to check "pngcrush" to see how to create a gradient .png .

a few questions:

A. if i understand correct,
the speed ( or timing ) of the effect is determend by
1.the size and density (transparent to color ) of the .png we creat
2.the code
or is it just the size & density?

B. will "moving the .png",
effect nearby objects on the page (like text etc.)?

AND/OR : does it requier an extra "clean" space in the page to
"run through"?

C. what about, for example:
if the image is on the right-hand side at the bottom of the page,
and the desired effect is a fight-to-left movement.
when trying to imagine that, i realize the .png should start from a position
which is "outside" the screen....
or is it not a problem at all....


thank you again john,

Niv

jscheuer1
06-04-2008, 06:02 PM
if i understand correct:

instead of filtering the image, the script creates a situation of moving a gradient .png image ( transparent to any desired color ) over the certain image in the page.

and we create any kind of .png image ( size, shape, color )
that we want for our desired effect...

Yes, that's the basic concept.


i'll have to check "pngcrush" to see how to create a gradient .png .

pngcrush and other similar utilities don't create png images. You would use Paint Shop Pro, Photoshop, The Gimp (free), or any decent image editing method that can create alpha channel .png images. Once you have your image, you would want to use something like pngcrush (also free) to strip the gamma channel (often makes .png look off color in IE if you don't), and while you are at it, may as well compress the image as much as possible to save on load time.




A. if i understand correct,
the speed ( or timing ) of the effect is determend by
1.the size and density (transparent to color ) of the .png we creat
2.the code
or is it just the size & density?

The speed is determined by the code:


new movingLight('light1', 'h', 60, 5);

'light1' is the id of the image to apply this to. 'h' is one of 'h', 'v', or 'd' for horizontal, vertical, or diagonal movement. 60 is the interval in milliseconds that the png images gets moved 5 pixels (the amount to move it each time).




B. will "moving the .png",
effect nearby objects on the page (like text etc.)?

AND/OR : does it requier an extra "clean" space in the page to
"run through"?

No, the moving .png is or is in an absolutely positioned element (depending upon the browser) that moves inside of a relatively positioned element with its overflow set to hidden. That way the .png will not 'bump' into anything else on the page.




C. what about, for example:
if the image is on the right-hand side at the bottom of the page,
and the desired effect is a fight-to-left movement.
when trying to imagine that, i realize the .png should start from a position
which is "outside" the screen....
or is it not a problem at all....

As I say, not a problem.

Niv Hamagniv
06-04-2008, 06:30 PM
that sounds great...

Niv Hamagniv
06-10-2008, 08:28 AM
hi John,

i'm abit confused...,

did i miss the link to the new code ?? :-)

thanx

Niv

jscheuer1
06-10-2008, 12:52 PM
This is the latest version I have:

http://home.comcast.net/~jscheuer1/side/flashlight/180_181_175_m_oo.htm

Going back over what I said in my last post though, I noticed one minor 'error' (not really an error, but it could be confusing) in what I said. I was hoping that you would just figure it out because it is sort of obvious:



new movingLight('light1', 'h', 60, 5);
'light1' is the id of the image to apply this to. 'h' is one of 'h', 'v', or 'd' for horizontal, vertical, or diagonal movement. 60 is the interval in milliseconds that the png images gets moved 5 pixels (the amount to move it each time).

I should have typed:

'light1' is the id of the .png image to apply this to . . .

And I should perhaps have mentioned that here (in the demo's body):


<body>
<div class="image" id="image1">
<img class="light" id="light1" alt="" src="180_181_175_m_2_o.png">
</div>
<div class="image" id="image2">
<img class="light" id="light2" alt="" src="180_181_175_m_2_o.png">
</div>
<div class="image" id="image3">
<img class="light" id="light3" alt="" src="180_181_175_m_2_o.png">
</div>
</body>

that 180_181_175_m_2_o.png is the name of the .png image I used. The name is confusing, and could have been anything, but I just used its RGB values followed by m for 'medium size', 2 for which 'version' (I had several), and o for 'optimized' (meaning I had run it through pngcrush). I could just as easily named it light.png or png.png for that matter. I could even have used 3 different ones if I wanted the 3 different effects to be even more different. In the demo the effects differ only due to the interval, increment, and 'hvd' used - and the styles applied in the stylesheet.

One more very important fact is that the image underlying each effect is defined in the stylesheet as a background image, ex:


#image1 {
background-image:url(../files/photo9.jpg);
}

In fact, in the stylesheet, the id's refer to the specific lights and images, while the classes refer to the basic styles used as a jumping off point for all lights and images.

Now, being confused is OK, but I cannot help much more unless I know specifically what is confusing you. Or - you could make up your own demo showing what you have tried so far. If I had a link to that, I could probably figure out how to advise you:

Please post a link to the page on your site that contains the problematic code so we can check it out.

Remember, I did say that this could take several posts to explain, but that I was willing to stick with it until you got it.