The first thing I did was to choose the colour for this demo (purple) and the logo. From the myriad options available, I zeroed on Yahoo. That’s because the word appears in one of my all-time favourite song, and a company by the same name is headed by a woman.
Then I proceeded to make the colour palette, the brush, and the canvas. All these three images were created in PowerPoint. I decided to give all the three objects a touch of realism by adding colour gradient, shadows and bevel effects.
Slicing Image in Microsoft Paint
The next to-do thing in this challenge was to create a set of images that will be revealed one after the other and ultimately make the Yahoo brand. I used the ‘Select’ function of MS Paint, sliced the image of the Yahoo brand into four quadrants and saved each quadrant as an individual image.
The idea was to make the learners drag the brush a couple of times and reveal the image quadrant by quadrant. Post its implementation, the idea, however, looked quiet drab.
Now I have always believed that mystery adds fun and liveliness to anything. I, therefore, decided to tweak my idea a bit. The learners will drag the brush to create a hazy image of the brand. A question, asking the learners to identify the brand, will pop up. If they answer correctly, the learners will be directed to the exit slide. An incorrect answer will fetch the learners a chance to make the picture clear by painting it further.
Image Visible to the Learner in the First Attempt
Image Visible to the Learner in the Second Attempt
This tweaked idea had an advantage: the learners were being respected. If they recognised the brand by just looking at the hazy image, there was no point in asking them to complete the entire thing.
Convinced that my tweaked idea was viable, I got down to create the hazy and the clear images. Usually, I edit my images either in PowerPoint of Paint; however, for editing these images I chose free raster graphics editor named GNU Image Manipulation Program (GIMP). In fact, I used the ‘Blur’ tool and the ‘Fog’ filter.
With my images created, the only thing left to do was timing their appearance. David had already hinted towards the fact that states and variables are the mainstay of the scratch- off card effect, and these two features was what I used for developing this demo.
I changed the state of all the images that made up the Yahoo brand to hidden. I then created a number variable called ‘Count’ having the value zero. I also made a hotspot and placed it over the canvas image.
This is how I used the variable:
- Every time the brush passed over the hotspot, the value of ‘Count’ increased by one.
- Once the value of ‘Count’ exceeded a pre-determined level, the state of one quadrant would change, and it would become visible to the learner.
Use of Triggers and a Variable in Articulate Storyline
With the images taken care of, I moved on to create the ending screen. Remember how at the start of this article, I mentioned about my favourite song that uses the word ‘Yahoo’. Well, I decided to share this knowledge with the learners, and also gave them the choice to watch the song.
The Final Take
This challenge, thus, was a toughie as it involved the use of variables. Nonetheless, I enjoyed it, and it provided me with a reason to explore GIMP.