Art 145 Web Animation & Games
El Camino College: 2019-current
Catalog Description:
This course teaches the students to create two-dimensional animations and design interactive games for the Web and hand-held devices. Exercises and projects lead students through the principles of animation, game design, typography, screen, and interface design, digital sound, and digital video. The course stresses basic design concepts and critical thinking as well as comprehension of the artistic and commercial applications of the computer. We will be using Adobe CC.
Course Description
This is a 3-unit asynchronous studio art course that introduces vector animation, web animation, UI/UX concepts, and game design concepts with analysis and design of games. Students will be introduced to web design topics using HTML, CSS, and Javascript, explore animation topics introduced in Digital Art fundamentals to create short animations, create their own prototypes for UI/UX, with an introduction to game design and produce a game prototype. This courses is a survey of topics that will prepare students for further study in their career choice of web design, animation, UI/UX, and creating games.
Student Success
Course Objectives:
Student Learning Outcomes
SLO #1 Animation & Interactive User Experience (UX) Software: Students will be able to demonstrate correct use of industry-standard animation & game creation software to create motion and interactive content for the web and handheld devices.
SLO #2 Sound and User Interactivity: Students will demonstrate the ability to use a timeline to incorporate sound and user interactivity into two-dimensional animations.
SLO #3 Interactive Media: Students will demonstrate the ability to output interactive media in appropriate formats for use with current technology.
SLO #4 Problem-Solving: Students will apply visual communication problem-solving skills and two-dimensional design concepts to creation of interactive media and game design.
We will be using Adobe Dreamweaver, Visual Studio Code, Adobe Media Encoder, Adobe Animate, Adobe Audition, Adobe Premiere, and Adobe XD.
https://helpx.adobe.com/acrobat/user-guide.html
USEFUL Texts and Resources:
Full Syllabus below:
This course teaches the students to create two-dimensional animations and design interactive games for the Web and hand-held devices. Exercises and projects lead students through the principles of animation, game design, typography, screen, and interface design, digital sound, and digital video. The course stresses basic design concepts and critical thinking as well as comprehension of the artistic and commercial applications of the computer. We will be using Adobe CC.
Course Description
This is a 3-unit asynchronous studio art course that introduces vector animation, web animation, UI/UX concepts, and game design concepts with analysis and design of games. Students will be introduced to web design topics using HTML, CSS, and Javascript, explore animation topics introduced in Digital Art fundamentals to create short animations, create their own prototypes for UI/UX, with an introduction to game design and produce a game prototype. This courses is a survey of topics that will prepare students for further study in their career choice of web design, animation, UI/UX, and creating games.
Student Success
- Complete all assignments, readings, and tutorials
- Refine artwork
- Test repeatedly
- Communication with instructor and fellow students.
Course Objectives:
- Apply traditional 2D design concepts of line, value, texture, pattern, scale, and various compositional strategies to computer animation.
- Demonstrate use of color to enhance aesthetic and expressive content.
- Analyze and asses various 2D animations, interactive online media, as well as interactive games, magazines, books, and products.
- Optimize sound and video for use in web animation and gaming.
- Combine and sequence text and images to effectively communicate ideas in an interactive format.
- Create visuals from storyboards to computer animation, to final presentation.
- Demonstrate use of graphic and interactive user experience (UX) software to create original 2D Web animation.
- Demonstrate use of interactive animation and interactive user experience software to create an interactive presentation.
- Plan and produce web animation and gaming projects.
Student Learning Outcomes
SLO #1 Animation & Interactive User Experience (UX) Software: Students will be able to demonstrate correct use of industry-standard animation & game creation software to create motion and interactive content for the web and handheld devices.
SLO #2 Sound and User Interactivity: Students will demonstrate the ability to use a timeline to incorporate sound and user interactivity into two-dimensional animations.
SLO #3 Interactive Media: Students will demonstrate the ability to output interactive media in appropriate formats for use with current technology.
SLO #4 Problem-Solving: Students will apply visual communication problem-solving skills and two-dimensional design concepts to creation of interactive media and game design.
We will be using Adobe Dreamweaver, Visual Studio Code, Adobe Media Encoder, Adobe Animate, Adobe Audition, Adobe Premiere, and Adobe XD.
https://helpx.adobe.com/acrobat/user-guide.html
USEFUL Texts and Resources:
- https://www.w3schools.com/ (Links to an external site.)
- Russell Chun (2020) Adobe Animate Classroom in a Book, Adobe Press
- Jim Maivald (2020) Adobe Dreamweaver CC Classroom in a Book, Adobe Press
- Williams, Richard. (2001) The Animator's Survival Kit: A Manual of Methods, Principles, and Formulas for Classical, Computer, Games, Stop Motion, and Internet Animators (ISBN (Links to an external site.)0-5712-0228-4 (Links to an external site.)). Faber & Faber,
- Nabors, Rachel. (2017) Animation at Work. A Book Apart
- Anthropy, Anna; Clark, Naomi (2014) A Game Design Vocabulary: Exploring the Foundational Principles behind Good Game Design, NJ Addison Wesley.
- Beiman, Nancy. (2007) Prepare to Board! Creating Story and Characters for Animated Features and Shorts. Focal Press
- Brathwaite, Brenda (Author); Schreiber, Ian (Contributor) (2011) Breaking Into the Game Industry: Advice for a Successful Career from Those Who Have Done It, Cengage Learning PTR; International edition
- Adobe Educational Exchange (online through student account)
Full Syllabus below:
| 145_spring__syllabus.pdf |
145 Welcome and course overview
Exercises in 145
Part of a series of motion topics in Adobe Animate
Sample video over CSS play and hover state
Some project descriptions with student samples
PR1
Developing your animatic/moving storyboard from ex4-3, Create an original story with a background scene and characters. You will develop your animatic/storyboard into a more developed but rough animation.
The main purpose of this project is to integrate the many tools of animate but also give you some freedom to pursue ideas you have. You are limited by time though. 6-10 Seconds. You can extend time if needed.
Create a character animation or text animation that moves on the stage.
Technical:
Developing your animatic/moving storyboard from ex4-3, Create an original story with a background scene and characters. You will develop your animatic/storyboard into a more developed but rough animation.
The main purpose of this project is to integrate the many tools of animate but also give you some freedom to pursue ideas you have. You are limited by time though. 6-10 Seconds. You can extend time if needed.
Create a character animation or text animation that moves on the stage.
- Preparation includes a storyboard (ex4-3)
- You must have a secondary figure performing a secondary action.
- Must have a setting or background.
- Be about 90 frames or 6 seconds
- Stage dimensions should be 1280x720 pixels
- consider that you might create a web page for it. You can either export as HTML5 or embed with a video tag<> It depends on what tools you are using in Adobe Animate.
- All component must be original. Do NOT use artwork others have made. I will be doing images searches on your sketches.
- Audio is optional but it does increase viewer interest.
- PNG (s) of your storyboard.
- Screenshot of your workspace with your timeline open
- A MP4 of your animation
- prepare the stage (1280x720 pixels, with a background)
- create a scene. What is happening?
- You can use this storyboard paper (Links to an external site.) to plan out your animation.
- There are other sizes available from that website (Links to an external site.). Think about what you have seen so far in terms of Key Frames. Points of major changes.
- Have some secondary action occurring. Don' t have it compete with your main action or subject.
- Include tween and frame-by-frame animation. You will need to use symbols to keep track of your animated components.
- Include varied camera shots
- File name convention: Pr1Yourname
- upload to submit items to Canvas
Technical:
- Software mastery (shows mastery of tools and techniques demonstrated in class/tutorials)
- File management (organization of assets)
- Effective application of design principles (formal visual qualities)
- Effective communication of concept (idea, message or story intriguing and clear, does the form complement and enhance the content)
- Creativity & originality (have we seen this before, is it cliché, is there any surprise, is it fresh and interesting or unusual)
- Risk-taking (did the artist leave their comfort zone and attempt something new/complex/beyond their skill level)
- Presentation method chosen is appropriate to the work and the presentation venue
- Craft (for printed work), all required files handed in with correct color, resolution, and format
Student Reel of 2D animations
PR2
Create a 5-6 page high fidelity prototype of an app.
You are using an building upon the information for EX 10-2.
A link to the prototype.
A screenshot of your workspace with the pages. (png)
SLO #1 Animation & Interactive User Experience (UX) Software: Students will be able to demonstrate correct use of industry-standard animation & game creation software to create motion and interactive content for the web and handheld devices.
Create a 5-6 page high fidelity prototype of an app.
You are using an building upon the information for EX 10-2.
- Use Adobe XD to create a prototype for the low fidelity app you created in ex10-2.
- You will have several pages, at minimum 6-7.
- Consider page choices to alter font size and contrast.
- Add pages to correct and alter input information. (like a
- Consider color/value contrast. Refer to W7A module
- Do create a simple logo and a different UI design. Use a UI kits to assist with creating assets like a keyboard.
- Use the information you collected in ex.10-2
- You will need to create a home screen and pages, screen transitions, and animations (use the included).
- Test it with your classmates.
- Record feedback, this can be a word document.
- You are creating the front end design, no coding for this. Use Adobe XD
- Zip all files and upload to canvas OR use the share function and post link in discussion boards.
A link to the prototype.
A screenshot of your workspace with the pages. (png)
SLO #1 Animation & Interactive User Experience (UX) Software: Students will be able to demonstrate correct use of industry-standard animation & game creation software to create motion and interactive content for the web and handheld devices.
Student UX Prototypes
|
|
|
PR4
Use your webpages to showcase your artwork that you have created in class. You are creating an artwork portfolio.You can include exercises and projects.
You must include HTML,CSS, and Javascript.All pages will be zipped with your name. Individual files will have generic names like index.html, portfolio.html, bio.html, and yourchoice.html
image files must be in image folder. For example Your html should look like
< img src="images/image1.png">
Same with videos
PR4 is combination of all your web pages with the content you have created in class. It is an update with the rest of the semester's exercises.
Web pages must have:
Use your webpages to showcase your artwork that you have created in class. You are creating an artwork portfolio.You can include exercises and projects.
You must include HTML,CSS, and Javascript.All pages will be zipped with your name. Individual files will have generic names like index.html, portfolio.html, bio.html, and yourchoice.html
image files must be in image folder. For example Your html should look like
< img src="images/image1.png">
Same with videos
PR4 is combination of all your web pages with the content you have created in class. It is an update with the rest of the semester's exercises.
Web pages must have:
- have accessible colors and font types applied throughout the design of the pages
- buttons that change color when the cursor touches it, this should be in the <nav>
- Images that collapse down into a column (each one should have its own <div>) - if for example you have included other course illustrations, make sure they are sized equally for effective collapsing.
- Responsive web pages that change when screen collapses down to 300px in width for the screen.
- contained CSS animation in a div ( this doesn't have to be screen responsive, can be at fixed screen size like 500px to 800px)
- A fixed scrollable image with imagery You have created
- A line of javascript (button) that gives some feedback
- A javascript popup or modal
- include in your portfolio your animations created in adobe animate as videos. If you decide to export one of the pages as HTML Canvas, attach to menu as separate page.
- An embedded link to your PR2 (High fidelity Prototype). use <iframe>. You can copy the one Adobe XD provides and put into the page. You might have to use <iframe></iframe>
- Include your GDD and exercises as pngs or jpgs in portfolio section (this page can be long!)
- You can center everything
Student web animation pages (screenshot)
Student samples (screenshots) of web pages with their video and CSS/Javascript interactive animations
