Multimedia Projects

Most projects in digital media require the use of two or more tools. Even if you intend to make a career as a specialist in just one of these tools, it is unlikely that you can completely avoid the use of others, and you will find yourself having to interact with colleagues working with different tools, so here we have suggested some projects which require the use of several tools in combination.

The projects are not intended to be worked through in any particular order. Their ordering here is arbitrary. They can be undertaken by individuals or by groups.

A few of these projects require scripting knowledge. Although we don’t teach scripting in Digital Media Tools we know that some people using the book will already be experienced in writing JavaScript and/or ActionScript. These projects are clearly marked with a special note.

All Web sites should be validated using the W3C validator or Dreamweaver’s validation facilities. All Web sites should be designed with accessibility issues in mind. (For further information please see Web Design: A Complete Introduction and www.webdesignbook.org)

Memento

Choose an event from your own life – e.g. a holiday, birthday, sporting event, performance, graduation, etc. – for which you have some documentary record, such as photographs, videos, certificates, newspaper cuttings and so on. Prepare each item of this material for presentation within a Web site, using Photoshop for images and scanned documents and Flash for video. Assemble the material in Dreamweaver to create a small commemorative Web site which is accessible and attractive. Make sure you add explanatory text where appropriate, and clear navigation.

Trace Bitmap Animation

Using a scanner or a digital camera, capture a sequence of images to disk. You can, for example, use a set of related photographs, a sequence of drawings, or your own hand or other some object in different positions on the bed of the scanner. Using Photoshop, convert all the images to greyscale and downsample them to screen resolution. Save them in a suitable format for import into Flash. Import your image sequence into Flash and, using Modify>Bitmap>Trace Bitmap…, create a stylized animation from them. Now re-colour parts of each frame in Flash, to enhance the final animation, and add sound if you wish.

Note: make sure that you have set your Flash document size to match the size of your bitmaps, and if you have trouble with the positioning of the bitmaps when you import them into Flash, read the Flash hints and tips on this site.

Accessible Tourist Attraction

Create a multiple-page Web site for a tourist attraction of your choice – for example, a disused industrial site of archaeological interest, a historic building, a wildlife park or nature reserve, a lighthouse or lifeboat station that is open to the public, and so on. Ensure that your site is not only fully accessible itself, but includes accessibility information relevant to your tourist attraction. As you are promoting a tourist attraction your site should also be attractive, and encourage visitors. Think about the kinds of information that potential visitors to the real site (the attraction) will be looking for on your Web site: opening hours, facilities, etc.

Poem

Take any short poem and use Illustrator to create a set of compositions – each of which is just one line of the poem – by typesetting each line in a graphically interesting and appropriate way. Use different fonts, colours and sizes and set the text on a path or in a shape, or apply effects as appropriate. Export each line’s composition in a format suitable for the Web. Using Dreamweaver, create a Web site whose home page contains the full text of the poem, laid out in its original form, with each line linked to a page containing the corresponding composition you made in Illustrator. Add any additional links and navigation aids which you think are necessary.

Sport

Create a few Web pages around the concept of some sport, such as skiing, skateboarding, basketball, football etc. Each page should consist of one or two imported photographs and one word or a short phrase expressing a facet of that sport, for example jump, throw, run,…. Make the word move in a way that is suggestive of its meaning and connotation. For example, the word run should move in a way reminiscent of running. Try to make the movement specific to the sport: running in cricket is different from running in a marathon, for example. The animation of the words can be carried out in whichever program you prefer to work in. Photoshop, Illustrator and Flash all have facilities for doing this.

Clothes

