Quick Instructional Video

Here is the instructional video / screencast which is already imported into the application.
Ill need to track the time of the video, pausing it to display instructional text throughout.

Philip

Finally the Pre-Loader Page

Finally here is the final design and layout for the pre-loader file. Which has a spinning news paper included during the loading.

Incorporating Graphical Content

Our designers have finalized the graphical content of our application. Here is a screen shot of the welcome screen or landing page of our application. I have used a tutorial online to help me make the eyes of the character in the logo follow the mouse around the screen. We will also use these eyes within our main character also. Clicking the Instructions button will provide the user with the option of viewing an instructional video, on how to use the application.




Once logged on the user is prompted to name their character, this will,

1. record thier name
2. start the day and time counter within the stats box at the bottom of the screen.
3. Allow the user to continue within the application.

As you can see I have also incorporated the character graphics within our application.




This is the final news interface or reader, it works similar to before, only now I have worked out a few usability issues. I have included the news reader button, the logout button, and the reset button all into the same shaped object onstage. We plan on including some small tool-tips or pop-ups which will appear when the user hovers over the buttons.




This screen shot shows a dialogue box to allow the user to delete their character should they wish to do so.

• Also over the last week I have been working on getting our application to save user data and store this data within the users flash player on their computer, using the Shared Object method. This was quite difficult as it involved first collecting all the up to date data on a user when the logout button is clicked and then storing that data. However when the application firsts loads, it then needs to check if user data is already storred, retrieve that data and impliment it withn the application upon loading. But also if no user data to present then the application needs to reverts to all the default values.

• I also created a timer, so that once the user logged out, if they attempted to log back in straight away then they would not be allowed, using the Date method. The timer at present is set to 1 minute for testing, however this delay could also be altered later.

• I also created a second timer to count the days a character was active.
  

• I also created a directory within the root folder to contain all of the audio content for our application. At present each Click and Hover apon a botton triggers the loading of these external mp3 files. However through testing I have noticed that there is a delay or lag in the timing of this audio, as the user navigates the GUI and other files. I will have to embed at least these two samples within the FLA files, Click and Hover, simply because of the frequency of their use within the application. While all other samples can be loaded externally.
  

So, aspects and issues for development this coming week include,

• Logout and Reset button tool-tips
• embed Click and Hover samples throughout the application
• Creation of a way for the user to track the number of RSS sources already read.
• Displaying the current Date and time at the top of the News Reader as per design.
• Spinning News Paper intro within the index or preloader file.
• Development of a video player within the instructions section
  

Philip Clarke

Audio

I have been working on different theme tunes to be used as background music while our user is interacting with our application. Here is a sample of one of the recordings I made. I composed and performed this myself on the violin, I will also add a backing beat and some complimenting notes and effects to this in pro tools but for now this is the stripped theme tune.

http://soundcloud.com/paulaoreilly25/thatscattheme

Paula

Interface Redesign

Here is a screen shot, of the changes and adjustments which we decided to make to the news interface.

• The large triangle in the top right of the sheet navigates the News Reader to a new RSS source.
• The Move arrows will move the character around the screen.
  

• The grid of articles available to the user has been limited to 9, and the articles have been centered.

• Two large image holders have been placed above and below the articles, and coded to change when the RSS source changes, however this can be altered later if required.

• The Status Bars, at the bottom of the GUI have been created and coded to change either by a user feeding a word which holds its value, or if a lower bar is filled to the top.
  

1. A full Mood bar now changes the avatars expression, and adds one to the Health bar.
2. A full Health bar now changes the avatars chothes, and adds one to the Wealth bar.
3. A full Wealth bar now changes the background or scene.

• Finally, I have created and coded for, the two main external Xml files. One file holds the values for the default character position size and settings along with other settings for the application. The other file holds,
  

1. All the search terms.
2. A count value used by the application to count each term during a search.
   
3. Their relevant Wealth, Health and Mood scores.
4. A setting to make any word positive or negative for the character.
5. And the ability to specify which action each word will execute on our character.

By locating this information outside the FLA files and within the Xml, the content and values of the application including any word or search term or the values associated with that word, including the action or animation carried out by the character, can now be altered without needing to recompile the .swf files.

Different expression of our cat

This is the different expression of our cat!!!

