Arianna's IT Work
Flash Catalyst
Flash Catalyst is an Adobe product intended to help designers and illustrators make interactive websites and infoscreens without programming knowledge. After a few tutorials in class on how to use the program, we were given the assignment of creating our own infoscreen - something which would, were it used in the real world, help impart information to customers in a shop or public place.
I decided that for my project I wanted to make an infoscreen for an aquarium. I planned it out, simply on paper, as shown in the image to the right. I wanted there to be four main options for the showing area: a list of upcoming events; a slideshow of the animals at the aquarium; a map and the the opening times; a game for kids in which the objective was to get food, somewhat like my GameSalad project. I also wanted the fish in the bottom left to be able to change color and there to be moving bubbles in the background.
The main color was, obviously, going to be blue, because aquariums are associated with water. Orange is blue's complimentary color, as it is the opposite, and so I decided that some elements would be orange to stand out. I did not decide on specifics, but I did know that I wanted sans-serif fonts (as they are easy-to-read from a distance) and text which stood out from the background.
Once I had finished the planning, I began with the basic design in Illustrator. It was essential that I put all of the elements I wanted on the infoscreen in the Illustrator document, since it's impossible to go from Catalyst to Illustrator. I paid attention to detail, like the scrollbars and the fish (which was surprisingly difficult to make, because I couldn't find any proper clipart to use). During this process I realized that I wouldn't be able to make the game for kids; I resolved to make a quiz instead.
Once I had finished everything in Illustrator, I imported my project into Flash Catalyst and began adding scenes, stages, and elements.
You can see my final product here.
Generally, I think I succeeded in making an effective infoscreen. Apart from the game and the bubbles, I managed to incorporate all of the the things I had planned for the screen.
I like the color scheme I used, especially the background. The orange contrasts well with blue. In some cases I used yellow and pink; while they differ from the orange, they don't fit with the blue as well as they do with orange; I think my color choice could have been wiser there. I also think that in some places the gray text doesn't contrast the dark blue background enough.
I used many, if not all, of the techniques the tutorials taught us. There are five different scenes - the default page, the events page, a slideshow of animals, a map, and a question to answer. The default page is simple, but it is the basis for all pages. If you click on the fish, it changes colors; the links on the side of the page change color when hovered over and link to other pages; there's an address for the aquarium and the aquarium's name, Underwater Aquarium.
The event page uses a scrollbar (which I made myself) to scroll a datalist. The hover states of the datalist elements aren't very nice, but other than that I am pleased with the page.
The animals page is a kind of slideshow of animals. I decided to use a horizontal scrollbar and a datalist with images to display them, even though I also could have made them as a custom element. I am proud of myself for making it accurately scroll the images, because the slideshow isn't exactly a scrollbar.
The map page is, to be honest, a bit boring. It simply shows the opening times and a screenshot of a Google map with the title "How to Get Here". I had originally wanted to put a real Google maps applet on the page, but it proved impossible. While this page is a bit of a lackluster, it gets its point across well enough.
The quiz page is something I put in after making my illustrator file and importing it into Flash Catalyst; you have to answer the question "How many species of fish are there?" by selecting one of four answers. The quiz (and the "you won" and "you lost" messages) is a custom element. It uses multiple scenes and has its own elements. I think I should have probably added some animated transitions to make it a bit more suspenseful, but other than that, it's interesting enough.
I learned a lot about Flash Catalyst (and a bit about Illustrator, too) during this unit. While I think teaching programs like Catalyst in class is a flawed concept because computer programs go out-of-date so quickly, I enjoyed making my infoscreen.