Anthony Hastings - Multimedia Designer

• Wk 1
• Wk 2
• Wk 3
• Wk 4
• Wk 5
• Wk 6
• Wk 7
• Wk 8
• Wk 9
• Wk 10
• Wk 11
• Wk 12

Week 13

Minor Tweak To Flash player

After a few people looked at the website I got some input on the volume of the flash player. Despite the audio of the lessons not being loud, it's still a good idea to have the volume level down at about 75% in case someone has their speakers on quite loud and doesn't realise. It's a nice little tweak because there have been times while on YouTube that I get deafened by overloud videos.

Flash Preloader

I added a preloader to my flash piano. Sometimes the connection can be slow and people are left looking at a green square of where the flash animation should be, for up to twenty seconds. People don't know if it's meant to be like that or if it's broken, so the flash preloader should solve that problem. At first I had major problems implementing it because the preloader would not load anything that wasn't on the stage, and my sounds and finger graphic were loaded from the library via ActionScript. To get around this problem, I came up with the solution of putting the finger and all the sound clips into a blank movieclip with a stop action on the first frame. I placed this movie clip just off stage and everything worked perfectly.

jQuery

I added jQuery scripting to the website to add some nice interactivity. I placed it on the buyers guide and the lessons section because the pages were becoming quite long, so I thought that by placing a lot of the content in a hidden div and using a toggle button with jQuery attached, the user can expand and collapse it at their leisure. It definitely looks the part, and breaks the buyers guide and lessons page up nicely into much more digestable and manageable parts.

Lesson Feedback Forms

The lesson feedback forms have been made dynamic in the sense that they will relay any information typed in them to me, and they will be flagged from whatever lesson they were typed in. It means that if a viewer wants to give me suggestions on a specific lesson, then it will come to my mailbox and be flagged for that lesson, helping me address lessons more specifically. I think this is quite a nice feature that means the user never has to leave the lessons page to give me their opinion.

Validating The Lessons

One of the problems I was having with the lessons pages were that the lesson ID gets passed in the URL, but what if someone was to take out the ID, or even type an ID that doesn't exist? The page would load with blank content, and the user would be totally oblivious to what had happened, or wouldn't know how to correct the problem. To counteract these two separate problems, I started writing some IF ELSE statements:

$vid = $_GET['vid'];
if (!$vid) {
echo
"<h2>Where's The Video?</h2>";
}

The code snippet above creates a variable and trys to retrieve the paramater from the URL. If it cannot find it, it will throw up an error message to the user explaining what has happened, and giving practical examples and solutions on how to fix it.

$result = mysql_query("SELECT * FROM lessons WHERE vid = $vid", $connection);
if (mysql_num_rows($result) == 0) {
echo "<h2>Video Not Found</h2>";
}

The code snippet above runs a MySQL query and selects everything from the database where the video ID is the value passed to it in the address. However if the user has typed a number that is not in my database, then the query will return with no information attached to it. I then run an IF statement which checks to see if the result has no rows attached to it, and if so, I throw up another error with practical examples on how to fix the problem.

I'm now happy knowing that my lessons pages are bulletproof and any problems that may occur have been spotted and help has been given on how to fix them should they occur.

Week 12

CMS

While I was adding tips to the MySQL database I realised it's probably better to have my own custom made CMS rather than logging into PHPmyAdmin all the time to make any changes. I could make a simple CMS that manages News, Tips and Lessons. It'll be especially helpful for lessons as I can have one or two paragraphs of teaser text in one field, then the rest of it in another. This other field will be the contents of the "toggle more" div.

On the more lengthy boxes where I update large amounts of content, I have added a JavaScript character counter in order to tell me if I am approaching the databases character limit. It's really annoying when you type lots and then find out that MySQL cropped a bit of it off the end, so this little piece of JavaScript saves heartbreak.

I figured out that MySQL recognises line breaks which means that for my tutorials, I can type my information as paragraphs into the text area which updates it, and when I echo that field back out of the database, the content will be generated on different lines.

Get Vs Post

Now that I'm coding the database / tutorials side of things, a few friends have commented on the address that the tutorials will be given (i.e. tutorials.php?id=4). They asked why it has to be like this, and some more tech savvy friends asked why I use the GET method rather than POST. Well my readers, here's why!

If I was to use POST, then the variables I will be sending from page to page will be hidden. They won't be sent in the address bar, and the URL would appear just as "tutorials.php". The user is then oblivious to the fact that database information is being sent, and will wonder why every tutorial seems to be called the same page name. If a viewer thought to themselves "Hey, I like that video tutorial, lets bookmark it!", then it wont work because the link will be to "tutorials.php" and there will be no database variables in the background, so it won't load properly.

So in short, this is why I use the GET method:

• GET will put the variable(s) in the address bar, and this will let the users know that database information is being retrieved.
• The variables in the address bar will let the user bookmark a specific tutorial as the necessary variable information will be stored in the address also.
• It is generally better to use the GET method is you are sending short pieces of information (like myself) to retrieve a Database ID and pull content from it.

iPod Touch and iPhone Webclip Icons

After reading an article about this topic in general, I made an iPod touch and iPhone webclip icon for my iPod users. As people will be downloading the podcasts and mp3 versions of my tutorials to their iPods, and will probably use the devices browser to check out my website then I will want to supply this icon to fully round out and implement the brand fully. There's a slight delay from when you click add a webclip to whenever the icon actually loads but that is because the request to retrieve the icon only occurs whenever you prompt to add a new webclip. It makes sense to have this icon and brand on the webclip since I offer so much iPod content anyway. It's this attention to detail and fine crafting that I think my iPod users will appreciate and respect.

Flash Satay

I have been publishing a lot of content from Flash recently and have noticed that the XHTML it spits out if totally not valid and throws up a ream of errors. After researching the topic, it seems to be an ongoing problem because of one simple <embed> tag. The <embed> tag that Flash puts there is supposedly for cross-browser operability, but after taking the pesky tag out and testing in IE7, FF and Safari (all of which played the Flash file properly) I can't see what browser it doesn't work in. I've decided to keep it out of my code so I can be fully standards compliant, although I did come across a great article on that matter; Flash Satay.

Flash Satay is a great article written many years ago about how to embed Flash content into a standards compliant page. Although this article was written six years ago, it still is the leading breakthrough in this topic. If a problem arises with the flash then I will use the methods described in this article, otherwise I'm just going to leave the <embed> tag out of my code.

Recorded the final batch of videos

I recorded the rest of my videos this week and went with a more zoomed in look. I zoomed in by about three keys which has made the background a lot smaller, and given more emphasis to the keys. I think that my earlier videos seemed a little too zoomed out and had far too much wasted space.

Firefox Bugs

I came across a bug in Firefox (and only Firefox!) where if you have a transparent .PNG that is sliding underneath a flash movie, the .PNG makes a horrible box around its outline and actually shines over the flash movie. It means that I can't have my two clefs on my page as fixed elements, and flow with the page in case someone started resizing and they came across the bug. Instead I've used absolute positioning so as you scroll up and down the page, the clefs stay at the top, not hindering any videos or flash animations I will have.

New Layout For Tutorials

Above you can see the old layout I had for the tutorial pages before I created my modified version. I quite liked this version but one of the problems it suffered from was that the text in the sidebar and the text in the main content area often blended together at times due to the small 20 pixel gap separating them. This definitely needed changed.

Above you can see the new layout, which I think is a million times better than what it was. To separate the content better I used a pale green as a background colour for the entire sidebar and then separated specific sections of the sidebar with headers that look very similar to heading two's except they use the same orange found in my navigation. One thing I had noticed was that the pages were very green and I had not used this second colour very much, but this is now a way of getting it in to the page more to add some variety to the colour palette. Now that I am starting to make the other pages, I can definitely see this side bar being a recurring theme in similarly structured pages.

Week 11

I devoted this week to further developing the look and feel to the Piano Man website based on the ground work I started last week. What I was able to gain from last week was a general idea of what designs will and won't work, not to mention by very simple and lovely navigation bar.

Layout 04

With this layout I tried to adapt the music notes in the background of layout three. I really wanted the notes to flow in a curve across the page but I didn't know how it could be done without blending the white box with the white of the page background. I tried giving the notes a white stroke so that they could sit over the green and white parts of the background but a thin stroke didn't felt too little and un-meaningful, where a thicker stroke looked quite overpowering. I also tried to move the navigation around but then it became too out of focus with the grid. This was an adaptation of layout three which I liked the concept off but in the end it didn't pan out right and at least I can say I tried to pursue it. Moving on!

Layout 05

This layout had a little more potential than the others because I think that the logo and navigational aspects work better and stand out much clearer when placed on a pure white background. Some of the others were obscured or had background images, but in this one it was a pure white and I think it looks nice as such. As for the green square it caused too many problems because black text would not stand out correctly, forcing me to use white. The amount of white on the page is far too much and it's incredible overpowering and off-putting. The two different colours of notes didn't work well either and the orange header didn't tie in too well. At least from this layout I learnt that too much going on is distracting and to try and not use so many colour variations scattered everywhere.

Layout 06

This is the design that I finally settled on and I'm quite pleased with how it turned out. What I gathered from earlier designs is that the navigation I made simply works; it and the logo work best on a pure white background. I also gathered that there was potential in the way I had made the footer, and the heading two's in layout five, and that the text should be black. With all of these points in mind I got straight to work and came up with what you see above.

One of the downfalls to the previous designs was that there was far too much white on the pages so to counteract this, I took the music notes you can see in previous versions and scaled them way down, turned them grey and gave them a really low opacity. I think it adds to the whole design while not distracting the viewer from the page content, it's subtle and not fighting for dominance.

