the RESULT

Half a semester later, and Maya project one is done.

Pure Thirst is a company looking to sell the purest mountain water. They would like their product to be sold in upscale health food stores as well as fine restaurants. Their design is based on their slogan:"pure within, beautiful without." This means that the outside reflects the inside in all aspects of the design. For the bottle this meant clear glass with a smooth shape and simple label. The logo itself shows the classic pure nature of the font while still exploring the beauty of water. The letter begins to flow together in one rushing movement, almost like a waterfall, without distracting from the rest of the product or brand.

Here are renders of the finial product and a flat version of the label.

Interactive Gallery Tutorial

This tutorial will demonstrate how to create a image gallery like the one bellow. All that is required is a basic working knowledge of Adobe Flash and Action Script 3.

NOTE: all following images were taken from Flash CS4, however the same will work in CS3

STEP 1:

Start by creating a new AS3 flash document. Pick whatever size will fit best with your photos. With the flash file created you now need to begin adding content. You want to do this in an organize manner. The more planning you put in at the beginning the easier the code will be to write. I usually begin by importing all of my outside information. In this case that meant importing all of my photographs (cropped to be the same size) into the library. You can do so by going to File/Import/Import to Library.

STEP 2:

Now we need to organize your information. First pull all of your photographs onto the stage and convert them to movie clips. DO NOT FORGET to give each photograph its own layer and INSTANCE NAME. To make things simpler I used instance names like room1_mc, room2_mc, room3_mc... This allowed my to have a unique instance but also be able to edit my code quickly.

Position all photo movie clips where you would like them to be in their "closed" state.

Next we need to create your buttons and directional text. Start by creating a black shape that covers your desired hit area for your buttons. Then you will need to convert the shape to a button symbol. With in the button put nothing in the UP state, a key frame in OVER state, a frame in the DOWN state, and another key frame in the HIT state. The same shape should appear on the last three states. Now go into the OVER state key frame. Select the shape and convert it too a movie clip. This will allow you to change the alpha of the clip and make it 50% transparent.

Once your button is created pull a new instance of the button onto the stage for every photo movie clip. Put each button in the correct position, on its own layer above the corresponding photo layer. Again, remember to give each a instance name. I used "open1_btn, open2_btn..." for mine.

Lastly we need to create the text that appears to tell you where to click to close. Simply create a movie clip containing the text "X CLOSE". Then pull one onto each button layer and give it its own instance name. I used "close1_mc, close2_mc..."

STEP 3

Now all that is left is the action script code. Begin by creating a new layer on top of everything in your scene, lock it and call it actions. All the code will be placed in frame one of the scene. An easy way to write the code is to write it once and then copy and past it and then just change the defining characteristic. If you have used the instance names I did, all you will have to change is the number 1, 2, or 3.

First we need to import the tween class to control our movement. Do so by typing this:

Next we need to define the start position of each photo movie clip by using a variable that can be refreered to later. The state position is defined by the cross-hair of the movie clip. When we converted our photos to movie clips it put it on the upper left hand side of the clip. If you activate your guide you will be able to see exactly where it is located. Also we need to set the "visible" quality of our close movie clips to be false.

Next we need to add an event listener for our buttons. Do so by typing this:

Now all you have to do is write the function sidePanel... You do so by first creating a var to define the movement of the movie clip and will allow you to create a new tween for each movement. Next we use an if statement that is checking to see if our close_mc is visible or not. If it is (visible == false) then we want it to change the visible state to true and to slide the room_mc out. You slide the room_mc out by using the tween class. With in the tween the begin and finish numbers refer to the ptPanelHome variable we crated at the beginning, and the number 665 is the distance moved. ELSE make close_mc.visible false and slide the room_mc back in. The tween class is only different in the begin and finish numbers, which have flipped. The code looks like this.

Simply duplicate the code twice and change the numbers of the close_mc, room_mc, and ptPanelHome.

STEP 4

The last thing I did was create a mask that covered the entire area of buttons and open panel space. To do so simple create a shape on its own layer. Then right click on the layer and select Mask. It will automatically effect the layer directly beneath. Simply pull the rest of the layers into the mask.

Press command (control)+return to export the SWF file. The result should look something like the example at the beginning.

Maya...

Twice a week I go to class a 5:30 in the evening. I sit in a dark lab and try to teach myself, with some aid from the teacher, Maya. To most of the educated world this means nothing. It should sound very hard, intimidating and confusing. Maya is a 3D modeling program. The end from the program can be anything from a video game, a mock up of a new product, or fully animated feature film. I have been trying to make a product. Sounds simple. It's not.

Maya is an intense program. It was made by tech nerds for design nerds. Because of this, the interface has limitless options. Sounds nice and helpful. Its not. What this really means is that where there is usually one or two ways to do something there are about 10 in Maya. Let me explain. In a normal program you will have 5 to 8 menu choices on your tool bar. In Maya there are 7 that are there all of the time. Then there are anywhere from 7 to 12 more depending on what section you are in. I believe there are 8 sections. Do the math, it equals confusion.

Despite this I have learned to use some of the program. I can do some basic modeling, lighting and texturing. Here are some screen captures of my progress and frustration.

These two are close up of my efforts to have detail. Again, much harder than it sounds.

This is the whole interface. Here you can see my objects, lights, and countless options.
This is a render of the scene previous. It shows that making glass is super hard. Getting the transparency, reflection, refraction, and lights to all agree, is a very long trial and error process.

Still I am hopeful. The end is in sight. (Wednesday to be exact) I will find success. Maybe.

All the Wrong Choices...

For this new website we had to choose either a website with a shopping cart or a small mini-site for a specific campaign. I chose to make a mini-site featuring a cover company called Ideal Ink that. The concept was you would visit the sight and get to create your own custom shirt. There would be no shopping cart just the pledge to "be inventive." The site would then contain information on where Ideal Ink is located and how they do pricing. I was looking for an audience who doesn't know much about screen printing. I wanted to show them how easy it could be to create your very own shirt. Here are my first tries and mistakes.

The first thing I did was borrow the sample shirts from work and scan them ALL in and then remove their backgrounds. There were about 62 shirts. About 4 hours later I had about 62 files that looked like this.

From there I started to design the t-shirt editing space. This is the first design. It is basically to crowded. I didn't really give anything the space to breath.

From here my professor and a few friends suggested that I change the shape of the shirt rainbow to add more intrust. I would also allow you to see a larger area of the shirt.

With my newly created circle I began to redesign. This was the first time I included the logo and accent elements like the shirt tag for navigation. This one was more successful because I was allowing for negative space.

This is how the shirt editor would look when active. I also decided that I had too many shirt choices. I cut it down by about half leaving my with about 30 shirts to choose from.

However, like always, none of these wonderful designs actually made it past this first stage. All had good things to offer but none was the perfect choice.