masking effect

This is a discussion on masking effect within the Graphics & Flash forums, part of the Web Design category; please refer to this link Home | Esquires Coffee Houses - great coffee helps? at the bottom right there is ...


Reply
 
LinkBack Thread Tools Display Modes
Old 4th December 2009, 01:48 AM   #1
Member
 
Join Date: Sep 2009
Posts: 169
Thanks: 0
Thanked 0 Times in 0 Posts
sudhakararaog is on a distinguished road
Expertise: Total Beginner
Experience: Basic / None
Default masking effect

please refer to this link
Home | Esquires Coffee Houses - great coffee helps?

at the bottom right there is a flash effect using masking technique, to create that masking effect would normally be a little tedious, my question is are there any softwares that can be purchased or websites that offer such masking effects which can be easily customized to change the images or dimensions.

please advice.

thanks
sudhakararaog is offline  
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!twitter
Reply With Quote
Old 4th December 2009, 08:18 AM   #2
Member
 
Join Date: Jul 2009
Posts: 191
Thanks: 0
Thanked 18 Times in 17 Posts
Mike Hopley will become famous soon enough
Expertise: (X)HTML / CSS
Experience: Quite Good
Default

If you buy Flash, it should be pretty easy.

You can do a limited amount of this stuff using javascript. I think it would be tough to get that kind of screen-wipe effect, but you can certainly do a simple cross-fade. With a javascript library such as jQuery, it's a snap.
Mike Hopley is offline  
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!twitter
Reply With Quote
Old 4th December 2009, 11:36 AM   #3
admin
 
WelshStew's Avatar
 
Join Date: Dec 2008
Posts: 1,844
Blog Entries: 3
Thanks: 13
Thanked 36 Times in 34 Posts
WelshStew has a reputation beyond reputeWelshStew has a reputation beyond reputeWelshStew has a reputation beyond reputeWelshStew has a reputation beyond reputeWelshStew has a reputation beyond reputeWelshStew has a reputation beyond reputeWelshStew has a reputation beyond reputeWelshStew has a reputation beyond reputeWelshStew has a reputation beyond reputeWelshStew has a reputation beyond reputeWelshStew has a reputation beyond repute
Expertise: (X)HTML / CSS
Experience: Professional
Default

If you do want to use flash but don't have the skills to work with action script then you can use a tool such as firestarter to help.
WelshStew is offline  
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!twitter
Reply With Quote
Old 9th December 2009, 09:08 PM   #4
Member
 
MinatureCookie's Avatar
 
Join Date: Jan 2009
Location: Hampshire, UK
Posts: 226
Thanks: 3
Thanked 6 Times in 6 Posts
MinatureCookie is on a distinguished road
Expertise: (X)HTML / CSS
Experience: Professional
Default

I would personally set out on doing this in code so it can be applies to any image, any width, any height.
I think splitting the image up into an array of seperate parts of the image and then setting up a loop to display more of each square systematically to do that wipe.

But as software goes, if you right-click that document it says that the software used to create that document is called JW Image Rotator 3.16
__________________
MinatureCookie.com
MinatureCookie is offline  
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!twitter
Reply With Quote
Old 10th December 2009, 07:57 AM   #5
Member
 
Join Date: Jul 2009
Posts: 191
Thanks: 0
Thanked 18 Times in 17 Posts
Mike Hopley will become famous soon enough
Expertise: (X)HTML / CSS
Experience: Quite Good
Default

Quote:
Originally Posted by MinatureCookie View Post
I would personally set out on doing this in code so it can be applies to any image, any width, any height.
...which the Flash method can also do. Flash is code too (that image rotator is built in Flash). ;)

You're not going to get the same complexity of screen-wipe effect if you use javascript, and the javascript will also be pretty tedious to create.
Mike Hopley is offline  
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!twitter
Reply With Quote
Old 10th December 2009, 08:08 PM   #6
Member
 
MinatureCookie's Avatar
 
Join Date: Jan 2009
Location: Hampshire, UK
Posts: 226
Thanks: 3
Thanked 6 Times in 6 Posts
MinatureCookie is on a distinguished road
Expertise: (X)HTML / CSS
Experience: Professional
Default

Of course Flash is code too - and I wasn't ruling it out as an option by all means. I would just have used JS in place of AS here because it would still allow right clicking etc. within the browser. And I think that's an important property of images in websites - but that's just my opinion.
__________________
MinatureCookie.com
MinatureCookie is offline  
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!twitter
Reply With Quote
Old 11th December 2009, 10:32 AM   #7
Member
 
Join Date: Jul 2009
Posts: 191
Thanks: 0
Thanked 18 Times in 17 Posts
Mike Hopley will become famous soon enough
Expertise: (X)HTML / CSS
Experience: Quite Good
Default

Quote:
Originally Posted by MinatureCookie View Post
I would just have used JS in place of AS here because it would still allow right clicking etc. within the browser. And I think that's an important property of images in websites - but that's just my opinion.
I see your point.

Personally, I think that the basic javascript image swapping (maybe with a simple fade effect) is just fine. There's no need for anything more fancy.

I just think this particular effect would be difficult to replicate in JS.
Mike Hopley is offline  
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!twitter
Reply With Quote
Old 15th December 2009, 10:30 PM   #8
Member
 
MinatureCookie's Avatar
 
Join Date: Jan 2009
Location: Hampshire, UK
Posts: 226
Thanks: 3
Thanked 6 Times in 6 Posts
MinatureCookie is on a distinguished road
Expertise: (X)HTML / CSS
Experience: Professional
Default

Okay, I gave the JS a go (it's a bit buggy at the moment, but there you go)

Not sure if it's useful, just thought I'd drop it in here.
http://webprocafe.com/javascript/150...on-script.html (Image Transition script)
__________________
MinatureCookie.com
MinatureCookie is offline  
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!twitter
Reply With Quote
Reply

Tags
effect, masking

Thread Tools
Display Modes