If you have your own tutorials or open source and would like to share your Director knowledge please send them to info@shocksites.com. We will review them, post it and give full credit to the developer.
Current Open Source and Tutorials

Lottery ticket scratch
Provided by Adam Montandon

This is a long shot, but I was so impressed in your site... I have tried to do something in Director for a long time, but I don’t have the skill to do it…
 
I want to scrub off a layer for example a photo, and
The layer underneath will appear, do you get what I mean?
 
Like a lottery ticket…
 
As I say this is a long shot, and I will be grateful for any help
 
Best regards
Per Hansson
Sweden

This is indeed tricky, but not impossible, and you can do it in just a few easy steps. To achieve this we will be using Sprite Channels, Behaviours, Ink effects and Imaging lingo.

Your end result will look something like this:



Click the mouse over the grey area to "scratch off" the surface to reveal the text underneath.

Lets see how its done......

Making your assets
We start off in Photoshop or whatever graphical package you like, and we design the base card. You can see that part of the card (the red square) is the part that will be revealed when we "scratch off" the silver foil, just like a lottery ticket.

Next, we make the scratchable foil graphic. You can use any kind of graphic you like, you can see here I have gone for a silver foil look just like on the lottery tickets.



Working with Director
Now that we have made both graphics, save them, and import them into director. We will be using one copy of the ticket, and TWO copies of the surface foil graphic. Name them ticket, surface and tempsurface so that they look like this:



Now, using the toolbox, make a new button, and put the text "Reset" inside it, this is going to be our reset button.


Now, lay out your sprite channels like this, with ticket in sprite channel 1, tempsurface in sprite channel 2 and the reset button in sprite channel 3. You will want to position the elements correctly, so that the foil graphic covers the scratch-off area on the ticket, and the reset button is in a suitable place. Don't forget to add your frame script in the first frames script channel.



NOTE: Your frame script should be
on exitFrame me
  go to the frame
end


Now, to achieve the "scratch through" effect, we are going to use a concept often seen in the movies, that of "green screen" technology. Basically, in the movies, a scene is filmed against a green background, and everything green is ignored by the camera, leaving only non-green elements. We can do this with Director too, clever stuff!

Select Sprite channel 2 with the Tempsurface member in it. Go to the Property Inspector and change the ink effect to Background Transparent, and change the second colour chip to #00FF00 (Bright green). This tells Director that wherever there is pure green #00FF00 it will turn it transparent, so we will see the layer underneath!


For your reset button, attach this script to it:
on mouseUp
  member("tempsurface").image = member("surface").image
end

Now the tough part, we are going to write a behaviour that we will attach to sprite channel 2 that will allow us to use the mouse to paint the green 00FF00 on top of the foil, so that director will see through it. We do this with imaging lingo like this:
on
exitframe me
  repeat while the mousedown
    x = the mouseh - (sprite(2).loch - (sprite(2).width/2)) - 10
    y = the mousev - (sprite(2).locv - (sprite(2).height/2)) - 10
    member("tempsurface").image.draw(x, y, x + 20, y + 20, rgb(0,255,0), [#shapetype:#oval, #linesize:10])
    updatestage
  end repeat
end

Note: You may want to copy-and-paste that code in to director to make sure its perfect.

You'll notice the script finds the mouse's H and V locations and maps them to sprite channel 2's position, then uses imaging lingo's draw command to paint an oval (circle in this case) with an RGB value of 0,255,0 (In Hex, that's 00FF00 our transparent colour! Call your script Scratch and make sure its a Behaviour script, not a movie script by checking it in the property inspector like this:


By now your cast should look a little bit like this:

Now, drop-and-drag your scratch behaviour onto the tempsurface sprite in channel 2 and there you go!

Congratulations! You've done it! As you run it, you'll notice that you are painting green circles onto the tempsurface member, and the reset button uses the surface member as a backup, and duplicates itself over tempsurface.