Rounded text box

Special forum to share and discuss skins for Pano2VR and Object2VR
Post Reply
wigi
Posts: 69
Joined: Fri Dec 04, 2009 11:21 am
Location: Poland
Contact:

Can I change the background text box on the corners rounded (as for the rectangle)?

Regards
Witold
Sebastian
Posts: 209
Joined: Sun Jul 13, 2008 9:08 am
Contact:

Hi there Witold :)

I don't believe you can.
What you could do tho, is to turn the background and outline OFF, then draw your own preferred shape in Photoshop or Illustrator, import as GIF or PNG into the Skin Editor, then place it below the text field.
Of course, the downside is that if you have multiple and dynamic text fields, you won't be able to auto scale it. If that's the case, then perhaps drawing one larger, which would accommodated all the different text lengths, and place the text field in the middle, setting the Align to Center and Auto-size ON. This at least will assure you that the text is always centered, tho it might look odd if one text field says "Hello" on a larger background, while the second one say "You are now in the living room area", fitting the background perfectly :) But that's the easy way around it.


pozdrowienia
Sebastian
wigi
Posts: 69
Joined: Fri Dec 04, 2009 11:21 am
Location: Poland
Contact:

Thanks Sebastian, but these are only inconvenient half measures.
It is unfortunate that at present this is impossible. It would be very useful and attractive.
Maybe Thomas could introduce this functionality in the next Pano2VR version?

Pozdrawiam serdecznie :)
Witold
Sebastian
Posts: 209
Joined: Sun Jul 13, 2008 9:08 am
Contact:

You are absolutely right, these are half measures.

The feature availability will strictly depend of Adobe Flash & Above Flash Player capabilities.
Panor2VR is all pure Flash action script. Because doing panoramas in Flash require fair amount of skills, the program pretty much automate this process, through custom made user interface. Once you done, it compiles all your inputs and generate perfectly legit SWF file format. But all its features can't go beyond Flash Player capabilities, and for now, Flash itself, doesn't offer round corners for dynamic text field background.
The are two ways of doing it in Flash. One is by making 3 movie clips:
Image
Left side (mc1), middle (mc2) and right side corners (mc3).
Resize the textfield based on the amount of dynamic text, check its width and scale the movie clip mc2 accordingly, then attach the round corners to its sides. If you were to scale one large movie clip with round corners, the corners would become too round or smoothed out, if the text was really long, so in order to maintain it and prevent from scaling, you will need 3 clips. Which is fairly easy, but if you were to do it through user interface in Pano2VR, there will be quite many factors to consider. A bit troublesome.

Second way would be drawing via action script using the (*)drawing API, which too would be a bit of a hassle and lots of user inputs to consider. Drawing API needs quite many parameters, from radius, x/y positions, lineStyle, angles, etc... A bit of work to achieve something what would seem so simple. Hence, till now I will still go with the 3 movie clip methods and recycle them across my application
by duplicating them and scaling one clip based on the amount of text.

I'm sure you can place a "feature request", but we will be using half measures to achieve that result as long as Flash doesn't actually offer such feature. You could also place a request with Adobe itself, then for Thomas, it will be barely a matter of including additional text field class into the user interface. http://www.adobe.com/go/wish

Serdeczne pozdrowienia z Kuala Lumpur
(best regards from KL)
Seba

(*)The drawing API is the name for the functionality built into ActionScript that allows you to create vector graphics—lines, curves, shapes, fills, and gradients—and display them on the screen using ActionScript.
smooth
Posts: 1493
Joined: Sat Sep 09, 2006 7:30 pm

Why wouldn't you just make a rectangle with rounded corners and place a text box as a child on top of it within the size parameters?
Same colour background or set the alpha.

Maybe I'm missing something here?

Regards, Smooth 8)
Image
Sebastian
Posts: 209
Joined: Sun Jul 13, 2008 9:08 am
Contact:

Hi there Smooth

If you use multiple hot spots, each with different text length, it won't look neat.
Imagine one hot spot says "enter here", another one "my grandma's fresh baked cookies". To accommodate the longest text, you will need to make large box with round corners, which will look funny if your text is very short. If you were to scale it accordingly, it will distort the rectangular shape and the round corners. And if you were to create multiple images for each hot spot, that's sort of "brute force" way and it will only balloon up the skin file size. We were talking about dynamic or automatic way to do it, so when you enter text, the box serve it as it should.

