TEKS: Technical Skills
- Using animation methods
- Importing and compressing audio
- Using drawing tools
- Working with layers
- Identifying parts of the user interface
- Publishing movies
- Using basic ActionScript
- Creating interactive buttons
- Organizing layers and libraries
- Optimizing
file size
March 6, 9 & 10, 2009 (note that Friday, 3/6 links to/from portfolio.html were done in class. If you were absent, please plan to attend tutorials this Friday, March 13). Monday, March 9, the workspace and file types in flash were discussed. You will need to access Flash tutorial sites for the introduction material. A brief quiz will be given on Friday, March 13. It will cover the Flash workspace and terms.
Warm-Up -- Create a new POST on your BLOG. Title it Flash CS3 – Concepts and Terms.
Answer each of the following questions. Type the question, then answer it, or answer in complete sentences. There will be a short quiz next week over this material.
Work with ONE other person to answer the following questions. Use the internet or the help section in Flash to answer the questions. This BLOG POST will be graded at the end of the day on Thursday, March 12.
- What type of file can be modified in Flash CS3? (just list the file ending)
- What is the national standard for American television video broadcast?
- What part of the Flash interface displays the movie you are working on?
- You need to turn these on BEFORE you can use guides.
- What is the gray area surrounding the Stage in Flash CS3?
- What is the magnetic pull of objects to a grid? (this grid can be turned on/off)
- What is the default frame rate for Web playback in Flash CS3?
- What is exporting your final Flash CS3 file called?
- Designing for the Web is normally measured in what unit of measure?
- What are palettes in Flash CS3 called?
Tween Tutorial -- each work station should have a one page tutorial on Tweening. Follow the seven steps carefully. Save your file as tweening.fla to your temp folder. This assignment will be graded at the end of the day Tuesday.
 Animation Tutorial -- when the tweening assignment is complete, begin work on the second tutorial. It is much longer. You are to create a new Flash document. Follow all of the directions carefully.
