They're flying out of the door now. Tameside Prospectus provides an online database of courses for adults and employers in the Tameside area of Manchester. The site contains many features including a course shopping basket, google map integration and a PDF generator. The look and feel was designed as a more adult oriented view of the existing Tameside 14 - 19 Prospectus that went live earlier this year.
Once again the guys at idaho did an amazing job of developing the CMS and implementing the design.
In keeping with the run of sites I've been posting here as they've gone live I thought I'd add a couple more - Urbis (made live earlier this year) and Routes Online (beta made live last month).
Urbis We have worked with Urbis, Manchester for some time now and were recently asked to re-design the site to tie in with the new print and branding materials. Located at the heart of Manchester, Urbis is an exhibition centre focusing on city life. Urbis' exhibition programme explores the culture and dynamism of cities around the world, covering photography, design, architecture, music, contemporary art and much more. Work involved the design of the entire site and the creation of the content management system by the developers at idaho. (Work did not involve any flash that appears on the site).
"...a web based portal for route development professionals. It will be the primary source of daily airport / airline interactivity in the future.
Using innovative 2.0 web technologies it is an integrated data platform for today’s air service development professional working within an airline, an airport or a service organisation.
At its core will be a facility for airlines and airports, through secure, user editable profiles (including video and web casting) to actively campaign their air service development programme 24/7."
The original homepage design concept was supplied by the client which was then adapted and subsequent pages created. The CMS was developed by developers at idaho who did a great job. There is also a banner management system for allowing advertisements to appear on the site.
Phase 2 is currently underway which will be fantastic when completed.
Another site through the door. LIVING-i was designed for Persimmon to showcase their new innovative homes built in Irlam, Manchester.
The LIVING-i project was conceived to help Persimmon try and assess various materials and modern methods of construction for the future. Persimmon strive to improve all areas of house building, with focus on quality control, increasing the speed of build and addressing the skills shortages within the industry.
Work involved the design of the completely content managed site including icon creation.
After a complete branding revamp, idaho technology were asked to look at the 2007 site for the Manchester Pride Festival. Having worked on the site for several years we instantly knew the kind of approach they would be after and set about creating a neon-on-black look. This was a nice change for me as it is actually the first black background site I've designed. The neon colours are effective against the background and the tile grid structure works well.
The site is completely content managed - even down to the text link over the big star image which uses a .png gradient overlay on top to ensure the text is readable over any image or graphic they might add.
Design of the site was developed in conjunction with Stuart Newton (Director / Developer of idaho technology).
For anyone who has already seen the London 2012 Olympics logo my sympathies are with you.
To my surprise it was created by Wolff Olins. I'm not one to openly criticize other designers work as there are always pressures and direction from clients and, quite often, reasoning behind things a lot of people miss but I have to say this is far from my favourite logo creation. He is responsible for some great branding exercises spanning over 40 years and is considered a legend in the design community. That is the reason I was so surprised when I discovered he created it.
I understand that you need to appeal to the younger audience with the logo but you also need to appeal to a very general demographic as well - not to mention potential high status sponsors.
'It will become London 2012’s visual icon, instantly recognisable amongst all age groups, all around the world. It will establish the character and identity of the London 2012 Games and what the Games will symbolise nationally and internationally.'
In a way I suppose it is definitely easily recognisable. Maybe it will be like the new Adobe CS3 icons. At first you think 'what the hell are they?' and then as time goes on and you see them in use alongside the now weak looking Microsoft Office 2007 icons in your quicklaunch bar you start to love it.
It was described by AnotherWestie (BBC 606 user) as looking like:
...a logo designed for young people by old people who don't understand young people.
There seems to be quite a large online backlash against this logo. There is even a petition to get rid of it here which, at the last count, had 19267 votes.There is also a petition to support the new logo here which, at the last count, had 1 vote. As mentioned on Design Week [06/06/07] there has been a large amount of camaraderie amongst designers who feel that the task is a big one to live up to. The logo had to be 'dynamic, modern, flexible, distinct, different and inspiring' whilst being '...inclusive, and avoid using images of sport or London in order to to increase its appeal to non-sports fans and those outside the city'. Like any major project it is hard to see what goes on behind the scenes and the influence from the clients (of which there are often several as part of a committee) so please don't see this post as an assault on Wolff Olins and the work they create - as mentioned before they have done some great work.
Personally I just preferred the old logo but, then again, how many times has the swooshing, interweaving coloured lines been used now? It is certainly not an easy job.
Maybe, as mentioned on the BBC Sports Editors Blog this is just all a big media campaign and they have released this logo only to retract it in favour of one submitted by the public through their website. The London 2012 website is asking for people to download their templates and create a design which sums up the 2012 Olympics. This is a great idea and gets people to air their creative side (whether naturally artistic or not). I have submitted one which uses their template and incorporates the old London 2012 logo (see below). It is supposed to sum up the carnival atmosphere that comes with the Olympic Games and, bearing in mind this only took 15 mins on my lunch break, it is far from a great design and I'm sure the Olympic Game Committee would rip it to shreds.
Let me know what you think. I am quite interested to see the general reaction to the new official logo and how you think Wolff Olins should react to this outcry - it certainly isn't a nice situation to be in but definitely highlights the power of online speech in todays society.
Well, as promised here is a quick breakdown of the flash video player and how to create a custom skin.
First of all, there are several ways to import your video into flash. I have mainly been using the src and the import method. Import Method
File > import > import video…
You will be asked how you would like to deploy your video. I have been using Progressive as using the Flash Communication Server to stream it is a little pricey.
You will then be given several options for encoding your flash video. You can have a mess around with these settings to find exactly what you’re after.
When you get to the Skinning screen you need to select ‘None’ if you want to create your own player. Alternatively, there are plenty of built in ones you can choose from.
SRC method
This method uses the FLVPlayback component and references the actual .flv externally. Place an instance of the FLVPlayback component
This says the content path of the flvPlayback you just created is the src. This is the src referred to in the html you use to place your video player in your web page (more about this later).
Adding controls
Right, you now have your FLVPlayback component it is time to start adding some controls. Open the components palette again
window > components > FLV Playback custom UI
and you will see a selection of controls available. Simply drag the ones you want onto the stage. In the actions layer you created earlier add:
This assigns each control to the flvPlayback instance. Obviously you might not need to add all of these. It depends on which controls you intend to use. You will need to give each control an instance name. These need to match the names to the right of the equals sign in the code you just entered above. For example, the Play / Pause button would have an instance name of playpausebtn etc etc.
That is pretty much it for the basic flash player. If you export your movie (ensuring the flv is in the same location as the exported file) you can now add it to a page.
Adding the Timer
The timer isn't actually a component you can add to the stage but a small piece of actionscript you will need to add yourself. One thing with progressive download is the fact that until the entire movie is downloaded you cannot show the total time. You can, however, show a play head time by adding a movie clip to the stage. Inside that movie clip add a dynamic text box and give it an instance name of 'time'. Now, you want to check the play time every second so, in this movie clip, add a frame at 24 frames (or whatever you have your frame rate set to).
In the first frame add an actions layer and add the following actionscript:
This basically takes the playheadTime of the FLVPlayback, rounds it and displays it in the time text box. The bit towards the end styles the time in 0:00 format. For example, with minutes, if there are less than 10 minutes then it adds a 0: else it adds nothing.
Firefox and Internet Explorer embed the flash in slightly different ways which is the reason behind using the Object and Embed to do effectively the same thing.
The code marked in red is the source of the .flv file. This is also the same src that is referred to in the actionscript we added earlier. The code marked in blue is the swf you just exported of the player.
Customizing the flash player
Now you have your basic flash player working you can start adapting it to suit your needs.
Each of the controls is a simple movie clip. By clicking into each control your have the ability to alter the background shapes, sizes, colours etc of the buttons and icons.It's as simple as that.
For example, double clicking the stop button gets you into the StopButton movie clip. Note, the movie clip name is StopButton but the actual instance name refered to in the actionscript is stopbtn. It is important not to mix these up.
Here you will find an actionscript layer and 2 frames. The first one is the basic stop button, the second frame holds all the possible states of that button. E.g. hover, down etc.
Clicking in another level takes you to each individual state movie clip. For example, clicking on the hover movie clip opens up StopButtonOver clip where you can adapt the icon and background shape. If you keep clicking into the background shape and alter it it will affect all other places where that instance is placed on the stage. E.g. If you keep clicking into the stop button background until you can go no further then alter the colour, the background colour of all the other buttons will also change as they all use the same graphic as a background.
In conclusion
Well, I hope this has been useful. I noticed whilst typing that it is all a bit rambley so sorry if you have trouble following this but it shows the possibilities of customizing your own flash video skin. If you have any advice or tips please don’t hesitate to add a comment by clicking on the number of comments below and clicking ‘Post Comment’.
Posts
0 comments:
Post a Comment