Skip to content

Please update your browser

Your browser version is not supported by this site. CS First may not work properly. Learn more

arrow_back The Big Reveal

Transcript

In this add-on, you will reveal the user's quiz results with an interesting effect.

The quiz results will start out pixelated, and will gradually become readable.

To achieve this effect, select the stage and add a "when backdrop switches" block from the events menu.

Select Outcome 1 from the dropdown menu.

Click the looks menu, and add a "set effect" block to the blockstack..

Select “pixelate” from the dropdown menu.

Tinker with the value in the "set effect" block.

A higher number will make the text appear more pixelated an d harder to read.

To make the text gradually appear more clear, add a repeat loop and a "change effect" block.

Select "pixelate" from the dropdown menu.

Click the blockstack to try it out.

Oh no, the text is even more pixelated.

The pixelation value was originally 200, and that value got even higher because it increased by 100 when the “change effect by 10” block was repeated 10 times.

To decrease the pixelation effect, change the value in the “change effect by” block to a negative number.

This examples uses negative ten.

Try it again.

That's better, but it's still too pixelated.

The original pixelation was 200, and it decreased by 100, so the sprite still has a pixelation effect of 100.

To get rid of the pixelation effect, the multiplied values of the “repeat” and “change effect by” blocks must be the opposite of the value in the “set effect to” block.

In this example, the “set effect” block's value is 200, so the multiplied value of the “change effect” and “repeat” blocks has to equal negative 200.

In this example, the values in the “repeat” and “change effect by” blocks are 10 and negative 20.

Multiply these values together, and you get negative 200.

This value cancels out the pixelation effect of 200 that was originally set.

Try it out!

That's pretty cool.

If your results screen is still a little blurry, make it completely clear by adding a "clear graphic effects" block to the bottom of the block stack.

This effect works only for outcome 1.

To make the effect work for outcome 2, right click the block stack and select duplicate.

Change the dropdown menu in the new code stack from outcome 1 to outcome 2.

Click the flag to test it out.

Now outcome 2 should do the same effect as outcome 1.

Now it's your turn!

Set the pixelation effect to scramble the results text.

Change the pixelation effect to gradually reveal the user's results.

Choose an Add-On
Add Images
Program images of the characters to appear when the user's result is revealed.
More Questions!
Write additional questions for your quiz.
Design the Intro Screen
Put your own visual spin on the page that shows before the quiz.
The Big Reveal
Reveal the user's quiz results with an interesting effect.
Results Animation
Add a sprite that reacts to the user's result.
Make Some Noise
Add sound to your quiz.
arrow_backward Back
Next arrow_forward
Instructions
  1. Choose an Add-On, and click "watch" to learn how to build it.
  2. Once you finish one Add-On, try another one below the video!