Do you know what we mean?
smooth
Posts: 1493
Joined: Sat Sep 09, 2006 7:30 pm

Hi Sebastian,

Yeah, OK I understand.

It is a feature that would be nice. But certainly a result can be had with a little effort.

Personally I would make a graphic for each. The result will always be superior.

Regards, Smooth 8)
Image
wigi
Posts: 69
Joined: Fri Dec 04, 2009 11:21 am
Location: Poland
Contact:

Hello.
Sebastian thank you for the explanation and suggestions.

Regards
Witold
User avatar
Hopki
Gnome
Posts: 13088
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK
Contact:

Hi
I am with Smooth on this and Sebastian on this, nothing like being on the fence :D
If you use a text box and rectangle you can resize it in the skin editor without having to make different images/elements.

Make sure you have your Change Stage Quality un ticked in the Visuals tab (V3) so they do not wobble about as you move the panorama.

So text box 100 x 18 with no border or bg.
Rectangle 100 x 18, radius 10, make the text box the child rectangle.
Now just set the rectangle and text box to the same size.
This also works if you use element scale.
OK, you will not be able to use the auto function to automatically resize, but still quicker then playing around with lots of different elements.

However you could use a set element scale X/Y as you enter a hotspot or whatever to change the X axis, width for each element you hover over.
Just some thoughts on it. :)

Regards
Hopki
Garden Gnome Support
If you send an e-mail to support please send a link to the forum post for reference.
support@ggnome.com
https://ggnome.com/wiki/documentation/
Sebastian
Posts: 209
Joined: Sun Jul 13, 2008 9:08 am
Contact:

Hi there Hopki

I tried that while ago but it doesn't work well. You can't use the border because it scale along with the shape, and it's quite visible if it shape get larger. Even with width set to 1. Also, the round corners radius changes, and it's very visible if you change the height or width. Just double size the width, and it will become almost like a bullet shape. It doesn't maintain its look unless the scale is very minor or radius is very small. The moment you change it to accommodate few lines of text, you can see the difference. Best would be to work with solid rectangle, no problem there, but the round corners, mess it up. Also, the round corners become quite messed up with any lager value. The Anti Aliasing is very visible and you can see where exactly the corners start and end on each side of the shape.

I totally don't mind that tho. It's hard to incorporate all the different features to accommodate everyone. And with the support of Flash, I do most of my elements using SWF where I can have content
driven by XML and control from outside of the panorama without editing and republishing it all the time. So I'm pretty happy with what it does right now :)

By the way, meant to ask while ago, what does HOPKI stands for ?

regards
Sebastian
User avatar
Hopki
Gnome
Posts: 13088
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK
Contact:

Hi Sebastion
Yes quite right, if you go to mad with it, the scale distorts the rectangle badly.
However you can use still use the rectangle tool, just make a few different sizes with a text box set to Auto.

As you use a set text action to write the text, see which box fits best, then call that one to show with the text box.
Use Regular Expressions to hide all.

So you will need four actions to call and hide the text box.

Mouse Enter > Show Element > Target: rectangle 1,2,3,4 or5
Mouse Leave > Hide Element > Target: #rectangle .*
Mouse Enter > Set Text > Text: Required Text > Target: %text
Mouse Leave > Set Text > Text: > Target: &text


I have five rectangles all set to not visible, when you mouse enter it will call a Show Element, whichever of the rectangles is required.
The Mouse Leave uses a Regular Expression, wild card to hide all rectangles.
I have two text boxes, one used as a drop shadow, so to write to both I am using the % before the ID, text, which is the ID of both text boxes.

This means although you still need a text box for each size text, as it is made in the skin editor the files size is kept to a minimum.
If you need a new size, its very easy to create with the rectangle tool.
I use the calculation of 18px per line of text, so two lines will mean a rectangle 36px high.

To finish, all the rectangles and text boxes are places in a container, so one element package that then can be used as a tool tip or what ever.
I have used scale 1.2/1,2 to make the text a little bigger.
Attachments
park_out.swf
Test Text Boxes
(906.39 KiB) Downloaded 7420 times
Garden Gnome Support
If you send an e-mail to support please send a link to the forum post for reference.
support@ggnome.com
https://ggnome.com/wiki/documentation/
Sebastian
Posts: 209
Joined: Sun Jul 13, 2008 9:08 am
Contact:

Thank you very much for the elaborate explanation Hopki :)
Appreciate you take the time to do it.

best regards
Sebastian
Post Reply