Bunkers Beach Café

On the brief that I was set there were also a set of links to other café and restaurant websites that the client thought I should look at for inspiration and as examples.
This website, Bunkers Beach Café, is the first on the list and the comments that came with the link are as follows: "this has a modern style, plenty of space and looks professional. However it does not give a feel of the food or place itself."
I would agree with this statement. The website itself is very nice, it's professionally done, clean, easy to navigate and stylized well. I would also agree the feel of the place is lost somewhat in it's design, but the images used are good and it's very hard to get a website that really portrays the true feel of a place.

I liked the way they had set out the news section. It was clean and concise. I would be more than happy if I can find a method for doing similar with the Food Dreckly website.

WordPress Skinning

One issue about WordPress that got me at this stage was the theme system. Although it's very easy to use, very easy to install new ones, very easy to customize it was always about to receive a major overhaul in the coming months. Due to this I didn't want to stray too far from the default theme which was highly integrated with the WordPress CMS.



This is a screenshot from the example page from the WordPress homepage. It shows the default theme in it's relatively default state. Although this theme isn't at the height of beauty it is very well made and provides a very decent starting point for creating my own customization of this theme. There is also a version 2 of this theme on the way that I tested briefly. Although buggy at this stage "Kubricks" next update will be "K2" and from what I could see it is very impressive. It adds massive functionality to the theme editor within the CMS and would be, once released, the major next default theme for the next release of WordPress. So given all this I decided I would go with Kubrick for now, hoping that this leaves me in a better position to transfer over to the new version of WordPress.


The above image is that of K2, taken from the K2 website. Although it looks quite plain in it's default state it's the back end stuff that I'm more interested in as it integrates itself with WordPress much more and makes the entire site, including the CMS behind it much easier to use.

WordPress Installation

Once I made backups of all the old Food Dreckly files I installed WordPress. Although it took a long time to upload all the hundreds of small files the installation was incredibly easy. Installation was as simple as creating the correct MySQL database, dragging and dropping the WordPress files onto the server using FTP and then running the built in installation module.

The entire process took no longer than 5 minutes, as was detailed it would do on the website.
Once installed I could take a look around the interface which was easily navigated and shouldn't provide too much hassle to anyone when wanting to make additions and changes to the content.

WordPress

The next project I looked at was WordPress. This is a project that hasn't been going for as long as PHPNuke for instance but still has something under it's belt. It also appears a lot under the suggestions for easy to use CMS that can be easily skinned and managed by less technically astute users.

Skinning of the default theme used in WordPress, from what I can tell from testimonials on other websites seems to imply that it's easy which is a bonus.
Although WordPress is a lot more of a blog site it is also apparent that you can turn this around quite easily to make it a fully featured website as it allows for not only a posting system like Blogger, which would be useful for news, but also a 'page' system for creating proper website pages. This means that with some simple tweaking I could remove most of the blogging functionality and create a very easily update able website.

Also given the massive very open source orientated community there are a lot of free themes, plugins and add ons that would expand what can be done with this system massively and without too much hassle.

So far WordPress has impressed me the most and so I will install it to the web server as soon as I can in order to test it. The installation process is supposedly very easy to use and integration with MySQL is also easily made as the host that Food Dreckly use provide cPanel which makes life easier.

Another CMS

Not overly impressed with the first lot of content management systems that I looked at I decided to keep on going with my search. The first I stumbled across (from the PHPNuke website forums actually) was Post-Nuke.

Post-Nuke, from what I can tell is quite a new project and I'm always wary of going with something that's not had time to mature. I'm also very easily put off a project and from what I could see it didn't set itself out from the crowd at all.

The thing that put me off the Post-Nuke project the most was that they included the most horrific links to websites that used the Post-Nuke system. As can be seen below!



None too impressive really, given that these are the showcase websites. Although I am aware this doesn't speak too much about the server side code that drives it, but instead says a lot about the designers of the websites they used as example. I'm still too put off to look into it any deeper.

Server Integrated CMS

Theres loads of available options of course, picking one shouldn't too much hassle since most of the advanced functionality of these highly developed CMS will be lost on the Food Dreckly website. With that in mind I decided to pick the one that seems to me the easiest to navigate and use.

The two that I looked at firstly were:

• Drupal
• PHPNuke

Drupal is very advanced, not to say it's overly complicated. This package is used around the world for projects ranging from corporate to personal websites.


Although the general ease of Drupal to use is obvious I decided that with such a massive array of options available to the admin, presented in such a way that isn't all that obvious sometimes, that Drupal would be powerful but possibly not the best option.


PHPNuke is a CMS that a few people I know use and love. However it's layout isn't nearly as good as that of others, even Drupal. One of the key aspects that I need to keep in mind when choosing is that it has to be very easy to navigate when using the back end admin panel.


There's also the fact that I have issue with it not being entirely open source and requesting that you buy a license to remove copyright text. Personally I'd rather support an entirely open source project that offers a friendlier outlook.

The Problem With Tumblr

Like I said in the previous post there are some issue's with Tumblr which I don't think I'm going to be able to overcome. The lack of formatting options for the posts and the style in which it's used to upload images will make it a bit too featureless.

