Wednesday, December 15, 2010

Flash Website

So, our final project for graphic interface was to create a simple website using Flash. I'd never used Flash before, so I was a little intimidated. But this class has pretty much all been about doing things I've never done before. So here I went. I decided to do my website about redheads, because obviously, why not. We are a completely unrepresented race. Ok, maybe not a race, but a population let's say.  So, I wanted to do something fun and whimsical to cover this fabulous topic, and I was researching I stumbled upon this holiday card: Loved it! Perfect style I was looking for. Kind of like a classy but fun 50's feel going on.



Next I found a bunch of fun content including crazy facts and myths about redheads, which you might be surprised there are a lot of.  Then it was on to figure out how to include this all into a website. And make it not look to ridiculous. The design is pretty simple, but I like it.  Then onto putting it all into Flash, and making it somehow all link together and do cool movements and stuff. This was where the confusement came. I struggled a bit, but it is done. And turned in. I might go back and fix some things to make it better, but until then, here it is!





Oh, and a link to the real deal website if you wanna take a peak: http://www.fall10.graphicinterfacedesign.com/students/bfrancom/flash/

Friday, November 5, 2010

Animation

Our next project was doing the actual type animation for our movie clip we chose.  Flash is a program I'd never used before, so at first it was proving to be a slow and difficult task. But I got the hang of it by the end i think. Check out my finished animation, let me know what you think!! :)

http://www.fall10.graphicinterfacedesign.com/students/bfrancom/anim/typeanimation.swf

Tuesday, October 26, 2010

Animation Poster

So, for our next project we are going to be learning how to do animation in Flash. Im a little scared. But to ease into the process, we just have start with creating a poster using the text from a movie clip. Now me being not a movie connoisseur in the slightest, I had no idea what to pick. So, the weekend that we had to choose, my roommate was watching Meet the Robinsons, and well. There was my choice. I asked her to pick out her favorite clip. So, that's what I'm doing!

Here's a link: http://www.youtube.com/watch?v=sY_E5x61-68

Now onto the poster! I did a few thumbnails, then moved on to digital comps. I still had no idea what I wanted it to look like. Here is what I came up with:

Well, after going to critique I realized those were boring. So, change of plan and here is the Final piece!!

Tuesday, October 12, 2010

Finished Website

So.... Look at me! Its hours before the deadline, and I'm done! Hooray. Well, I still need to upload it and all that jazz, but for the most part, everything is working. Prepare to be amazed.... ok, just give me a little credit that I actually completed this! Here are a few sample snapshots!

And for the whole site: well... im not sure how to link to that so you can see it right now. Maybe after I upload it I'll post the link... Til then, Ciao!

Monday, October 11, 2010

HTML Website

So...... my HTML website is due tomorrow..... yep. Mine is still not done yet....... Don't get me wrong. I've been working on it. But for now, this is me wasting time for just a second. My eyes can not stare at Dreamweaver any longer!!! Grr.....

Thursday, September 23, 2010

Tutorial: How To Make Scroll Bars

Sounds exciting, right?

Well in the post I'm going to teach you how to make scroll bars in Html in Dreamweaver. Scroll bars let you scroll though information or large images contained in a small viewing screen.

To complete this tutorial, you will need an image and a paragraph of text. Oh and don't worry, the tutorial shouldn’t take you more than 10 minutes.

First off you need to make sure and set up your root folder you will be using containing all your necessary files (your text, images, etc.)

First we will work with putting text inside a scroll bar.

1. You need to create a div using the tag 
 <div  

2. Inside this tag you must add the proportions of this scroll box you are making. You will need to include height, width, and then the overflow style (we will use overflow:auto which means it can automatically detect if you need a scroll bar.) So for example:

 <div style=" height: 100px; width: 200px overflow: auto;”>

3. Then copy and paste your text in

4. Then close up the tag with 
 </div>

5. Your finished code should look like this:

<div style="overflow: auto; height: 100px; width: 200px;">inserted text </div>



6. Save, then refesh and see what happened! Your text is now in a scroll bar! (you might have to go into live mode to see the scroll bars actually appear)



Second, if you want to get super fancy, you can add an image to a scroll bar

1. Start by creating a div just like you did the last one.
 <div

2. Then add in your size specifications and overflow type.
 <div style= “height: 500px; width:600px; overflow:auto;”>

3. Here where you add in your image source instead of text.
<img src="turtle.jpg" source="turtle.jpg" />

4. Don't forget to close your div off after so your finished code should look like this:

<div style="overflow: auto; height: 100px; width: 200px;"><img src="turtle.jpg" source="turtle.jpg" /></div>



5. Press save, and see what you got!


Congrats! Good job! You did it! If I can do this, hopefully you can too!


Wednesday, September 1, 2010

Site Critique

So, I found a couple websites that caught my eye to write about for my school assignment... I'll even supply you the links to them so you can check em' out yourself.


Pretty sweet, eh? So let me tell you what I like about them. Ill focus on the Stem Cell Foundation's site.
The first thing that caught my eye when I opened up the page was the animation of stem cells replicating. It was intriguing and made me want to see what else the website had to offer.  Im not originally attracted to the topic of stem cells, but their website did make me want to learn a little more about it.

The navigation is laid out as a menu on the left hand side of the screen, which will lead you to the information you are mostly likely looking for. Interspersed are cool animations and videos relating to stem cell research.

When dealing with a medical subject, usually subdued colors are used. But with this website, they took some liberties and used a bright color palate. There is lots of white space, so when the intense colors are used, it doesn't seem as overwhelming. 

There is good fluidity throughout the website, and it seems to all connect well and seem pretty seamless. Even when just sitting at the home screen, there are videos constantly playing and people moving, giving it a good sense of action. Since the main point of this website is to call the viewer to action, I think this is a pretty good relationship they have building.

The type is all very simple and clean looking. With such fluidity in the images and animation, it is important to have that structure there with the typography. The fluid stem cell shapes throughout the whole website create an appealing repetitious motion that is fun to navigate through.

This site has a pretty wide audience it is built for, most all adults. With such a generic audience I think they were successful in making their site to appeal to a wide range of people. Its basic but with a punch of design added in. When viewers linked to this website they could find what they were looking for: How to help with  the cause of stem-cell research, how to donate, or just to  hear stories of those affected by this research.

I wish I had some cool websites I have made like this. But I guess it will just have to be wishful thinking for now... One day Ill be cool like that. 

So we have a website design that we are starting in class here pretty quick. Im not exactly sure what I'm going to do mine on yet. Maybe something on living the small town life, since, hey that's what I do. Or maybe about cats. ok, maybe not. Actually, let me just think about that for a little while longer. Ill let ya know what I come up with!