[KLWP] [TUTORIAL] Create a Material animated Floating Action Button

Search This thread

frankmonza

Senior Member
Sep 23, 2014
391
371
This is the first of a set of basic animation tutorials for KLWP. If you do not know what KLWP is main thread is available here.

Final result (full video tutorial at the end, final result KLWP file attached)
DiscreteRequiredEquine.gif


Step 1: create the FAB button that will trigger the animation
  • Start from an empty preset
  • Create a global that will be used to trigger the animations (Globals -> Add -> Type Switch), this global will be used to control animations around
  • Add the Image for the FAB, change its name to better see it in the list
  • Load an Image that you like, here i am using a generic "plus" button
  • Set single Touch action to "Global Switch" and pick the global we just defined ("FAB"), so when touching this image that global will be toggled on/off
  • Go to animations and add a new one, select "ReachOn -> Global Switch" so it will be triggered by the global switch, set speed to 5 to make it faster (5 is 50ms), set type to Rotate and amount to "63" so it will not rotate completely and stop a bit earlier looking like an "X" instead of a "+" (you can test the animation pressing the "play" button on top)
  • To make it a bit fancier add another animation triggered by the same global, set speed to 5 as above and select "Color Filter Out", this will desaturate the image on click, making it black and white when opened
  • Your button is done! Save, go back to screen and see it in action. Cool eh?

Step 2: create app button
  • Add another Image object, change its name to "Facebook" or whatever you want
  • Add a Switch animation of type Scroll so the Image will move when switch triggers, set speed at 5 as above, and play with "speed" and the "play" button on top right until you reach the desired result, set also the "angle" param if you want to change scroll direction and mode to "overshoot" if you want to bounce when opening
  • Add another Switch animation of type "Fade In" so the item will fade in when switch changes (and while fades), the item will disappear because its initial state will be invisible, if you click the play button you will see it become visible
  • Go back to the root and check with the global switch (changing it) if the animation is ok, if its ok change the position of the Facebook button and place it on top of the list so it will go below the FAB (so it will look like it appears from the back)
  • Done! Save and test it on screen

