2020-09-25 at 1:39 pm #33367
After Billards tables (https://configurateur.billard-toulet.com/ : choose 3 last ones WhiteLight, Iron & Caralight), and mini-soccer table (not yet online, but seable at https://cdn.soft8soft.com/AROAJSY2GOEHMOFUVPIOE:4f921f28ff/applications/stella-home/stella-home-responsive.html ), i’m getting more and more asked for Verge3D content for my customers…
They quite always ask for loading logo change, and i’ve tried… i promise i’ve tried hard to have a nice loading picture progression bar (for ex one black&white becoming coloured logo picture…). But i can’t really succeed doing this.
And most of my clients have their website managed by other company…
So i’d love to have a nice puzzle function that would ask for 2 pictures and would progressivelly replace one by the other using percentage.
If we feed with png rgba, it could be transparent / semi-transparent / masked over a background.
If we feed animated pngs or gifs, this could even be animated logos that are filling-up with %.
I’m sure it is not so hard to code for you guys, and it would be sooooo usefull for artists guys.
Please ! please ! please !
"1+1=3... for large values of 1"2020-09-26 at 4:51 am #33388Yuri KovelenovStaff2020-09-26 at 9:35 am #33402
you might take a look at this tutorial: https://www.youtube.com/watch?v=aUOlSgaPoXg
Hello Yuri, i know this one, but :
– not a code guy so i have issues to do this;
– i’m not the web dev guy for my clients, and so i don’t have access to the web pages code…
That is why i’d love an internal puzzle object that would help me (and other artists i guess) to do so, but very user-friendly, just adding 2 pictures and let the application doing this nice fill-up effect.
"1+1=3... for large values of 1"2020-09-27 at 9:09 am #33436Yuri KovelenovStaff2020-09-27 at 5:09 pm #33458doehlmaCustomer
I would also appreciate if you and your team could intergate the concept idea from NaxosCG in Verge3D as puzzle function2020-09-28 at 3:46 pm #33510
that’s an interesting idea. we need to discuss it with the team
I’m quite sure that you clever dev guys could create this EZ puzzle for us.
Also, i thought about another case where “inside-Verge3D app” loading could help : when we don’t want the end client to change the loading logo : for ex. if i want to have my own logo for loading for advertising, and if the client want his own loading logo, he will have to pay the option
"1+1=3... for large values of 1"2020-09-29 at 8:01 am #335232020-10-09 at 12:15 pm #34015
I just created a preloader using puzzles. This is the outcome:
Here is how I created it:
Step 1 – Create white canvas
In the “init” puzzles tab, you create an HTML div (I called it preloader_div) that captures the whole page. That’s why the width and height are set to 100%. Also set the position to static and the background color to #ffffff. That’s white. Last, set display to flex. This will help us in the next step.
Step 2 – Create logo position
Add another HTML div inside the previous div. I call it logo_position. Set width and height to the exact pixels of the logo. Position to static and margin to auto. This helps us to set the logo in the center of the canvas (it’s only used when the parent div display is set to flex).
Step 3 – Create tranparent logo
Step 3a (outside puzzles)- We are not going to use the logo itself, but an inverted cut-out of the logo. Using photoshop, I created a solid white layer with the logo cut-out of it. Under this layer, I put a solid black layer with 20% fill. Save it as a png file. I call it company_logo_transparent.png.
Step3b – Create another div, I call it logo_transparent inside the logo_position div. Set the same width and height, using background image the company_logo_transparent.png. Set z-index to 3.
Step 4 – Create progress bar
Create a div inside logo_position, I call it progress_bar. Set position to relative, width to 0%, height to 100%, background colour to #000000 (this is black) and z-index to 2. This means that this div is located behind the previous one. We are going to reveal it in the next step.
Step 5 – Add the logic behind the preloader
In this step we are going to animate the progress bar from 0% to 100% using the percentage of the preloader. Add a setup preloader puzzle. On “on progress do”, add a puzzle “set style” to the logo_progress_bar div. Create a text list with percentage on top and a text using “%” as input. This tells the software to get the percentage of the preloader and set it as width output in the progress bar.
Step 6 – Hide the preloader
Last but not least, on “on finish do”, add a “set style” puzzle to the initial white canvas, called preloader_div, and set display to “none”.
I hope this helps. I attach a screenshot of the puzzles and a screenshot of the logo creation.
Please let me know if you manage to do this.2020-10-12 at 2:48 pm #34081
I just created a preloader using puzzles.
Please let me know if you manage to do this.
Many thanks, i could do this, a lot better for me than with “real” html management.
Please see : https://cdn.soft8soft.com/AROAJSY2GOEHMOFUVPIOE:4f921f28ff/applications/MyPreload/MyPreload.html
Now, instead of a simple color for fill-in the transparents parts, is there anyway to have a picture releaving ? so i could have 2 pictures, for ex. one in black & white to be % filled by the colored one ?
PS : even if it is good to use when you don’t want to go to html part, i still think that a simplifyed puzzle with 2 inputs (picture or color) and maybe 2-3 options like (leftToRight, bottomToTop, radial…) would be very appreciated from us. Plus if the picture is an animated gif, imagine the possibilities…
"1+1=3... for large values of 1"2020-10-13 at 8:58 am #34092
I’m glad you made it!
Now, if you want a fade-in effect, you can use this technique. I created a blue to black fade in effect.
Step 1 – Create two logos
Inside the logo_position div, you add two HTML img elements (not divs!). The top one is the one you will see when the preloader will be at 100%. The second one is the first image you see.
You set the source of the images using “set attr”. Be careful! You will write just the title of the image (in my case homad_logo.png), it’s not the same as a div background image (url(./homad_logo.png).
Set the z-indexes as before.
Set the opacity of the first one at 0%, using “ste style” puzzle.
Step 2 – Animate the preloader
In the “setup preloader” puzzle, inside “on progress do”, you simply change the style to “opacity”.
I attach a screenshot of the puzzle editor.2020-10-13 at 12:39 pm #34103
Now, if you want a fade-in effect
Again, 1000 thanks for this one !
I could use this fade-in for some projects…
In fact my asking was about “fill-in”, like this animated gif (see attached please).
Two differents things here :
– not doable with height% as it is more a masking effect not a scaling one;
– from bottom to top : also hard for me to do with your first explanation (i could easilly do from top to bottom, swapping width and height).
After that, using the great animated-png free online maker, this will let us do some very nice loaders :
"1+1=3... for large values of 1"2020-10-14 at 9:41 am #34143
You can create a left-to-right fill in using this simple method. In my example, I created a purple to green fill-in preloader.
Step 1 – Starting image
In the logo_position div, set style with a background image that you want.
Step 2 – Second image
Add a div inside logo_position with a background image of the second image. Set height with the same value as logo_position and width to 0px.
Step 3 – Add logic
On “setup preloader” puzzle, on “on progress do”, add a “set style” puzzle. We want to translate the “percentage” to the actual width pixels of the logo. So, we first create a “create text with” puzzle, which includes:
a) on the first slot, put a “number” puzzle (the third option) and multiply the percentage with the width pixels divided by 100. In my example, the width of the logo is 469px. So I put 4.69 in the number slot.
b) on the second slot, use “px” (not “%” as in the previous preloaders)
You are ready to go!2020-10-14 at 10:48 am #34148
You can create a left-to-right fill in using this simple method.
super clever method, and easy for artists to use…
Many many thanks !!
so now, dear Soft8soft coders, there is a new puzzle to create, in addition of the easy preloader one :
to be able to set the current frame of an animated gif / png to be percentage.
So we can really animate aniting for preloader…
"1+1=3... for large values of 1"2020-10-16 at 7:37 am #34240
Yes, a preloader puzzle with two inputs (before & after) and a method input for revealing the second image is super helpful! Plus the percentage of the gif.2020-10-16 at 8:01 am #34241
Yes, a preloader puzzle with two inputs (before & after) and a method input for revealing the second image is super helpful! Plus the percentage of the gif.
I see… Anyway, many thanks for the help !
@Verge3D dev team : A puzzle letting us put percentage to animated gif / png frame would let us create almost anything as a preloader… Please, please, please
"1+1=3... for large values of 1"
- You must be logged in to reply to this topic.