Welcome to Web Mastering

Fifth Six Weeks Project -- Fractured Fairy Tales
Rubric for Project
Due Date -- Friday, April 11, 2008

This lesson begins with a study of story structure and the six traits of writing, using both traditional and fractured fairy tales. In a collaborative writing activity, students use the Fractured Fairy Tales tool to plan their own fractured tale with several alternate plotlines and endings. A PowerPoint template provides the framework for the fractured fairy tale, with hyperlinks leading through the alternate plotlines. Students then add images, transitions, and motion to enhance the meaning of the text.

February 18

Warm-Up

Log onto the student server. Create a new folder in classwork named old. Move ALL of the folders and files in classwork to this folder.
Create another new folder in classwork named flash.
Open the 01.fla file found in the @pickup folder by double clicking on it.
Save this file to your classwork/flash folder.

• explain vector graphics and raster images and their role in streaming technology
• use the Flash Player
• recognize Flash file formats
• recognize Flash in action on various Web sites

Ryan Terry, Interactive Design student: www.ry-guy.com
Artnomad Web Design: www.artnomad.com
Mushroom head: http://mushroomhead.com/

• understand the purpose of the Stage, toolbar, panels, and Timeline.
• open close and configure the panels in your workspace
• work with Flash and use layers
• use drawing tools such as the rectangle tool
• use the property inspector to modify an object's properties.

• Open a file in Flash
• Add layers to the Timeline
• Create a keyframe in the Timeline
• Adjust settings in the Property inspector
• Open and work with panels
• Select and use tools in the tools panel
• Search for topics in flash Help
• Access online resources for Flash

February 19

Objective:  Students will be able to do the following upon completion.

• Open a file in Flash
• Add layers to the Timeline
• Create a keyframe in the Timeline
• Adjust settings in the Property inspector
• Open and work with panels
• Select and use tools in the tools panel
• Search for topics in flash Help
• Access online resources for Flash\

1. What is a stage
2. How do you open a panel in Flash?
3. What’s a hidden tool, and how can you access it?
4. Name two methods to undo steps in Flash, and describe them.
5. How can you find answers to question you have about Flash?

February 20-22

Warm-Up

Log onto the student server.
Open the 02.fla file found in the @pickup folder by double clicking on it.
Save this file to your classwork/flash folder.

Objective: Students will work with drawing tools in Flash

Activities:  Students will learn to do the following

• Draw rectangles, ovals, and lines
• Understand the difference between drawing modes
• Modify the shape and size of drawn objects
• Apply fill and stroke settings
• Import bitmap images for use in fills
• Select elements and portions of elements
• Create simple animations using motion tweens
• Group elements
• Create masks to hid areas of layers

View the 02end.swf file to preview the lesson .Complete Review Questions for Lesson Two – Working with Graphics

Review Questions:

1. What are the three drawing modes in Flash, and how do they differ?
2. How can you draw a perfect circle using the Oval tool?
3. When would you use each of the selection tools in Flash?
4. What does a mask do?

Flash Quiz -- taken during class. If absent, please make-up after school on Tuesday or Wednesday at lunch.

February 25

Complete Lesson 2 -- Fizz -- Packet done in class

Review Questions:

1. What are the three drawing modes in Flash, and how do they differ?
2. How can you draw a perfect circle using the Oval tool?
3. When would you use each of the selection tools in Flash?
4. What does a mask do?

When all steps are complete, create a new folder in the classwork/flash folder.  Name is 2.  Drag all of the associated lesson 2 files to this folder.

Compare your folder structure with the image shown.
Lesson 2 should be completed at the end of the period.

February 26

This day will be used for grading and for students to have the opportunity to complete assignments that are not completed.

Absolutely no games or email during the duration of the class. If you are completely finished with Lessons 1 & 2, you should review the sites below, or find some of your own. GAMES are not a flash site that are acceptable. You can only be on sites that are actual tutorial sites. You should focus on looking for some inspirational sites to help develop the portfolio introduction and/or the cartoon/fairy tale movie that will be created.

Suggested Sites:

FLA Archive: http://www.echoecho.com/flasharchive.htm

This is the place to get inspired. Browse through our FLA archive, when you find something you like, click the link to download the Flash source file (FLA). You can open the file in your Flash editor and see how we created the effects.

