Taking All Things into Consideration

Ok, to answer some questions about how I did the site I will do this in a couple posts because I have to go back through my work and figure out what I did. (I am posting this and updating as I go through the site).

My goal with lishlindsey.com was to challenge myself by working with a couple new programs demonstrated in CAI class and incorporate the skills learned in last semester's Tech class. My old site (geocities.com) was done by hand using html coding, so I wanted to keep the clean look with easy navigation but with some added flare that only flash can do.

So let me talk about the specifics.

Books, Tutorials and Such
The programs utilized were the Adobe Suite 2, specifically Photoshop and Macromedia Studio 8, specifically Dreamweaver 8 and Flash 8. I also worked with Audacity to edit the convert all sound clips. The graphics were from Full Moon Graphics, one of my favorite sites out there.

In class we were given excellent tutorial instruction on using these programs, but I also spent much time online and ended up purchasing resource materials since there is so much more I want to learn to do. Some favorite books I used were the Adobe CS2 for Dummies, Macromedia Studio 8 for Dummies, Macromedia Flash 8 Bible, Dreamweaver 8 Bible and Photoshop CS2 for the Web Hands-On-Training. Some interesting online sites were Tutorialized.com, Mccannas.com and Entheosweb.com. There were many more, but I think you get the idea.

Hosting Information
The hosting information is as follows. For my geocities site I did upgrade awhile ago so I would not have any ads on the page. That is about $4 a month. My flutespace site is a free geocities site. My new domain is through godaddy.com and my total was around $22 for two years which includes a $6.00 fee to make it a business capable site and then there was some $3.00 discount which was from signing up for two years. My site is hosted by lunarpages.com but at a reduced rate because I am piggybacking on my friend's account. In total I pay $30 a year to have my site hosted there. I believe for my friend his total is $170 per year for all 4 sites he has. I guess you can say they are bundled. I get tech support as well as email addresses. Right now I am only using lish@lishlindsey.com but I could have anything@lishlindsey.com. The ftp program is aceFTP which is freeware.

Back to the tools used to build this site.

To create my main.swf movie, I used one main timeline, rather than multiple scenes so I could manipulate my information easier. The background, heading, content, side markers, actions, etc. all have their own layers. I wasn't sure if there was a better way of getting rounded corners of the textured background graphic, so I just made a mask layer with rounded corners and made sure the swf's background matched the html file's background.

The majority of text I used is Blackadder ITC at 25 for the menu with some variation on the contact page. The smaller gold font (#ff9900) is Franklin Gothic Medium at 12. The original size was 640px x 480px, but since I couldn't fit in as much text information as I wanted, I ended up changing it to 1024px x 768px.

Hot Tip
I found that the snap to, rulers, grids and align and distribute panel were essential to organizing the site. I highly recommend them!

Menu Markers and Text Buttons
The marker was tricky because I wanted to have the text be a button, but I also wanted to have some other type of visible action to happen when a menu button was clicked. I used the button that was provided in the button library and manipulated its shape via Photoshop. You can see that the marker will show you which menu item is selected since the text button returns to it's original color. To make the marker move, I just inserted a keyframe, dragged the marker and inserted the next keyframe.

To create the menu buttons I converted all text into button symbols. When selected, I inserted a blank keyframe on the hit frame. I used the onion skin button to see the text so I could place a hit area over the actual text. The free transform tool was helpful to create a hit area big enough for the longer words. The hit area itself was converted into a graphic symbol. After placing the hit area over the text, I inserted an identical keyframe as the one on the hit frame on the over state of the button. Then I changed the text color to gold so I would see a change when the mouse was over the button. The one step that I constantly forgot was to add the actionscript so that the marker would work with the text button! An example of the script is: on(release){this.gotoAndStop("links"); I made sure that I had a separate layer with just the marker frame names set up with keyframes so that this would work.

Other Stuff
The moving text pages were all motion tweens and the photo album was also created by using different frames and actions on the buttons to navigate from one picture to the next.

I also included a component text area for my concert schedule.

Overall I tried to incorporate many different things into this site. From here I have an udea what works and what I could add to it in the future. Check back because I might just blog about the additional changes.