With the headers I tried to make it clear as to which one was higher in the hierarchy and I feel that by giving the heading two a background colour with a pattern and design, it suggests more time went into it and that the other heading is lower in the hierarchy. The symbol is a tail of a treble clef, which ties into the logo nicely as it is the middle part of a treble clef.

In the page background you can see the tip and tail of a clef again. I debated using even more clefs but to be honest I think it's better to use them than to use other symbols; the clef has become a big part of the brand and it seems to make more sense to use it that to not.

The footer didn't go any major changes since layout five, except for some alignment issues and changing it's colour to match the green of my logo. The bullet points are in fact a neutral symbol and not just a squiggle of a line.

I've probably already mentioned this in my project proposal but as for the inclusion of a video on the main page, I think it's absolutely vital because it assures people who have clicked my link that they have indeed landed on the right page. The video is branded and has a short teaser tutorial which draws the viewer further into my web site.

After finalising all of the smaller details, I created the layout in CSS which can be found by clicking this link: http://www.thepianoman.info/csstest/. For the homepage I have adopted a two column layout, each column being 350px wide with 20px of guttering at the top, sides and in between the columns. This layout however will not work for the tutorial pages as I want the videos to be bigger than this, so I created another two column layout that has a 200px side column with a 500px main column, as shown in the screenshot above. The side bar will be perfect for additional materials and my tutorial comment form. The accompanying text underneath will be visible and hidden via moo tools to keep the page length down, and also because some people may not want to read it, and would prefer to solely watch the video.

Business Cards

Now that the design of the website has been finalised and built, I went straight to making some business cards. One thing my peers praised me for whenever talking about my portfolio website and its business cards, is that what you see on the card ties in to what you see on the website. I wanted to replicate that feeling on my major project.

To do this, I took the two clefs which you can see in the background of the page, and coloured them in using the same green / dark green shading that you can see on the navigation items. I put the logo smack in the centre and then added the same tiny faded music notes on the background of my site container, into the background of the card. I think it works really well, and that it is a well balanced card.

Recorded Some Videos

On Sunday I recorded more videos and then played around in Adobe Premiere with them. I discovered a colour corrector which makes you select what you know to be pure white, then readjusts the white balance of the entire video accordingly. It's great to use as some of my videos often had a yellowish glare from the tungsten bulbs in them.

I rendered out some videos at 500x375 which is the width of the column in my tutorials page. With or without full screen mode being activated, the keys can be clearly seen and I'm very happy with the results. I also discovered a "Corner Pin" tool in Premiere that allows you to stretch certain corners of your video so that it becomes straighter, without distorting the image. This is very useful to line up the sides of the video with the sides of the keys and makes sure that my videos will always be straight and level, a consistency I want to have across all of them.

Thoughts For Week 12

• Finish recording the rest of the videos and then get them all edited and voiced over.
• Start creating the flash animations that will accompany the text in places.
• Start creating the rest of the pages, and get this site up and running!

Week 10

iTunes Podcast

One of the methods of promotion I've been talking about is having my own iTunes podcast, and this week I finally got round to setting it up and getting it approved. The first thing that needed to be done was to create the XML which tells the iTunes podcasting servers that a podcast exists and it has such and such items for download. As posted in week two regarding the topic of iTunes podcasts, this is where I found all of my technical specifications regarding them: Podcast Technical Specifications.

After the XML feed is made, tagged appropriately with their special iTunes tags, and validated, you then submit it to be screened. If it passes the screening process then your podcast is approved and listed in the iTunes podcasting channels. Thankfully my podcast was approved a mere two days after it was submitted and is now live and can be found by clicking here.

For now I have put up a teaser of me playing a theme from Pirates of the Caribbean and I rendered it with the resolution of 640x480. It plays quite well at this size, and when iTunes automatically resizes it to fit iPod format, it performs perfectly. iTunes converts it to the appropriate size very fast and all of the keys can be clearly seen. I'm very pleased with how this has turned out and it will definitely be another extremely useable method of reaching my audience. Over the course of the project I will keep adding teasers to the podcast with my branding at the start and end, as well as my audio brand which I will talk about next.

Audio Branding - Download .zip with samples and sheet music

As I've been saying before, making a simple audio brand will be very appropriate for my project for two reasons; one is that my project is musically related anyway and two is that I can have the brand be played before and after each tutorial video. Doing this will keep the brand constantly in the viewers mind.

I knew that I wanted the brand jingle to only be a few seconds long, and that it was to be something simple so that it doesn't sound overwhelmingly hard for a beginner. The entire project is based around teaching people the basic skills of playing, and I want the sound to reflect that so I only want to use basics. It needed to be something simple enough for them to learn right at the start of their lessons, with little to no experience.

I started to write some down on a scrap piece of paper then instead of using my actual keyboard I used my flash piano I've created. It proves that the flash piano is a useful and enjoyable tool, and is indeed quite practical. While I played the notes, I used Sound Forge to record the audio which the computer was playing and then edited out the pauses between me starting and stopping the recordings.

I recorded eight different options and let around five people listen to all of them and then choose their favourites. Each person picked their favourite two and out of the eight, numbers one and eight are the most chosen. Fortunately I preferred number eight myself because compared to the rest of the brands, it seemed much more upbeat and finished on a higher note, where the others were a bit more mellow and flat. I'm trying to bring a positive feel to the project and I definitely think out of the eight, that this is the best choice. I have added it to my video on the iTunes podcast and I think it works well.

Google Analytics

After putting Google Analytics on my portfolio and major project site pages, I log in every few days to see what trends I can spot in my views. I've noticed that for the majority of my traffic for the Piano Man, there's a good 50/50 of direct traffic (people who type the address straight into the address bar) and of search traffic. It looks like the forums posts are paying off; so far I've had around 40 extra views in two days. Some of the search results that have been leading to my site are as follows:

• piano man beginner tutorials
• beginner piano guide
• piano chords to piano man
• piano man on keyboard
• pianotutorials

I've tweaked the keywords in the header of the index page based on these results, to try and draw more in from them, as well as similar words.

Site Layouts

Layout 01

This was the first layout that I attempted and I tried to stick to the wire frames that I had created for the major project proposal but found them quite constraining and in the end I didn't think it was structured right, so I quickly abandoned this layout, not even bothering to finish writing dummy content. The problem was that the feature boxes weren't really in the right places, and with that specific structure I wouldn't have been drawing people into the site at all. The actual idea of the feature boxes came off quite bland in this layout and I personally wouldn't have given this version much of a glance. I've put up a screenshot of the design anyway to show the progression the design has taken.

Layout 02

This layout was greatly improved and for my visual background I tried to incorporate sheet music symbols all over it. I found that in the end, this became quite distracting whenever you were trying to read content, as some of the symbols are overly large and weirdly shaped, making your eye wander. I did however like the inclusion of a third colour into the brand, but after toying around I again decided this specific style wasn't going to work.

One good thing about this version though was that I designed a really nice navigation system. I have used music notes to symbolise certain sections and pages of the site. Their background colour is the same colour as the green in my logo (for consistency) and the active and hover state is a nice complimentary shade of orange. I think that this symbol and colour style makes the navigation very intuitive and asthetically pleasing; it simply works.

Layout 03

I thought up an idea of a background that had a curve, and along the curve was a line of music notes which repeated and created an never ending line. I started to make the curve and added the notes, which was all fine but then I was completely stuck on how I would add the content to this design. If I was to put my white main content square down the middle of the page, it would totally ruin the look and feel of the design. If I was to put the green symbols on a white background, then how do I differentiate the white of the background with the white of the main content.

Despite having liked the idea behind this design, the white on white situation overcomplicated the whole process and I decided this wasn't the exact path to pursue; although I did like the music notes idea.

Thoughts For Week 11

• Polish off a final design and start to put it into CSS so that it'll only be a matter of pumping content into it.
• Design some business cards to distribute around for Piano Man once the site designs done, in case I can use any aspects of it in the business card, like I did with the banners on my portfolio website.
• If there's time, start recording the rest of the videos.

Week 9

Flash Piano Review

Prototype 11 - Click here to view

I went back to the flash piano after not looking at it for a while to see if anything popped into my head about it; if anything needed changed. I picked up on something that I hadn't before, which is the help button not having a proper 'over' state. The text acts as the over state, and because the text spans multiple lines, the space in between the text doesn't count towards the 'over' state. This means that people using the piano and wanting help may roll in between the lines of text and not understand why it isn't working. This is bad user design, and to combat this problem, I have added a coloured rectangle behind the text so that the over area takes up a full square rather than the lines of text, and makes sure people can access the help whenever they roll over it.

I got to see Gabriel this week for the first time in ages, and he was mighty impressed with the Piano. He (who is probably reading this!) tinkered on it for a good while pressing this and that. He had a great point about when he read the instructions. He said that he literally read the first line which mentioned that the notes are bound to keys on your keyboard and said to himself "oh it works with keys" then went back to the main screen and started pressing random keys to see which ones worked.

To keep peoples attention span on the information, and feed it to them more visually, I've created an image of a keyboard with all of its keys darkened out except for the keys that play notes on the piano. I think this is a much better way to get the information across. It gets the point across instantly rather than twenty seconds later after reading the lines of text.

More Piano Feedback

As I've been showing the flash piano to more and more people, I've been getting great feedback especially after the inclusion of the visual instructions in the help screen. One thing that seems to keep coming back up in conversation is that many people seem to think that there should be another octaves worth of keys on it. I thought I'd list a few reasons as to why I've limited it to one octave of keys:

• The whole point of the piano is to get people interested in wanting to learn, and I'm sparking the interest through a rich experience playing simple songs. All of the songs I've provided only need one octave (which is exactly why they were picked) and they remain relatively simple to quick to pick up.
• The experience of playing notes by using your keyboard would be ruined; there is simply not enough linear keys to use. It would be strange to have one half of the piano keyboard active, and the other not. If I was to use another line of keys on the keyboard, the system would be broken. The system at the moment (A to K) just works.
• One way that I could implement the idea above is by using the caps lock of shift key to change the letter from lower case to upper case. This gives me (as far as the computer is concerned) a totally new key and I could control the first octave with the shift held down, and the second octave with the shift not held down. This would just confuse the user by complicating the whole process and would degrade the experience.