Bonus Work -- Various Flash Tutorials
http://www.echoecho.com/flash.htm

FLASH BASICS What is shockwave Flash? Why is it often smarter than applets or GIF's? What do I need to be able to create my own flash movies? Where should I start? FLASH DRAWING Learn to create Draw with Flash. This tutorial explains the Flash toolbox, how to draw basic lines and shapes. FLASH TWEENINGS Learn to change objects between two keyframes. Use the technique to move objects across the screen, change objects from one to another or simply to give an object a graduated color change. FLASH AND JAVASCRIPT This tutorial is for advanced users only. It will teach you to build a "javascript bridge" allowing Flash and Javascript to communicate.

February 27-28

FLASH BUTTONS
Learn to create Flash buttons.
This tutorial explains both simple buttons and more advanced "tell target" buttons.

This tutorial will be done as directed class work. This link will be active for you to refer to when you need to use buttons in your own flash work.

The only object type in Flash, that can detect mouse events is the Button object.

This means that there is only one way to make buttons with Flash: Creating a button object.

This may sound a bit too simplified, but many are confused by the techniques behind the more sophisticated buttons, that we will cover later in this tutorial.

Creating a button that changes upon mouseover-events is extremely simple. All you really have to do is to tell Flash how you want the button to look 1) in normal state, 2) when the mouse moves over the button and 3) when the user clicks the button.

Once you've learned this 3-step technique you can create buttons in seconds.

Challenge: Advanced Buttons

February 29 - March 4

This project counts as a major test grade.
Open lab will be held BOTH lunches on Monday and Wednesday in E225.
(note that lunch on Wednesday will be a bit shorter)

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 will be due at the end of the day on Tuesday, March 4.

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.

March 7

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.

March 10 --Organization of Hyperlinked Stories

March 10

Distribute copies of the Six Traits Rubric for Fractured Fairy Tales and Common Elements of Fairy Tales.

Create a Story board for Flash that has enough Scenes to accommodate the Fairy Tale each student created. Use the Story Map to create the story board.

Complete one Story Map together in class. This should be completed before creating the story board for your fairy tale.

When printing your story. Choose the Primo PDF creator. In the "Save As" line, browse to your flash folder. Save this document as changed.pdf. It will open in Adobe. Then print and choose current page. This will allow you to save a copy as well as NOT wasting paper.

March 11

