Reveal: the Digital Collage

We finished the last workshop after having just been introduced to the simplest group of Reveal objects. I'm feeling a bit frisky (as always) today, so let's skip some stuff and take a look at the way we deal with visual objects in beta 1. Now, there's some fundamental changes in beta1 regarding how you deal with getting stuff on screen, and how you control it, so we'll focus on the main reasons and results of those changes today.

I'll work from the ground up as it were, and begin by describing the role of Pages in beta 1. You might consider Pages as the canvases upon which everything in Reveal is painted. However, the terms "paint" and "canvas" are a little misleading. They suggest that the Page itself is a visual element that only exists by virtue of the single Image painted upon it (if a canvas is not painted upon, is it a canvas?). In the dev releases, this was true to a degree, but was more of crutch for development, not a design decision.

In beta1, it's changed, and it'd be more appropriate (and intuitive) to imagine Pages as glass backboards for dynamic collages. Their purpose is to "anchor" all the dynamic and interactive visual objects of Reveal into a locational context (both x and y positions, as well as it's "depth" or z position) on screen. You might want to think of Pages as the visual "frame of reference" for Reveal.

Remember, you can (and probably will want to) have multiple Pages on screen. The idea is that for each interface element (eg. a wharf, launcher, or squeaking dolphin) it will probably be preferable to have all the bits and pieces that make it up (text, Images, Hotspots, etc) anchored to a single Page. And since Pages have a terribly convenient "visible" property, and you have the ability to create and destroy Pages dynamically now, it's a great way of doing things. For instance, you might want to move whole interface elements around on your screen, make it hide or popup, set it ontop of everything, or perhaps set it flush with the "desktop".

Perhaps the most important ramification of this is "mixing-and-matching" interface elements. I would argue (you may disagree) that functional, effective, solid and unique interface elements will begin to be released separately from "complete" shell designs. Hopefully, a veritable library of exceptional (and more hopefully, revolutionary) launchers, menus and other interface elements will build up. You'll be able to (and let your users) have more control over the layout and construction of the whole interface without messing with the "complex" code that makes up such elements. It's all about creating larger more functional parts from the smaller, simpler ones.

Once again, you'll note how the effectiveness of this way of doing things is all due to the relationship between objects - in this case; Page objects and Image, Hotspot and Text objects (along with some others). I'll return to this again later.

One of the new features of Pages that is particularly exciting is layers. Each Page has layers upon which other objects are set. In this way, you have complete control over what Images, Hotpots (and wotnot) are above and below other objects. You might consider this similar to the way you play with the overlap of various elements of your digital (and dynamic) collage. There's a whole lot of other advantages to layers that we'll cover soon, but I'm sure you can figure them out for yourself anyway.

Let's be a bit more specific on these "collage" objects that dance across our Pages. Obviously, I've already mentioned Images - with a capital "I" too, due to the fact that they're now separate objects in beta 1. This means that they're no longer just a property of a Hotspot (or a Page), but that you control them directly and thus separately from the "interactive" objects, like Hotspots. In fact, apart from Text, Images are the visual objects of beta 1, and it's silly to constrain them within Hotspots when they often must animate and change without being directly interface with.

Another simple benefit (I'll go into the more unique gains and payoffs of Image objects another day) is the ability to not have to chop your image up, to have various parts of it animate or respond to user input separately. You can set up several Hotspots on top of a large image much the same way you create image maps for a web page.

Perhaps I've been a little vague and not given specific examples of the wonders of the way these new objects work. I'll rationalise it by saying that at this stage, you'll probably enjoy just imagining the possibilities yourself...

Here's a rough guide to the spec of Pages and Hotspots. Note that Pages actually share the same interactive Events as Hotspots, but that's for another time. Also, the stuff in the brackets is the object type of that property. Enjoy.


Properties -

  • x (int)
  • y (int)
  • width (int)
  • height (int)
  • visible (bool)
  • background (color)
  • type (string)
Events -
  • OnActivate (mouse clicked on the Page, same as making a window active)
  • OnDeactivate (mouse clicked off the Page, the window is becoming inactive)
  • OnCreate
  • OnShow
  • OnHide

Properties -

  • x (int)
  • y (int
  • width (int)
  • height (int)
  • tint (color)
  • transparent (boolean)
  • layer (int)
  • link (Page)
  • file (file)

More info on Pages, Hotspots, and other things soon...

Make sense?

headline | blueprints | fumes | designs
workshop | storeroom | what is it? | architects | rev.web