How To Bring People Back?

I was thinking to myself, what happens when someone watches all the tutorials? I mean what will they do then? Sure they'll hopefully keep coming back to the site to re-watch the videos, or to check some theory facts up but really whenever they watch and learn, it's time for them to fly solo! I was trying to think of a way I could make the site useful to them even after they finish learning and I thought about Sheet Music. Sheet music books can be dear, and really many people only want a few pages out of it to scribble on, and not an entire book's worth. I could offer blank sheet music pages, with my branding on the top and URL somewhere as a .pdf so that they can keep coming back to the site whenever they need to print more, and with all these sheet music supplements I am giving out, hopefully they'll pass them on to their friends or family with a good impression of my site, and recommend they visit it.

I went ahead and created this in .pdf form, which has been branded with my logo and URL. It can be found by clicking here.

Truly Inspiring

I stumbled across an amazing link this week which is a showcase of André Michelle's work. Andre is very talented at Flash and ActionScript, and some of his creations are truly inspiring. One for example that had the "wow" factor for me was the wavepole-synthesizer which can mess with the harmonics of a wave sound as you please. This is an incredibly impressive project because not only is the user able to create a wave sound of their own, but even the visual form of it in the scope changes based on what settings you choose in the sliders.

His work has sparked a real interest in me, and I definitely think projects like this will appeal to me whenever I finish my own current projects.

Tips?

I was again thinking that the tutorial pages could have a dynamic tip box which chooses a tip between lets say 1 and 10 tips, that they should read to help them with their practices. The tip would be different each time you reload the page, or travel to another one, much like the dynamic banner I have on my portfolio website. The tips that I thought of at the time of this ideas birth were things like:

• Buy a metronome so that they can gradually increase their speeds and watch their timings. Metronomes are X amount of pounds and are a device to help you keep your timing and rhythm.
• Do finger exercises and a few scales before each practice session; it will get your fingers limber <-- (check meaning of that word) and ready to play.
• Practice as often as you can. Even if you can only get to practice for an hour a day, do so because it will keep your mind tuned in and you won't lose your edge. It's also a good idea to try and practice at the same time each time you do so, so that it becomes a routine.
• Try to sight read as much as you can, without writing the notes down in plain English. The more you get used to it the less you'll feel the need to translate the sheet music into English.

Getting The Word Out There

Now that the project is starting to get rolling, I thought it was the proper time to get the word out there and get some interest generated in the site. Many of the class are keen to see it and a lot of friends outside of university want to use it too. I picked three piano forums which seem to be used regularly and have many members, then posted the same message to each one, with a link back to the piano man website, asking them to check back soon. You can see the posts below:

• Piano Street - http://www.pianostreet.com/smf/index.php/topic,29466.0.html
• UK Piano - http://www.uk-piano.org/piano-forums/viewtopic.php?p=20182#20182
• Piano World - http://www.pianoworld.com/ubb/cgi-bin/ultimatebb.cgi?/topic/32/6356.html
  Update: This post was removed, probably due to me promoting my site in their forums; babys! : )

Tutorial Updates

I updated the tutorial list from last week with some new content and changes, then exported it as a pdf which you can view or download by clicking here.

Moo Cards

For my newly launched portfolio website I made a selection of five designs, so that when I submit them to Moo, I will get twenty cards of each design. I remember what Chris was telling us in one of our lectures where a variety of cards can help you spark interest in the recipients mind by giving them a different card each time you see them.

My banner thoughts and slogans was perfect for this idea, and I took four of my banners along with my name in large lettering, taking up most of the card (along with my profession at the bottom). The four banner cards can be handed out to anyone really, and give away a thought about myself, making me appear more human. The large lettering one of my name is a more formal card for those formal situations.

One More Banner To Portfolio

As an Easter egg, I decided to include one of my earlier ideas after I developed it a little. Originally for the portfolio website, I didn't have banners and instead I had a single badge.

I liked the idea at first, but then too plain for me so I filed it away into a random empty folder in my Photoshop file, which I came across again this week. I again started to like it and decided that it was probably worth trying to develop instead of ditching the idea completely.

To try and add more composition and layers to the idea, I added in some more badges in the background and placed them at angles (because hardly anyone puts a badge on straight no matter how hard they try!). I played with the size of the badges to make sure they didn't detract the eye too much from the main content of the page and tried some different colours but they didn't fit with the colour scheme of the design so I kept them all the same green colour. I'm quite happy with how it has turned out; the image definitely looks a lot better with more badges in the background, and I think it's a nice little Easter egg edition to my banner folder with only a sixteenth of a chance of being picked!

Thoughts For Week 10

• Start thinking of the layout of Piano Man and think about recording a full proper video, from start to finish with my cuts, transitions, overlays, and voice overs.
• Have a look at designing Moo cards for the piano man.
• It's time to start pumping out some video tutorials and writing the content for everything, especially now that I have a list to work from.
• Time to get that iTunes podcast approved, who knows how long it will take.

Week 8

Changes To Portfolio Website

Validation

Attention to detail is very important in design and to me personally so I spent a fair amount of time tightening up some loose screws around the website to try and make it as well built and user friendly as possible.

The first up screw to tighten up was the contact form; the form itself did not have much validation at all, and you could easily send blank emails. It didn't have validation that would check an email address was valid either, and this would be extremely irritating if someone took the time to write me a comment, but I couldn't reply due to an incorrect address.

I added additional IF statements that I coded myself that checks the boxes of the form aren't empty, and in the case of the email, it has two checks; one to see if it is empty, and another to see if it it valid. If everything passes the validation, then the form is sent. If there's some kind of error, then the form is repopulated with the previous data, and the box with the error is highlighted in red with an error message. I made sure I incorporated the repopulation because there is nothing more annoying than filling out a form which then blanks itself when an error occurs.

function checkMail($email) {
if (eregi("^[0-9a-z]([-_.]?[0-9a-z])*@[0-9a-z]([-.]?[0-9a-z])*\.[a-z]{2,4}$", $email)) { return true;
} else { return false; }
}

