Play Sound and Fire Confetti blocks in AppMaster

In AppMaster, you can add interactive elements to web applications such as visual effects, sounds, and more. In this article, we will show you how to use both Fire Confetti and Play Sound blocks in conjunction with each other.

The example described in this article is very simple so that a reader of any level of knowledge of working with the AppMaster platform can understand the essence of using these blocks and adapt them for their application.

Let's say our web application needs to respond somehow to the user login event. Namely, confetti shoots on the screen with a successful login, and a certain melody is played. It looks like this in the picture below (since this is an animation, there is no way to integrate sound since this is animation, but you can test the result yourself):

First of all, let's take a closer look at the Play Sound and Fire Confetti business process blocks themselves.

1. Play Sound - a block of a business process that plays sound from a file at a given link.

URL (mp3) [string] - path to the file. It is good practice to specify the path to the file from the application's file storage, then the URL will look like /api/_file//download/, where ID is the file ID in the application backend.

2. Fire Confetti - a business process block that fires confetti for the current user.

• Preset [vmodel] - allows you to select the animation for shooting confetti

- Cannon

- Fireworks

- Realistic

- Snow

- School Pride

• Duration (ms) [integer] - animation duration in ms

• Position top (%) [integer] - deviation of the trigger point from the top of the screen

• Position left (%) [integer] - deviation of the trigger point from the left of the screen

• Particle count [integer] - number of confetti particles

• Angle [integer] - angle

• Colors [string array] - confetti particles colors

Let's move on to setting up the business process itself. In our example, confetti is fired after a successful user login. Thus, all necessary modifications will be made in the business process associated with the Login button.

It is necessary to find a moment in the business process that redirects the user to the next page upon successful login, namely the Navigate block. Our modification of the business process is as follows:

Fire Confetti block settings that is used here:

• Preset = Cannon;

• Duration (ms) = 1;

• Particle Count = 500;

• Angle = 30.

The input of the Play Sound block receives the path to the music file that was previously uploaded to the application server.

Thus, in this article we have described the possibilities of using Play Sound and Fire Confetti interactive blocks. After understanding how they work, you can use them yourself for more complex scenarios.