Sunday 27 November 2011

Final Week - Get your assessments in!

You have 3 assessments due with me in this final week.

Due on Tuesday - 
Due on Wednesday -

Tuesday 22 November 2011

Full screen game

place this code on frame 1 of your game:

fscommand("fullscreen", "true");

Sunday 20 November 2011

Week 17 - Web Interface Design

Discussion: Web Usability Principles & how they apply to your assessement
1. Don’t make users think
2. Don’t squander users’ patience
3. Manage to focus users’ attention
4. Strive for feature exposure
5. Make use of effective writing
6. Strive for simplicity
7. Don’t be afraid of the white space
8. Communicate effectively with a “visible language”
9. Conventions are our friends
10. Test early, test often
Resource: http://uxdesign.smashingmagazine.com/2008/01/31/10-principles-of-effective-web-design/

Exercise #1: Create a sitemap for your game's website

Exercise #2: Create a design concept for your game's website.  I suggest you use Adobe Illustrator to create your final mockup.

Sunday 13 November 2011

Week 16 - Web Interface Design & Game

This week I would like everyone to try and finish your game.

Over the next two weeks, you will be designing a user interface for your game website.  You will be presenting this to the class during Week 18 (last week of the term).


Monday
Work on your assessment that is due tomorrow (Flowchart, HUD, Start Screen)

SURVEY EXTENSION: Survey due next Monday 21st November

Tuesday
Your last two assessment events have been uploaded to Moodle

  • Web Interface
    • Create Sitemap
    • Create homepage concept
  • Presentation
    • Present your website concept to the class and discuss usability

Next Week
We will be discussing 10 Principles Of Effective Web Design and how they relate to your assessment:
1. Don’t make users think
2. Don’t squander users’ patience
3. Manage to focus users’ attention
4. Strive for feature exposure
5. Make use of effective writing
6. Strive for simplicity
7. Don’t be afraid of the white space
8. Communicate effectively with a “visible language”
9. Conventions are our friends
10. Test early, test often

Tuesday 1 November 2011

Game Help

 Scrolling Background Tutorial


http://www.kongregate.com/games/Kongregate/shootorial-2








Create a Time Counter Bar

 onClipEvent(load) {
    timeCounter = 100; // set default width
    timeSpeed = 0.5; // set decrement rate
}

onClipEvent(enterFrame) {
    this._xscale = timeCounter; // set width of rectangle to equal % of counter left
  
    if (timeCounter>=timeSpeed) { // check if rectangle is still larger than 0 + decrement rate
        timeCounter -= timeSpeed; // reduce with of rectangle
    }
  
    if (timeCounter < 10) { // check if only 10% of bar left
        var colorful = new Color(this); // create new variable for colour of selected object
        colorful.setRGB(0xff0000); // set color to red
    }
}




Import sound effects to your game

  1. Import sound file (.mp3) to your Flash library
  2. Right-click on the file in your library and view Properties
  3. Check 'Export for Actionscript' and give the 'Identifier' field a name that you will reference in the AS code.  The example below has an Identifier of 'blast'
  4. Insert the following code on the event that you want the sound to play (eg crash sound should go on the hitTest event):
variableName = new Sound(this);  // Create variable that represents a sound associated with this movieClip object
variableName.attachSound("blast");  // Attach sound from our library with identifier of 'blast' to the new sound variable
variableName.start();  // Play the sound!
You can also specify a start frame and loop timeout for background music. 
variableName.start(0,99);  // Play sound from frame 0 (start of clip). Loop 99 times before stopping
Resources: 
http://www.kirupa.com/developer/actionscript/sound.htm
http://www.gotoandlearnforum.com/viewtopic.php?f=28&t=26222




Create a Barrier to stop your hero character flying out of the screen

Place the following code on your hero Movie Clip:

onClipEvent (enterFrame) { // every time the frame runs
if (Key.isDown(Key.UP)) { // when the UP key is pressed
if (_y>30)  // check if the center of the object is within 30px from the top of the stage
_y -=5;  // move the object up 5 pixels
}  //stop checking if the UP key is pressed
} // stop checking every time the frame runs




Respawn objects

Watch the following tutorial on how to randomly spawn enemies (eg Asteroids):





Random Colours for your spawned objects:

onClipEvent(load) {
rndColor = Math.round( Math.random()*0xFFFFFF );  // generate a random color coloredObject = new Color (this);  // colour of this object will be called 'coloredObject' coloredObject.setRGB(rndColor);  // set colour of this object to be the random colour
}



Random Sizes for your spawned objects:

onClipEvent(load) {
randomSize=random(80); // pick a number between 1 and 80 this._xscale=randomSize; // set width to equal random number this._yscale=randomSize; // set height to equal same random number
}



Random Rotation for your spawned objects:

onClipEvent(load) {
this._rotation= random(360); // set rotate angle starting position rotationRate=random(5); // set random rotation speed between 1 and 5 degrees per frame
}

onClipEvent(enterFrame) {
this._rotation+=rotationRate; // rotate frame by same value(speed) each frame
}

Sunday 30 October 2011

Week 14 - User interface design for Games

What have you learnt already? 
  • Designed core game graphics (Illustrator skills)
  • Completed game functionality (beginner level AS2 coders)
  • Discussed the principles of games design and what makes an effective game
  • Impact of games on society and the role of the designer


Activity #1 - Visit the Disney - Cars 2 website and play the World Grand Prix Races game

Discussion: What more do you need to learn if you were to design an industry quality flash game like the Cars racing game?


What are you going to learn today?
  • Rules of interface design and why they are important
  • How these rules are applied to games design
  • Look at your assessment task on Moodle

Discussion: Assessment - HUD for Game




Who are we designing for?

Discussion - Target Audience and User Characteristics (example - Cars 2 game)

Activity #2 - Identify target audience and user characteristics of your own game.  Post answers on your blog.
  • computer/internet literacy
  • demographics, such as:
  • age
  • gender
  • education
  • occupation
  • cultural background
  • location
  • hobbies/interests
  • language, literacy and numeracy


What game are we designing?

Discussion - What different screens/states would you expect in a game?
  • Start up screen
  • Instructions
  • Mission Brief
  • Different Levels (Predetermined or Random in nature)
  • Level Select
  • End (Fail/Success)
  • Restart/Respawn
  • Final Score/ Top Scores
Discussion - Why is it important to create a flowchart?
  • Help set up your frame markers
  • Keep you on track and goal focussed (time management)
  • Other team members of large projects ('information architecture')
  • Game equivalent of video storyboard
  • "Wisdom is knowing how little we know" – Socrates
Activity #3 - Create a flow chart for your game and post it on your blog.  You can use online software (such as http://www.gliffy.com/) or simply sketch it on paper.




Avoiding Gamer Frustration!

Demonstration - Watch the following video - '10 Usability Heuristics - by Jakob Nielsen'