if ( isset($_POST['submit']) && (!empty($name)) && (checkMail($email)) && (!empty($comments)) ) {

What this code does is it checks to see if the form has been submitted, and that the fields are not empty. It also runs the email field through a function which checks the syntax of the email to see if it has been entered in a proper fashion.

As you can see from the image above, if there is a problem with one of the boxes upon submission then it turns a bright red. Since red is the first colour attracted to the human eye, and is related to danger or problems time and time again, it seemed the best choice to use as an indicator that something has went wrong. I've coded the form in a way so that it knows the difference between an empty email field, and an incorrect email field, and gives an appropriate message for each kind of error.

This is definitely very useful code, and the entire form is pretty bulletproof now; it will definitely be reusable for the piano man, and put to good use it will be!

404

Chris and Nick are always mentioning in the labs about how they are constantly running into 404 pages on people's blogs and portfolio websites and how it is a total crime against humanity. I tend to agree because there's nothing worse than going to a link you always use only to find that it no longer exists, then having to crawl through that site looking for the updated page because they didn't have a helpful 404 page, or no 404 page at all.

I re-read the part of 'Defensive Design for the Web' that dealt with forms and 404 pages to see what information is often helpful and expected. I also looked at the Apple website and how they handle 404 pages, which is an amazing example of how user friendly you can be. They offer a search box to try and find your specific query, as well as many of their top products laid out in front of you with links to each. After reading up about how it is always helpful if you are polite, apologetic, and offer them links to get them back on track, I set about getting my own 404 page complete.

On my 404 page, I wanted to make sure I gave contact details right there on the page, to save the visitor from clicking around even more, and asked them to contact me if they noticed any abnormal problems. I also wanted to give them possible reasons as to why they have arrived here, and solutions on how they should go about getting back on track.

It was quite easy to integrate with into DreamHost's servers and will be invaluable knowledge for when it comes time to set up another 404 page for my major project.

Other Bits & Pieces

Another little tweak to the contact page was that each of the alternate methods of contact has a link or button to click, but the email did not. It was inconsistent on my part and there was no reason why it should have been a mailto link. I made sure it was encoded using special characters in the background so that a spam bot would not be able to identify it as an email address, but the browser still renders it properly.

I also took the header information and placed it inside an include so that if I ever need to update the header on all pages, I simply update the include. There is a PHP IF statement which determines what page is requesting the header, and sorts out the active links dynamically. This is especially useful for whenever the site grows; it cuts down on file size and makes updating as easy and painless as possible.

I rejigged the layout of my portfolio page after showing it to my class mates (who love the site, especially the dynamic banners). They said the portfolio items all seemed to blend together and you didn't know where one ends and another begins. This is bad design planning on my part and I really don't want to confuse possible future clients or give the impression that I'm inconsistent, because I'm not!

To fix this problem, I added an equal amount of margins between each item, like I have everywhere else on the site. This makes it look so much better and consistent. I also added a styled horizontal rule just to further emphasise that they are separate items; I think it separates the items effectively while fitting in with the colour scheme and design of the site.

Tutorial List

It's time to really start hammering down on this project and get it off the ground. I've focused on other aspects intentionally so that my main focus for the final run up is solely my major project (and one other module). Now that the portfolio is out of the way, I've sat down and re-read my old piano folder where I kept all my notes and scrap pieces of paper from my piano lessons when I was younger. Most of them were notes and chords from certain songs but there were a few good things that I was able to learn from, like information on the meanings of certain musical terms, what chords are, major and minor scales and how you work out the chords of these scales.

I wrote out everything that I could think about in regards to what a learner would need to know to get them started on the piano. There was a lot more theoretical stuff than actual practical stuff but I think I will be able to pan it out more evenly by explaining the theory in video form and giving actual live examples of what the theory means. Like I have always stated, it's much easier to learn by seeing and if some of the theory seems heavy in places, it should click into place better whenever they watch my video tutorial and hear my explaining it as I play.

I'm thinking that the theory will need some kind of flash animation or illustration to go along with it in order to better explain concepts, and flash seems to be the most obvious choice so that everything will be animated, and it can be made to loop over and over. Especially in the case of scales and chords, these tutorials are considerably harder than the basics but still very relevant to be taught, and I will need to explain this on the page. Songs are written in certain keys and scales, and if you want to know the chords for that scale, then you need to know the theory about how to work it out.

I will put up a more final version of the tutorial list in my next weeks blog posting because I'm still working out which theory tutorials I will be able to portray in video form.

Thoughts For Week 9

• Start thinking of the layout of Piano Man and think about recording a full proper video, from start to finish with my cuts, transitions, overlays, and voice overs.
• Have a look at designing Moo cards for both myself and the piano man.
• It's time to start pumping out some video tutorials and writing the content for everything, especially now that I have a list to work from.

Easter

Portfolio Website

In the second week of Easter, I thought this would be an ideal time to get my portfolio website completed and mark an entire module from my 'to do' list! The first step I took was to decide exactly what content I wanted to include in my portfolio site and indeed what was a portfolio site.

I concluded that it's generally a place where I can showcase my work to potential clients, and give them information about my history and background, then offer them a means of contacting me with any questions or enquiries. With that in mind I set about defining what each page would be and what it would contain:

• Home - I think this page will a general introduction to who I am and what I do, along with any other comments I'd like to make, and a place to show off my most recent work. It's important that people understand who I am immediately upon arrival and after a small bit of reading, realise that I'm a multimedia designer. The recent work should entice them to stick around and delve further into my site, to see what else I have done.
• About - The about page will tell visitors who I am and what kind of background I have come from. I think by giving them a chance to read this type of information, I appear more open and friendly toward them. I can also let them see bits and pieces of my hobbies and interests by integrating some web services into the page like Digg or Flickr, to let them see my interests and that I actively frequent these sites.
• Portfolio - This page is very self explanatory and it will showcase my recent and upcoming projects, and give a little detail about what the clients wanted and what I gave them. It'll also have links to these projects so visitors can go and see the work for themselves. This could be the difference in getting them to choose me for any work they may want undertaken.
• Services - I think this page is a good one to include because now that the visitor has heard about me and seen samples of my work, it is definitely a good idea to let them see exactly what I can offer and create for them. So by listing my services, and my skills, I can let the visitor know straight away if I'm the person they're looking for on a specific project.
• Contact - This page is where visitors will be able to get in touch with me, and I want to add as many ways in as possible to cater for a wider audience of users, and also to add some elements of interactivity. I will look into adding Skype and Google Talk.

Now that my pages had been defined, I started to think about layouts and knew that I wanted to do something different from my normal workflow. I always, without fail, make a centred website, of about 760px in width and I thought to myself "Lets try something different and something fresh". I also usually make dark layouts, and again, I wanted something a lot brighter. It's easy to fall into the same design routine but for this portfolio I wanted to do something I don't normally do to add a little differentiation to my work.

What I have come up with is a bright, simple and clean layout which adheres to the grid system thus making it quite easy to update and maintain. It is a full width layout which has a centred column in the middle with a minimum width of 800px for people with lower resolutions.

Instead of just having normal text links, I drew icons in illustrator using the pen tool for each page to try and give another visual aid to the navigation. I used the most obvious symbols I could think of, so that alone they can speak for themselves. I really like how they turned out and they fit nicely and add to the look and feel of the website.

I also added in a dynamic banner in the top left corner and the reason for doing this is because I hate going to websites that have the same content time after time, and give you the same user experience each time. The banner is based upon the idea of the 'I Heart' t-shirts that you see in New York among other places. I kept it the same green gradient I have been using for consistency, and angled it to add some variation to the very horizontal feel of the header. I came up with eight slogans that I could use, and changed them all into images, and used PHP's random function to automatically change the banner each time the page reloads. The code is as follows:

<?php $banner = rand(1,8);?>
<div id="banner0<?php echo $banner ?>"></div>

I think it's a very suttle change which adds a fresh feel to each page time after time, and I'm very glad with how it has turned out. For the columns I have used a main column (500px) with a side column (200px) so I can emphasise information appropriately. In the about section I was able to include a digg widget quite easily and I was even able to customise it's width and height so it would fit in my side column. I like it because it lets people know what types of stories spark my interest, and thus letting them know a little bit more about me.

In the contact page I created a simple PHP mail form which emails me directly, and placed a function in the background that strips the input of any bad characters or malicious headers which could be used to spam people. I was also able to add a Google Talk widget which allows people to chat to me directly, and a Skype links which automatically ring or add me to the visitors friends list if they click them, and have skype installed. If they don't have Skype installed, and still click the link, a popup window appears advertising skype.

I think these two features add a lot more interactivity to the site and will be very valuable additions. I hope they show that I go the extra mile, and have more ideas rattling around in my head than just using a simple contact form.

Flash Piano Prototypes Continued

The first week of Easter was spent finishing and fine tuning the flash piano, trying to make it as user friendly, interactive, educational and fun as possible. I should note that prototypes five and six had minor changes to the ActionScript which brought file size down, and used functions to cut down on code.

Prototype 07 - Click here to view

In this version I introduced a finger which I drew in Adobe Illustrator and then dragged into Adobe Flash. I wanted to include the finger because it adds to the whole feel of the piano animation; clicking the keys with the mouse is expected and most people will expect to see a simple mouse cursor, but to use a finger just like you would in real life adds to the quality of the animation and makes it a bit more fun to use.

While I was designing the finger, I came across this image on iStockphoto, which helped me get an idea as to how detailed the finger could be. There was a lot of aspects to consider such as knuckle lines, skin shades, nails and even the bits at the top on bottom of nails that are more white than pink.

After looking at this I set about making my own finger, which was inspired by the detail seen in this one. When the finger was made and exported in, it occurred to me that the size of the finger was a bit of a problem at times. The finger was large enough to block out the letter of the key which you are playing. The person using the animation would have to carefully select where they click in order to see the letter properly, and this isn't good design. It would also take away from the educational side of things if you couldn't see the name of the key. The keys must be easy clicked, unhindered from any other objects and their labels clearly shown; very basic design principles.

I scaled the finger down by around 20% and then moved the labels of each key up slightly, so that wherever you click on the bottom of the note, it shouldn't obscure the label. I have also changed the ActionScript of how the finger attaches itself to the mouse. The code I was using was from around the time of Flash 5, and again it would be more practical if I kept the code as up to date as possible so it's easier to troubleshoot, and easier to integrate with other features from the current version of the language. The finger no longer exists on the stage until run time, where it is called from the library.

Prototype 08 - Click here to view

This version saw quite a few major changes. Firstly, to cut down on code I took away all the unique movie clips for each key and broke it down to a simple two clip process; black keys and white keys. I put the onRollOver and onRollOut functions inside the actions layer of both movie clips, so that this functionality is already built in. The flash course I attended at Queen Street Studios greatly developed my understanding of ActionScript and made me able to add new and exciting functionality that I would not have known how to do before attending the course.

One such piece of functionality is how I handle the roll over state. Before now, my roll over state was not dynamic, and no matter how long you had rolled onto the key did not influence how long it took to roll out. Now however, if you are simply skimming across keys to get to a specific one, the roll over and roll out states compliment each other and are of equal length. Alternatively, if you pause on a certain key for a set period of time then it will take a slightly longer amount of time to fade away, indicating that you spent a substantial amount of time on that key. The ActionScript is as follows:

this.onRollOut = function() {
this.gotoAndPlay(this._totalframes - this._currentframe);
}

What this short piece of code does, is it firstly calculates the total amount of frames in the movie clip and then subtracts whatever frame number you are currently on. So for example if the movie clip had a total of ten frames, and we rolled over and rolled off while the movie clip was on frame four, then the RollOut state would jump to frame six and play the fade out from there. The numbers compliment each other and if we simply skimmed over a key and only got to frame two, then the RollOut would jump to frame eight and play from there. I think this is a great piece of functionality that really makes the piano stand out. It's very subtle yet effective, and tells the audience that a lot of thought and care has gone into its creation.

I also devised a way for input from the keyboard to stop looping (before this version if you were to hold one of the correct letters on the keyboard down, the sound would infinitely loop). The code used a Boolean value to tell an if statement if the key is currently pressed or not.

var cKeyIsPlaying:Boolean = false;

var imPlaying:Object = new Object;
Key.addListener(imPlaying);

imPlaying.onKeyDown = function()
{
if (Key.getAscii() == 97 && !cKeyIsPlaying)
{
trace("The Key You\'re Pressing Is: " + Key.getAscii());
_root.cKey_Sound.start(0,1);
_root.cKey_mc.gotoAndPlay(2);
cKeyIsPlaying = true;
}

What this code does is firstly, creates a Boolean value which dictates if the keyboard shortcut for the 'C' note is currently pressed down or not. A listener and listener object is then made and bound to the Key class (which is keyboard buttons). Whenever a key is then pressed down, an IF statement occurs which says: "If they key being pressed down is 97 (or 'a') and the 'C' note is not currently being played, then do the commands seen above". It is very effective and solves a problem that would have brought the entire animation down with poor coding. I devised this code myself and I feel a real sense of accomplishment at conquering a problem that Flash has no actual tool of function to solve. There is one problem though, where if you press multiple keys one of them will remain highlighted. This never happened before I implemented my key pressing code, so I will have to develop it further.

Prototype 09 - Click here to view

I was able to fix the problem of not being able to press multiple keys at the same time. The problem was that I was using one big IF loop that used ELSE statements, so the loop began, completed one of the ELSE conditions for one of the rollovers, then quit the entire loop, leaving the other pressed keys in a virtual no mans land! I fixed the problem by making all the else statements into separate IF statements which means they'll all be tested and executed accordingly. There are now roughly thirteen IF statements being run, which may sound like a lot but really, any computer can handle this tiny amount of computations. In this version I also revamped a lot of the code and made it less heavy. The library is also a lot neater and has only the bare essentials contained within it. It is now more manageable, neater, easier to update and the overall file size has decreased too.

The text is now dynamic labels instantiated on runtime and no longer graphical symbols. The font used is Trebuchet MS; a very clear and crisp sans-serif font which I chose for its readability. I also used a musical symbol font to show the flat symbols properly which you can see if you roll over a black note. The fonts have been embedded so that the flash movie will work correctly on any machine no matter if they have the fonts already or not.

This version marks that I am now almost finished. I still need to add some kind of help screen or tooltip telling viewers that they can also use the keyboard as an input device as well as the mouse, and that the piano is capable of playing multiple keys at once. These instructions are essential to be included as they provide a way for my audience to understand all of the features available to them, which will most definitely enhance their experience and enjoyment factor. To make it more educational than just the notes popping up on the screen, I want to also include a bar of sheet music and have the notes appear as the keys are pressed.

Prototype 10 - Click here to view

In this version I finally added the help screen that rounds the project out. It's made with a movie clip that simply fades in and out as you roll over the help button. It gives instructions on how to play the notes using your keyboard and makes the viewer aware that by using the keyboard, they can play multiple notes at once (letting them play chords).

I also refined the layout more, and sized the keys and fingers down accordingly, allowing for the inclusion of the help button and my sheet music movie clip. The sheet music movie clip was not too hard to make as it used the same rollover principles that I had mastered for the notes in earlier prototypes. I debated also putting the letter of the note on the sheet music too, but decided against it for two reasons. 1) It would make the UI more cluttered and 2) The name of the note is already shown as you rollover the note, so it would be pointless to include the same information twice, and become annoying and distracting for the viewer.

