Understanding Positions

From FFC & FPP Wiki

Revision as of 19:20, 19 April 2011 by Idi-Admin (Talk | contribs)
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to: navigation, search

Understanding Positions in Flashificator and Flash Panorama Player

understanding positions 1.1

1 - Introduction to Hotspots - Spot and Box

The Hotspots plugin has five types of objects: global, pano, spot, box and external. These objects can load external images (jpg, png and gif). They can also load external Flash movies, external Flash applications and even streaming audio and video content. These objects allow for a high degree of customization as to how you present your panorama while offering to your website visitor ways to interact with that presentation. The two types that are used most frequently are the spot object and the box object. In Flashificator's Hotspots tab, these two types are quickly distinguished by their icons; a little dot or a little box, along the bottom of the display for each hotspot's named settings tab. Clicking on the icon will allow you to quickly change from one to the other.

The spot object is attached to your panorama at a single point known as an alignment point and will not distort while you turn your panorama for viewing. Alternatively, the spot object can be fixed to the window so that it's static and doesn't move at all while your panorama turns, making this type the hotspot of choice for navigational controls, border trimmings, thumbnails and other means afforded to your website visitor and their interaction.

The box object, with many of the same parameters as the spot object including the ability to be made static, also allows you to load external images and movies while it is attached to the warped surface of the panorama at a single point, but the box object can be distorted into the virtual 3D space (sphere, cylinder or any face of the cube). The external images can be rotated, scaled and otherwise transformed to make them appear to fit in the perspective of the scene of your revolving panorama. Additional parameters even allow for adjusting transparency (alpha), hue, tint, saturation, contrast, brightness, blur and sharpness.

Both objects allow various blending modes (like in Photoshop and GIMP) through many available parameter settings. And both objects allow for precise placement using two separate schemes.


ExampleHotspots

If you are interested in digging deeper into Hotspots history, in 2006, Denis V. Chumakov put together a tutorial, gives further examples here and appears to be the first emergence of this invention.

x:y

2 - Understanding X and Y - static hotspots

Before we can talk about where a stationary or static hotspot will be placed, we need to understand some terms for that discussion. Coordinate pairs are used to express locations. A single pair of coordinates define a single location. In the context of 2D computer graphics, we are dealing with only the x axis and the y axis. (Note; bit depth should not be confused with z axis when dealing with 3D space - see discussion below).

The illustration above shows how these coordinates are measured and the convention as to how they are expressed, noting that the subscript x and y have been added for clarity and aren't normally written. In other instances, the x and y can be separated by a comma instead of a colon. Units are in pixels.

These measurements only relate to static hotspots.


pan-tilt

3 - Understanding Pan and Tilt - hotspots on a surface

In the context of Flashificator (FFC) and Flash Panorama Player (FPP), 3D space is also defined by coordinate pairs, only in this instance, we're measuring angles.

The illustration above shows that we are dealing in 3D space with our spherical images and their projection onto the faces of a cube. It also shows how these coordinates are measured and the convention as to how they are expressed.

Pan values are angular measurements along the horizontal plane with zero fixed at the center of the front cube face and the vertex of the angle fixed at the center of the panorama. Values are positive to the right and negative to the left; both to the center of the back cube face.

Tilt values are angular measurements along the vertical plane with zero fixed at any point along the equator and the vertex of the angle fixed at the center of the panorama. Values are positive toward zenith and negative toward nadir.

Units are in degrees and decimal degrees (ddd.ddd).

Pan and tilt values are used regardless of the 3D surface being targeted; e.g., sphere, cylinder or cube face.


align - salign

4 - Understanding Zero

Without knowing where zero is - for any measurement - such quantities have little meaning. If we're going to be measuring the positions of things, we need to understand from where to start our measurement:

  • Where is the origin; 0:0 ? (static parameter)
  • Where exactly on the hotspot does zero relate?

