Grow with AppMaster Grow with AppMaster.
Become our partner arrow ico

Play Sound and Fire Confetti blocks in AppMaster

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):

Confetti visual effects no codeFirst 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/<ID>/download/, where ID is the file ID in the application backend.

no-code2. 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

Fire Confetti no-codeLet'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.

no-codeIt 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:

no-codeFire 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.

Related Posts

Top 6 eCommerce Website Builders for Online Stores in 2024
Top 6 eCommerce Website Builders for Online Stores in 2024
Discover the top 6 eCommerce website builders for online stores in 2024. Get insights into their features, benefits, and how to choose the right platform for your business.
Tackling Bounce Rates in 2024: The Email List Validation Solution
Tackling Bounce Rates in 2024: The Email List Validation Solution
Learn how to reduce bounce rates with email list validation in 2024. Get insights into techniques, tools, and impacts to improve your email marketing campaigns.
AppMaster's New Success Story: VeriMail
AppMaster's New Success Story: VeriMail
Discover how VeriMail launched its innovative email validation service using AppMaster's no-code platform. Learn about their rapid development.
GET STARTED FREE
Inspired to try this yourself?

The best way to understand the power of AppMaster is to see it for yourself. Make your own application in minutes with free subscription

Bring Your Ideas to Life