Conclusion

I think that I can safely say this will be the final prototype of the flash piano, and I'm more than pleased at how it has turned out. There are some other flash pianos on the internet out there but they all suffer from the same flaws which my piano does not. Most of them don't incorporate theory and practical aspects together; mine does. Most of them don't have the ability to play multiple notes at the same time, and if they do, then the notes are trapped in an infinite sound loop: my piano offers this feature without the flaw.

I believe it's educational; it tells people the name of the note that they're playing, it lets them hear what it sounds like and it even shows them how that note looks and where it is positioned in sheet music. I believe it's enjoyable; many of the people I have shown this too sit for periods of time just trying to make their own song up, or trying to work out a simple song through trial and error. I believe it will be a great addition to the website, offering another fun level of interactivity with my audience.

Good Range Of Songs

Throughout the process of making the piano, I have learnt quite a few songs that are all playable on this flash animation, listed below:

• I'm A Little Teapot
• Jingle Bells
• Happy Birthday
• Twinkle Twinkle Little Star
• Mary Had A Little Lamb
• Row Row Row Your Boat
• The Scientist - Yes even this Coldplay song can be played with a number of chords on this piano!

I'm very happy with this; it's a good range of songs for beginners to practice and learn from, it's really enjoyable and the fact you can use the keyboard as well as the mouse offers the opportunity of chords as well and this is all I could have hoped for. The ActionScript for playing along with the piano is still a bit beyond me but I will look into it if I have time. Meanwhile, I will put up the sheet music and finger positions on the same page as the flash piano.

Thoughts For Week 8

• Start thinking of the layout of Piano Man and think about recording a full proper video, from start to finish with my cuts, transitions, overlays, and voice overs.
• (From Week Three!) Write out a tutorial list from start to beginning, of everything I want to teach a learner. Mark which ones will be written content with accompanying images, and which ones will be video tutorials.

Week 7

Looking over my Gantt chart, I see that I have started parts of my project early and left parts till later dates. I want to get back on track as soon as possible, because I'd be better off sticking to the chart as much as possible as the deadlines I have given myself seem achievable within their time frames. To get one major task done on the Gantt chart done on time, I devoted most of the week to developing my Flash Piano.

Flash Piano Prototypes

Just to recap on this idea, the flash piano was an idea I had that would be mainly aimed at a younger audience although not excluding my target audience. The piano would have a fully playable octave of notes that when rolled over would highlight, indicating the note the user has scrolled over and also give the name of that note. When the note is clicked it would also play the corresponding sound it would make if it were pressed on an actual piano. The point of making this is mainly as a fun activity for the site but also as a tool for learning. I want to supply the notes for simple songs and let people try and play them, which will be both enjoyable and educational; they will be learning the layout of the keys, which keys are which, and what each key sounds like.

With all of this in mind, I have decided to work with ActionScript 2.0 rather than the newer version. The reason for this is that everything I want to accomplish can be done in either version but I have had more experience with version 2.0. It is also more supported on various tutorial sites in case I get stuck and need to ask a question.

Prototype 01 - Click here to view

This is a very basic starting point for me to continue working from. The keys are made and from two different buttons; one for white keys and one for black keys. The buttons have over states which can be seen from using the mouse to roll over them.

I have laid out each sound on the timeline and given them frame labels and appropriate stop actions, then told the buttons that when they're clicked they should go to the appropriate frame. In the next prototype I would like to try and incorporate labels for the notes so that people will know exactly which note they are playing.

Prototype 02 - Click here to view

In this version I changed the method of how I made the keys of the piano. Instead of using buttons, I used movie clips which gave me much more flexibility and interactivity options. A button only has four states and no timeline, where a movie clip has a timeline, layers and can be programmed to do whatever you wish using ActionScript. I also redrew the keys and made them a lot nicer, and proportionate than the last version. It's important they accurately reflect actual keys both for professional and aesthetic qualities.

I made a unique movie clip for each key, and put a graphic of a letter inside it, along with a fading rollover state. I also made rollover and rollout functions which each movie clip calls. While this version now has labels displaying on each key, the library is now littered with numerous graphics and movie clips, most of which are quite unnecessary.

Prototype 03 - Click here to view

In this prototype I added a background colour (which is the same green of my logo as I want to try and keep a brand consistency throughout) and adjusted the rollover states of the clips. I thought they were slightly too slow on the previous version, and the fading letter took focus away from the new letter that's now appearing. This version still uses the numerous unique movie clips because I couldn't get the text to be dynamic and have an alpha transparency fade. I'm convinced that the tween is correct and that there's no reason why it shouldn't work. I shall leave the labels as graphics for now and look into this later.

I also was able to add keyboard input for this version which I'm quite pleased with. The keys give it another level of interactivity, and are really fun to play with. Generally it's a lot easier and faster to play on the keyboard then with the mouse, so it makes for a few faster songs too. The code took me a fair while to work out on my own, and eventually it was the script helper that pointed me in the right direction.

on (keyPress "1") {
this.gotoAndPlay(40);
_root.cKey_Sound.start(0,1);
}

The keys which control the white keys of the piano are the numbers 1 to 8 on the keyboard, and holding shift while pressing the corresponding keys will then control the black notes. After some research I have found out that the code above is from older versions of Flash such as Flash 5. While it works, it's probably better and proper if I update it at some stage for newer versions. One problem the code has is that it cannot detect if a key is still pressed or not, and if you hold the number in for a few seconds, it loops the sound and rollover state. This is quite horrible and it's likely most people will come across this bug. I definitely need to update the code.

Prototype 04 - Click here to view

This version saw a major change in size and quality. The sounds that I had been using up till now were directly ripped from one my scale videos that I had recorded previously. They contained a slight echo on some of the notes and on the higher 'c' note there sounded like a ticking at the start of the note. Instead of using these, I went online and found some free samplings for these keys and used these instead, they sound much better, they are of equal length, and they're actually smaller then my original sound files. I think this sounds so much better than my previous versions and rounds out the entire project. Smaller file sizes of course mean less bandwidth and smaller load times for the end viewer.

At this version I decided to get feedback from friends and family, to see if there was anything major I should change before going further. My friends have gave it good reception, and loved just tinkering on it. Some of them didn't know where keys were and in the space of minutes, I could ask them to play a certain note like 'a' and they would be able to find it. This is a good indication of my goal being completed!

I will make sure to put the notes for about five tunes underneath, with an mp3 of how they SHOULD sound and also the sheet music (tying the theory with the practical playing).

Finally Figured Out Video Problem

After weeks of running in circles about this video situation with the 16:9 and 4:3 situation, I discovered that it's my own fault and as the saying goes it truly is always something so simple that I've overlooked. In Premiere, I have always been making 16:9 projects because I mentally assumed this is the project type I should be making as the footage I am importing is in the same ratio. I should really be making a 4:3 project as this is the final outcome I want from the footage.

The footage needs to be interpreted inside Adobe Premiere as DV PAL with a pixel aspect ratio of 1.042, and the project needs to be DV PAL, not DV PAL Widescreen.

Thoughts For Easter

• I have a flash course on the first week of Easter. It's being held at Queen Street Studios and will run over two days, teaching an intermediate course of Flash and ActionScript. Hopefully the course will equip me with what I need to enrich my Piano a little more and fix these bugs.
• (From Week Three!) Write out a tutorial list from start to beginning, of everything I want to teach a learner. I should mark which ones will be written content with accompanying images, and which ones will be video tutorials. I want it written out so that when week eight arrives, I can start recording all of the video tutorials, and also start writing the theory and accompanying paragraphs.
• I definitely need to get some screen designs made out and a final one chosen for my major project. I need to remember that the aim of the site is to show people that piano is not all about the classical side, so the look should be refreshing.
• I would be pleased if my portfolio website was up and running by the end of Easter, which would mean one entire module is over and done with, and I can devote the rest of my time to the two remaining modules.
• I want to have a full video tutorial made from start to finish which includes my branding at the start and end of the video, and all of my voiceovers and notes recorded. It'll be good to see it and make any mental notes of adjustments I need to make when I start my recordings of the others.