Using the Fairy Tale changes (access March 7 > Fractured Fairy Tales > Write Your Own Fractured Fairy Tal > 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 ftdraft.doc to your flash folder on the student server. The rough draft is due at the end of the period. Complete for homework if you do not finish it.

March 12-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., March 12 & 13. 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.

March 25- 27

March 28

March 31- April 11 (Date was extended due to electric problems)
Rubric for final project.

Develop the story in Flash. Students have the option to write their story as text, or they could record the story and import the sound file.

April 14 - 15

Presentation of Student Projects. As you view the fairytales, you should evaluate the project on a scale of 1-5 based on the rubric. Write THREE complete coments on each project.

• Write one comment about what impressed you about the movie.
• You should write one constructive criticism that you would make the project better
• State one observation about the project

April 16 - 18

Publishing Flash Project -- To complete the flash section of Web Mastering, you will publish your fairy tale and your phone projects. Specific directions are shown below and directions were discussed during class on Wednesday and Thursday. Your flash projects must be posted to the WHSTECH server by the end of class on Friday, April 18.

1. Create a flash folder in your folder on the student server -- this folder will contain ONLY the files that are necessary for your projects to be viewed on the web.
   
   
2. Open your fairytale file. (currently in classwork/flash)
   1. Check to make sure there is a stop action on the last frame of the last scene.
      To add an action, create a new layer, name it actions, insert a blank keyframe in the last keyframe, hit F9, and choose stop. If you have an Action Script 3 file, you will need to type stop( );
   2. Save your file to your student folder to the flash folder you just created. (Do NOT copy and paste all of your files. This is NOT necessary!)
   3. Publish Settings -- (File, Publish Settings. You should make sure the .gif and .html are checked).  If you look in your flash folder now, you should have 3 - 4 files. An html file, swf, fla and perhaps a js (java script)
      
      
3. Open your phone file. (currently in classwork/flash)
   1. Save this file to your "new" flash folder.
   2. Publish Settings -- (File, Publish Settings. You should make sure the .gif and .html are checked). (Three new files are created when you publish)

Dreamweaver

1. Set up your site. (Site, New, name it your folder name, and browse to your folder)
2. Open the phone.html file in your studentfolder/flash folder.
   1. Click in front of the gray box. Align center from the properties.
   2. Title your file (in the box at the top).
   3. Create a link to your flash projects at the bottom of the gray box. The link should be index.html
   4. You can modify this page any way you wish as long as the page shows your phone movie.
   5. Save the file.
3. Open the fairytale.html file in your studentfolder/flash folder.
   1. Click in front of the gray box. Align center from the properties.
   2. Title your file (in the box at the top).
   3. Create a link to your flash projects at the bottom of the gray box. The link should be index.html
   4. You can modify this page any way you wish as long as the page shows your phone movie.
   5. Save the file.
4. Create an index.html file. Save this file to your folder in the flash folder. This file will act as the homepage for your flash files. You should create links to your phone project and your Fractured Fairy Tale.
   1. Create a 1 x 2, 640 pixel, centered table.
   2. View your phone.html file in a browser. When an image you like is on the screen, hit "Print Scrn" (above the Insert key on the keyboard). This will place an image of what you see on your monitor on the computer's clipboard.
   3. Open Photoshop. Create a new file. Paste (Ctrl + V) the image from the clipboard. Crop this image to a much smaller size. I would suggest setting the dimensions in the crop propert to 300 px. by 250 px. Select the portion of the picture that you want to see. Crop. Save this image for the web to your flash folder.
   4. Repeat this process for your Fractured Fairy Tale.
   5. Insert the phone image into the left column of your table. Hit enter and enter a caption for the picture. (ex: Flash Birthday Greeting.) Do the same thing for the image you created for the Fractured Fairy Tale, but insert this image into the right column. The caption for it should be the title you used for your Fairy Tale.
   6. Create links for the images and for the text you just created. The links should go to the proper flash files. The border for your linked images should be set to 0.
   7. Save your file (it must be named index.html).
   8. Insert the portfolio.gif and center it at the bottom of your page.
   9. Create a link to the overall Portfolio content.html page. The link should be a relative link, one folder up in the folder struct. It should look like this: ../content.html. Note: in some classes, we linked to index.html. Most students will want a flash intro page that must be saved as index.html. You would want your portfolio links to go to a 'table of contents', thus the link for the portfolio should be ../content.html. This may need to be edited on your pages.
   10. Save your file as index.html to your flash folder.
       
       
5. Create a new file and save this file as content.html to the top level of your student folder. You will have to navigate to the proper place to save this file.
   1. Create a 1 x 1 , 640 px. table and create a simple page that lists all of your projects. So far, you should have the following projects:
              First Web Site
              Mutant Project
              Club or Business Site
              Flash
   2. Create links to each of the folders' index.html pages
   3. Save your file

FTP your student folder/flash folder to the whstech server.

Setup for Dreamweaver:

Example for this assignment.

Useful Information

* How to import an image with a transparent background...

   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/

Tables are the best and most structured way to organize graphics, text, and other objects such as forms in your Web pages.  We have used a 1 x 1 640 pixel table for ALL of the web pages made during the first semester.  Click at the very top of the page.  Choose 1 row, 1 column, 640 pixels, with borders should be set to 0. Align center.  You will notice a dotted 'box' at the top of the page. Select the entire selection EXCLUDING the table you just made.  Cut this section and Paste it inside the newly created table.  Save the file and view in your browser. 

Do this for BOTH the face.html file and the bounce. html.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 © 2008.

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 content.html that is in the top level of your folder on the student server. The link should look like this: ../content.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:

Flash Introduction for Portfolio Create a story board 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. This week, April 2- 5 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 next scene will be created next six weeks. It will lead to each of the projects that you have completed.

• First Web Project - URL: first/index.html
• Mutant - URL: mutant/index.html
• Club or Business - URL: (foldername)/index.html
• Flash - URL: flash/index.html
• Fairy Tale -- URL: fairytale/index.html
• This I Believe - URL: thisibelieve/index.html