Thread: Portfolio: sssoundtracked!
View Single Post
Old 01-23-2012, 04:11 AM   #1 (permalink)
TeafortheSoul
Formerly: Tegz
Dark Force Defense League

Demiguise
 
TeafortheSoul's Avatar
 
Join Date: May 2008
Location: Hobbiton
Posts: 24,244

Hogwarts RPG Name:
???
Ravenclaw

Hogwarts RPG Name:
Ronnie Thurkell
Gryffindor
Seventh Year

x12 x12
Default sssoundtracked!
lives in a hobbit hole || Ern and Touz's Nuzzle || roflysst || looking at a seed packet

We all like music, right?

RIGHT.

And we all like RPing, right?

bear with me here

RIGHT!

And we, who RP, hear songs and we think to ourselves, OMGAH! THAT IS ABOUT XXXX CHARACTER!

Rightttt?


Okay so maybe its just me. In any case I fiddle around with graphics sometimes, and I like stalking RPG characters and I like RPing and I like music and I like spamming people with music and I'm learning html so I put all these things together and I came up with a project for me to do right here on SS.

I'm actually pretty inspired by momentai's movie posters in her portfolio here, though I'm not a graphics goddessss like she is so I'm hoping to just wave my fingers and distract you from all that with some clickable goodness.

Without further ado I introduce the CD Project!



SPOILER!!: You Got Questions? I got Answers

Soo.... its just a CD cover with RP charries on it?
Nahhh, click it! And then when a thing comes up, click that a whole bunch too! And then listen! And such!

Woah, wait, so you make soundtracks for RPG characters?
Doesn't everyone? The answer is yes, and while I will try to make the playlist on each one flow to some extent, either by sharing a theme or a genre or by creating some kind of zen-like journey through that character's past and story, sometimes I just kinda like the songs so they'll just appear. So there.

Do you take requests?
Not right now. But I will request from YOU for permission to use your character/ship/story/something if I feel a flash of inspiration. So just RP around and stuff and I might just get all inspired and stalk you like woah. And stuff. If I DO ask you, it'd be soooo useful for you to provide the songs you want AND the links to the youtube videos that you want, though I'll be checking them. The only exception is if I make it for you as a surprise, obviously. But you won't know about that until I do it.

How does it work anyway?
Well see, first I make the CD cover, which as graphicsy peeps know making stuff can be time consuming as it is and I'm making the front and the back cover. Then I assemble the playlist and that goes on the back cover of the CD too. Then I do the html coding which allows me to create what is called an image map, thats the stuff with all this <code> stuff. You can't see it but it makes the song titles clickable and tells the browser to do certain things like opening the youtube link in question in a new window/tab when you click on it. Then I upload the images and the html to my 3owl hosting and put it all together and tadaa! a CD. Its quite time consuming but a lot of fun and gets my creative juices flowing. Curious? Here's what the coding looks like, this is for CD project 6, if you were wondering:

SPOILER!!: code

Code:
  <body>
 <img src="http://teaforthesoul.3owl.com/constantvigilanceback.png" width="500" height="437" alt="" title="constantvigilance" border="0" USEMAP="#constantvigilance"/>
<map id="constantvigilance" name="constantvigilance"><area shape="rect" alt="John Wayne" title="" coords="12,20,121,42" href="http://www.youtube.com/watch?v=0rCETYj_cmA" target="_blank" /><area shape="rect" alt="Guilty Filthy Soul" title="" coords="12,46,167,69" href="http://www.youtube.com/watch?v=z1f-8yWhLzw" target="_blank" /><area shape="rect" alt="The Fixer" title="" coords="15,73,99,100" href="http://www.youtube.com/watch?v=_HbCosiTtag" target="_blank" /><area shape="rect" alt="Karma Police" title="" coords="17,103,128,129" href="http://www.youtube.com/watch?v=IBH97ma9YiI" target="_blank" /><area shape="rect" alt="Up All Night" title="" coords="16,132,130,159" href="http://www.youtube.com/watch?v=boOG4pUR83Q" target="_blank" /><area shape="rect" alt="Shot Yourself in the Foot Again" title="" coords="18,162,280,184" href="http://www.youtube.com/watch?v=ihwzG5-W8tE" target="_blank" /><area shape="rect" alt="Paint it Black" title="" coords="13,189,133,214" href="http://www.youtube.com/watch?v=fPVUa29kHu8" target="_blank" /><area shape="rect" alt="" title="" coords="12,218,236,242" href="http://www.youtube.com/watch?v=n2bYJQFQMs8" target="_blank" /><area shape="rect" alt="Don't Tread on Me" title="" coords="12,247,173,271" href="http://www.youtube.com/watch?v=NmvG2ZiPfoo" target="_blank" /><area shape="rect" alt="Black Betty" title="" coords="14,275,112,294" href="http://www.youtube.com/watch?v=R044sleOW6I" target="_blank" /><area shape="rect" alt="Barracuda" title="" coords="14,296,104,322" href="http://www.youtube.com/watch?v=s4nWy8pmIM4" target="_blank" /><area shape="rect" alt="One Way or Another" title="" coords="16,326,191,352" href="http://www.youtube.com/watch?v=mFerLNdpwO4" target="_blank" /><area shape="rect" alt="Like a Stone" title="" coords="15,357,122,377" href="http://www.youtube.com/watch?v=8wYdUh05PJM" target="_blank" /><area shape="rect" alt="Blue on Black" title="" coords="14,384,133,405" href="http://www.youtube.com/watch?v=V94pBlA4n7U" target="_blank" /></map>
  </body>
Basically this coding tells the page how it should look. Its telling the page 'use this image here' and then each of the 'area shape' parts is what controls what link is clickable on each part of that image. Here's a breakdown for the curious:
SPOILER!!: breakdown of the linking part
Code:
<area shape="I use 'rect' which just means a rectangle" alt="alternate text goes here, helps at a glance to see what link I'm dealing with in each bit of code" title="a title goes here but I don't usually bother, this is what would show up if you hovered over an active link" coords="each number shows the corner of the rectangle that I use for the link shape" href="this is the link that opens" target="this makes it open in a new window or the same window" />





Disclaimer: Please note that clicking the CD front cover will link you to another site teaforthesoul.3owl.com. From there you will be able to click links that will take you to youtube. While I endeavour to choose videos that do not contain swearing or other content that break SS site rules, I take no responsibility for any youtube content or the comments made by its users on videos.
__________________



love is like a letter wrote :: and life is like an envelope
be careful who you give it to :: they might not give it back to you

Last edited by Lissy Longbottom; 05-20-2015 at 02:17 PM.
TeafortheSoul is offline