- Before you begin, create a flash folder in your folder on the student server.
- After creating a new document, save the file as animation.fla to this folder.
- Save your work often.
This assignment will be due at the end of the class on Wednesday/Thursday.
If you find interesting tutorials that you would like to share with the class, please email the URL to me and I'll consider adding them to the helpful sites below. You will get an extra point on your lowest test grade for any links that I post. I will give your credit for sharing.
March 23-30 - Phone Animation
This project counts as a major test grade.
Open lab will be held BOTH lunches on Tuesday in E225.
Working with Text
Students will learn to create text in Flash
Format Text
Convert text fields to symbols
Use masks to animate text
Organize layers in a Timeline
Work with layer folders
Copy objects from one layer to another
Apply filters to text
Use tweening to animate object quickly
Adobe Flash -- Classroom in a Book
pgs. 109-139
Copies of directions for students.
Lesson 4 (the Phone Animation) will be due at the end of the day on Tuesday, March 31. If you need extra time, please plan to attend tutorials on Tuesday at lunch or after school.
Spaced Out - Using Flash CS3, you can change almost any aspect of an object over time: position, color, transparency, size, rotation, and more. Using shape tweens, you can even morph one object into another. In this lesson, you will learn how to do the following:
Click to see the Final View of Project - 
- animate objects using motion tweens
- morph objects using motion tweens
- understand the difference between motion and shape tweens
- nest symbols
- animate motion along a path
- use masks to animate objects
- animate transparency
This lesson is designed to take approximately two hours to complete. You are welcome to come after school by appointment, or get a pass for tutorials during your lunch period on Tuesdays. This assignment will be 20% of the overall Flash Tutorial Grade. The phone animation is the first 80%.
Link Test on Wednesday/Thursday April 1/2 - study guide/review
Fifth Six Weeks Project -- Fractured Fairy Tales
Rubric for Project
This lesson begins with a study of story structure and the six traits of writing, using both traditional and fractured fairy tales. The six traits are ideas, organization, voice, word choice, fluency, and conventions. In a collaborative writing activity, students use the Fractured Fairy Tales tool to plan their own fractured tale with several alternate plotlines and endings. Students then add images, transitions, and motion to enhance the meaning of the text.
| Student Objectives |
Students will
- Become more familiar with the six traits of writing through a review of a variety of fairy tales and fractured fairy tales
- Practice the six traits in original writing
- Evaluate the work of their collaborative group and the work of their peers according to the six traits of writing
- Apply their knowledge of story structure in the creation of coherent hyperlinked stories
- Develop visual literacy skills in creating effective presentations using color, font, and images in addition to text. Final project will be created in Flash using the techniques learned at the beginning of the six weeks.
April 1/2 |
| 1. |
Introduce students to a variety of fairy tales and fractured fairy tales. Read several stories aloud or distribute copies of the titles you have chosen for students to read silently.
|
| 2. |
Have students work with a partner to choose several books or online stories and examine these texts for the six traits of writing.
- Ideas
What is the theme? What are some details the author uses to develop and support the theme?
- Organization
How is the story structured (beginning, middle, end)? What patterns do you notice in the story?
- Voice
Is the voice of the author strictly narrative or does it show feeling, conviction, emotions, humor, etc.? How does the choice of words contribute to the voice? (Provide examples.)
- Word Choice
What words in the text do you find especially interesting, unexpected, or powerful? Are there any repeated phrases? What metaphors or similes does the author use?
- Fluency
Read some of your favorite sections out loud. How do the words flow together? What transitions and connector words contribute to the flow of the story?
- Conventions
Focus on one or more conventions such as capitalization, punctuation, grammar, spelling, and paragraphing. Discussion of conventions should be grade specific.
|
April 3
Comparing Different Versions of Fairy Tales and Planning a Fractured Fairy Tale
Use the completed phone.swf file to create a storyboard for the movie. This is done in class with a partner. phone.swf
Copy of the storyboard.
| 1. |
Ask students to choose a classic tale on which they would like to base an original fractured fairy tale. Have them work in small groups (three or four students who have chosen the same story) to compare the classic version of the tale with two or more fractured versions.
|
| 2. |
Have students compare their two favorite versions of the fairy tale in terms of the six traits of writing.
- Which aspects are the same? Which are changed?
- What elements need to be present for the story to be recognizable as a variation on a certain classic tale (e.g., a Cinderella story or a Frog Prince story)?
|
| 3. |
Have students access the Fractured Fairy Tales tool and read the sample fractured fairy tale and the three traditional fairy tales.
|
| 4. |
Arrange students in small groups to discuss ideas for fractured versions of one or more of the three fairy tales by brainstorming alternate plots and endings. Students can either write collaboratively, or work on individual fractured fairy tales and then combine their efforts, incorporating the plotlines and endings developed by each member of the group.
|
| 5. |
Using the LCD projector and the Fractured Fairy Tales tool, model the creation of a fractured fairy tale. As you move through the questions on the Choose My Changes part of the tool, conduct the demonstration as a shared writing project, with students providing suggestions.
|
| 6. |
Have students work in their small groups to create their own plans for a fractured fairy tale. Remind them to print out the completed plan.
|
April 6 --Organization of Hyperlinked Stories
| 1. |
Distribute copies of the Organization Chart for Fractured Fairy Tales. Be sure students also have the planning sheets they printed out from the Fractured Fairy Tales tool.
Review and Discuss Common Elements of Fairy Tales.
|
| 2. |
Have students organize their own fractured fairy tales, using their copies of the Organization Chart for Fractured Fairy Tales and their printouts from the Fractured Fairy Tales tool.
Choose one of the elements from the story map to demonstrate the process, using the class-selected fairy tale. For example, if the fairy tale is Goldilocks and the Three Bears, you can share the following examples:
- Character: Change from Goldilocks and the Three Bears to Goldilocks and the Three Pigs.
- Conflict: Instead of Goldilocks breaking into the bears’ house and eating porridge, she breaks in and borrows lawn tools and supplies.
- Resolution: Goldilocks ran away. The new resolution could be that she writes a letter of apology and replaces the missing and broken items.
- Setting: The tale could take place in the big city instead of in the forest.
|
| 3. |
Using completed copy of the Organization Chart for Fractured Fairy Tales , write a rough draft of the writing fractured fairy tale.
|
| 4. |
Once the rough drafts are completed, have students edit their tales. Remind them to focus on the 6 traits of writing listed above. |
April 7
Using the Fairy Tale changes (access April 1> Fractured Fairy Tales > Write Your Own Fractured Fairy Tale > Choose a Fairy Tale (you can write about any F.T....even those NOT listed...just remove the title > Write a Fractured Version of the Fairy Tale > Choose My Changes) This was to be printed and turned in during class Monday!) -- write a Rough Draft of your Fairy Tale.
The draft should be written in Word and saved as story.doc to your flash folder on the student server. The rough draft is due at the end of the period. Print and staple the draft from Monday to the assignment.
April 8/9
Create a Story board for Flash that has enough Scenes to accommodate the Fairy Tale each student created. Feel free to use the Story Map to get ideas to create the story board for your fairy tale.
Complete the Phone Story Board in class. This should be completed before creating the story board for your fairy tale.
Use the completed phone.swf file to create a storyboard for the movie.
Read the directions at the top of the page. Each block on the story board should represent an independent action. Open your file on your computer so you can record the actual frame numbers.
Your story board should include 9-12 boxes. You should include as much detail as possible and coloring will earn extra points. Be sure to put your name on this assignment and turn into the 'black' box before leaving class.
Copy of the storyboard.
April 13
STORY BOARD
Discuss Quick Facts About Story Boards
Review Examples of Storyboards.
What is a storyboard?
Once a concept or script is written for a film or animation, the next step is to make a storyboard. A storyboard visually tells the story of an animation panel by panel, kind of like a comic book. http://accad.osu.edu/womenandtech/Storyboard%20Resource/
The art of limited animation! -- A MUST READ for all!
This tutorial assumes you are already familiar with the flash basics, else use the Flash Help (F1-Using Flash -Getting Started...) and read trough the first few chapters up to Creating Animation. This should put you up to speed.
Introduction:
Limited animation, as opposed to full animation, is characterized by the use of cycles, still images and whatever it takes to necessitate as few drawings as possible. This type of animation pretty much saw the light of day with the UPA studio in the 50’s, then of course got it’s glory days with Hanna-Barbara and such cartoons as Scooby Doo, the Flintstones and so forth... (continue reading here....)
Decide on the length of your fairy tale. Plan accordingly. Use the available storyboard. These were given out in class on Wed./Thurs., April 8/9. If you need more pages, you can open the link in this paragraph and print more copies.
Use the examples we reviewed and include as MUCH detail as possible. Although the sketches DO NOT have to be 'perfect', you (and I) should be able to tell exactly what will happen and when. Complete the Story Board and have it WITH YOU IN CLASS ON Tuesday, April 14
April 14 - 17
Due - The storyboard for your fairy tale should be turned in and complete today. Indicate the time in seconds that each block represents and the frame range. Turn into the black box BEFORE the end of the period.
Begin - Create the main character for your fairy tale. You should create the image in Photoshop and save to your temp folder. Create a fairytale folder so your files will be easy to find. You can use a variety of drawing tutorials, coloring books, the fairy tale books in front of the classroom, or create your own character. The image will be based on the effort put forth during class and OUTSIDE of class. I do expect the images to be developed as homework. Planning is critical to the success of this project.
Due -- Main character is due at the end of class on Friday. They will be graded at the beginning of class on Tuesday, April 21.
April 17
warm-up - create a new entry in your BLOG title Fairy Tale - flash movie. Write a brief summary of the story (no more than 5 sentences). Keep your BLOG open the rest of the period so you can add tutorial sites and drawing instructions that you may want to refer back to for character creation for your movie.
Objective -- create the main character in Photoshop for your flash movie. The character should have several parts to allow for animation.
Activity -- Draw, scan, or import character into Photoshop and manipulate as needed for your Flash Movie. Save each of the parts separately as different image files. All of these files should be saved to the temp folder into a fairytale folder. The main character will be graded in class on Tuesday, April 21.
April 20
warm-up -- Edit the BLOG entry from Friday and summarize what you accomplished. Keep the BLOG open so you can add links for sites that you are using images from for your website, or tutorial sites that you want to use for reference.
Objective -- Create several images from layers in Photoshop to combine as imported instances in Flash to create an animation. Create a 10 second segment for an original Flash Movie.
Activity -- images created in Photoshop should be saved as separate image files. You can duplicate a layer in Photoshop to a new file, then save that file. Each of these files should be imported to the library in flash. Create a new instance, then drag each onto the stage so the entire image can be seen.
Due-- the main character should be complete today. It will be graded at the beginning of class on Tuesday, April 21.
April 21
warm-up -- Open the main character in Photoshop or Flash and pair-share with partner. I will come around and grade your work for the three class period you have had to create the character.
Objective -- import graphic to the library in Flash. Create animation for the first scene (~10 seconds). Check out tutorials to work on movements, and/or other flash tools.
Activity --
- grade main character creation
- access various tutorials to help with animation and/or drawing
- break apart graphics to aid in creating movement
- review tweens
Due -- First 10 seconds of movie should be complete. Main character should be created.
April 22/23
warm-up: review YOUR storyboard and compare it to the first "scene" of your flash movie.
Objective: Develop first 10 seconds of the flash movie for the "Fairy Tale" project.
- Rubric review -- write your name, period and folder on the hard copy of the rubric given in class. Record your story grade next to the first three rows and your storyboard grade next to the last row. Review requirements (not "originality" component.) Staple your story and story board to the rubric and TURN IN TO THE BLACK BOX.
- review tweens -- handouts are next to printer and you can use tutorials that are online.
- create symbols - reminder -- graphics should be converted to a symbol before you can create tweens with them.
- walk animation -- example of a "walk" movie.
- reminder: organize folder structure. NOTE. The only fairy tale file that should be in flash in fairytale.fla. All images, sounds, etc. that you are using should be saved to your temp/fairytale folder!
Due: Turn in RUBRIC with the storyboard and story stapled -- for a grade!
May 11
Objective:
Student Objectives |
- Publish a flash movie.
- Follow a set of technical directions to create an html file using javascript.
- Create navigation buttons to allow easy access to various web files in a web site.
|
Activities:
Complete assignment – Publish Your Fairy Tale – handout in class.
Students should use their story board to create a flash movie.
|
Materials: networked computer lab, student folders on server |
May 12 - 15
Objective: Flash Introduction for Portfolio |
Activities: Create a storyboard for the introduction for the Web Mastering Portfolio. The intro should describe your work in the Web Mastering Class, and showcase your skills. There is no set length, but pace yourself so you can create the intro in the time give. May 7 -9 should be spent developing scene 1 of the introduction. This can be any type of movie you choose. The scene should contain text for letting your audience know what they are viewing, have a certain style that you have chosen, and highlight your personality. You must include a skip intro button and sound in this file. The movie will be created next week. It will lead to each of the projects that you have completed
content.html will complete the Portfolio introduction. This is a web page that contains a Flash Movie that has 'buttons' that access the each of the semester's projects. See list below for proper filenames. These are the ones that were assigned in class. You may need to actually look in your folder. Some of you did not use the file names that were suggested.
- First Web Project - URL: first/index.html
- Mutant - URL: mutant/index.html
- Beaches - URL: beaches/index.html
- Client -- ?????/index.html
- Flash - URL: flash/index.html
Add sound to your intro if time...
Wed/Thur -- Decide what you want on your flash intro. Some very good examples are found at the following URLS.
|
 Flash Tutorials & Resources (there are more exciting "shape tween" tutorials.)
