CSc 101: Slideshow

In this assignment, you’ll create a slide-show application based on a topic of your choosing. One example of such a slide-show is shown below:

Notice a few things that you must conform to when you write your program:

• The slide-show has a specific theme. In this example, the theme is “the avengers” but you may choose whatever theme you like (must be PG-rated).
• There are four “slides” total. You must have at least 4, but you may also create more.
• Each slide has a title (with large text), an image, and a short description (smaller text).
• You may navigate through the slides by clicking on the left and right arrow buttons on either edge of the screen.
• You can also navigate left/right by using the ‘z’ and ‘m’ keys, respectively.
• There is no “wraparound” when browsing through slides. You may only navigate forward/backward if there are more slides in that direction.
• The background of your entire canvas should also be an image that goes with the theme.
• The canvas should be 700x500

The only code you are allowed to put into draw() are calls to functions that you have written. You may not draw any shapes, respond to mouse clicks, have if-statements or for loops, etc. within draw(). Instead, put your code into at least three separate, well-named functions.

Development Strategy

As with the last assignment, this one might seem complex. If you break the problem down into smaller “chunks” it becomes much more manageable. I recommend you use the following strategy to complete:

(1) Choosing a theme

First, choose a theme that has at least 4 distinct sub-topics that you can create a slide about. Then, choose your 5 images (1 for the background, and 4 for the slides) and put them in the same directory as your program.

(2) Background Image

Next, create your canvas and get the background image displayed and properly scaling across the screen.

(3) First Slide

Next, get your first slide showing up. Don’t worry about changing slides for now, just make sure that the image and text show up in the right location and with a reasonable size, like so:

(4) Slides Movement

Now, use the keyReleased() function to handle the 'z' and 'm' button clicks, to get the slides to change.

(5) Add in the buttons

Lastly, add in the left/right buttons. Make sure that the buttons are click-able to change the slide. When the mouse is clicked outside of a button, nothing should happen. If you are having trouble getting the buttons to work, try referring back to section 8.

Comments

All of your programming should be well-formatted and easy for the graders to read and comprehend. You should follow the style guidelines that we have discussed in class. Each program file should have a header comment at the top that has roughly the following format:

//
// Author: Student Name
// Description:
//    A short description of what this program does!
// 

If any part of your scripts are particularly complex, you should put documentation comments above those lines of code. Name your program netid_slideshow.pde (where netid is your UA username).

Submission and grading

This was assigned on 11/3/2017. It is due on 11/13/2017 at 5:00pm.

You must turn in this assignment as a zip file!!!

Zip the entire directory with your code and image files, and name it slideshow.zip. Turn in the zip file to the assignment drop-box in D2L before the due date. Make sure to name the files exactly as this document specifies. In general, make sure to follow these instructions precisely. If you don’t, we will deduct points!!!