I also sent the Tumblr support team a quick question about embedding individual posts into websites. Being that I couldn't find any method for doing so other than to embed RSS. The following is my email:

Subject: Embedding individual tumblr posts

I'm looking to create a website that has an easy to use CMS to control news items / page contents etc in an easily navigated environment. My college tutor recommended I play around with tumblr for this and now I'd really like to use tumblr as the backbone for my college project website. I've found how to embed my tumblr site feed into my website but is there a way to embed individual posts? So that I might be able to control various page contents, over various different pages, from my
tumblr dash board.
If this is at all possible could you please show me how as I love tumblr and would want to continue using it!

Thank you for your time,
J.O.

In reply to this email:

Subject: Re: (Case 6881) Embedding individual tumblr posts

Hi, Jako. That is not possible at this time. My apologies. I can't tell you how much we appreciate your support and feedback. I've passed your suggestion along to our development team.

Please let me know if there's anything else I can help you with.

Thanks for using Tumblr!

Marc   :-)

I guess this rules out Tumblr for the time being, I shall however continue to use it and keep an eye on the updates it receives in future. There's a lot of potential behind Tumblr, but for what I need it in this case I think I'll give it a miss!

Tumblr

Tumblr is good, very good. Having a play about with I can really appreciate the ease of which content can be added to your Tumblr blog. However it does have some issue's which may cause a bit of a problem. Firstly it is again possible to embed Tumblr into your website using feeds, but these cannot be formatted which is an issue.

There's also the issue of how it blogs, that is to say that while it does blog text and can be used to blog images it cannot be used to blog more than a single image and isn't designed to blog large text and image posts. This makes sense in it's scrap book theme but could cause serious problems for what I am going to be needing it for.


Adding posts:

Adding posts to your Tumblr is straight forward, I would even go as far as saying it's also the easiest system of blogging out there. With no bullshit to contend with it's a system that anyone could get to grips with following the shortest of tutorials, which fortunately Tumblr supplies.


Playing Around:

I thought I might be able to use this system still by creating a homepage on the Food Dreckly server and then skinning the Tumblr blog to look similar so that the homepage could link to the various Tumblr posts individually and then Tumblr would link back to the Food Dreckly homepage. This would allow for a very easy method of updating the website.

2 Blogging Websites

To kick things off I looked at 2 blogging websites:

Blogger

While using blogger would be possible, it is seemingly only possible by embedding RSS feeds into the website. RSS feeds are hard to format and annoying to implement. Although Blogger is a very good blogging website, the support it has for embedding it's posts in other websites seems to be fairly none existent, so I dropped this as a choice fairly soon after looking into it. I also feel that steering clear of Google applications is always the best approach in life. Using a blogging application like this can also look a bit messy and I feel it is somewhat of a cop out. In the long run I'd want something more integrated.

I could have however used a blogger blog site entirely. By skinning it cleverly and using labels to mark pages and then using the fooddreckly.com domain name to give it a more Food Dreckly inclusive feel. We'll see if I'll return to this option at a later date, but I doubt I will.

Tumblr

This is a website that was suggested to me by my tutor.

This is a very cut down version of your usual blogging website in so much that it is designed more with a scrap book appeal to it. The idea behind Tumblr is to create a system of incredible ease and speed with which to blog with. However, despite Tumblr being a very easy system to use it does have a lot of very advanced features behind it. Of course it's greatest appeal is it's ease of use, given what I need of it to fulfill this brief.

Content Management Systems

It is clear that the best approach in creating a new and improved website would be to base it on a well kept and already existing CMS that would allow for easier updating, preferably entirely workable by a less technically literate person. This would allow for the website to be completed and for that to be the end of involvement to the most part by the website designer, handing over the day to day maintenance work directly to the client.

Although the website hosting plan that is being currently used is of quite low cost and thus low bandwidth + available space, the actual service it provides is fairly feature filled with cPanel pre-installed and PHP/MySQL/ASP.net support and so forth. This means that although the website there currently doesn't make use of any of these features it would be more than possible to do so.

So what do I require from a CMS? Really the most important thing I need is a simple way for myself or a member of the Food Dreckly staff to make changes to any one of the pages quickly and without much technical jargon between them and the update.

When first looking into various CMS I started thinking how I could use the original website template and replace the content of the pages it loaded to that of blog posts from an external blog hosting website. This would not only reduce the amount of bandwidth that the website would require, but also be a well kept and easily manageable system to get to grips with.
Firstly I had a look at using blogger for a system of blogging directly to the website. Or rather the website retrieving the blog posts.

Analyzing Original Website

From receiving the brief and analyzing it for a summery I decided to have a look at the original page and note what I thought of it to help me work out how better to improve it.

This page I created a year or so ago now and was designed originally to be an easily navigated, simple and clean website that would help drive trade to the clients email address and allow for viewing public to gauge simple information about the Food Dreckly service.

This website is also situated on a low cost web host pay plan that offers a smaller amount of bandwidth and space. With that in mind this original website was created to not push the limits of these server restraints. A small array of imagery was used and an overall low page size to decrease bandwidth usage and thus potential cost.

