X-ray effect

Greg Cannon

96 posts

Posted Friday, December 21, 2012 at 6:55 AM  

Hello,

 

I'm doing a 'sustainability' (environmental) course and want to do something a bit different when it comes to getting people to think about recycling. Basically I want an image of a typical kitchen style trash can,  I'd then like learners to use x-ray style glasses to look at the contents of the trash can i.e. I'd need to show other images (of recyclable items) contained within the bin. I then plan to use a simple drag and drop interaction whereby the learner removes the items that could be recycled.

 

I have limited picture editing options (Pixlr, Powerpoint 2003, Paint and Office Picture Manager)...

 

Are there filters that I could use to achieve this effect or is it something I could do in Storyline using states, or a combination of the 2?

 

Any help much appreciated.

 

Cheers,

Greg


This post has 0 verified answers

All Replies

Greg Cannon

96 posts

Posted Friday, December 21, 2012 at 7:42 AM  

hmmm...well I had a go using an "invert" filter in Pixlr. I also used a colour pick/replace function-thingy to make the inside of the bin visible (kinda). 

 

I then inserted the inverted items into the transparent bin and set this as a state. When you click on the x-ray glasses the state of the original bin is triggered to change to x-ray and hey presto. We have an x-ray sort of effect. 

 

I think it just about works ok but does need some polishing. Any ideas from the community much appreciated. Story file attached so you can see what I've done...


x-ray test.story

Posted Friday, December 21, 2012 at 7:51 AM  

Hi Greg,

 

First, love the idea! You could use layers for the "X-ray" vision. You could also use shadow effects, adjust the brightness or transparency, etc. to add to this view, for a little more adaptability and custom appearance. 

 

I put together a very quick example and attached it. Please keep in mind that it's nothing fancy


XrayExample.story
Greg Cannon

96 posts

Posted Friday, December 21, 2012 at 8:01 AM  

Thanks. I stumbled across 'invert' and it seemed to do the job quite nicely. Am having to tweak it so that the items in the bin are drag-able. When added as a 'state' they don't appear in the timeline so am unable to use them as interactive elements. Have simply added them to the main slide and set initial state to hidden. When the learner clicks on the x-ray glasses now I simply change the state of the bin to x-ray and the state of the rubbish items to normal...


User Rank Mike Enders

2,144 posts

Posted Friday, December 21, 2012 at 8:02 AM  

Greg,

 

I got stuck on the 3-D glasses visualizations...so went in a slightly different direction with a scanner motif.  But you could adapt it to your needs.  Basically uses a layer to animate a "scan" and triggers state changes in base layer objects.  File attached.

 

It's a quick rough out, but hopefully it will spark some other ideas.

 

Mike


scan.story

Posted Friday, December 21, 2012 at 8:07 AM  

Nice, Mike!

 

I really, really like that technique  I may have to use that sometime.

 

Thanks! 

Christine


User Rank Mike Enders

2,144 posts

Posted Wednesday, December 26, 2012 at 6:38 AM  

@Nick,

 

I'll put it on the list.  I should have it posted for you tomorrow.

 

Mike

 

 


Nick O

39 posts

Posted Wednesday, December 26, 2012 at 8:17 AM  

@Mike,

 

Thanks. it'd be great to share with all the community members as well.

 

Nick


Posted Saturday, December 29, 2012 at 2:40 PM  

Hey All,

 

Greg, so glad you asked the question. And Mike, love the solution. I'm thinking there could be other scenarios where this "X-ray" effect could be ... ummm ... effective.