Chapter 8--Special Effects and Other Shockwave
Techniques
Chapter 8
Special Effects and Other Shockwave
Techniques
CONTENTS
No Rectangles, Please
Matching the Background Color
Using a Patterned Background
Sprite Blends
Audio as a Background Soundtrack
From Here…
Every computer graphics book has a chapter called "Special
Effects" that usually leads readers to think they will soon
know secrets that only Hollywood knows. Well, the best special
effects are the ones you create yourself because no one else will
be reading about them in a book somewhere. This chapter offers
some Shockwave ideas that don't fall into any other categories.
Some of the topics covered in this chapter are:
Matching the background color of your Shockwave file to the
Web page for irregularly shaped movies
Using tiles to create a patterned background
Using the BlendSprite
command for smooth fades in Director
Adding a music track to your Web page
No Rectangles, Please
Rectangular shapes have acquired the stereotype of being an unimpressive
computer default. Graphic images are automatically set in a rectangle,
so hard edges can be expected. Many designers have broken free
of this restriction through various methods so that their work
is not limited to boxy shapes. One method for the Internet is
using transparent GIFs to drop out one color in the image so that
the background can be seen. But Shockwave movies offer no way
of leaving part of the stage transparent. Another method (and
the solution for Shockwave) is to match the background of the
image with the background of the Web page. In doing this, you
no longer have to separate the Shockwave movie so distinctly from
the rest of the page. It can be integrated seamlessly.
Matching the Background Color
Matching the background color of a Web page is fairly simple.
All you need to do is make sure that the background color of your
Director movie is exactly the same hue as the background color
you specify in your HTML command. But first you need to know how
color is specified.
HTML uses hexadecimal codes to identify colors. You learned earlier
how Director uses a palette for its color identification. So how
do you match them up? Easy.
First, decide what color you want the background to be. It doesn't
matter if you use a standard system palette or a custom palette,
but the background color must be in the palette for Director to
use it as a background. The HTML can specify any color, but Director
is limited to its own palette. When you have decided on a color,
you need to convert the RGB information to hexadecimal to use
in the HTML command.
For example, I have a custom palette loaded in Director, and the
background color I want is a shade of green. In the palette window,
I can double-click that color and see its RGB information. It
turns out to be Red 102, Green 153, and Blue 102. Now I need a
way to convert those decimal values to hexadecimal. Fortunately,
Windows calculator has this feature built in, as would any good
scientific calculator. Other utilities are available that will
convert between hex and decimal. So the red value of 102 becomes
66 in hex, the green 153 becomes 99, and the blue 102 also becomes
66. The HTML command requires all three of these values stuck
together as 669966. That is the hex value of my green color. So
the HTML background command would look like this:
<body bgcolor=669966>
Then I can choose the same color in Director to be the stage color,
and the movie is no longer defined by a box shape. The examples
gallery.dir and gallery.html on the CD-ROM both
use this technique (figure 8.1).
Figure 8.1 : A seamless Shockwave movie that uses the
same background color as the Web page.
Using a Patterned Background
The technique described in the preceding section is fine for solid
color backgrounds, but what if you want to use a tiled background
on your Web page? You can follow the same principle, but it may
be trickier to line up the patterns properly.
There are two types of background tiles: with seams or seamless.
Both are acceptable, depending on your intentions. A seamed tile
is simply a rectangular shape repeated, while seamless tiles appear
continuous so that the viewer can't tell where one seam begins
and another ends.
Note
Achieving a seamless tile can be difficult and can look pretty lousy if not done properly. Lynda Weinman describes a good process for seamless tiles in her book, Designing Web Graphics (New Riders Publishing). To summarize the method, you use the
offset filter in Photoshop to see your progress as you create a tile. The offset filter has the option of wrapping the pixel information. This allows you to see if your tile has spots that will show seams or empty areas that may need to be filled.
To use a tiled background, you'll need to use the same file for
your tile in Director and for your tile in the HTML document.
Follow these steps:
In Director, import the tile image as a cast member.
Then, from the Paint window, choose Tile Settings. Select
the cast member you imported and adjust the size and position
of the tile until it looks good in the preview window (figure
8.2).
Figure 8.2 : Creating a custom tile in Director.
To use the tile for a background, you will need to create
a filled box that covers the stage.
Then choose your custom tile from the pattern chip on the
tool box.
Now, keep that filled box as the bottom layer of your whole
animation (in Sprite 1).
Next, in your HTML document, you can issue a command to use
your image as a tiled background. The following statement uses
the "bluetex.gif" image and repeats it as a background
pattern:
<body background="bluetex.gif">
Aligning your tiled Shockwave movie above a tiled HTML page can
be tricky. A simple textured tile offers more freedom for misalignment
than recognizable images on a tile. Often a texture can be placed
anywhere, and it will appear to blend in. If your tile has images
that need to be lined up, you need to use other techniques for
lining up the movie. The methods would be the same as if you were
going to position any image in a specific spot on a Web page-using
spacer images, hspace and vspace tags, and so on. A book describing
Web page design would cover this process better.
On the CD-ROM, the movie shlogo.dir and the HTML page shockex.html
use the same textured background to appear seamless. A JPEG image
(example.jpg) also uses the same background so all three
blend together. Figure 8.3 shows the patterned Web page in Netscape
Navigator.
Figure 8.3 : Tiled backgrounds on the HTML page, Shockwave
movie, and a JPEG image.
The tile feature in Director is a great way of enhancing a boring
background without using up a lot of space with a big cast member.
This is an excellent shortcut as you work to keep your file size
small.
Sprite Blends
Fade-ins and fade-outs are often desirable over other transitions.
Director offers wipes, dissolves, and others, but standard Director
transitions halt the playback head. A sprite blend can
fade over a course of frames while other action is occurring.
The previous example using the Shockwave logo shlogo.dir
uses a sprite blend to fade one image while the rest of the animationcontinues.
Using a sprite blend is simple. Put the cast member to be faded
in one frame and choose Set Sprite Blend from the Score menu (or
Sprite Properties from the Modify menu in Director 5). The range
between 1 and 100 selects how much to fade the sprite. To fade
from nothing, choose 0 for the first frame. Then copy the sprite
to another frame-for example, frame 10-and set the new sprite
blend value (100 to be completely visible). Select the range of
cells, choose In-Between Special, and select Blend. Just like
that, the sprite fades from nothing to full view.
Sprite blends are great for enhancing a simple movie without adding
extra cast members. It is also the only way to create a smooth
fade, rather than individual pixels disappearing through a standard
Director transition (figures 8.4 and 8.5).
Figure 8.4 : A standard Director transition dissolves
individual pixels.
Figure 8.5 : A sprite blend fades the image smoothly.
Audio as a Background Soundtrack
Looped audio can be used as background music for your Web page.
This example uses a small graphic image that lets the user click
between "Sound on" and "Sound off" because
looped sounds can quickly become annoying.
Caution
If you put multiple Shockwave movies on one Web page, you should use audio in only one of them. Otherwise, you will have more than one element attempting to access the computer's sound hardware, which may be unpredictable.
The file mloop.wav on the CD-ROM is the sound that was
used (mloop.dir is the finished Director movie). If you
load it into a sound utility and play it back, it goes through
eight beats of music on one chord, then eight beats on another
chord. When set in Director to loop, it smoothly repeats. Note
that this example is not streaming audio, it is simply downloading
and playing it. Chapter 18, "Shockwave for Audio," covers
the process of streaming an audio file.
Only a few frames are needed in Director. Set up a marker in one
frame called "On." This will be where the music is playing.
Put the sound in a sound channel and set the playback head to
repeat using the "go to the frame" Lingo statement.
In a sprite channel, put the graphic of the button to turn the
sound off. We haven't discussed interaction yet, but this will
give you a preview if you haven't done this before. Attach a Lingo
script to the sprite with the "Sound Off" button that
looks like this:
on mouseup
sound stop 1
go "off"
end
When the user clicks the button, it turns the sound off and goes
to a second marker called "Off." In the frame with the
"Off" marker, put the graphic of the "Sound On"
button and attach a Lingo script to go back to the "On"
marker. Figure 8.6 shows the example as seen in Director.
Figure 8.6 : The Looping Sound Movie in Director.
Now you have two frames that the movie can jump between. "On"
contains the looping music and the button to turn it off. "Off"
contains no music, but has a button to jump back to "On"
if the user wants.
Note
You're probably thinking, "Audio files are so large, why would I want to have the viewer download a huge Director movie just to hear some dumb music?" Well, you may be right. This example is 95K. Pretty big just for background music. But this is
just to demonstrate the possibilities of Shockwave. Maybe you have a looping sound that is much smaller, and you don't mind the download time for it. If it's the last thing the HTML page loads, it may be all right because the viewers can read the rest of
the page while the sound loads. Or maybe you're a musician and you have a demo of a song on your page that you want available for people to hear-or even just a short announcement sound that says, "Welcome to (whatever)" when the page
loads.
From Here…
The last example from this chapter uses a simple interaction that
switches between frames when the user clicks a button. Next, you
move into interactive Director movies that allow the user much
more involvement with Shockwave, rather than simply watching something
happen.
Chapter 9 "Rollovers and Button Clicks": Using
rollovers and button clicks for user interaction.
Chapter 10, "Controlling Movie Elements with Puppets":
Using puppets to control Director functions with Lingo.
Chapter 11, "Using Shockwave for Data": Working
with Shockwave for data.
Chapter 12, "Working with Lingo": Completely "Shocking"
your site.
Wyszukiwarka
Podobne podstrony:
ch8 (5)ch8 (13)ch8wishcraft ch8CH8 (2) NieznanyCisco2 ch8 ConceptCH8 (3)ch8 (9)ch8 (10)pm ch8ch8CH8ch8 (11)ch8ch8 (4)ch8 (4)CH8 Nieznanywięcej podobnych podstron