The biggest issue this website has was the way in which it had to be updated. Because I made this website entirely using HTML and CSS and without any hint of a real CMS, the updating of the news section and the website in general became an issue. While it was fairly simple to update the news it was a very tedious chore to keep it both updated and stylized the way they were required to be. In order to update we had to enter the new dates into a table using raw HTML and then manually alternate the colors of the different cells by hand, finally uploading the updated file via FTP. A lot to do if your not good with computers.


While it was possible for a short while to do these updates by hand it was deemed that a more client friendly approach was needed for a future release of the website.

The client had also complained about the shear bulk of spam emails that she was receiving. Despite placing various junk mail filters on the email account using programs such as 'Spam Assassin' it was made clear that a better approach was required.

Although this website did have it's faults I was a fan of it's clearly set out interface, very simple navigation system and bold layout. When viewing websites I very rarely get on with a site that over complicates itself in any form and feel that the simplest and clearest approach, with as few sprawling links and cluttered imagery, is best. In any future website design I would quite like to keep within the same theory of design.

In conclusion it's really the back end of the website that needs to be given a work over and the actual aesthetic of the website is not far wrong as it is. There needs to be improved functionality and this really will be mostly a server side job.

Analyzing the Brief

Once I had the brief I set about trying to condense and summarize what it was asking of me. I figured the best approach to doing this would be to bullet point the requests. This will help me greatly in working out what I need to be getting on with.

Neccessary:

• Improved layout
• Simplified updating
• Events viewer
• To show 3 distinct arms to the business
• Picture of the café
• Outside catering page to include image sample of food and testimonial's page
• Fast food / Farmers Market page to include images, sample menu and link to the Farmers Market website
• Better suppliers links setup
• Accessibility specification check
  
• Better Google listing

Not necessary:

• Complete overhaul

Pages Required:

• Home page
• Sample menu
• Outside catering
  
• Sales day page
• Farmers Market
• Third Friday Night and 'other' events
• Contact page

Aesthetic:

• Clean
• Clear
• Simple
• Blue and maroon color theme
• Logo complimenting colors

Other items that the client wishes to receive:

• The website itself – as a series of HTML pages;

• Documentation - a list of the pages along with a map of how they fit together;

• Clear information on how Food Dreckly staff can update and manage the site in the future

• A clear indication that the code has passed accessibility requirements.

The Brief Set

For our Personal Development project we were asked to obtain or create semi professional briefs. Because I felt that a previous project of mine was in need of a major over haul from a server side point of view, and because the client felt so also I asked for a brief off of them. The following is what they sent me:

---------------------------------------------------

Website Design Brief

Overview

Food Dreckly currently has a website which is in need of revision and updating. We do not feel that a complete overhaul is required but definitely new text, changes and additions to the current web page layout and better links to other sites. The website is promoted in all our publicity and therefore it is of paramount importance that in the future a ‘non techno’ member of staff can easily update the site to reflect changes to the business.

Aims and Objectives

Food Dreckly is a proactive food business with a growing reputation for quality food. We would hope that our website will act as a ‘shop window’ for the business providing potential and existing customers with a ‘taste’ of what we do and how we do it. To this end we want the site to demonstrate the Food Dreckly:

• ethos – the use of locally sourced, high quality and seasonal ingredients, often organic and where that is not possible the use of fairly and ethically traded goods.
• attitude – relaxed with a touch of humour, knowledgeable and enthusiastic about the food on offer.
• menu – high quality, traditional (with style) and innovative dishes, affordable;

Audience

The intended audience for the website is likely to be:

• existing customers - wishing to find out about events, sales days, outside catering and contact details.

• potential customers – those who have read about us in marketing, promotional or media material or heard about us from friends.

• Other business’ that are looking to sell us their products or services or create mutually beneficial links. This might be potential suppliers, other tourism business’ or even our competitors.

• We recognise that most of our clients are professional people who are looking for high quality and healthy food in an informal atmosphere. This group also eats out at other more expensive venues and has quite high expectations of service. The age range is probably late 30’s upwards and includes an increasing number of retired ‘comfortably off’ customers.

Design Specification

Clarity, cleanness and simplicity are crucial to the feel of the site.
Font - We have an existing logo using the colours blue and maroon. Staff uniforms include blue polo shirts and maroon aprons. Any font or colour used needs to complement this existing logo and colour bias.

Picture – we have a small library of pictures that can be used. The current site only uses pictures of food. Pictures of the café, the farmer’s market food stall, suppliers, Dartmoor and the Tamar Valley area and outside catering events should be included. The use of high quality pictures is very important as we are appealing to professional and often artistic customers.

Other Café Websites

http://www.bunkersbeachcafe.com.au/breakfast.html - this has a modern style, plenty of space and looks professional. However it does not give a feel of the food or place itself.

www.porthminstercafe.co.uk - an example of a good title bar but a far too crowded and messy layout

www.venuscompany.co.uk - an example of good information but very old fashioned design

http://www.wilfs-cafe.co.uk easy to navigate, fast and informative but no finesse or artistic merit

http://www.blue-bar.co.uk a modern feel and relaxed but still a bit messy

http://www.watergatebay.co.uk/thebeachhut - slick and possibly a bit too clever for its purpose

Functionality Specification