1. Take a series of photographs of articles of your clothing which you feel best express your own image of yourself. Take several photographs of each garment. For each garment create an animated GIF (in Photoshop) from its sequence of photographs. Now, build a Web site around a suitable arrangement of these animated GIFs; the site should express your personal feelings about clothes and self-image. Allow room to add additional material to the site (see below).
2. This time just take a single photograph of each garment and create each animated GIF by altering this one photograph in Photoshop to make at least 12 frames from each original image (more than 12 would be better). Make sure that your GIF loops gracefully so that you cannot see the beginning and end points (read the section on Animation in the Photoshop chapter). Use these animated GIFs in a Web site, as before.
3. As a final variant on this project, import the single photographs of your clothes into Flash. Use the Break Apart command on the imported bitmaps, and animate parts of the clothes to make a collection of movie clip symbols. Now combine these small animations into a movie to express how you feel about your clothes. Add sound to your movie to complete the effect. (Think about the rhythm of both music and picture, and the different ways in which these could interact.) Export the result as a SWF and add it to your site.

Site Map with Previews

Note: this project requires scripting knowledge.

Choose a subject that interests you, to form the subject of a Web site. Sketch a design for the structure of this site, which should be divided into sections corresponding to sub-divisions of your chosen subject. For example, if you choose natural history as your topic, you might use mammals, fish, amphibians, insects, plants, fungi, and so on, as your sub-divisions; if you chose the life and work of a pop star, you might use records, films, concert tours, stage outfits, associates, and so on. Keep the number of divisions down to a reasonable number. (The rule of thumb most often quoted is seven plus or minus three.) Create dummy place holder pages for each sub-division and design an attractive site map page for the whole site. Use either JavaScript or Flash to create a map based on remote rollovers, so that moving the cursor over an element representing a sub-division will cause an image or animation to appear somewhere on the page, giving a preview of the kind of material that the visitor will find if they go to that page. The links themselves can be either plain text or images, whichever you feel is most appropriate to your topic – but if you use images you must ensure that you provide alt-text for every one.

If you are working in a group this project can be extended to build the entire site. In this case try to ensure a consistent design throughout the site, and consistent use of navigation text or images.

Web Diagrams

Note: this project requires scripting knowledge.

Using Illustrator or Flash draw some diagrams. If you have studied computer science or engineering, you could make some UML or finite state machine transition diagrams, or a circuit diagram. Otherwise, you could prepare diagrams to show some statistics in a graphical way, draw a map or create a simple set of graphic instructions. Whatever you choose, try to make the diagrams lively and attractive within the conventions of the subject they pertain to. Export the diagrams in a suitable format and then place each one on a Web page. Using JavaScript or Flash, add rollovers so that additional information relating to parts of the diagram is displayed on the page when the cursor rolls over it. Add links to connect your pages, either sequentially or according to some logical connections between them. The links may be straightforward hyperlinks, or hot spots on the diagrams, or buttons of some sort.

Multiple Choice

Note: this project requires scripting knowledge.

Build a Web page or site that presents a multiple choice test on some subject. There should be a set of questions, for each of which a set of alternative answers, only one of which is correct, is provided. When a user chooses the right answer, some positive feedback should be given. For example a picture could be displayed, or an animation or sound could play. This should not only indicate that the answer is right, it should reinforce the learning by illustrating or expanding on the answer. Wrong answers should lead to some similar negative feedback, ideally illustrating what is wrong about the answer.

Animated Animation

Note: this project requires scripting knowledge.

Create a Web page around a single animated element made by combining JavaScript and an animated GIF. That is, you should use JavaScript actions to move an animated GIF along a path; the animated GIF should be a simple looped movement that will make sense when it moves as a whole. For example, you could create a very simple animated GIF showing a rotating wheel and then move it diagonally across the page so that it appears to be rolling downhill. Match the subject of your animation to your drawing and animating skills – if you can make an elephant on a unicycle (and want to) then do so, but if you can’t draw, try to find something simple but effective such as a bouncing ball. You may find some inspiration in the physics of motion. Place other elements on the page that expand on the theme of your animation (for example, if you animated a unicycle you might add information about juggling equipment). Make sure that the elements are arranged so that they complement the animation and do not get in its way.