Week 6

A Logo At Last

Finally, I've decided on a logo and I can end my ridiculous weekly logo contest. The labs on Friday were completely empty and I got a great talk with Gabriel and Chris (Not to leave Nick out, he walked by my machine and laughed at the above image of the massive red X's. I told him it was closure hah). I was quite pleased to hear them say none of the logos were 'bad' and that I just needed to PICK one. I've decided to go with the one I made last week, which is the oversized treble clef in the green box. My reasons for dropping the others are:

• The piano silhouette is too complicated; it's a very detailed logo and while it probably the most memorable logo of the bunch, if it needed to be sized down it would not work because all of its detail would be lost. It can only work at larger sizes and a logo needs to be dynamic in size. I needed to remember that my logo will be placed on my sheet music, business cards, iTunes podcasts and other deliverables.
• The funkier brand with the multiple colours had a lot of potential. As Chris said, If I was to redraw the piano with rectangles, made it a lot straighter and chose a different font, then it would work a lot better. After I thought about it, the brand was just slightly too funky and cartoonish; I want to instill a sense of professionalism as well as being a bit funky; generally I thought the videos wouldn't be taken seriously or thought of seriously with a more cartoonish brand.

The reason I have chose the logo from last week is because I really love the symbol I've created, I think it's professional at the same time as being quite stylish. The colour is also interchangeable and the green may or may not stick, I'll have to experiment with colours but for now I quite like that green. It'll also make a great favicon and be quite recognisable, as well as performing brilliantly at smaller levels such as mini cards and deliverables like chord charts and sheet music.

Rejigging The Logo

The logo's that you can see in week five are certainly not finished so I got around to fixing them up. I chose the bottom left logo as I think this could be the most balanced of the group. First and foremost, I took the rest symbol out of the word piano because around 6 of 10 people got it, and Gabriel and Chris were two of the people who didn't get it. That’s not my reason for dropping it though; it really doesn't blend in with the font as there's a difference in the thickness, so I went to illustrator and took an 'O' of the same font, and tried to make it look like a rest symbol, but it kept deviating too much from the font. There wasn't really a way of keeping them similar as they're quite different. I may work on it at a later point but for now I've dropped it.

I also remade the bottom tail of the clef; it wasn't looking sharp or curved, and was more of a blob than an end point. To combat this, I used the pen tool and played with the anchor points and curves to try and make it look more flowing, and I think it definitely works a lot better now. Subconsciously it looks a good bit better.

I levelled the text out so that the top and bottom of the text aligned with the top and bottom of the logo. It balances a lot better and is much more pleasing to the eye. I had a problem where the 'P' and 'M' would not align correctly which is better seen in the image above. I had those two choices of alignment and I went with the top one as it seemed much more balanced.

I also put about 20 pixels of space between the letters and the right side of the logo, to even the look of it out. The text beforehand seemed to float too far away from the symbol and the logo had a disjointed feel, which has most definitely been fixed now. Compared to what it was before, I think these refinements greatly improve the look and feel of the logo. It's now much better designed and pleasing to the eye, and I'm happy with my choice.

Holding Page Now Up

With the logo ready and in a much more final state, I have updated the website's home page with a holding page containing the logo and some text with keywords in it to try and better integrate with Google Search. The previous holding page was an unstyled heading one which would not have attracted any attention whatsoever. Anyone who would have stumbled upon the page would not have given visiting it again a second thought, but at least now with a proper logo being shown, they may consider coming back.

I also sized down the symbol and used it as a favicon to add to the sites brand strength. I think it works extremely well and is memorable and colourful. It certainly stands out in a list of favourites considering many sites still don't have their own favicons.

Thoughts For Week 7

• I still need to start work on the flash piano and learn more about ActionScript.
• (From Week Three!) Write out a tutorial list from start to beginning, of everything I want to teach a learner. Mark which ones will be written content with accompanying images, and which ones will be video tutorials.

Week 5

Another Logo Attempt

I've decided to give the logo yet another go. I liked the one I made last week but it seemed too loose; I don't think it was structured well and it wasn't elegant enough. I want the logo to be catchy and funky, yet also elegant. I was reading some sheet music during the week and I focused on the clef for a moment, getting an idea of using it for my logo.

I made a green square (the green could change to a different colour, but I like it for now) and then put a white clef inside it. I immediately didn't warm to it, so I oversized the clef so that it hung outside of the green square. I really love this look and made two versions; one version is very oversized and the other is only slightly oversized.

The reason for making the two different kinds was mainly experimentation but also because some people may not have been able to guess what the larger clef actually was, and just taken it as a decorative swirl. This would not have been good for the brand because I want the clef to symbolise music in the eyes of the audience.

I have also changed the letter 'o' in the word piano to a 'whole note' in musical composition. The people that I have shown these logo's to have all understood it's relation to music, as well as the clef symbol and I am quite pleased at how well people have caught onto the meanings. I think it's quite a professional yet stylish logo, and I am definitely considering using it over the piano silhouette.

Finished Viva

I have finished my viva content and sent it off to Nicklas. There were some points I wanted to bring across to the audience in my presentation:

• Firstly, I wanted to give a general overlook of the project right from the get go, so the listeners will have an idea of the final project as I go along.
• I also want to give people an idea of my own personal experience to show them that I'm capable of teaching a beginner what they need to know.
• The perception of the piano in modern times is something I also want to address; it's still seen as a classical art form and hardly ever put into modern contexts by the public. I remember being in the labs in semester one and someone asked me if I had been "Classically Trained"... No!
• I would also like to show my research from semester one which shows how poor the quality of resources on the internet really is and show my questionnaire findings.
• I also wanted to bring an iPod along with me and show a clip of a video tutorial on it, but this would constitute as video motion which isn't allowed in our projects. Instead, I will take a picture of an iPod and superimpose my video tutorial onto the top of it.
• I want to state YouTube figures, showing the demand for these amateur tutorials. Despite some offering very bad quality or poor teaching, there are still a lot of people watching and even subscribing to these channels.

Continuing ActionScript

I have started to learn about event listeners and how they will be critical for my flash piano. An event listener does exactly what it says; it listens for events. These events could be a mouse click, a mouse hover, a mouse release and more. When this event triggers, a function is called. The function can do many many things but in my case it will be mouse click event with a function that will play a sound file and show an active button state for a downpressed key.

Here is an example of an event listener that starts and stops a movie upon click:

play_btn.addEventListener(MouseEvent.CLICK, playMovie);

function playMovie(event) {
play();
}

stop_btn.addEventListener(MouseEvent.CLICK, stopMovie);

function stopMovie(event) {
stop();
}

I have been watching some DVD tutorials that I was given, "Flash CS3 Professional - Fundamentals" and "ActionScript 3.0 in Flash CS3 Professional Essential Training". They are extremely useful but still very general, I am working my way through them but a little more slowly that I would like to due to other modules and practising for my viva presentation.

Dynamic FLV Player At Long Last!

This took an incredible amount of time to complete but it was an aspect of the site that would be incredibly beneficial to be dynamic. Why I wanted it dynamic is because this will allow me to have just one single FLV Player .swf file instead of one per video. It also means I can have one single video tutorial page which loads all of its content dynamically. This stops littering the server with .swf files and cuts down on server space and bandwidth. It means I can change file paths and not have to worry about republishing a .swf file again. It's much cleaner, neater, more manageable, and much more professional for any site.

There were no helpful guides or hints on how to create this player. I knew that I somehow needed to pass a variable containing the path of the FLV to the flash file and as I searched for passing variables to flash, I came up against dead end after dead end; methods that wouldn't work, methods that were out of date, and such others. In the end I figured it out myself by combining some tutorials and what I had learnt from the DVD tutorials.

This is the process which I employed to get the FLV Player into a dynamic state:

• I gave the component an instance name and then create a new layer and name it actions. In the actions frame, I create two variables and assign them to the loaderInfo class, which is where the external variables get passed too. I then set the source property of the video to this variable. The code can be seen below.

var videoSource:String = this.root.loaderInfo.parameters.video;
var videoTitle:String = this.root.loaderInfo.parameters.title;
thePlayer.source = videoSource;
dynapath.text = videoTitle;


• Now that the flash file has been made, I use PHP to retrieve the variables from the database pending on what id the user provides, and then send the returned video path to the flash file. The ID is obtained from a link on a previous page that the user clicks, which is already coded with the ID in its URI.

Here are two links to the FLV player prototype, which can be changed by changing the ID from 4 to 5:

• http://www.thepianoman.info/prototypes/dynamicplayer/vidteststrippeddown.php?id=4
• http://www.thepianoman.info/prototypes/dynamicplayer/vidteststrippeddown.php?id=5

I have tested the FLV player in Safari, Firefox and Internet Explorer. I have tested it in versions six and seven of Internet Explorer, and versions two and three of Firefox. I did come across one error in Internet Explorer and Firefox were the FLV refused to load; I never discovered why but I narrowed it down to two reasons; a) I was in University, and their servers are...crap. b) Those browsers were not using Flash Player 9. Since these errors I've checked cross browser and cross platform, all tests being successful!

Thoughts For Week 6

• I still need to start work on the flash piano and learn more about ActionScript.
• I need to decide a final logo so I can start making the CSS layouts and give the site structure.
• (From Week Three!) Write out a tutorial list from start to beginning, of everything I want to teach a learner. Mark which ones will be written content with accompanying images, and which ones will be video tutorials.