Navigation: We already have a clean and functional title bar that will helps the customer to navigate the site quickly. However the quality of the logo is poor and takes up too much space, it is dwarfed by the strong font of the strap line.

Home page the existing page needs to clearly show that there are three arms to the business, these are: the café, outside catering and Farmers Market stall. There also needs to be a ‘Contact us’ provision. We suggest using a picture of Dartmoor or the Tamar Valley on the home page to reinforce our pride in the area.

The café opening page to include: existing text to set out our ethos, a picture of the café, a map to the venue and opening times, this page should have links to a:

1) sample menu,
2) Third Friday Night and other events
3)Ward and Chowen cattle sales days
4) details of media coverage
3) contact us

Outside catering opening page to include existing text and picture of a buffet or sample dishes. 1) A link to testimonials from past customers would be desirable 2) contact us
Fast Food /Farmers Market opening page to include picture of the stall in action, sample menu and link to Farmers Market website.

Supplier’s links to our supplier’s websites need to be better integrated into the text
Accessibility Specification

The current web site is no longer easy to access on Google, the inclusion of the Food Dreckly name on the web sites of others has pushed our own website down the list. It is very important that the search engine ranking is increased to improve our accessibility. The work of the designer will not be considered complete until the website is checked for accessibility using one of the popular tools

Deliverables

By the end of the contract the following work must be delivered:

• The website itself – as a series of HTML pages;

• Documentation - a list of the pages along with a map of how they fit together;

• Clear information on how Food Dreckly staff can update and manage the site in the future

• A clear indication that the code has passed accessibility requirements.

Budget

The budget for the website is very limited and we do not wish to incur expensive after care, hence the lack of interactive elements. To this end we would require the website designer to include all likely costs within the work including any changes we make during the process.

Copyright Statement

We require a clear statement of the ownership of copyright over the pages, code, content and images created or used in developing the site. In particular, you should ensure that rights over the coding of the pages remain with Food Dreckly.

Dont Click

http://www.dontclick.it/

We’ll miss you Pandora

Well as we were all expecting the end of Pandora is drawing near in the UK. Tim Westergren, the founder of Pandora has issued an email notification of the impending blocking of UK IP's to the Pandora website after negotiations between Pandora and the various alliances and organizations that pretend to protect the music industry push impossible to meet royalty costs on the playing of free to listen web radio. It was an astounding project that got me through a lot of dull times with the fast streaming of quality music. This is a prime example of a service that had found a solution to free music without the need to pirate and now that it's gone, I guess I'll go steal again. The following email is what Tim circulated:

à

hi, it's Tim,

This is an email I hoped I would never have to send.

As you probably know, in July of 2007 we had to block usage of Pandora outside the U.S. because of the lack of a viable license structure for Internet radio streaming in other countries. It was a terrible day. We did however hold out some hope that a solution might exist for the UK, so we left it unblocked as we worked diligently with the rights organizations to negotiate an economically workable license fee. After over a year of trying, this has proved impossible. Both the PPL (which represents the record labels) and the MCPS/PRS Alliance (which represents music publishers) have demanded per track performance minima rates which are far too high to allow ad supported radio to operate and so, hugely disappointing and depressing to us as it is, we have to block the last territory outside of the US.

Based upon the IP address from which you recently visited Pandora, it appears that you are listening from the UK. If you are, in fact, listening from the US, and are denied access from Pandora on or after January 15th please contact Pandora Support: pandora-support@pandora.com.

It continues to astound me and the rest of the team here that the industry is not working more constructively to support the growth of services that introduce listeners to new music and that are totally supportive of paying fair royalties to the creators of music. I don't often say such things, but the course being charted by the labels and publishers and their representative organizations is nothing short of disastrous for artists whom they purport to represent - and by that I mean both well known and indie artists. The only consequence of failing to support companies like Pandora that are attempting to build a sustainable radio business for the future will be the continued explosion of piracy, the continued constriction of opportunities for working musicians, and a worsening drought of new music for fans. As a former working musician myself, I find it very troubling.

We have been told to sign these totally unworkable license rates or switch off, non-negotiable...so that is what we are doing. Streaming illegally is just not in our DNA, and we have to take the threats of legal action seriously. Lest you think this is solely an international problem, you should know that we are also fighting for our survival here in the US, in the face of a crushing increase in web radio royalty rates, which if left unchanged, would mean the end of Pandora.

We know what an epicenter of musical creativity and fan support the UK has always been, which makes the prospect of not being able to launch there and having to block our first listeners all the more upsetting for us.

We know there is a lot of support from listeners and artists in the UK for Pandora and remain hopeful that at some point we'll get beyond this. We're going to keep fighting for a fair and workable rate structure that will allow us to bring Pandora back to you. We'll be sure to let you know if Pandora becomes available in the UK. There may well come a day when we need to make a direct appeal for your support to move for governmental intervention as we have in the US. In the meantime, we have no choice but to turn off service to the UK.

Pandora will stop streaming to the UK as of January 15th, 2008.

Again, on behalf of all of us at Pandora, I'm very, very sorry.

ß

Lost Planet

