Skin buttons in html5

[SSarunas]

Hello. I have created buttons by Adobe Flash, but when I import .swf files to the skin, buttons work only in flash version, in html5 I can't see it. What solutions do I have? I can convert flash type buttons on Adobe flash to html5, but don't know how to import it to the skin. Thank you, for your help.

[Hopki]

Hi,
When building a skin you can use the following file types in the skin, note some work and some get converted.
HTML5 Output:
SVG, Animated SVG, PNG, JPG, GIF. You need to use an external loader to display an Animated GIF.

Flash Output:
SWF, Animated SWF, SVG (SVG gets converted to PNG in output), PNG, GIF, JPG
Regards,
Hopki

[SSarunas]

Is it possible to make entire SVG file? Because clickable button contains 3 svg files and some javascript files.

[Hopki]

Hi,

Is it possible to make entire SVG file? Because clickable button contains 3 svg files and some javascript files.

Im not sure I understand.
A clickable can be, one, two or three images depending what you want the customer to see.
A good combination is normal and mouse over states.
If you want to go that extra mile add a selected state. Note a selected state is only shown when the mouse button is down. once released the mouse over image shows. The skin is a JS file, is this what you are referring two?
Regards,
Hopki

[SSarunas]

I mean, is it possible to make interactive clickable buttont in one svg file? My point is to make buttons with interactivity. I can make it easily on flash with swf files, but can't make it on html5. Let say in skin editor I press on button, choose my images and I have clickable button, simple, but I loose my all interactivity, I need some effects.

[SSarunas]

If it`s hard to understand, I need the same, just in html5: http://virtualistudija.lt/test-2/
Any help?

[360Texas]

ONE .svg object to do 3 tasks.

Make 3 duplicate .svgs.
1 normal image,
2 mouse over make blue and
3 mouse make red .svg action for Mouse click

In the HTML5 | SKIN stack all 3 images
1 normal is static - normal .svg image
2 mouse over - change to Blue .svg image
3 on click - change to RED .svg imag action 'go to next panorama' target _Self

But all three 1,2,3 states can not be 1 function. Each are separate ACTION state BUT collectively act as 1 function are 3 states normal, mouse over and ON click as 1 group element

Your suggestion for Flash would create 1 .swf to perform all 3 functions.

Can also create with On Mouse enter, On Mouse click and On mouse leave action set.

[Hopki]

Hi Guys,
Think of the SVG or button element as the button in the skin.
The actions from these elements is what the software will use.

The images you select are just the images for the button, so button face so to speak.
The button allows you to select up to three images, one for each state to give visual feedback to the user.

If you have an image that animates then this can also be used be used, the mouse click action will still be the actions in the button element.
If you do not want to make animated SVG's and you want to fade between one graphic to another you can stack separate images, then using alpha fade between one image to another.
Regards,
Hopki

[MGreen]

Hi - I've pasted an animated svg into a skin (like I have done before for any svg graphic element) - but when run - the animation feature doesn't occur ... can someone please tell me the dumb thing I've missed configuring ? Thanks

[Hopki]

Hi,
If you drag the SVG in your browser does it animate?
Please try the attached SVG, does it work in your project?
Regards,
Hopki

[MGreen]

Hi Hopki - no I was not getting animation with previously tried svg and I'm not getting animation with white_red.svg ??? Here were the previously tried animated svgs - thanks for checking on this - Matt

[Hopki]

Hi MGreen,
Your SVG's works for me!
What computer do you have, whats the specification and graphics, OS, Browser etc.
Do you see the problem locally or uploaded to a server.
Regards,
Hopki

[MGreen]

Hi - arhah - the aniSVG's work when externally published but didn't work on localhost preview - opened on Win10-MSEdge-i7-16GB-Toshiba -

I hadn't externally published before because I wasn't seeing working results via localhost - ok - they're working...thanks for checking

[SSarunas]

Hi Guys,
Think of the SVG or button element as the button in the skin.
The actions from these elements is what the software will use.

The images you select are just the images for the button, so button face so to speak.
The button allows you to select up to three images, one for each state to give visual feedback to the user.

If you have an image that animates then this can also be used be used, the mouse click action will still be the actions in the button element.
If you do not want to make animated SVG's and you want to fade between one graphic to another you can stack separate images, then using alpha fade between one image to another.
Regards,
Hopki

I want to make animated SVG, but how to include 3 images inside one SVG file?

[SSarunas]

Hi Guys,
Think of the SVG or button element as the button in the skin.
The actions from these elements is what the software will use.

The images you select are just the images for the button, so button face so to speak.
The button allows you to select up to three images, one for each state to give visual feedback to the user.

If you have an image that animates then this can also be used be used, the mouse click action will still be the actions in the button element.
If you do not want to make animated SVG's and you want to fade between one graphic to another you can stack separate images, then using alpha fade between one image to another.
Regards,
Hopki

I want to make animated SVG, but how to include 3 images inside one SVG file?

Any help?