The basic style of our Character

This is the basic cat character of our final design .

The sketch background for that's cat

Background 01: Street

This is the opening scene for our character. The street is where we find our character as this symbolises the fact that C.A.T is down and out. He is struggling and going through tough times when he is living here.

Background 02: Living Room

This is the second background screen – Living Room: Our character will move into this room when his health improves and only if he has been gaining strength with regard to his statistics as I spoke about before.

Background 03: Back Garden

If the user has been kind to our character they will continue to move up the property ladder. This is the next step about the living room. This scene creates a feeling of wealth and has an ambiance of “bachelor pad” surrounding it.

 

Background 04: Hotel

This is the highest rung on the property ladder for our character. If the character appears in this room it signifies that all is good in the world and the user has shared upbeat and positive news feeds with C.A.T. The hotel room is luxurious and caters for 5 star guests. This room says to the user that they are accomplished and are in a comfortable and stable position in their life.

Audio

“That’s Cat” is mostly dependant on the images, interaction and graphics to engage the user but as with any interactive animation or mainly visual application audio adds another level to the overall experience.

We are very aware of the importance of audio within our project. This will breath new life into our character and almost humanise this creature communicating with our users.  We want to try to connect with as many of the users senses as possible and sound is a huge part of this.

As soon as the user starts our application we want to capture their attention and this will be done through our attractive graphics, character interactions and audio. We will create as many of our sound effects as possible and this will be done in the sound booths of DKIT. For any musical interludes we will use royalty free music available online, these will be minimal and mostly brief. To edit and ad effects to our audio we will use the software Pro Tools which is available in DKIT and we may also use Soundbooth for any additional special effects.

The majority of our sound effects will be the types of sounds a person makes on a minute to minute basis. The reason for this is that although our main character is a Cat we want to fall into the cartoon/animation genre and the most commonly found sound effects are ones which the user can identify with thus creating a stronger emotional attachment to our character.

Some examples of the types of sound effects we will be recording:

• ·        Laughing                                                                               
• ·        Crying
• ·        Clapping
• ·        Groan
• ·        Scream
• ·        Pant
• ·        Deep breath (shocked)
• ·        Footsteps
• Pop
• Birds tweeting
• Traffic noises
• Rock music as background audio
• Classical music
• Newsflash theme music
• "Hmmm"
• Yawning
• "Grrrr"
• "Wahey"
• Drag effect
• Footsteps
• Slap
• zip noise
• Newspaper crunch

Paula

• 
  

Deadlines

Hi all...

Just a reminder about our Toms Planner. Please check in here on a regular bases in order to ensure we are keeping on top of individual deadlines.

https://www.tomsplanner.com/?template=new#doc=fFGCxVdbOTIHDJBKEcjU

Thanks
Paula

Programming Development

I have decided to create a list regarding the programming aspects of this project to help both myself and the group keep track of our progress. The order of this list however, is not the order in which we will develop the application.

Completed / In-progress:

• Pre-loader: Loading and unloading the main application files, including visual representations.

• Navigation: Links and buttons to allow the user to load the relevant file, using the loader class.

• Xml Parsing: Parsing of live RSS Xml data, using the URL request class.

• Character Animation: Using timers, tweens, transitions, listeners and events.

• Text Search Engine: Study, testing and development of custom textual search engine. This aspect of our application is based on an online action script 2.0 example, which has needed to be reverse engineered and re-developed in action scrip 3.0, for use within our application.

• Drag & Drop Interaction: Allowing our users to interact with our application and its content.

• External AS Files: Use of external .as files to re-position large bodies of script into external files and also to hold shared variable values, which then makes this script and its variables available to the rest of the application files.

• Methods / Classes: Along with the above I have also needed to familiarise myself with many other new methods and classes within the Action Script 3.0 language. eg. split(), indexOf() or TextFormat(), for use within our text search engine, for finding and highlighting words, or while() conditionals, which carry out actions or execute functions, along with others.

The features and aspects of our applications programming listed above, have almost been completed (see previous post). However, there are some usability issues which have arose during this development, which will need to be addressed.

Outstanding Programming Aspects:

• User Data: As we have decided to not include a Login or "user database" within our application, which would require PHP and mySQL coding, we will store user information through the use of Cookies within the Flash Player, of the users browser.