Again, another award winner from Horizon. Again, nothing too splendid. I can appreciate that the best approach to creating a game website is to imitate the game itself in style, of which most achieve. However I don't think it needs to be done in such a bog standard manner. It may well come down to budget but I don't think this is any excuse to keep on churning out website's that are quite literally identical bar a style switch, which is very reminiscent of just switching to a different CSS style on a template.

This website is very similar in style to the EA Game's release "Battlefield: 2142". The thing that I quite liked about this website was it's thermal indicator. Basically this is a part of the website that encourages the user to boost his 'thermal energy levels' by looking through the website. Once your 'levels' have reached a high amount you get to see something or other.
However with the website seemingly not loading 90% of the time and there being no way of reloading previous pages I got stuck with loading bars almost all the time and so gave up. This idea however was a great plan to get users to fully explore a website that they might otherwise move along from quite soon.

Civ City: Rome

This computer game that will be released shortly hired a team of designers who go by the name ROKKAN to create a promotional website for the game. They won an award for their website in the Horizon best Flash website category.

I'm wonder why though. The website doesn't offer any new approach to creating a Flash based game website. This is a very standard affair with nothing any more interesting than a few dozen others that I've seen.

Again though we find ourselves waiting silly times for content to load. I just can't seem to find justification for the load times on this website as there isn't all that much to see after each loading period.

This is the typical loading bar, a pillar being constructed. You get to see this a lot on this Flash website.

I do quite like the background movement going on, for instance in this shot the people are building on the left hand side of the screen whilst you read about the game contents.

OK so while the website isn't fantastic at any stretch of the imagination it does look all very professionally created with a very unified style that seems to tie in perfectly with what the game itself offers. This maybe exactly what they were after, but it all just reminds me of the old Age of Empires website + game which makes the entire product look dated and as if it offers nothing new.

Medieval Total War

While the Civ City may not have created a very impressive website there only seems to be two main approaches to creating game website's. Either a very heavily Flash orientated approach or in my opinion the much more desirable HTML website with Flash to back it up visually. A good example of this would be the Medieval Total War website. Although it's not a stunning example of interactive design is achieves perfectly a highly and easily updatable website that visually is more than enough.

You also see a lot less loaders on this example. What content does need some loading is also content that isn't essential to the viewing of the website. This is my preferable direction in a website.

BMW Transact

I love the clear design and simple layout of this website. Ever increasingly I've come to realise less is more. With all this web 2.0 interactivity and design I really feel the website's that speak to me the most are those which don't try to bombard me with choices.

On a different note I found the loading times of this website very annoying. Everything was a quick simple flash website with little to load but the main content, which were high res videos. Videos that, for their size, needn't be quite so high res.

Boost Mobile Rock Corps

Although this website was very busy it managed well to keep itself coherent. The duel Flash, HTML design worked well and complimented each other well which isn't too often.

This website must take a lot to keep updated and in terms of faults I found the fact it reloaded itself whenever a HTML link was clicked quite annoying but the load times weren't bad and the important information was there first to be viewed.

The visual styling of the website wasn't anything ground breaking but it managed to stay consistent and seemed to fit the content and the style of writing perfectly.

Jelly Jumper

This is a website that Mule showed me earlier. It's to market the Logitec keyboards via a fun game that lets you take control of a jelly man and gets you to jump around a keyboard onto coloured keys. It's actually really good fun for such a simple game. But simple things done well are often the best things. As I've said in prior posts, simple and well done is best. In projects I often complicate things too much for myself and then in the end I always have a good idea which hasn't quite reached it's full potential. I'm trying to train myself to take on less and achieve more. This is a prime example of that ethic.

NTH Degree FX

I came across this design team whilst surfing a good design website of which I can't recall the name. However It was strange for me to find this design group with an online portfolio that didn't match the level of their work. This group, NTH, create high end business websites. However, they're own portfolio was very poor in comparison. The quality of work looked rushed and somewhat low grade with some dodgy and plain animations and a very mediocre style Flash site. However they had a nice style going as can be seen in this from the site.


Some of the groups they've worked for are Disneyland:


And the Hard Rock Hotel:


However the design team, using their portfolio site, do demo their work well with some nice demo reels dedicated to individual projects.

An Experiment in Particles

A simple experiment into a particle explosion that I thought would be interesting to create in search for ideas surrounding the project.

View my cursor explosion here.

View my firework explosion here.

Code:

Moon Orbit

This project is in continuation of a tutorial of Flash AS 2.0 using some AS 3.0 practices given to us by Anna.

Essentially the tutorial was to create a moon orbiting the Earth within Flash.

I thought it would be interesting to extend this to being able to play with the settings that determine the orbit trajectory while the file is playing. I allowed the user to change the numbers that govern the trajectory, speed with the inclusion of the Earths own orbit.

Please view here.

This was a fun excursion into some techniques I hadn't before tried. For example the inclusion of the components that Flash offers as default in order to control the settings of the orbits.

Code:

angle = 0;
centerX = stage.width/2;
centerY = stage.height/2;
centerpos = {_x:300, _y:250};
i = 1;
earthSpeed = earthSpeed_com.value;
moonSpeed = moonSpeed_com.value;
earthXRadius = earthXRadius_com.value;
earthYRadius = earthYRadius_com.value;
moonXRadius = moonXRadius_com.value;
moonYRadius = moonYRadius_com.value;
var earthSpeed_com:mx.controls.NumericStepper;
var moonSpeed_com:mx.controls.NumericStepper;
var moonXRadius_com:mx.controls.NumericStepper;
var moonYRadius_com:mx.controls.NumericStepper;
var earthXRadius_com:mx.controls.NumericStepper;
var earthYRadius_com:mx.controls.NumericStepper;
var nstepListener:Object = new Object();
nstepListener.change = function(evt_obj:Object) {
trace("Value changed to "+evt_obj.target.value);
earthXRadius = earthXRadius_com.value;
earthYRadius = earthYRadius_com.value;
moonXRadius = moonXRadius_com.value;
moonYRadius = moonYRadius_com.value;
earthSpeed = earthSpeed_com.value;
moonSpeed = moonSpeed_com.value;
};
earthSpeed_com.addEventListener("change",nstepListener);
moonSpeed_com.addEventListener("change",nstepListener);
moonXRadius_com.addEventListener("change",nstepListener);
moonYRadius_com.addEventListener("change",nstepListener);
earthXRadius_com.addEventListener("change",nstepListener);
earthYRadius_com.addEventListener("change",nstepListener);
var moon_mc:MovieClip = _root.attachMovie("moon_mc", "moon_mc", i, centerpos);
i++;
var earth_mc:MovieClip = _root.attachMovie("earth_mc", "earth_mc", i, centerpos);
earth_mc.onEnterFrame = function():Void {
this._x = 300+Math.cos(angle)*earthXRadius;
this._y = 200+Math.sin(angle)*earthYRadius;
angle += earthSpeed;
earthpos = {_x:this._x, _y:this._y};
i++;
var trail_mc:MovieClip = _root.attachMovie("earth_mc", "earth_mc", i, earthpos);
trail_mc.onEnterFrame = function() {
this._alpha -= 1;
this._xscale -= 2;
this._yscale -= 2;
if (this._xscale<=0) {
this.removeMovieClip();
}
};
};
moon_mc.onEnterFrame = function():Void {
this._x = earth_mc._x+Math.cos(angle)*moonXRadius;
this._y = earth_mc._y+Math.sin(angle)*moonYRadius;
angle += moonSpeed;
moonpos = {_x:this._x, _y:this._y};
i++;
var trail_mc:MovieClip = _root.attachMovie("moon_mc", "trail_mc", i, moonpos);
trail_mc.onEnterFrame = function() {
this._alpha -= 0.75;
this._xscale -= 2;
this._yscale -= 2;
if (this._xscale<=0) {
this.removeMovieClip();
}
};
};

The Big Box

The 500x500 banner was always the one I dreaded the most. My first plans for it were lending towards a dress up droll style game. However during the time I spent creating the other two banners I came to realise that I didn't think it was a worthy exploration. So instead I turned my attention towards a mini version of the Marvel digital comics comic viewer. A mini flash application that lets you read a sample comics. Roughly about 5 pages long each page is 100k and loaded as and when the user requests the page. I can't show you how it works here so you'll have to make do with some screen shots. It's unfortunate but I just don't have the web space that is required in order to uploaded the various different files that this banner uses.

This was a good project, even if it didn't entirely succeed, which can be read about in my evaluation (to follow sometime shortly).

The reason I'll label this as a decent attempt is simply that it taught me some incredibly useful techniques that I just hadn't grasped before, in particular setting off functions in a different manner and the use of XML within Flash.

 

Code:

//xml
function loadXML(loaded) {
    if (loaded) {
        xmlNode = this.firstChild;
        image = [];
        description = [];
        total = xmlNode.childNodes.length;
        for (i=0; i<total; i++) {
            image[i] = xmlNode.childNodes[i].childNodes[0].firstChild.nodeValue;
            description[i] = xmlNode.childNodes[i].childNodes[1].firstChild.nodeValue;
        }
        firstImage();
    } else {
        desc_txt.text = "unable to find file!"
        content = "file not loaded!";
    }
}
xmlData = new XML();
xmlData.ignoreWhite = true;
xmlData.onLoad = loadXML;
xmlData.load("images.xml");
//variables
//listeners
listen = new Object();
listen.onKeyDown = function() {
    if (Key.getCode() == Key.LEFT) {
        prevImage();
    } else if (Key.getCode() == Key.RIGHT) {
        nextImage();
    }
};
Key.addListener(listen);
//buttons
reAlign_btn.onRelease = function(){
    reAlign();
}
previous_btn.onRelease = function() {
    prevImage();
};
next_btn.onRelease = function() {
    nextImage();
};
sizeInc_btn.onRelease = function() {
    sizeInc();
};
sizeDec_btn.onRelease = function() {
    sizeDec();
};
panRight_mc.onRelease = function(){
    picture._x += 20;
}
panLeft_mc.onRelease = function(){
    picture._x -= 20;
}
panDown_mc.onRelease = function(){
    picture._y += 20;
}
panUp_mc.onRelease = function(){
    picture._y -= 20;
}
//object functions
p = 0;
this.onEnterFrame = function() {
    filesize = picture.getBytesTotal();
    loaded = picture.getBytesLoaded();
    preloader._visible = true;
    if (loaded != filesize) {
        preloader.preload_bar._xscale = 100*loaded/filesize;
    } else {
        preloader._visible = false;
        if (picture._alpha<100) {
            picture._x = (Stage.width / 2) - (picture._width / 2);
            picture._alpha += 10;
        }
    }
};
//functions
function beginDrag() {
    picture.startDrag(true);
}
function endDrag() {
    picture.stopDrag();
}
function nextImage() {
    if (p<(total-1)) {
        p++;
        if (loaded == filesize) {
            picture._alpha = 0;
            picture.loadMovie(image[p],1);
            desc_txt.text = description[p];
            picture_num();
        }
    }
}
function prevImage() {
    if (p>0) {
        p--;
        picture._alpha = 0;
        picture.loadMovie(image[p],1);
        desc_txt.text = description[p];
        picture_num();
    }
}
function firstImage() {
    if (loaded == filesize) {
        trace('done');
        picture._alpha = 0;
        picture.loadMovie(image[0],1);
        desc_txt.text = description[0];
        picture_num();
    }
}
function picture_num() {
    current_pos = p+1;
    pos_txt.text = current_pos+" / "+total;
}
function sizeDec() {
    picture._xscale -= 15;
    picture._yscale -= 15;
}
function sizeInc() {
    picture._xscale += 15;
    picture._yscale += 15;
}
function reAlign() {
    picture._xscale = 100;
    picture._yscale = 100;
    picture._x = (Stage.width / 2) - (picture._width / 2);
}

