Monday, August 25, 2008

Persona










Name: Dexter Hogarth
Age: 29
Occupation: Internet Surfer
Hobbies: Dungeons and Dragons, World of Warcraft, Surfing the Internet, Porn, Comic Book and Star Trek Conventions.

Dexter stays glued to the computer just about every waking minute. He is usually online making upgrades to his Ogre Mage which has reached an unspeakable level. He also plays online D&D with his Mega5k Headset. The only times he isn't at the computer he is dressing up as his favorite Super Hero or Star Trek cast member, which are Superman and Data. 



Tuesday, August 19, 2008

Final Project Proposal - Revised

Revised Revised Concept
I did some thinking and decided instead of doing something that has been done a billion times to do something unique. I am going to make an interactive book review site. Using the same technologies as previously described.

Revised Concept
My revised idea is to focus just displaying video's through flash. Allowing people to post comments and rate videos, but through flash with some PHP & MySQL helping to store data.


My Original Concept

My idea for my final project is to make my portfolio site more interactive. I would do this by adding interactive navigation and adding interactive elements when viewing my work. In the process my site will change slightly to incorporate the new interactive elements. I have a few ideas brewing on how the site will change with the new additions. The site will be more static meaning there will not be as many moving elements.

The biggest thing I want to have more interaction with though is my work. This includes the section displaying the websites and videos.

My revised idea is to focus just displaying video's through flash. Allowing people to post comments and rate videos, but through flash with some PHP & MySQL helping to store data

Scope

  • Updating/Refreshing my portfolio site.
  • Keeping people entertained while visiting site.
  • Creating stickiness for my site.
  • Refreshing my skills with different technologies.

Functionality

I haven’t really come up with the precise functionality of the elements involved. I would though like to make the video’s section to have some interesting functionality. Also I would like to make viewing the websites I have posted more interesting possibly with a different way to display them.

The three main things I want to focus on though is:

  1. changing the layout of the site a bit,
  2. changing the way my work is displayed and view, and
  3. new pre-loader with intro transition.

Content/Materials

The content I need is everything that is already included in my portfolio site the following is a quick list of the items:

  • .fla of my site
  • Video Work
  • Websites

Materials needed are things to assist me with creating the elements I want to incorporate into the site: peer help, tutorials, access to computer with programs for me to create what I need to create. This may include Photoshop, Illustrator, Flash, TextMate or a comparable text editor, FTP program.

Tuesday, August 12, 2008

Media Integration

I decided to make a little site for a short film I made in an Editing class called Social Dissonance. I wanted to try communicating with Flash through JavaScript and I ran into some pitfalls along the way.

The big thing I ran into that I finally figured out was taking out the <noscript> </noscript> tags surrounding your flash movie if you embed it using Dreamweaver.

There is another way to go about doing this with some simple code within Flash, but I did it this way because I think you can do a few more things more easliy. Below I am going to post the code to get this to work properly.

JAVASCRIPT CODE
<script language="text/javascript">

function getFlashMovieObject(movieName)
{
if (window.document[movieName])
{
return window.document[movieName];
}
if (navigator.appName.indexOf("Microsoft Internet")==-1)
{
if (document.embeds && document.embeds[movieName])
return document.embeds[movieName];
}
else // if (navigator.appName.indexOf("Microsoft Internet")!=-1)
{
return document.getElementById(movieName);
}
}

function StopFlashMovie()
{
var flashMovie=getFlashMovieObject("myFlashMovie");
flashMovie.StopPlay();
}

function PlayFlashMovie()
{
var flashMovie=getFlashMovieObject("myFlashMovie");
flashMovie.Play();
//embed.nativeProperty.anotherNativeMethod();
}

function RewindFlashMovie()
{
var flashMovie=getFlashMovieObject("myFlashMovie");
flashMovie.Rewind();
}

function NextFrameFlashMovie()
{
var flashMovie=getFlashMovieObject("myFlashMovie");
// 4 is the index of the property for _currentFrame
var currentFrame=flashMovie.TGetProperty("/", 4);
var nextFrame=parseInt(currentFrame);
if (nextFrame>=10)
nextFrame=0;
flashMovie.GotoFrame(nextFrame);
}


function ZoominFlashMovie()
{
var flashMovie=getFlashMovieObject("myFlashMovie");
flashMovie.Zoom(90);
}

function ZoomoutFlashMovie()
{
var flashMovie=getFlashMovieObject("myFlashMovie");
flashMovie.Zoom(110);
}


function SendDataToFlashMovie()
{
var flashMovie=getFlashMovieObject("myFlashMovie");
flashMovie.SetVariable("/:message", document.controller.Data.value);
}

function ReceiveDataFromFlashMovie()
{
var flashMovie=getFlashMovieObject("myFlashMovie");
var message=flashMovie.GetVariable("/:message");
document.controller.Data.value=message;
}</script>

FLASH EMBED CODE
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="550" height="400">
<param name="movie" value="integration.swf">
<param name="quality" value="high">
<embed name="myFlashMovie" swliveconnect="true" src="integration.swf" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="550" height="400"></embed>
</object>

The things highlighted in red are a must to have if you want to pull this off.


HTML CODE
<form name="controller" method="POST">
<p>
<center>
<b><font color="#0099CC">JavaScript Controller<br>
</font></b>
<input type="button" value="Play" name="Play" onClick="PlayFlashMovie();">
<input type="button" value="Stop" name="Stop" onClick="StopFlashMovie();">
<input type="button" value="Rewind" name="Rewind" onClick="RewindFlashMovie();">
<input type="button" value="NextFrame" name="NextFrame" onClick="NextFrameFlashMovie();">
<input type="button" value="Zoomin" name="Zoomin" onClick="ZoominFlashMovie();">
<input type="button" value="Zoomout" name="Zoomout" onClick="ZoomoutFlashMovie();">


<br>
Form Data:
<input type="text" name="Data" size="20" value="Enter message">
<input type="button" value="Send Data" name="SendData" onClick="SendDataToFlashMovie();">
<input type="button" value="Receive Data" name="ReceiveData" onClick="ReceiveDataFromFlashMovie();">
<br>
</center>
</p>
<p> </p>
</form>

This code is easy to manipulate and customize it any way you want. The thing you need to keep in there is the name of the form which communicates with the JavaScript.

That is pretty much it. Here is link to wha I have working so far:
http://www.jamieweber.com/AI/entertainment/integration/

If you have any questions feel free to post a comment or email me :)

Tuesday, August 5, 2008

JQuery Accordion

I recently tried to make an accordion much like in Spry or scriptaculous, but with JQuery and it was a pain in the buttocks. With many hours of agony I finally figured it out. You have to link to 3 different JS files, plus edit a few things. The hard part was figuring out the animation for the bounce when you hover over a section thats above the open one. Hopefully I will use this for my homework site.

I think I might post a better tutorial then I have seen around for people that just want to get something like this working

Below is the link to test it out:
http://www.jamieweber.com/AI/entertainment/transition/