Adobe Atmosphere 'Script Presets' for Non-Coders
The big advantage of going this route is that you don't have to write your own small JavaScript programs when you use a Script Preset. You may discover three disadvantages though. These problems are not Adobe's fault. They are inherent in the very idea of pre-built generic program modules.
1. These are generic scripts and may not do exactly what you want. You'll have to settle for how they already work, or learn enough JavaScript to modify them, or get someone else to modify them for you.
This is partly offset by the good news that you can plug many of these modular Script Presets into others (as you'll see below) to form a totally custom solution. Too bad some of the Script Presets don't come with places into which to plug others. Again, this can be fixed by modifying such Script Presets - if you know some JavaScript.
2. Another problem is that there are not yet very many Script Presets available.
3. And a third disadvantage is that it may take a lot of these scripts, each easy enough alone, but requiring considerable effort to plug together, to do something that could be done much more easily and directly in a few lines of custom program code inside only one custom script.
And when you write custom code, a lot of the repetitive parts can be copied and pasted or eliminated, whereas Script Presets can't usually be condensed or simplified. When you combine Script Presets, the redundant bits stay that way. In that sense, many Script Presets are not really easier at all, for someone who can code JavaScript. Of course they were not meant for programmers.
So, Script Presets are a valuable addition to Adobe Atmosphere, but if you want the full creative power of the product, and have no JavaScript experience, you should still learn JavaScript and how to write your own Adobe Atmosphere code.
Example: Responding to a visitor's mouse clicks
Here is a practical example that covers most of what you need to know about using Adobe Atmosphere Script Presets. It even shows how to plug Script Presets into other Script Presets to do custom animation without programming. It uses the "onClick.js" Script Preset to trigger mouse click events in your scene.
The two events that are controlled here are also Script Presets, "fog.js" and "rotateContinous.js". Two buttons turn rotation of a box on or off and two other buttons turn the fog effect on or off. These buttons are Adobe Atmosphere primitive shapes called "Trislabs", which are placed on the sides of primitive boxes. This simple example required 7 scripts and 7 "solid objects" (the primitive geometric shapes).
I didn't have to do it that way, just wanted to show you that the onClick.js
Script Preset lets you use Ctrl or Shift keys along with mouse clicks.
Try the On_Click Script Preset example
How the scripts went together
The following diagram shows how two copies of the onClick.js Script Preset are setup and connected in the Adobe Atmosphere authoring program. Two copies of the onClick.js are required for each event (4 copies for the whole scene). In other words, you need one copy of the script for each of the 4 buttons in the scene.
Download this demo scene as a ZIP file here.
Understanding the data structure and twin editors of Atmosphere
Adobe Atmosphere was designed to get you close to the data structure and objects that make up your scene. I call this the "skin-tight fit of the Atmosphere interface to the data structure of your scene". And i love its maximum access and control.
Those familiar with Object Oriented Programming (OOP) concepts will recognize that the objects that make up your scene are organized and controlled in OOP fashion. That means that the Atmosphere program and interface are also set up that way. Although there are many advantages to this approach, it can be confusing for beginners. Adobe Atmosphere is a professional level tool and this is one example of the trade-off that gains more professional power at the expense of less ease of use for amateurs.
Be sure to study the information in the "User's Guide" (available in "Help"), to understand the hierarchy of objects, the terminology and the use of two different editors inside Adobe Atmosphere. An understanding of the concepts behind Object Oriented Programming will also be valuable.
Even if you are not doing any programming, you must understand the basic terminology, hierarchy and relationships of the objects in your scene to use Adobe Atmosphere effectively.
For this demo scene, you must understand that the scripts themselves (the script objects) are located within the "Stage" object, where the entry point, reference point, etc. are. They are accessed via the Scene Editor. You can open the Scene Editor (if it is not already) by double-clicking on the icon called "Stage".
On the other hand, the shapes that make up your scene (primitive objects, imported 3D objects, etc.) are located inside (and separated by) Solid Object "container objects". These are accessed via the "Solid Object Editor". You can open the Solid Object editor by double-clicking on a Solid Object container icon. In the Scene Editor, you can create as many of these Solid Object containers as you need, in order to separate some of your shapes from the others in your scene.
One confusing bit is that the hierarchy objects which contain your shapes are called "Solid Objects" and your shapes themselves are also "Solid Objects". Adobe means that these containers hold your Solid Objects. To clarify, i will always refer to the objects that contain your shapes as "Solid Object containers". Also, i find it best to rename all my Solid Object containers, according to the solid objects they contain, just as you would assign a unique name to each folder you create in Windows, according to its contents.
How to work with Script Presets in Adobe Atmosphere
1. Create, separate and name objects
First we need to separate our animated objects (our primitive shapes) from each other and from the rest of our scene, so that each Script Preset will affect only the object we want it to. For example, in this scene, we want to rotate only the red box, not every solid object in our Scene. Therefore the red box has to be in its very own Solid Object container, which i named "RotatingBoxSO". I name every Solid Object container "xxxxxSO", for clarity.
So, we do this separation by placing each of our animated Solid Objects (our geometric primitive shapes) inside its own Solid Object container, in the list of objects that make up our Scene. In other words, we create our Solid Object containers, then open each one and create the actual Solid Object - a box or trislab or whatever we need, inside that Solid Object container.
We can install all the scripts themselves together inside the main Scene "container", called the "Stage". Here is a picture of the Adobe Atmosphere "Scene Hierarchy", showing all these objects.
Notice that i have renamed my custom objects for clarity (although i could have used more consistent names). We don't want every Solid Object container to just be named "Solid Object" and every copy of our " onClick.js" mouse click script to be named only that. THat would be too confusing to others, or to us when we look into this scene months or years from now.
The little eyes mean that those objects are visible to the visitor and the little locks mean that they can't be moved accidentally.
By the way, the one script that is not described elsewhere here is that "onclick_chat_text.js". That's just the little script containing the green welcome text we see when we load this scene into our Adobe Atmosphere player. And the "Ground" Solid Object is a large box we can stand on - our scene's "floor".
You still with me? If not, review the "User's Guide", diagram and Hierarchy list carefully.
2. Now connect everything together
To plug all the parts together and make your events fire, we use Adobe Atmosphere's "Inspector" tool, shown on the left below, to setup each script and also to connect it to what it is supposed to run, its "Target" Solid Object or another script we want to plug into.
Some of the script settings are to control aspects of our event, like whether the user must hold down the Ctrl key, as well as clicking the mouse, or what direction and speed to rotate our box.
In the picture below, i am
connecting this "onClick.js" script to its Target, that red trislab button inside the "RotateOnButtonSO" Solid Object container. To do this connecting, we use our mouse to drag that little "Whip" tool over and drop it on the target. It's kind of like fishing. We click on that little coiled-up "Whip" thing, and as we drag it over, it plays out a line. When we are over the target we want, a box appears around the target and we let go of the mouse button - presto! The whip reels back in and a connection is written in the software, with all the right code and grammar to make it work. Cute huh?
My long yellow arrows point to the script object in the scene and its listing in the Object Hierarchy, for the Script Preset we are editing. Notice also that the rotation script object is positioned over the center of rotation of the box we are rotating. Unlike most other Script Presets, a rotate Script Preset's location matters - it marks the center of rotation of your rotating object.
We use the same method to plug the "onClick" setting of the script into the "Action" part of the rotate or fog script it is supposed to start, like in the top diagram.
Notice also that we have to be careful how the path to our script is described, so that when we pass it up to our web server, it won't get lost and stop working. Also notice that many copies of the same script can be used inside Atmosphere, each with a name we choose. These are just our local names inside Atmosphere. All the copies of a script inside Atmosphere will use the single "onClick.js" script file outside the program.
Plugging one Script Preset into the "Action" of another
The way we combine Script Presets is to use the "Whip" tool to plug a behavior performed by one script into an action of another script.
Complications set in
There can be a problem here. Some Script Presets have not been provided with Actions to start and stop them. When you need to plug another script into such a Script Preset, you (or someone else) must rewrite the JavaScript code of the Script Preset to add the Actions you need. That is exactly what happened to me with this scene. The "fog.js" Script Preset from Adobe has no actions to start and stop it. So i added those, with the help of of the Atmosphere JavaScript expert 'SuperTed' (thanks ST!). The result is the new "fogWithActions.js" script in the ZIP file.
3. Publish, test and debug
Now we are ready to publish our scene in Atmosphere and test it locally on our PC in Internet Explorer. If you use a separate folder for everything you will upload to your web server, which i recommend, be sure all your required files are in there. Atmosphere will move most files by itself when you publish your scene, but it may miss a few less common file types.
jimcoe(at)mindspring(dot)com
All contents copyright © 2004 Jim Coe. All rights reserved.