The Final Landscape Banner Design

After the excessive amount of time wasted on making lightning (as far as the progress of this project goes) I finally came up with this small and efficient little banner. It does the job, which is all I think in the end it needs to do. I'm glad I looked into the lightning since I feel it pushed my knowledge of Action Script forward but in the end I'm more pleased with this than any other attempt.

Please view it here.

Lightning

This is going to be the hardest. My intention is to have the lightning striking outwards from the finger tips of the users flash cursor and for the lightning to strike areas of the stage. However, in practice I've come to realise this to be far too hard.

The following are some of my attempts, and some of my failures. However, this has been one of the most rewarding experiments I've ever attempted. This is AS that I've never attempted before and the results were actually quite pleasing, if not what I'd attempted for at first.

It has to be said that I spent far too much time on this aspect of the project getting far too involved with code that I knew from the offset would ultimately be too far from reach.

The actual design I went with for this landscape banner is entirely different, simpler and after much deliberation, preferable.

The following are links to the hosted SWF files. At the very end of the post will be listed the code I used to get this effect.

Working lines.

Creating a moving lines.

The final attempt with some effects thrown in for good measure.

//////////////////////////////////////////

//Sorry for the formatting, Flash won't format my code properly.

//the simple code

i = 0;
fscommand("allowscale", "false");
onEnterFrame = function () {;
var line_mc = attachMovie("line_mc", "line_mc", i);
i++;
xpos1 = _root.circle1_mc._x;
ypos1 = _root.circle1_mc._y;
xpos2 = _root.circle2_mc._x;
ypos2 = _root.circle2_mc._y;
xscale = xpos2 - xpos1;
yscale = ypos2 - ypos1;
line_mc._x = xpos1;
line_mc._y = ypos1;
line_mc._xscale = xscale;
line_mc._yscale = yscale;
};

//the more complicated code

i = 0;
xPlace = 90;
yPlace = random(160);
bolt = function () {;
p -= 5;
p = 50;
glowXScale = 200;
glowYScale = 200;
for (i = 1; i < 70; i++) { ;
circle1_mc.removeMovieClip();circle2_mc.removeMovieClip();//line_mc.removeMovieClip();
circle1Place = {_x: xPlace, _y: yPlace};
var circle1_mc = attachMovie("circle_mc", "circle1_mc", i, circle1Place);i++;
var glow_mc = attachMovie("glow_mc", "glow_mc", i, circle1Place);i++;
circle1X = circle1_mc._x;
glow_mc._xscale = glowXScale;
glow_mc._yscale = glowYScale;
glowXScale -= 15;
glowYScale -= 15;
newPos = {_x: xPlace+p, _y: random(40)+10};
var circle2_mc = attachMovie("circleblue_mc", "circle2_mc", i, newPos);i++;
xPlace = circle2_mc._x;
yPlace = circle2_mc._y;
var line_mc = attachMovie("line_mc", "line_mc", i);i++;
xpos1 = _root.circle1_mc._x;
ypos1 = _root.circle1_mc._y;
xpos2 = _root.circle2_mc._x;
ypos2 = _root.circle2_mc._y;
xscale = xpos2 - xpos1;
yscale = ypos2 - ypos1;
line_mc._x = xpos1;
line_mc._y = ypos1;
line_mc._xscale = xscale;
line_mc._yscale = yscale;
//
p -= 5;
xPlace = 1;
yPlace = random(50)+25;
p = 50;
glowXScale = 200;
glowYScale = 200;
};
for (i = 1; i < 50; i++) { ;
circle1_mc.removeMovieClip();circle2_mc.removeMovieClip();//line_mc.removeMovieClip();
circle1Place = {_x: xPlace, _y: yPlace};
var circle1_mc = attachMovie("circle_mc", "circle1_mc", i, circle1Place);i++;
var glow_mc = attachMovie("glow_mc", "glow_mc", i, circle1Place);i++;
circle1X = circle1_mc._x;
glow_mc._xscale = glowXScale;
glow_mc._yscale = glowYScale;
glowXScale -= 15;
glowYScale -= 15;
newPos = {_x: xPlace+p, _y: random(40)+10};
var circle2_mc = attachMovie("circleblue_mc", "circle2_mc", i, newPos);i++;
xPlace = circle2_mc._x;
yPlace = circle2_mc._y;
var line_mc = attachMovie("line_mc", "line_mc", i);i++;
xpos1 = _root.circle1_mc._x;
ypos1 = _root.circle1_mc._y;
xpos2 = _root.circle2_mc._x;
ypos2 = _root.circle2_mc._y;
xscale = xpos2 - xpos1;
yscale = ypos2 - ypos1;
line_mc._x = xpos1;
line_mc._y = ypos1;
line_mc._xscale = xscale;
line_mc._yscale = yscale;
};
};
setInterval(bolt, 500);