The above illustration shows two grids - both represent nine possible locations on the hotspot and panorama window. Their style; one with dots, the other with squares really makes no difference. What does make a difference, and significantly, is whether their use is in regard to the align parameter or the salign parameter. Both parameters use disparate numeric values when defining the relative position; one for the hotspot, the other the panorama window.

For example, both schemes define the center as Center, Middle (CM). Likewise, they'd both define the lower left corner as Left, Bottom (LB), but the numeric value for each would be -0.5:-0.5 (align) and 0:0 (salign) in the first case and in the second instance, would be 0:-1 (align) and -0.5:0.5 (salign).

The align x and y parameters relate to the hotspot. They define the alignment point on the hotspot; for example, the center of the hot spot (-0.5:-0.5)

The slaign x and y parameters relate to the panorama window and the static parameter. The panorama window is the bounding limits in which your panorama is displayed; typically one of the following: 1) the full extent of the computer monitor when displayed full screen, 2) the full extent of the browser window to whatever size and configuration that it has been resized or 3) when your panorama is displayed within a frame on the html page.

One note of caution if you're using Flashificator v2.0694 or earlier: The graphical representations for the Alignment points are in error. As shown in the illustration below, the little white dot is in the exact opposite location as defined in each instance where x and y are not equal.

Post Note Update As of FFC release v2.075 the box alignment issue has been fixed - more on the discussion here.

8 out of 9 in error


align example 1align example 2

The green dots in the two examples above show the possible alignment points for two hotspots with the example on the left being amongst a field of adjacent images that will be abutting to form the navigational controls (static). The example hotspot on the right will be used as a distorted image on a cube face. In both instances, we'll use the center of the hotspot as the hotspot alignment point.

window in frame

The example to the left shows the two hotspots; the navigational hotspot in its static location and the other in its distorted location.

The red dots indicate the 9 possible salign positions relating to the panorama window which in this case has been placed in a frame of a web page. The salign point pertains only to the navigational static spot object.

LBStatic x & y values for nav keypad
(Left, Bottom used for salign point)
41:-334 120:-334 197:-334
41:-250 120:-250 197:-250
41:-168 120:-168 197:-168
41:-80 120:-80 197:-80

The align point used for the static spot object was CM.


In the example to the left there are six box objects which have been placed on the cube face at +90 (right) making it appear as if the Scrabble board entends further into space.

CMPan & Tilt values for board extension
(Center, Middle used for align point)
124.1:58.93
90:53.3 124:48
56.2:29.1 90:34 124.24:29.12

full screen An important difference between distorted boxes and other hotspots that should be noted, is that FPP turns them into a bitmap image before distorting them. This means that if you for example have loaded a .swf file or plugin with buttons into a hotspot that is distorted, they won't work.


The example to the left is the same as above, only instead, the panorama window is full screen. This illustrates why it is important to give proper consideration to which salign position to use in order to keep the relative placement of static spot objects fixed regardless of how the window is configured; for example, full screen.

Another occasion is when the panorama window fills the entire browser window which the user may size and configure in any fashion. In order to keep your static elements from appearing in unexpected locations, tie them to that salign point nearest to the place that you want them fixed and to remain stationary relative to that point.

In this example, the Lower, Bottom salign point was chosen in order to keep the navigational key pad always in the lower left corner. And it is from this point that the staic x and y values then are measured.

The complete hotspot settings for the two examples; static spot object and the distorted box object are shown below.

dinfobutton static spot object

distorted box object

bit depth

5 - Bit Depth

One last point in regard to hotspot positioning has to do with the bit depth of the hotspot. Bit depth is more to do with drawing order than with elevation (z axis).

Each hotspot is rendered according to its bit depth order, and while there is no real spatial stacking, it's still analogous to drawing layers - the stuff that's on "top" is seen and the stuff that's "lower" isn't - that's assuming that the opacity is 100%.

In the example above, the three static spot objects; letters F, P and P, each have a bit depth of 1220, 1221 and 1222 respectively while the static box object; dinfoscreen, has a bit depth of 1016.

In this example, in order to have the info screen show completely, a bit depth greater than 1222 is required.

Personal tools