Week 4

URL Encoding

This week I started to look at URL encoding, something we recently done in another module. It occurred to me that when I am putting in the addresses of any of my videos, they could possibly have bad characters that may cause my site to break partially or even entirely. I looked up the PHP commands that would encode the URL to a safe value, and decode it back to its original value. The idea is that when you are submitting a URL or value to the database, it must be encoded, and when you retrieve it, you can then decode it.

PHP:

<?php
$var1 = urlencode("The quick brown fox, jumped over that lazy dog!");
$var2 = urldecode($var1);
echo $var1;
echo "<br />";
echo $var2;
?>


Result:

The+quick+brown+fox%2C+jumped+over+that+lazy+dog%21
The quick brown fox, jumped over that lazy dog!


This could most definitely be employed for the URL of my videos whenever I get round to making the FLV player dynamically play them; it will pull the URL and additional content from the database so it will need to be escaped and then decoded. It will make my site much safer and cleaner.

After Effects

I have been playing more in After Effects and have just realised how powerful a program it is. It truly is the photoshop of the video world, with everything video related at it's disposal. There are some great things to do in here that seem more powerful and flexible than in Premiere, like colour adjustment and contrast balancing, layer masking and feathers.

I did some tests with colour corrections and contrasts, which really brightened up the white keys. They look incredibly sharp and seemingly much more professional. I think this is a great effect and really takes the quality standard of the videos even higher; I'll definitely be using this for every video I record.

I also played with feathering and layering when I blacked out the top and bottom parts of the video, mainly the piano top with all the buttons and my wrists. It didn't seem just right; my hands appeared to magically be floating in the middle of the screen, and they keys seemed out of place just floating in the middle. I will need to experiment with other layer positions.

Actionscripting

I have started to learn ActionScript and am finding it quite difficult. Flash is most definitely not my strong point and I am finding this extra tough for me. I've started learning basic stuff such as how to declare variable and the how to use those variables as content for shapes and controls on the screen like text boxes. I also joined actionscript.org which is a really great website for anything ActionScript related.

I have started to think about the flash piano, and come to the conclusion that its main purpose is a fun pastime for the site, but a pastime that is indeed an educational tool. When a key is clicked, it plays that sound and displays the name of that key. I think that by supplying simple sheet music to play, and letting people try and play it through the flash piano it will help them to learn the keys better and which key is where. I have tried to mind map out what I want the flash piano to do and came up with the following:

• Whenever a key is pressed a sound will play.
• Whenever a key is pressed a label will appear telling the person what key they have pressed.
• The keys will also be bound to the keyboard to let people play with the keyboard and the mouse.
• There will be very simple songs applied alongside the piano for people to practise.

Another Bash At Logos

After another talk with Gabriel about my branding he suggested trying something funkier, a lot more colourful that would grab the attention of the viewer and say "Hey, come check this site out". I started looking around for good colourful inspiration and can find no better example than the iPod adverts seen on TV. The bright, funky colour with the silhouette character dancing to the song is amazing and very stylish and youthful. I wanted to try something a lot more colourful for my own brand and made the following:

This was my first experiment. I thought that perhaps wavy keys might have been a good path to pursue so I took one of the pictures from documenting my piano recordings, and cut the keys out with the lasso tool. I then applied some filters to make them more drawn looking rather than real keys. I then used the liquify filter to make them wavy. The problem with liquify is that it can be quite destructive and as you can probably see from the top; some of the black keys appear quite thick compared to some of the white keys. This isn't the right direction but at least I've explored this avenue and put it down as research!

For this one I tried a more traced approach. I took another photo of my recording sessions and then played with some filters in Photoshop to get the look seen above. I chose a really cool blue; blue is my favourite colour and I think the calmness of this blue would give the brand a relaxed persona. I didn't get too far with this idea because as soon as I saw this traced image I thought of having jet white keys and the black keys being whatever colour the background is. I abandoned this idea here but put it in for research to show the process of how I came up with the next logo.

I really like these logos, I wanted to try and make a logo that could have many different colour schemes, possibly a different colour scheme for each section of the website, which would then let me have tabbed navigation in different colours. I like the simplicity of this logo and it would make a very nice colourful set of business cards. I stuck with the 'Moderna' font as I think it flows nicely and has a good shape to it. For the keyboard I used one from my original logo suggestions and took it into Photoshop and played with the colours. I really like this one; it's fresh, colourful, catching and simple. I do like it just as much as the Grand Piano Silhouette and I'll have to think about which one I want to use. My friends and peers like both but say the Grand Piano is more memorable to them. The grand piano could be quite funky too with the right colour so I think I have two winners here.

Other Points

• I started gathering the information I will need for my presentation. I wrote out a plan of what I want to include and I had narrowed it down to; explaining that the piano is still not seen as cool in modern times, the lack of quality resources on the internet, and that my site will promote piano and teach beginner's at the same time.
• I added EOLAS Script to the test videos to make them work properly in IE without having to click to activate. It's a really annoying feature of IE that I would not like my viewers to have to experience; this script handles it well by automatically clicking and activating the flash window for the viewer.
• I added two parameters to the video tags in the XHTML of the test videos to enable the full screen ability to work. The full screen ability is turned off by default with no mention of how to turn it on and it took me quite some time to figure out. I have tested in Safari, Internet Explorer, Firefox and Opera with all browsers supporting the full screen mode fine. It means that viewers can maximise the video and get the full screen enjoyment experience from it.
• I read a great article from the Adobe website which is a flash video learning guide which gives you guidelines on settings, encoding, delivery options, and a look at the CS3 Video Encoder.

Thoughts For Week 5

• Try to start work on the flash piano. I need to learn more about ActionScript, particularly event listeners and how to assign sounds to certain movie clips, and have them trigger upon clicking.
• Try to get another logo made, if I'm able to spend a few hours on it I could create something great and finally have closure on this whole endeavour.
• I still need to get the general CSS layout created; it's not a major thing really but a good starting framework will help me start to piece all my code into my XHTML structure.
• I've been told my presentation will be on the Friday of week five; I will need to get a presentation created quickly and get practising what I want to say.

Week 3

Tutorials Content

I want to get as much of the content written early so I can Gabriel samples of both the video content and the more static content; I'd like to see if he thinks it's comprehensive enough. I also want to see which tutorials will be static and which ones will be video based, and of all which can have supporting sheet music. I think it's time to write out a list of everything a learner will expect from my site.

Support Materials

I've been thinking about the supporting materials and how each of them are going to be accomplished. I've made this list below to summarise what each will do and how they'll be done:

• Chord Chart - These can be done in a number of ways, but I think the best options for this site would be two things. Firstly, it would be useful to have a video dedicated to going through specific chords so that people can watch and take note of what keys I am playing. The second method would be to have a static tutorial type page with either a flash animation of the different chords, or large high quality images. This part of the website will be very important because I think people will often refer back to it even after watching all of the tutorials. I myself often forget what keys to play for a C Major Chord!
• Sheet Music - The sheet music will be to accompany the tutorials that I post. If i'm playing a specific pattern or notes, the viewer will be able to download that sheet music and take it with them to their keyboard or piano and practice it. I will also be including sheet music for some songs to let people get a feel for reading and playing modern music and get them started on their path. The sheet music will be created in Finale SongWriter.
• MP3 Versions of Tutorials - This will be quite easily done. Whenever I have produced the tutorial, I can then export it to MP3 and use Audacity to edit any video specific parts out, and replace them with an audio version. There is no need to hear me on an MP3 saying "so as you can see from where my hand is here, what you need to do is...".
• iPod Versions of Tutorials - This is a definite output that I want to try and reach, it's a large part of everyday life for my target audience to use their iPod's and by supplying them with a version of my tutorials that will suit their iPod, I'm reaching them offline as well as online.

SVG For Sheet Music

In one of my other modules, Interactive Multimedia Computing, I came across an application of XML technology called SVG (Scalable Vector Graphics) which are very much like vector graphics from Illustrator and so on. It is a great way of creating 2d shapes, text and other images, which made me think about sheet music. I read an article specifically about creating sheet music with SVG technology. It would have been a good idea except that Internet Explorer does not support SVG's and the only browser capable of rendering them correctly is Firefox. This idea won't be used but I thought I would include it as research anyway.

Logo Feedback

Gabriel said that the logo is better than what it and after seeing how I used different vibrant colours, gave me the advice of trying to expand on that slightly. There might be an idea in taking the photographs I have shot up till now of the keyboard and trying to make them a silhouette with a really bright and vibrant colour behind it.

The font choice of Moderna seems to be a good one because it has more bulk to it than the other more rigid ones which I had chosen. I will try and create something over the next week or two in my 'spare time'.

PayPal On Site

After speaking to Gabriel and mentioning the iTunes podcasts, and putting up a few free ones then charging 49p for others, he reminded me of putting PayPal onto the site. I had dismissed the idea of it last semester thinking who would really give me money in appreciation of my website, but I can't get any money from it if I don't provide the facility in the first place, so I looked into how difficult it would be to set up.

Donations appear to be quite easy to set up with a range of benefits. You can set fixed amount donations and also let your donor choose their own amount. The great thing about this sceme is there are no time limits, or quotas, or monthly fee's; it's completely free and you can use it for as long as you like. The actual code is a simple HTML form which posts its results back to a page at PayPal and processes the request.

<form name="_xclick" action="https://www.paypal.com/us/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_xclick">
<input type="hidden" name="business" value="me@mybusiness.com">
<input type="hidden" name="item_name" value="Team In Training">
<input type="hidden" name="currency_code" value="USD">
<input type="hidden" name="amount" value="25.00">
<input type="image" src="http://www.paypal.com/en_US/i/btn/btn_donate_LG.gif" border="0" name="submit" alt="Make payments with PayPal - it's fast, free and secure!">
</form>