Shape Tweens
Morphing Text
Text Effect -- Handwriting
Motion Guides
Comic Creator
Creating a Walk Cycle in Flash -- tutorial shown in class on Tuesday, April 4 (you can copy the frames and paste them to a scene in your fairytale movie.)
 Lip Synking Techniques
Lip Synching is the process of matching mouth shapes to recorded vocals, creating the illusion that a voice is coming from the character.
Face Creator -- Sort of Cool, but the directions are not very detailed.
http://flashface.ctapt.de/
Create layers in Expression Web. If content is INSIDE a layer, then you can move the content around on the page as you wise. Save the file often and view in your browser.
Do this for the train.html file and the phone. html. (and alien.html if you have it).  Create
copyright information and include a text link to these citations on
each page. You must access the special characters in Dreamweaver to
get the copyright symbol. Create your copyright comment for hate bottom
of each of your web pages. example: All
Content Copyright © 2009.
 Create a portfolio link on each page. You can use the image on this page, or search for a new image. You should put this image near the bottom of each page. Make sure what you choose works well your your design. This icon should be linked to the portfolio.html that is in the top level of your folder on the student server. The link should look like this: ../portfolio.html. If your site is mapped properly, you can drag the link icon to this file. You can copy and paste ../content.html in the link box if your prefer. Be sure to include this icon on ALL of your flash pages:
