Interactive Flash Slider

This assignment was to take our themed text and create an interactive slider in Flash that moves with the mouse. It was really easy; the unaltered and altered text just needed to be saved for the web out of Photoshop (and sized the same); then imported into Flash and placed on separate layers in the same position. The mask is simply a rectangle twice as tall as the stage area, and a little wider. The themed text and the mask are converted to Movie Clips to allow for movement, and a little actionscript code added so that the mask tracks with the mouse movement, and voila, insta-mask!

Themed Text

This was a fun assignment: choose a word to decorate with a theme. I was going to use PAINT, but I couldn't find any good paint splatters that I wanted to use, so I went back to CAT. Each letter is placed on a separate layer; then I covered the letter with various patches of texture. I thought it would be fun to create a patchwork effect, using fur from all of our cats. (I didn't have a good tail picture, so that is from some anonymous web cat.) After a letter is covered, the texture layers are merged into one, then a mask is created of the letter and added as a Layer mask to the texture layer. This creates a nice, neat cutout of the letter, and this is where the fun really begins: I used a "fur" brush to paint on the layer mask and make nice furry letters. On the pieces that had a hard cutout edge (tail, paws, ears), I placed a new layer under the mask and painted the fur on there. I also did some blending between patches with the same fur brush. I think it's pretty funny, although I don't know how successful my "T" is, with the yawning kitty. Might have looked better to have just one head to go with the tail, but I wasn't going to do all that fur all over again!

Javascript Gallery

I enjoyed creating the Javascript gallery. It was really easy to set up; I already had some Photoshop images optimized and ready for use, so it was simply a matter of replacing them in the code, adding Alt tags, and playing with the size and transition. It wasn't so easy to place the gallery into a website. I didn't combine it with the previous assignment, since I wanted to place it into my website for the 230 class. A bit more involved than the little bit of instruction at the end of the online lesson (thanks, Martin!) I managed to get it figured out, though, and that's probably the best way to learn things. It turned out well, professional looking, and easy to navigate (or just let it play...)

Editing a CSS Template

This assignment would have come in handy a couple of weeks ago for the 230 class! Find a CSS template and alter/adjust text, images, and divs. Of course, I went for the pets design. I replaced the images with pics of my katz, changed some of the text, deleted one of the links at top and adjusted that div, and removed some sections. I wanted to do more with changing the size (width) of the divs, but this template has built-in box segments for the rounded corners, so I couldn't really alter that. I had enough trouble with the top left image, because it was also built into the rounded box. I ended up opening it in Photoshop, placing my image in a new layer (I already had sized him to fit), then using a vector mask with a rounded rectangle to match the size of the previous photo. The only thing that's wierd is that then it doesn't really work with the backgound on the right top (kinda...?) Interestingly, this page previewed in Safari without ANY of the formatting/styling, but it looks fine in Firefox? The thing I find helpful working with templates is seeing how they're built; helps me to understand better how to create my own.