It does seem quite easy and maybe whenever I get the site up and going I will sign myself up for an accound and introduce the code for the referral scheme, it's free after all!

Video Editing

I decided to edit the video which I took last week, and see what I could do with it. After editing it in Adobe Premiere to how I would like it, I decided to leave the voiceover for the time being and play around with encoding settings to try and figure out what would be best for the site. I will obviously want a high quality with a low file size.

I exported the video back out of Adobe Premiere as another AVI, and used the Adobe Flash CS3 Video Encoder to encode a number of FLV files in various formats and custom settings. Right off the bat though, I encountered a problem. All of the video's I encoded had strange lines going across them and they got worse every time there was movement on the screen. I thought it was the way I had encoded the video and it turned out to be Interlacing.

A system developed for television which divides each video frame into two fields. This is done by first drawing one field consisting of an image’s odd scan lines (1, 3, 5…525) and then drawing the remaining even scan lines (2, 4, 6…), interweaving both fields. - Metacafe

These horrible streaky lines were a result of the video being interlaced by the DV Camcorder, and to solve it I must tell the encored to deinterlace the video and then encode it.

Test 01 - Click here to view

• Bitrate: 400kb/s
• Codec: On2 VP6
• Audio: MP3 128kbps (Stereo)

These video settings did an incredible job at sizing down the video. The original 30 second clip was 108mb and the FLV version using the above settings shrunk to just over 2mb. The video is quite watchable but does seem to suffer from slight blurriness and a lack of fine quality. It definitely could use a higher bitrate.

Test 02 - Click here to view

• Bitrate: 700kb/s
• Codec: On2 VP6
• Audio: MP3 128kbps (Stereo)

Despite the fact that there is another 300kb/s of video bitrate, the file size only gets just over a megabyte bigger than the previous encoding. It seems slightly less blurry but does look as if it could be of even better quality. The original video was encoded at over 28000 kb/s (which I find hard to believe but three different programs tell me the same thing!).

Test 03 - Click here to view

• Bitrate: 1500kb/s
• Codec: On2 VP6
• Audio: MP3 128kbps (Stereo)

This video had much better results, the picture was much crisper and more text on the keyboard was readable. The problem is that the 30 second clip has now jumped up to 6mb. I think this could be a bit overboard but then again maybe not; the FLV will buffer, and if someone is watching a tutorial properly, then they wont be fast forwarding through it.

I think the best test and setting list is Test 03 - It's the biggest of the bunch but it's the best quality. A five minute tutorial based on these file sizes would be 60mb, and I think that is fairly reasonable.

A Small Problem

I encountered a strange problem after making all the tests. I ran the FLV files in VLC Media Player, which then asked me what aspect ratio to use. The default in the FLV files is 4:3, and I had not noticed this right away. The videos are all shot in 16:9, then during the FLV conversion process they are changed to 4:3.

The FLV Playback Component in Adobe Flash when linked to a video will always play it in 4:3 mode, leaving out the black borders at the top and bottom. After researching this problem further, I found a TechNote from the Adobe website. It states that the video encoder will resize all 16:9 content to 4:3, and that the solution to this problem is to crop the dimensons of the video to be 4:3 so it does not appear distorted anymore. I will investigate this further.

Thoughts For Week 4

• Look into how to dynamically pass the source of the flv component to it. If I don't figure this out, I will have a swf movie for each flv video, with only the source parameter changing. Surely there is a way of making the source attribute dynamic so I only need one swf file.
• Look into adding more validation to that passingvariables.php page because currently if there is no id, I have an error message saying sorry, but if there IS an id, and it doesn't exist, the page still tries to load anyway. This needs fixed.
• Have another go at rebranding the major project, this time with the new idea of funky colours and a silhouette.
• Write out a tutorial list from start to beginning, of everything I want to teach a learner. Mark which ones will be written content with accompanying images, and which ones will be video tutorials.

^ Back To Top ^

Week 2

DreamHost Really Is A Dream Host

This week I went and bought the URL http://www.thepianoman.info and I am extremely impressed with the service from DreamHost. I looked around at some of their competitors in order to find the best deal for my specific needs. For my major project, I need a provider that offers a large amount of monthly bandwidth traffic because my site will be mostly revolving around these video tutorials. Below are some of the hosts I looked into:

• http://www.hostmonster.com/ - This company was recomended to me by friends who have been with them for a good few years prior to now. They vouch for them and say the service is fast and there is hardly any down time. I looked into what they offer and noticed that their monthly bandwidth is 15,000GB and that they limit the amount of MySQL databases you can have per account. Their price was reasonable, and in fact is cheaper than DreamHost. While their services seem sufficient for my needs, I decided not to rule any others out until I investigated more.
• http://www.godaddy.com - As it's always advertised in computing magazines and on TV and on the superbowl, I thought I would check it out. They do a range of deals from economy to premium plans. Their premium plan is dearer than HostMonster, and they offer not even a fifth of what HostMonster does. Enough said!
• http://www.dreamhost.com/ - This is the strongest of the three; It's cheap, comes well recomended, and has the best hosting services by far. They offer 500GB of storage, 5.0TB (yes, TB!) of monthly bandwidth, and an unlimited number of MySQL databases. What's better is that first time customers get their first domain name for free, so this is by far the best choice.

The whole process took less than an hour and I was able to access my domain within that hour. Their web panel is easy to use and you are able to manage your databases and webmail quite effortlessly. I'll talk about experimenting with MySQL a little later this week. The main decider for me to go with DreamHost was the bandwidth; Piano Man is definitely going to need as large a bandwidth as it can with these video tutorials so the higher the better, and I think 5TB is more than sufficient for my project. Now that the domain is mine, I have added a temporary page.

I read up on the Meta tags (and how a search engine uses them) you normally see on the top of a webpage to see how necessary they were. I generally found out that metadata is information about information, or data about data. I found and read this article from the W3Schools website. The Meta tag uses name and content attributes to add embed information about the current page inside it. You can use a keyword Meta tag and a description Meta tag. The keywords are phrases and words used to add relevance to your webpage in search engine listings, and the description is the sentence in the search engine listing.

These Meta tags seem to have some sway in how a search engine lists your website, especially the description Meta tag which acts as the couple of lines on Google underneath your page title in a search listing. After reading this I put some thought into making keywords and a description into the pages. I've included them both in code tags below:

<meta name="keywords" content="Piano, Piano Tutorials, Beginner's Guide, Lessons, Piano Lessons, Learn Piano, Keyboard, Sheet Music, Video Tutorials, Chords, Scales, Steps, Rests, Time Signatures">

<meta name="description" content="A beginner's guide to learning to play piano through high quality video tutorials, interactive animations, downloadable sheet music and more.">

<title>Piano Man - A Beginner's Guide To Learning Piano</title>

I think that the keywords chosen say everything I want to say about my website, it offers tutorials and other content for the use of beginners just starting to learn to play. It also mentions a few phrases such as chords and time signatures in the hope that someone typing these in a search engine to learn a bit more about them will come across my site. After implementing these, I added the site to Google. I'll keep checking to see if I am listed by typing in a lot of the keywords and the page title.

iTunes Podcasts

A podcast is an episodic program delivered via the Internet using an XML protocol called RSS. Podcast episodes can be audio files, video files, documents, or any combination of the three. -- Apple

I thought about this concept earlier in the week. I'm a subscriber to a lot of fan site podcasts through iTunes, for TV showslike Lost and Heroes. As new podcasts become available, I do tend to download and listen or watch them almost immediately. It occurred to me that there is nothing stopping me saving some of my finished videos in the required format, uploading them to my server and creating an iTunes podcast channel. The podcast channel could be styled with my branding and a short description similar to my lift pitch which included a link back to my website. I think this would be a great way of advertising my site further and is another channel of communication with my audience.

I researched more into podcasting (iTunes Podcasting FAQ) and found out that the AAC audio file format allows you to embed images inside it so that you can create a slideshow of images to accompany the audio file; I have often seen this in iTunes podcasts and wondered how it was done. This could mean that for one of my podcasts (perhaps the introduction one) I could record my audio branding and embed the logo inside it. This article also says that iTunes can automatically convert a podcast into the appropriate resolution and format for it to be played on an iPod, which is exactly what one of my intentions was. This means that I'll be able to host them in iPod format on my website, as well as offer them in that same format over the iTunes Podcasts, thus offering my content to a wider audience than just my website visitors. I think it's necessary for me to try and get my content promoted in a number of places, and this is definitely one of those places. It is a definite hotspot for people in my target audience.

Apple have a very comprehensive guide on how to set up a podcast from the very first steps of which file format to use right up to generating the XML document and describes the relevant iTunes specific tags such as <itunes:author> and <itunes:summary>. Unfortunately there is no way of testing a podcast channel until you are ready to submit if for real, so at this moment in time I cannot. I'll definitely revisit this though closer to the end of the project.

Recorded A Video Early

While I was at my dads house one night during the week we went out to the studio to record one of the simpler and shorter tutorials. The tutorial is based on a simple finger exercise which will teach the viewer how to correctly ascend and descend a scale using their entire hand. It's quite simple and will be a fairly short tutorial so it was a good one to test with.

We made some modifications to the studio since last time in order to make the video slightly better. I tried to fix the dodgy angle of the first video as it was slightly skewed. I did this by just adjusting the viewing angle of the camcorder and double and triple checking to make sure it was as straight as I could see. To get rid of some of the glare seen on the previous prototype from semester one, I used another spotlight to bounce the light around the room and eliminate as many shadows as I can. I also placed a large white sheet underneath the keys in order to mask my knees from the video and give the video a nice clean backdrop to add to the professionalism. I will then take the video into After Effects and see if I can adjust the levels to make they keys sharp and crisp.