Step 3: create additional buttons
  • Copy the facebook button using copy / paste
  • Change the name and the image (in this case we use Youtube)
  • Go to animations and change the scroll "speed" parameter to make it go farther, test it with play (you will just see an empty red rect because the item is transparent but it will be enough to tune speed
  • Save, done!

Video
https://www.youtube.com/watch?v=-UA1kIZcCp4
 

Attachments

  • Fab.klwp.zip
    16.5 KB · Views: 5,166
Last edited:

mimidudu

Senior Member
Jun 4, 2010
132
19
Rio de Janeiro
Like changing wallpaper when swiping or something different?

Hi frankmonza,

How to make a horizontal menu to switch the color of the letters, when we move the screen?

Sample Menu:

Files Home Weather - white letters

Screen 1: Home data
Screen 2: Weather data
Screen 3: Calendar events

When the corresponding screen is showed in menu the word corresponding is yellow, the other two whites.
Thanks in advance for your help.
Untitled-1.jpg
 

frankmonza

Senior Member
Sep 23, 2014
391
371
Hi frankmonza,
How to make a horizontal menu to switch the color of the letters, when we move the screen?

Hi!! And thanks for the details! So, first of all you can find this implemented already in some template on the store like "Matdd for Kustom" from Jeppe.

In general the idea is the following to create the text item (and i will try to create a tutorial on this):
  • You create a Text object, position it, set font and so on, and set text to one of the menu items
  • Go to animations and set animation to "fade out"
  • Copy the text module you created, set color to yellow or what you prefer (the selected color)
  • Go to animations and replace "fade out" with "fade in"
  • Done, at this point your text will be white in all the screens and fade to yellow in the center one

Then, in order to create the ones in screen 1/3 do this:
  • Copy the 2 modules you created above
  • Change text and position them to the left or right (depending on where it should be)
  • Go to the animation tab and change the "center" option from "center screen" to "first screen" or "last screen" depending on the item
  • Done, these items will get selected in their screen

Finally to create the bar below that moves:
  • Create a rect, yellow, thin, below the center
  • Go to animation and set animation to "scroll"
  • Tune "speed" in order to be at the right distance in screen 1 / 3 (scroll in the editor then change speed to match position)

Finally, to make this more portable i would suggest doing this with 6 globals, 1 for background color, 1 for selected color, 1 for text color not selected and 3 for the text in the menu entries, in this way you can then just copy these items from one setup to another and just change the globals.

Hope it helps and i will try to make a video / proper tutorial soon.
 
  • Like
Reactions: PDo27789

chaseghuggins

Member
Mar 22, 2016
17
9
Hi!! And thanks for the details! So, first of all you can find this implemented already in some template on the store like "Matdd for Kustom" from Jeppe.

In general the idea is the following to create the text item (and i will try to create a tutorial on this):
  • You create a Text object, position it, set font and so on, and set text to one of the menu items
  • Go to animations and set animation to "fade out"
  • Copy the text module you created, set color to yellow or what you prefer (the selected color)
  • Go to animations and replace "fade out" with "fade in"
  • Done, at this point your text will be white in all the screens and fade to yellow in the center one

Then, in order to create the ones in screen 1/3 do this:
  • Copy the 2 modules you created above
  • Change text and position them to the left or right (depending on where it should be)
  • Go to the animation tab and change the "center" option from "center screen" to "first screen" or "last screen" depending on the item
  • Done, these items will get selected in their screen

Finally to create the bar below that moves:
  • Create a rect, yellow, thin, below the center
  • Go to animation and set animation to "scroll"
  • Tune "speed" in order to be at the right distance in screen 1 / 3 (scroll in the editor then change speed to match position)

Finally, to make this more portable i would suggest doing this with 6 globals, 1 for background color, 1 for selected color, 1 for text color not selected and 3 for the text in the menu entries, in this way you can then just copy these items from one setup to another and just change the globals.

Hope it helps and i will try to make a video / proper tutorial soon.

This could be a separate tutorial in itself. :good:
 
  • Like
Reactions: vickysoni

Top Liked Posts

  • There are no posts matching your filters.
  • 22
    This is the first of a set of basic animation tutorials for KLWP. If you do not know what KLWP is main thread is available here.

    Final result (full video tutorial at the end, final result KLWP file attached)
    DiscreteRequiredEquine.gif


    Step 1: create the FAB button that will trigger the animation
    • Start from an empty preset
    • Create a global that will be used to trigger the animations (Globals -> Add -> Type Switch), this global will be used to control animations around
    • Add the Image for the FAB, change its name to better see it in the list
    • Load an Image that you like, here i am using a generic "plus" button
    • Set single Touch action to "Global Switch" and pick the global we just defined ("FAB"), so when touching this image that global will be toggled on/off
    • Go to animations and add a new one, select "ReachOn -> Global Switch" so it will be triggered by the global switch, set speed to 5 to make it faster (5 is 50ms), set type to Rotate and amount to "63" so it will not rotate completely and stop a bit earlier looking like an "X" instead of a "+" (you can test the animation pressing the "play" button on top)
    • To make it a bit fancier add another animation triggered by the same global, set speed to 5 as above and select "Color Filter Out", this will desaturate the image on click, making it black and white when opened
    • Your button is done! Save, go back to screen and see it in action. Cool eh?

    Step 2: create app button
    • Add another Image object, change its name to "Facebook" or whatever you want
    • Add a Switch animation of type Scroll so the Image will move when switch triggers, set speed at 5 as above, and play with "speed" and the "play" button on top right until you reach the desired result, set also the "angle" param if you want to change scroll direction and mode to "overshoot" if you want to bounce when opening
    • Add another Switch animation of type "Fade In" so the item will fade in when switch changes (and while fades), the item will disappear because its initial state will be invisible, if you click the play button you will see it become visible
    • Go back to the root and check with the global switch (changing it) if the animation is ok, if its ok change the position of the Facebook button and place it on top of the list so it will go below the FAB (so it will look like it appears from the back)
    • Done! Save and test it on screen

    Step 3: create additional buttons
    • Copy the facebook button using copy / paste
    • Change the name and the image (in this case we use Youtube)
    • Go to animations and change the scroll "speed" parameter to make it go farther, test it with play (you will just see an empty red rect because the item is transparent but it will be enough to tune speed
    • Save, done!

    Video
    https://www.youtube.com/watch?v=-UA1kIZcCp4
    1
    Nice job Frank. As always.

    Sent from my OnePlus One using Tapatalk Pro
    1
    Awesome thanks Frank!
    1
    Hi frankmonza,
    How to make a horizontal menu to switch the color of the letters, when we move the screen?

    Hi!! And thanks for the details! So, first of all you can find this implemented already in some template on the store like "Matdd for Kustom" from Jeppe.

    In general the idea is the following to create the text item (and i will try to create a tutorial on this):
    • You create a Text object, position it, set font and so on, and set text to one of the menu items
    • Go to animations and set animation to "fade out"
    • Copy the text module you created, set color to yellow or what you prefer (the selected color)
    • Go to animations and replace "fade out" with "fade in"
    • Done, at this point your text will be white in all the screens and fade to yellow in the center one

    Then, in order to create the ones in screen 1/3 do this:
    • Copy the 2 modules you created above
    • Change text and position them to the left or right (depending on where it should be)
    • Go to the animation tab and change the "center" option from "center screen" to "first screen" or "last screen" depending on the item
    • Done, these items will get selected in their screen

    Finally to create the bar below that moves:
    • Create a rect, yellow, thin, below the center
    • Go to animation and set animation to "scroll"
    • Tune "speed" in order to be at the right distance in screen 1 / 3 (scroll in the editor then change speed to match position)

    Finally, to make this more portable i would suggest doing this with 6 globals, 1 for background color, 1 for selected color, 1 for text color not selected and 3 for the text in the menu entries, in this way you can then just copy these items from one setup to another and just change the globals.

    Hope it helps and i will try to make a video / proper tutorial soon.
    1
    Hi!! And thanks for the details! So, first of all you can find this implemented already in some template on the store like "Matdd for Kustom" from Jeppe.

    In general the idea is the following to create the text item (and i will try to create a tutorial on this):
    • You create a Text object, position it, set font and so on, and set text to one of the menu items
    • Go to animations and set animation to "fade out"
    • Copy the text module you created, set color to yellow or what you prefer (the selected color)
    • Go to animations and replace "fade out" with "fade in"
    • Done, at this point your text will be white in all the screens and fade to yellow in the center one

    Then, in order to create the ones in screen 1/3 do this:
    • Copy the 2 modules you created above
    • Change text and position them to the left or right (depending on where it should be)
    • Go to the animation tab and change the "center" option from "center screen" to "first screen" or "last screen" depending on the item
    • Done, these items will get selected in their screen

    Finally to create the bar below that moves:
    • Create a rect, yellow, thin, below the center
    • Go to animation and set animation to "scroll"
    • Tune "speed" in order to be at the right distance in screen 1 / 3 (scroll in the editor then change speed to match position)

    Finally, to make this more portable i would suggest doing this with 6 globals, 1 for background color, 1 for selected color, 1 for text color not selected and 3 for the text in the menu entries, in this way you can then just copy these items from one setup to another and just change the globals.

    Hope it helps and i will try to make a video / proper tutorial soon.

    This could be a separate tutorial in itself. :good: