A Brick Wall

This is the point where I came to a monumental brick wall in the development of my website, with a problem, which could only be solved by starting the website pretty much from scratch. The problem is that the way my website was coded in Flash, all of my content images were loaded into the file at once, but their transparancy changed depending on which project was selected. Because the website moved around from one page to another, Flash had to move every single image at once. Because there was a function to operate the movement of each item at every frame. And the website was set at 32 fps, it meant that there are a huge amount of calculations running per second, which mean that every new bit of content I added caused the entire thing to slow down.

Because my website is effectively broken, I would have to spend hours going back over the code and changing everything. This drew attention to a very important point, which I think in the long run I will actually benefit from: Flash is NOT the best program to create this website. I spent hour upon hour coding the website, copying and pasting and editing code, thinking that if one piece of code worked then I could use that an andless amount of times. Although logically this is correct, I never took into account that Flash may not be fast enough to run the .swf, meaning that the very foundation of the website and every bit of code I had put in from the moment I started working on the website in Flash was doomed to fail.

In an ideal world I would've had the time to pick up and learn some new skills in html, css and javascript and would never have need to use flash to code my site. My thinking was that the amount of time it would take me to simply learn the skills necessary to code my website before even been able to start it, I could've finished my site in Flash and get it looking and functioning correctly as a proof of concept to show how my idea was. Looking back, it may have just been easier to learn just enough of the technical skills to be able to put something together, which is smoother, less code heavy and complete, but on the other hand I may not have had enough time. I think my next step will be to learn how to use jquery over summer and code my website in my own time. I think the fact that the workload for a 10 credit module is 100 hours, learning 3 entirely new coding languages was just not feasable and although in the end I came to an irreversable problem, with which I couldn't have predicted, I still feel that my final example shows the way the website navigates and the graphical style of my brand identity and can definitely give the user an idea of what the website would be like, were I able to fill in the blanks without completely breaking my website.

Here are 2 versions of my website. I have uploaded them as zip files, which contain a html file and a swf file. I would recommend opening the html files so it can be seen in its intended context.

Here is an earlier version that works at the correct speed
Here is the later and sadly, final version, which unfortunately could simply not progress any further.

Second Design

I went back and used some of the textures from the paper I scanned in and put them into my website. I much prefer this look as it looks a bit softer than the previous design.

First Design

This is my first design for the actual aesthetic look of the website. I wanted to go with something vibrant and colourful, which would reflect the style of my game, which I wanted to use as my main piece. It was originally meant to look almost like a comic book but then I steered towards making it look like an old poster from the early 1900s. Perhaps a circus poster.

Arrows

In this wireframe I have put in the arrows and made them move the content as a scroll box and a couple of arrows to navigate through content. It looks rough but its just to show how navigation will work. You can only select the top 2 projects and I have only put 3 images in just to make sure the code works.

Animated Devil

In my next wireframe I have added the animated paper devil from my previous post. I also made the image of my face look like a stamp, however I really don't like the look of it as it makes it look like a highschool french textbook.

Interactive Head

in my next wireframe I have made a bit of code, which goes to a different frame of a movieclip depending on the mouse cursors position, in relation the clip itself. I then filmed myself looking around in various different directions, then used the best keyframes to make up a movieclip. Each frame of the movieclip is looking in a different direction so that it creates an effect, which makes it look like my head is following the mouse cursor around the screen.

First Wireframe

Here is my first wireframe. It basically shows how I want the site to navigate from one section to another. I wanted to have the site look like a wall of posters, with each poster representing a different section. The viewpoint of the person viewing the website would be like a camera panning around the "wall".

Here is just a picture of a wall of posters to give an idea of the kind of thing I wanted.