We use cookies to ensure that we give you the best experience on our website. If you continue to use this site we will assume that you are happy with it.

Request : Please help artist-non-coding users with loading logos…

Home Forums Bug Reports and Feature Requests Request : Please help artist-non-coding users with loading logos…

Viewing 15 posts - 1 through 15 (of 35 total)
  • Author
    Posts
  • #33367
    NaxosCGNaxosCG
    Customer

    Hello guys,

    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"

    #33388

    Hi,

    you might take a look at this tutorial: https://www.youtube.com/watch?v=aUOlSgaPoXg

    3D Verger, the CEO
    LinkedIn | FB | Twitter | VK | 新浪微博

    #33402
    NaxosCGNaxosCG
    Customer

    Hi,

    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.

    Best regards.

    "1+1=3... for large values of 1"

    #33436

    that’s an interesting idea. we need to discuss it with the team :)

    3D Verger, the CEO
    LinkedIn | FB | Twitter | VK | 新浪微博

    #33458
    Avatardoehlma
    Customer

    I would also appreciate if you and your team could intergate the concept idea from NaxosCG in Verge3D as puzzle function :bye:

    #33510
    NaxosCGNaxosCG
    Customer

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

    Best regards

    "1+1=3... for large values of 1"

    #33523
    NaxosCGNaxosCG
    Customer

    Hi,

    you might take a look at this tutorial: https://www.youtube.com/watch?v=aUOlSgaPoXg

    In the mid-time, if the tutorial’s author coud share the project from the video, it would help…

    "1+1=3... for large values of 1"

    #34015

    Hey NaxosCG,

    I just created a preloader using puzzles. This is the outcome:
    https://cdn.soft8soft.com/AROAJSY2GOEHMOFUVPIOE:c9c6080f41/applications/Homad_Simone/Homad_Simone.html

    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.

    Attachments:
    You must be logged in to view attached files.
    #34081
    NaxosCGNaxosCG
    Customer

    Hey NaxosCG,

    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 ?

    Best regards.

    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"

    #34092

    Hey NaxosCG,

    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”.

    Tadaaahhhh!

    I attach a screenshot of the puzzle editor.

    Attachments:
    You must be logged in to view attached files.
    #34103
    NaxosCGNaxosCG
    Customer

    Hey NaxosCG,

    …/…
    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 :
    https://ezgif.com/apng-maker

    Attachments:
    You must be logged in to view attached files.

    "1+1=3... for large values of 1"

    #34143

    Hey NaxosCG,

    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!

    Attachments:
    You must be logged in to view attached files.
    #34148
    NaxosCGNaxosCG
    Customer

    Hey NaxosCG,

    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…

    Best regards.

    "1+1=3... for large values of 1"

    #34240

    Hey NaxosCG,

    I’ve searched for it. It seems that you need javascript knowledge to achieve this.

    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.

    #34241
    NaxosCGNaxosCG
    Customer

    Hey NaxosCG,

    I’ve searched for it. It seems that you need javascript knowledge to achieve this.

    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"

Viewing 15 posts - 1 through 15 (of 35 total)
  • You must be logged in to reply to this topic.