Click the image above to view the demo.
Concept
This project demonstrates the use of the loadMovie() action to coordinate content among several layers. The links along the left of the screen (aligned vertically within the gray curve) allow the user to select general categories. When a category is selected, a subsidiary menu appears along the top of the screen, offering four links to particular pages or views.
As you can see, this Flash project behaves very much like a set of HTML pages in frames, or DHTML pages in overlapping DIVs or layers. HTML developers use such techniques to create modular content: general frameworks into which various particular pieces can be plugged as needed. The same thing is going on here. Though it could have been set up as a single movie, this demo is actually a system of movies, allowing pieces to be swapped in and out flexibly.
Architecture
The image at the top of this page is actually a composite of four movies, each of which is assigned to its own level in the Flash window. The images below show three of these four movies.
Each movie has the same dimensions (550x400), but their contents are arranged jigsaw-puzzle-fashion, so that they will overlap and fit together precisely.
|
Content image (this one identifies the department). Note space left at top for overlap of the departmental navigation bar (next image). |
|
Top bar contains links to the four images in this department. Blank space below allows the content image to show through. |
|
Main navigation with links to the departments and a link (on the main title) returning users to the initial state. The curved design sits over the nav bar and content image, partially obscuring both. |
Scripting
This project requires very little scripting, but most of what it has comes in the fourth movie, which is not illustrated above because it's not much to look at--just a blank white rectangle.
This bottom-level movie is called levelDemo.swf. This is the movie that is invoked in the OBJECT/EMBED tags on the host Web page--in other words, this is the movie that gets the whole system started. Here's how it works.
The levelDemo movie has no visible content and only one keyframe, which contains the following script:
loadMovie("welcome.swf", 1);
loadMovie("blankNav.swf", 2);
loadMovie("mainNav.swf", 3);
The initial movie, levelDemo.swf, occupies level 0. Its script fills in three layers above it:
-
Immediately above the initial movie comes welcome.swf,
which holds a place for the images which are the main content.
This movie occupies level 1.
- Next comes blankNav.swf, a movie that fills in a colored
rectangle where the subsidiary navigation options will appear once
a department has been selected.
This movie occupies level 2.
- The topmost movie is mainNav.swf, the gray curved design that holds links for each of the three departments. This movie occupies level 3 and does not change at any point.
The department links in the mainNav movie each contain two instances of the loadMovie() action; for instance, the "Water View" link is scripted thus:
on(release)
{
loadMovie("waterview0.swf", 1);
loadMovie("waterViewNav.swf", 2);
}
The links on the departmental option bar (1-4) each contain only a single loadMovie action, like so:
on(release)
{
loadMovie("waterview1.swf", 1);
}
Notes
Complicated architectures like this are commonly used by large production teams who need to divide work into regular parts: one developer may be responsible for the main navigation, another for a primary concept window, another for sidebars, etc. Designing the project in this way creates complexity and thus the chance for confusion--someone has to be very careful about managing all the files--but done right, it's a very good way to handle large-scale projects.
Files
All the component files for this demo are contained in the levelDemo folder within multimediaShare on Crow.