Jumping to the End

Due to lack of documentation on the between effort this is the end design. Sorry for the leap. I find it very easy to get caught up in the creation of a thing and forget to actually record the progress I make.

The SWF can be viewed here

Hot Fingers

The flame is initially going to be burning from the tip of the hand in this banner and so I needed a finger from which to burn. The following are just my experiments towards this end.

This is the finger I went with. The flame will emanate from the top of it. An idea posed in class suggested that I should also turn the hardware mouse into the button press finger icon but after many attempt and searches I couldn't work out how to do this and instead went with the simple pointer.

Burning Ring of Fire

Creating the flame that the hand holds. Just some basic attempts to get it looking the way I want.

First attempt, far too chunky

Second attempt, too skinny.

Third attempt, just right!

I wanted to get the flame to touch the logo on the screen and set fire to the logo text but after hours and hours of trying and failing I decided to just encase the code that causes the burning in quotes and leave it be. As can be seen below.

As far as I can tell the code that does cause the burning 'should' work, but instead of catching fire to the text it just seems to warp the original fire and cause excessive amounts of lag due to (I'm assuming) a bad loop somewhere down the line.

onEnterFrame = function () {
if(firstRun == "go"){
fadeInText_mc._alpha += 4;
hand_mc._y += 4;
arrow_mc._alpha -= 6;
}
var flame_mc = attachMovie("flame_mc", "flame_mc", i, decalpos);
i++;
var spark_mc = attachMovie("spark_mc", "spark_mc", i, decalpos);
i++;
flame_mc.speed = (Math.random()*(5-2)+2);
flame_mc.scaleDown = (Math.random()*(6-4)+4);
flame_mc.startScale = (Math.random()*(500-400)+400);
flame_mc._x = _root.xmousepos+(Math.random()*(3))-(Math.random()*(3));
flame_mc._rotation = random(360);
flame_mc._xscale = this.startScale;
flame_mc._yscale = this.startScale;
flame_mc._alpha = this.startScale;
spark_mc._alpha = (Math.random()*(90-20)+20);
spark_mc._x = _root.xmousepos+(Math.random()*(10))-(Math.random()*(10));
spark_mc._y = _root.ymousepos - 9;
spark_mc.speed = (Math.random()*(5-2)+2);
spark_mc._rotation = random(360);
spark_mc.scaleDown = (Math.random()*(3-2)+2);
spark_mc.onEnterFrame = function() {
this._alpha -= this.scaleDown;
this._y -= this.speed;
this._xscale -= this.scaleDown;
this._yscale -= this.scaleDown;
if (this._xscale<=1) {
this.removeMovieClip();
}
}
flame_mc.onEnterFrame = function() {
this._alpha -= flame_mc.scaleDown;
this._y -= this.speed;
this._xscale -= this.scaleDown;
this._yscale -= this.scaleDown;
/*if (this.hitTest(_root.marvelLogo_mc).hitTest(_x, _y, true)) {
this.removeMovieClip();
thisPosX = this._x;
thisPosY = this._y;
trace("hit "+p);
p++;
burnpos = {_x:thisPosX, _y:thisPosY};
var burn_mc = attachMovie("flame_mc", "flame_mc", i, burnpos);
i++;
burn_mc.speed = (Math.random()*(3-1)+1);
burn_mc.scaleDown = (Math.random()*(7-5)+5);
burn_mc.startScale = (Math.random()*(50-20)+20);
burn_mc._alpha = startScale;
burn_mc._xscale = startScale;
burn_mc._yscale = startScale;
burn_mc.onEnterFrame = function() {
this._y -= this.speed;
this._xscale -= this.scaleDown;
this._yscale -= this.scaleDown;
this._alpha -= this.scaleDown;
};
}*/
if (this._xscale<=1) {
this.removeMovieClip();
}
};
};

Initial Banner Creation Attempts

The first banner I intend to create is the flaming hand skyscraper banner.

The following is my collection of images taken from Marvel sources that I felt could be used as inspiration or assets when creating this comic. Since the aim is based around fire it seems I'll be focusing quite a bit on the Human Torch from the Fantastic 4.