• GUI: The GUI of our application will need to be further developed to include other elements like character statistics. The script to process this information will be located within another external action script file.

• Character Animation: Our avatars animations will need to be developed further, to include new actions and also to optimise this large body of script.

• Character Control: The development of script to allow the the user to control and move their avatar around the user interface.

• Gestures: The further development of gestural interactions, within the character file.

• Audio: The programming and handling of all audio content for the character and application.

• CSS Styling: Research and development of CSS within Action Script 3.0. We plan to use an external CSS document to unify all textual content of our application.

• Graphics: All the graphics created by our designer will also needed to be placed and tested within the application. 

•  User Testing: Resolving issues and feedback from user testing.

As we develop this application, I have found that I have needed to research many other aspects of the Action Script language to create the functionality we require. Each aspect listed above also then needs to be implemented within our programs code.

Philip Clarke

Programming Development

For the programming of this project we have decided to break the application up, into smaller projects. Each one dedicated to an individual aspect of the application. Also using external action script files to communicate between the files.

	1. This is the pre-loader screen program. This small program will be used as the landing screen for our application, entitled "index.swf". It will be executed both at the beginning of our application providing the user with feedback regarding the status of the application while loading. It will aslo be executed, when the user navigates between the welcome screen and the applications main GUI. This space can also be used to display a small animation or information during loading.
	2. This is the welcome screen program. This program will include an instructions and about screen. New users will be able to navigate to the instructions screen and familiarize themselves with the application. This screen will also include a button to allow the user to navigate to the applications main GUI. Various different animations and information can be displayed here also.
	3. The welcome program originally also included a register and login screen, which would allow a user to signing up to our application. However we have decided not to include this feature within our application. As we feel this time consuming aspect of many websites today, may deter some perspective users from using our application.
	4. This is the character program. This program will consist only of functions which control the character on screen. This means that this file alone, without the rest of the application to house this character file, cannot be used.
	5. This is the news interface screen program. This program is used to display the live RSS data from our choosen news source. For testing, we have decided to use the Irish Times RSS feed. The user will be able to drag a new story onto their character to feed their character that particular story. With their character then reacting accordingly. The user can also click on the "Read More" button on any story to view and read that particular story.
	6. This is the story screen program. This program will be displayed when the user selects a story from the news interface above. It will display the information passed to it by the news interface, it will then call on an external asction script file called Text Search Engine, which will search for all the terms and words which we have pre-determined. Which are also stored in an array within this file.
	7. This is the GUI screen program. This is the program which will combine all the files above, and any other files which we may have to develop for the application. This will be the main user interface for the application.
	8. This is the GUI screen program, with a full story displayed. Notice the words which have been highlighted in red and also counted, by the text search engine. The result of this search, the most common word, from our pre-dertermined search terms, is the word which will be fed to the users avatar if this article is choosen. Also notice, the HTML data which is attached to each RSS xml article. These are actually links and images which accompany each article. At present, I am looking at ways to further parse this data to display these images.
These images and screen shots in no way represent the appearance of our finished application. We will incorporate the design elements and aesthetics of our application at a later stage. However, they allow me to, develop the programming aspects of this project in conjunction with our designers.

Philip Clarke

Facebook page

"Thats Cat" new facebook page which is still under development! :)

http://www.facebook.com/pages/Thats-Cat/185443451557883?sk=wall

Loading animation


Here is an example of the type of loading animation I thought we could use while our user is waiting to log onto "That's Cat"....


http://www.youtube.com/watch?v=jtIkKcgndVo

This plays on the style of our character page and the overall theme of our project.

Paula

Characters

We decided to draw four steps for the character, in our application, the character evolves through the feeds, if the feeds are good the cat becomes bigger and more and more rich else, he becomes more little.
So we have :
- the Small step (-1), the most poor one.
- the Medium step (0), the kind of normal clothes, the application begins with this step.
- the Large step (1), the cat begins to be rich but not satisfied because he wants to be at the top of the luxuruousness.
- the Extra Large step (2), the cat is biggest and the richest he's in top form and he knows it.

 Laetitia Desplat

The NEW Logo

This is the logo of our project called That's Cat. Tim and I wanted a logo which represents the cat's life and our character too.

Laetitia Desplat.