Client Side Image Maps and Graphic Questions
Last week I received several e-mails about the column; most of which were general comments (all good, of course). However, one reader did bring up a very good question about graphics and Shockwave.In last week's column I answered the question of reducing the file size of a graphic before importing it into Director. This week I'll answer the question, "How do you create client-side image maps with Shockwave when all you get is the final graphic file from a customer?"
This is a very good question. Often I am asked to create Shockwaves from graphics that have already been produced for a site. This brings out some major problems if the artist cannot supply the original graphic files. This week's tutorial covers one of the techniques I use the most when this situation arises.
Workaround For A Sticky Situation
The graphic below was supplied to you by someone who would like to see you create a client-side image map so that people can click on the numbers and be taken to other Web sites.
Graphic for Shockwave
The first thing we need to do is create areas that can be assigned Lingo. This will let users click on these areas and be taken to another Web site. Usually this would be done in one of two ways:
In this case the first workaround mentioned should not be used. It takes up too much memory by adding the boxes as cast members. The second workaround will work, but it needs the use of some Lingo that we have not covered up to this point. This Lingo is a little complex for new Director users.
- We could create boxes over each one of the numbers in the graphic and assign the Lingo to each one of the boxes.
- We could also set up Lingo so that when the mouse is over one area of the graphic and is clicked, the user would be taken to another site.
So, since one resolution is not recommended and the other is too complex, let's look at an alternative to both. (Note, the "complex" Lingo for the second workaround will be covered in future Shockwave tutorials.)
Step 1: Import the graphic into Director and duplicate it using the copy-and-paste method until you have five duplicate cast members. Figure 1 shows what your cast should look like at this point.
Figure 1.
Step 2: Starting with cast member 2, cut away all the area just outside of the number. Start with the Number 1 in cast member 2 and continue the process to the number 4 in cast member 5. Figure 2 shows you what the process (almost completed with the Number 1) looks like in the paint window of Director. Figure 3 shows you what the cast window should look like when you have completed the process.
Figure 2.
Figure 3.
Step 3: Now add the gotonextpage Lingo command to cast members 2-5 so that when they are clicked on by the user they will open a new URL. The Lingo statement to do this is shown in Figure 4.
Figure 4.
I hope this answers the question posed to me last week about premade graphic files. I would recommend, however, that when possible it is best to work with the artist creating the graphics.
Another great thing about today's tutorial is that we have created a client-side image map, one of the most important features of Shockwave. When creating Shockwave sites many people will add animation and then leave an image map (gif or jpeg) on the same page. The user thus has to have Shockwave to see everything on the page, and can't take advantage of a Shockwave navigation system. This means that the image map will send information to the server, and the server will need to respond to get the user to any of the sites (or pages) listed on the image map.
With a client-side image map such as the one covered in today's tutorial, users only need to click once and go directly to the corresponding URL. Try it out yourself using the Shockwave below today's column. To keep things fresh, I'll let you find out where each number takes you.
Keep the questions coming and don't forget to visit next week's exciting installment of Simply Shocking when . . .
