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 Answer the Phone Call

Choose an Add-On
play_circle_filled
Welcome Screen (Part 1 of 2)
Program a welcome screen for your phone.
arrow_forward
play_circle_filled
Welcome Screen (Part 2 of 2)
Program a welcome screen for your phone.
arrow_forward
play_circle_filled
Thumbs
Animate the thumbs holding your phone.
arrow_forward
play_circle_filled
Later That Day
Add a second scene in which the sprites will interact outside the text conversation
arrow_forward
play_circle_filled
Broken Screen
Add a broken screen game feature to your animation.
arrow_forward
play_circle_filled
Answer the Phone Call
Create an incoming call notification so the user can answer the phone.
arrow_forward
play_circle_filled
Accessorize
Animate an accessory, like headphones or phone cases, to express yourself.
arrow_forward
  • 1. Imagine a Conversation
  • 2. Start the Conversation
  • 3. Reply
  • 4. Complete the Story
  • 5. Add-Ons
  • 6. Reflection
  • 7. Wrap-up: Texting Story
  • 8. Wrap-up: Share Your Project
  • 9. Wrap-up: Show Your Project
arrow_backward Back Next arrow_forward
Transcript

In this add-on, you’ll create an incoming call notification so the user can answer the phone.

To start, draw a call notification sprite.

Click paint new sprite, then click “convert to vector” in the lower right corner of the paint editor.

Choose a color.

This example uses green.

Click the "rectangle" icon then the solid fill option, and make a rectangle that fits the horizontal length of the phone’s screen.

Drag the rectangle on the stage to where it will appear on the phone.

Add text using the “text” tool.

Change the text color.

Write text to notify the user of the call.

This example writes “Incoming call.

Click to answer.”

Great.

Next, program the notification to show and hide.

Click the scripts tab, select looks, and drag out “show” and “hide” blocks.

The sprite should hide at the start of the program, so add a “when flag clicked” block to the “hide” block.

Click the flag to test.

Great, the notification hides.

Phone calls can happen at any time and often interrupt text conversations.

Use a “wait” block to delay when the incoming call shows.

This example uses 6 seconds.

Then, show the notification by adding a “show” block.

Click the flag to test.

Great, it shows up, but it’s behind the conversation.

You’ll fix this later.

Hide the notification when it’s clicked.

Attach a “hide” block.

Click the sprite to test.

Great, it hides.

Next, make the notification glow.

Drag out a “repeat” block and a “change effect” block.

Change the dropdown to “brightness.”

Duplicate the loop, and make the value in the second “change effect” block negative.

Click to flag to make the notification show, then click the block stack to test.

Awesome.

To reset the brightness, click "clear graphic effects" in the blocks palette.

Tinker with the values until you find something you like.

This example uses 5 and -5.

To make the glowing effect last longer and look more realistic, place another repeat loop around the two loops.

Tinker with the value until the notification looks right to you.

This example uses 5 in the repeat loop.

Test this.

Oh Cool!

Once you have programmed the glowing effect, add this code to the “when flag clicked” block stack.

Click the flag to test.

Next, fix the bug that makes the sprite appear behind the conversation.

From looks, place a “go to front” block in the “repeat” loop you just added.

Click the flag to test.

Awesome!

Finally, make the sprite disappear if the user doesn’t answer the call.

Add a “hide” block under the “repeat” loop at the bottom of the code stack.

Test this.

Nice.

Now, it’s your turn.

Draw a notification sprite.

Program the sprite to appear using “when flag clicked” “show,” “hide,” and “wait“ blocks.

Make the notification glow using “repeat”, “wait,” and “change effect” blocks.

Finally, make the notification hide if a user does not click it.

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!