Discussion - 10 Usability Heuristics (Jakob Nielsen - usability guru)
  1. Visibility of System Status (What is going on) - Visually confirm input/loading/output
  2. Match between system and the real world (What are you talking about?) - Familiar language & concepts
  3. User Control & Freedom (Oops) - Take me back to where I should be (menu)
  4. Consistency & Standards (I know that) - Function keys
  5. Error Prevention (Glad I didn't do that) - Barriers
  6. Recognition or Recall (Or what was that already?) - Maps, Clues
  7. Flexibility, and efficiency of use (It doesn't matter if you're an expert or a newbie) - Shortcuts
  8. Aesthetic & Minimalist design (Wow...and woah!) - No clutter, efficient design
  9. Help users recognise, diagnose and recover from errors (My bad) - Wrong way, go back!
  10. Help & Documentation (Now I get it) - Instructions
Resource - http://www.youtube.com/watch?v=hWc0Fd2AS3s&feature=related

Activity #4 - Post an example of games design on your blog that demonstrates your understanding of each of the '10 Usability Heuristics'.  Response should be no more than 1-2 sentences. (eg #1. Gun fire is confirmed by shells and appropriate sound effect)



What is a HUD?


Discussion - What is a Heads-Up-Display (HUD)?  What makes a HUD effective?  Pros and Cons?

Examples of HUDs - 


Call of Duty

Resource: http://www.neoseeker.com


Time Crisis

Resource: http://www.gamershell.com/



Creating a start-up screen for your game.


Increase game interest and user satisfaction by incorporating the following in your game:
  • meaning/message
  • theme
  • tone
  • consistent colour combinations
Start-up screens should be well illustrated or include photographic elements.  Do not include actual game graphics unless they are detailed and aesthetically pleasing.

Discussion:
Atari 2600: Raiders of the Lost Ark (How to promote your game)



 Atari 2600: Punchy! vs Asteroids (Real game graphics vs Illustration)



Recent designs - Call of Duty: Create a strong themed interface
Resource: http://www.mobygames.com/



Summary

Game design is a complex task that requires planning and much consideration of who the audience is and how are they likely to behave.  Not only do we need to make interesting game characters and have a sound idea for our game, we also need to an aesthetically pleasing, and user-friendly interface design for the game to be successful.

Further Reading:
Case Study - A Look Through 14 Beautiful Video Game HUD Designs
Advanced Concepts - Beyond the HUD - User Interfaces for Increased Player Immersion in FPS Games



Next Lesson:

  • Create an online survey to document user interface testing
  • Interface design for web

Sunday 23 October 2011

Week 13 - Dreamweaver & CSS (Continued)

Monday

Exercise - Games Graphics (continued)

Exercise - Read HTML & CSS Tutorials at w3schools.com
Exercise - HTML code quiz


Tuesday

Assessment: Gerard Storyboard Presentation
Discussion - AS2 'for' function & random enemies (revision)
Exercise -  Create your own 'for' loop
Exercise - Games Graphics (continued)


Wednesday

Discussion - Death of a hero/enemy & movie clips
Exercise - Create your own dead state

Exercise  - Games Functionality (continued)


Survey

Complete the following survey by the end of todays session - http://survey.rit.tafensw.edu.au/show_survey.aspx?PID=66

Sunday 16 October 2011

Week 12 - Intro to Dreamweaver & Game Graphics

Monday - Introduction to Adobe Dreamweaver
  • Create a Site in Dreamweaver
  • Create a HTML page
  • Create a CSS page
  • Link CSS file to index.html
  • Create HTML content

Tuesday - Games Graphics
  • Work on your graphics for your game
    • Hero and Enemy characters
    • Background graphics

Wednesday Night - Game Functionality
  • Games Graphics due (should be enough completed so I know what the look and feel of your game will be) 
Demo: Random enemies using AS2

Exercise: Continue working on your game functionality

Tuesday 11 October 2011

AS2 Keycodes and Principles of Game Design

Here are a list of Actionscript KEYCODES.  They are needed if you want to use keys in your game other then the usual directional keys:

http://freelanceflashgames.com/news/2009/04/21/list-of-flash-key-codes/

Other Resources:
Principles of Game Design - http://www.gameinnovator.com/principles_game_design.php

Monday 10 October 2011

Week 11 - Game Idea & Intro to Web Design


Discussion:
  • Summary of Term 4 lessons:
    • only 8 weeks
    • exhibition 2nd last week
    • status of units to be studied this semester:
      • Create storyboards 
        (complete)
      • Create 2D Digital animations 
        (continued)
        • Flash Game using AS2
      • Create visual design components
         (continued)
        • Create game graphics
      • Make a presentation (continued)
        • Present a report to the class
      • Design user interfaces
        • Create a website interface
Monday - Intro to Web Design

Discussion: Introduction to web design and web-related technology.

Resources:
Cloud Technology and impact on Digital Designers

Exercise #1:
  • Visit orisinal.org and test at least 6 games
  • Post a review of at least two of the games that you played on your blog.  Your review must discuss the following topics:
    • Level of Gameplay/Fun.  Why?
    • Quality of Graphics.  Why?
    • Possible AS2 code that is driving the main elements of the game (how could you achieve it?)
Exercise #2:
  • Write down your ideas for a game and post them on your blog.  You are to finalise and discuss your idea with me before the end of the lesson.
  • Finish the tutorial from last term and start coding your game

Sunday 18 September 2011

Saturday 10 September 2011

Week 9 - Pitch, Drawing & Interactivity

Monday - Assessment Due: Pitch your Storyboard to the class

  • Remember to practice your pitch, prepare your presentation aids and read the Assessment Event carefully to see how you are being assessed.

Tuesday - Illustrator Drawing Practice (Using the Pen Tool & Editing Paths)

Wednesday Night - Interactivity (Controlling the Timeline Revision & Importing Movie Clips)



AS2 Revision
Animate an object in the center of the stage going up, down, left, and right using buttons.  The object must return to the center of the stage at the end of each move.

Use AS2 to control the movement of the object using the direction keys, by placing the following code on your hero object.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
onClipEvent (enterFrame) {
	if (Key.isDown(Key.LEFT)) {
		_x--;
	}
	if (Key.isDown(Key.RIGHT)) {
		_x++;
	}
	if (Key.isDown(Key.UP)) {
		_y--;
	}
	if (Key.isDown(Key.DOWN)) {
		_y++;
	}
}

Complete Part 1 of the following tutorial - http://www.emanueleferonato.com/2006/10/29/flash-game-creation-tutorial-part-1/

Wednesday 7 September 2011

TAFE CLIPS Prize Update

Industry award category

Overall winner chosen by a panel of industry experts wins $3,000
+ Adobe Creative Suite 5.5 Master Collection Student Teacher Edition

2 x runners-up win $1,000
+ a choice of Adobe Creative Suite 5.5 Design, Web or Production Premium Student Teacher Edition

People's choice award category

Overall winner with the most online votes receives $1,500
+ Adobe Creative Suite 5.5 Master Collection Student Teacher Edition
+ Verbatim Store'n'Go Portable Hard Drive USB 3.0 1TB

2 x runners-up receive $500
+ a choice of Adobe Creative Suite 5.5 Design, Web or Production Premium Student Teacher Edition
+ Verbatim Store'n'Go Portable Hard Drive USB 3.0 500GB


Click here to view more: https://www.tafensw.edu.au/edm/tafe-clips/launch-blast.html

Tuesday 6 September 2011

Week 8 - Prepare your Pitch

Flash Tutorial


Introduction to Layer Masks - Disney Pixar Short - Day and Night




Demonstration: How to create a layer mask in Flash


Exercise: Create your own animation using layer masks.

MovieClip Revision

Create animation of an animal using movieClips. (eg a swooping magpie or a horse galloping)

Class: Watch the following video as an introduction to games - http://www.ted.com/talks/lang/eng/david_perry_on_videogames.html

Pitch Preparation

Use this week to get prepared to give your Storyboard Pitch next Monday.
  • Remember to make your storyboard panels at least A4 size so the audience can see them clearly.
  • Also any additional presentation aids or concepts that you could show the audience is likely to benefit your presentation and increase audience interest.
  • Maximum presentation delivery time is 15min.  If you exceed this you are likely to have included too much unimportant information and may have lost audience interest.  I would expect your presentation to last at least 5min in length.  Not sure how long it will go for?  Practise!

Monday 5 September 2011

Moodle Update


Your fourth assessment event has just been uploaded to Moodle:

  1. Pitch your Storyboard (  BSBCMM401A: Make a Presentation ) - Due 12th Sep

Sunday 28 August 2011

Week 7 - Storyboards and Pitching

Review: Show me the results of your work from Wednesday night.

Storyboard a TV ad (CUFPPM404A: Create storyboards) - DUE MONDAY
Storyboard for Short Film Competition (CUFPPM404A: Create storyboards) - DUE MONDAY


Pitch Your Storyboard for Short Film Competition
If you have finished your storyboards, you should start preparing them for next weeks pitch (Tuesday morning).

  • You have the option to create a basic animatic or simply present each panel on an A4 page.
  • Think about the presentation techniques that were employed by the Shrek Storyboard Artists.
  • You are being assessed on your presentation skills.
Remember to be creative in your presentation (eg If you are using the lollies to promote Wagga, why not hand them out to the audience before your presentation.  That way the audience can use all of their senses included taste to be swept up in your idea.  Be aware if the lollies taste bad then that can impact your presentation!)

Read the following resource for ideas:

Resource: How to Pitch a Story

    Tuesday 23 August 2011

    Week 6 - Movie Clip Revision & IK/Bones


    Step 1: Create your movieClips
    1. Create a New Movie Clip Symbol and call it "carStill"
      • Whilst in "carStill" state, draw a car (side on view) without wheels
    2. Create a new MovieClip symbol and call it "wheelStill"
      • Whilst in "carStill" state, draw a wheel with spokes (or any detail to show rotation)
    3. Open "carStill" state and place "wheelStill" wheels from your Library on to your car (you may need to resize using the free transform tool)
    4. Duplicate "carStill" in your library and call it "carMove"
    5. Duplicate "wheelStill" in your library and call it "wheelMove"
    6. Open "wheelMove" state and create a motion tween for the wheel.  Rotate the wheel once clockwise over 24 frames.
    7. Open "carMove" state and view the properties panel
      • Select the wheels on the stage and choose "Swap ..." in the properties panel.  Replace the wheels with "wheelMove"
    You now have two cars in your library.  One with wheels that turn and one with wheels that don't turn.  Place an instance of each car on the stage and Test Preview your animation to make sure you have one with spinning wheels and one with stationary wheels.


    Step 2: Animate car and Swap Symbols
    • Motion Tween "carMove" - driving into the center of the stage and stopping, then driving off the stage. 

      •  Use 3 separate motion tweens
        • drive in
        • stopped (this can be static - ie. not tweened if you wish)
        • drive off
      •  To create a new motion tween on the same layer
        • create a blank keyframe after the 'drive in' motion tween
        • copy the last frame of the 'drive in' motion tween
        • paste the frame on to the blank keyframe
        • repeat for 'drive out' motion tween
      •  Your timeline should look like this (click to enlarge):




    • Select the untweened Keyframe (grey colour)
    • Select the car on the stage.  The properties panel should display that it is an instance of "carMove".  Swap "carMove" with "carStill"
    • Test your animation scene

    Step 3: Finishing Touches
    • Apply motion easing to tweens to give the appearance of braking and acceleration
    • Draw a traffic light
      • Draw each light in an off position
      • Keyframe 3 different light states (red, orange, green) and change one light to on for each frame
      • Move keyframes to appropriate position on your timeline (eg car is stopped during red light)
    • Draw background imagery
    • Finished early? Why not try some exhaust fumes





    Inverse Kinematics (Using the Bone Tool in Flash)

    Watch the following tutorial:

    Introduction to the Bone Tool



    Recreate the Tree tutorial you have just watched.  Apply this technique to an item of your choice.

    Friday 19 August 2011

    Wednesday Night Class - TIME CHANGE

    Wed Night Animation class has been extended by 30min for the rest of the term.  Class is now 5:15 - 7:45pm (Advanced class only).  Beginner Class is still 5:45 - 7:45pm.

    Monday 15 August 2011

    Moodle Update

    Your third assessment event has just been uploaded to Moodle:

    1. Create a Storyboard (CUFPPM404A: Create storyboards) - Due 30th Aug

    Sunday 14 August 2011

    Week 5 - Principles of Animation

    Exercise #1 - Read the following article on the 12 Principles of Animation.  Once you have read the article, write a short explanation (in your own words) of the following animation terms.  Post your response on your Blog.

    Principles of Animation

    1. Squash and Stretch
    2. Anticipation
    3. Staging
    4. Straight Ahead Acion and Pose to Pose
    5. Follow Through and Overlapping Action
    6. Slow In and Slow Out
    7. Arcs
    8. Secondary Action
    9. Timing
    10. Exaggeration
    11. Solid Drawing
    12. Appeal

    Exercise #2 - Movie Clips

    • Create an animation of a car driving in to the scene and stopping, then driving out of the scene.
    • You need to draw your own car
    • The wheels on the car must spin, then stop when the car stops
    • apply easing to your animation

    Thursday 11 August 2011

    Semi-Permanent

    I am now organising accommodation, travel, and tickets for the SEMI-PERMANENT trip.  It should be heaps of fun and will open your eyes to what's going on in world of creativity.  There's no better way to find out what is happening at the cutting edge of Graphic Design, Photography, Film and Illustration.

    At this stage costs should be around $250 in total (plus petty cash for food & drink etc).

    I need to know next week who is coming and will need to start collecting money to book tickets and accommodation before they sell out!

    Sunday 7 August 2011

    Week 4 - Walk Cycle (continued)

    Continue working on your walk cycle.  Remember to consult reference material.

    Wednesday 3 August 2011

    Week 3 - Animation Principles

    Principles of Animation
    1. Squash and Stretch
    2. Anticipation
    3. Staging
    4. Straight Ahead Acion and Pose to Pose
    5. Follow Through and Overlapping Action
    6. Slow In and Slow Out
    7. Arcs
    8. Secondary Action
    9. Timing
    10. Exaggeration
    11. Solid Drawing
    12. Appeal
    Exercise #1: Create the most realistic bouncing ball using timing (easing), squash and stretch, and motion blur.

    Resources:
    Easing With Flash - Part 1
    Easing With Flash - Part 2
    Easing With Flash - Part 3

      Walk Cycle
      • Always start with the CONTACT position
      • 4 Stages of a Walk Cycle (8 frame walk cycle)
        1. Contact
        2. Recoil
        3. Passing
        4. High-Point
        • Repeat this for other arm/leg
      http://www.idleworm.com/how/pic/a0002/wlk01.gif

      Exercise #2 - Begin creating your walk cycle

      Monday 25 July 2011

      Moodle Update

      Your first two assessment events have just been uploaded to Moodle.  They are:
      1. Create a Character (CUFDIG304A: Create visual design components) - Due 1st Aug
      2. Create a Walk Cycle (CUFANM301A: Create 2D digital animations) - Due 10th Aug

      Sunday 24 July 2011

      Week 2 - Animation Revision

      1. Create a Motion Tween
      2. Create a Shape Tween
      3. Create a Motion Path and animate a Car driving along the path.
        • Download this free clipart image below
        • Crop it so that your have only one car (using Photoshop)
        • Draw an aerial lanscape scene with a windy road (using Illustrator)
        • Use the path from Illustrator to create an animation of the car driving on a road


         4.  Start practising walk cycle animation

      REMEMBER: Bring in your storyboards from last week.  You should have completed one of the TV Ads.

      Tuesday 19 July 2011

      Week 1 - Storyboarding

      Exercise #1 - Create a Storyboard of your morning.  On completion, we will review them in class and discuss different styles.


      Exercise #2 - Reverse Storyboard
      • Draw 2 storyboards of existing TV advertisements -  


          • Refer to the professional storyboards of Sherm Cohen.  These are are great guide for what sort of information and style is appropriate for a professional animation storyboard.
          • Focus on the purpose of a storyboard (pitch an idea, create visual reference, create understanding of camera movements, action and other animation elements)
          • Include enough information so that anyone can understand the sequence of events
          • Avoid detailed clutter that distracts from the more important visual elements of the story
          • Include all camera movement, transitions, dialogue/narration and actions
          • Break time and location of events into different numbered scenes (where appropriate)
      Resources: Storyboard Template (PDF)

      Exercise #3 - Create a animatic (Basic Animation of storyboard)

      Choose one of the TV Ads you have just storyboarded
      • Scan your storyboard panels 
      • Crop each panel image in Photoshop to remove storyboards notes etc 
      • Import all panels to Adobe Flash or MS Powerpoint and replicate the timing and camera movements of the finished advertisement

        Monday 18 July 2011

        Week 1 - Storyboarding for Animation

        What is a Storyboard?
          Exercise #1 - Create Storyboard
          • Create a storyboard of your morning
          1. The Purpose of Storyboarding
            • Visual representation of a script
              • What characters are in the frame, and how are they moving?
              • What are the characters saying to each other, if anything?
              • How much time has passed between the last frame of the storyboard and the current one?
              • Where the "camera" is in the scene? Close or far away? Is the camera moving?
            • Used to pitch a concept
            • Reference for production team
            • Saves times and money
          2. Various uses of Storyboarding
            • Video (Film, Advertising, Music Clips)
            • Animation
            • Interface/Web Design
          3. Ways to create a Storyboard
            • Any technique that represents a visual idea (sketch, computer drawing, cut-out montage, photos etc)
          4. Examples of Professional Storyboarding

          Sunday 17 July 2011

          Overview of Units

          Design user interfaces - (Design interface for a flash game and a website)
          Create storyboards - (Create a storyboard for flash project)
          Make a presentation - (Pitch flash project. Present Flash Project. Exhibition Preparation)
          Create 2D Digital animations - (Multiple 2d animations, group learning, individual game, animation techniques and team member roles)
          Create visual design components - (Create animation/game characters)