Today we will create a YouTube notification bar. You've probably seen it hundreds of times while watching your favorite YouTube channels. The idea behind this notification bar is quite simple. It should remind users to click the subscribe and bell buttons. Technically, it consists of a few sprites and very simple animations.
Excited? Let's get to Scratch!
Our first sprite must consist of the YouTube logo, a subscribe icon and a bell, and our Franky mouse (without eyes and mouth, because we will animate them in separate sprites). We need to have 3 costumes, each of them will represent a different state of our animation:
- all buttons disabled
- subscribe button enabled
- subscribe and bell buttons enabled
We need to prepare elements for animation in separate sprites. For now, we need to create eyes, a mouth (with the default state, mouth open and smiling) and a cursor.
Now it's time for the code blocks. Let's add some code blocks for the first notification sprite. When launching the application, we want to set the first costume (with all buttons disabled) and move it to the back layer so that other sprites are not hidden behind it. We need to add two broadcast events: subscribe-clicked and bell-clicked. Depending on the event, we want to change the notification bar costumes.
In the eye sprite, our goal is to move Franky's eyes depending on events. We used a glide block to simulate the sprite's movement.
The mouth sprite code is very similar to the eye code. The only difference is that now we don't use any glide code blocks. We only expect costume changes depending on the events.
Our last sprite is a bit different than others as it is the source of broadcast events. We need to simulate that cursor moves to subsequent buttons. First we go to the subscribe button and trigger subscribe-clicked event. After 0.5s wait, we go to the bell icon and trigger bell-clicked event.
Comments
Post a Comment