First Web Project - URL: first/index.html
-
Mutant - URL: mutant/index.html
-
Beaches - URL: beaches/index.html
- Client - URL: client/index.html
-
Flash - URL: flash/index.html (the four flash projects should be linked from this page)
Add sound to your intro if time.
Suggested Tutorial Sites:
Expression Web
- Basic Expression Web Tutorial – Learn how to create a cool Web site
quickly about the trip of your dreams to beautiful beaches around the world
with this quick and easy Expression Web tutorial.
- Expression Design Tutorial - Create a great looking header image for the
beach trip Web site that is referenced in the Basic Expression Web tutorial.
- Advanced Expression Web Tutorial - Add to the Web site you made in the
basic tutorial by learning how to use the advanced features in Expression Web.
- Expression Learning Center - Access an extensive collection of tutorials,
guides, and training videos to become an expert on any Expression tool.
Helful Other Sites
REVIEW FOR FINAL EXAM was given to students during class last Friday.
Overview of Exam:
I. Objective Portion (40 pts)
Research and determine the ‘best’ answer for the questions given in class each day. A review worksheet will be given to each student in class on Monday, May 12. When you are finished, you can access the Final Exam Review in Quiz Star (http://quizstar.4teachers.org/indexs.jsp) – NOTE: there is a link on the online lessons and ‘check’ your answers. Use the same login and password you use in class. This portion of the test will be multiple choices on the final exam. You can earn 5 addition points on your final exam by turning in a COMPLETED copy of this review the day of the exam.
- The Flash/Expression Web (35 pts)
this portion of the final will be done during class. You will be given specific directions similar to the tutorials and lessons that have been done in class. You will publish the movie, create an html file and insert your movie into the file. You will be expected to edit the file in Expression Web and explain how you created the flash movie.
- Portfolio Portion of Exam: (25 pts total)
Automatically opens (1)
CD created successfully (1)
Folder Structure Works (links open) (1)
Flash Intro – index.html (10 pts. total)
Skip Button (2)
automatically opens navigation &/or Stops (2)
Degree of difficulty (6)
Navigation (content.html) – (12 pts total)
Link to 1st web--and back (1)
Link to Mutant Project--and back (1)
Link to 4th Six Weeks Project (business or club)--and back (1)
Link to Flash--and back (1)
Link to phone and fairy tale & back to flash (1)
Link to Microsoft --and back (1)
Link to EW and Research & back to Microsoft (1)
Degree of difficulty / completion (5)
|
| May 18
Objective: Create a navigation file to all projects created during the ’08-’08 schoolyear.
Navigation (content.html -- this file will be saved as portfolio.html at the end of class because all of the links that were created go there) – (12 pts total)
- Link to 1st web--and back (1)
- Link to Mutant Project--and back (1)
- Link to Beaches--and back (1)
- Link to Client – and back (1)
- Link to Flash--and back (1)
Link to train, phone, and fairy tale &b ack to flash (3)
Degree of difficulty / completion (5)for project.
- Check success:
http:// whstech.com/(folder)/microsoft/index.html
|
|
| May 19 -21
Tuesday -Thursday
Objective: Use Window Explore to ftp all files needed for the “Microsoft” project
- Create a mapping of the files used in your ‘Microsoft’. Include this map in your notebook. List all html files and images associated with each page. These are the ONLY files that will actually be transferred to the whstech site.
- FTP to whstech.com using the appropriate login and password. FTP all files needed for project.
- Copy the autorun files from the @pickup folder on the student server.
Paste in the top level of assigned folder on the student server
- Burn CD for final exam.
- Check success:
http:// whstech.com/(folder)/microsoft/index.html
Review for the object portion of the final exam can be found in Quizstar:
http://quizstar.4teachers.org/indexs.jsp
Complete all four Final Exam Reviews. Complete the hard copy of review and turn in the day of the exam for an additional three points on the final. |
|
|
