Storyboards for Winchester Community Park Videos Ideas

Movie Shot Plan


  • Shots that need to be taken:
    • Soccer playing
    • Striking image of old land for start of video.
  • Scene 1: Old Land
    • Use Pictures of Existing Land
    • Kirk Speaking
    • Quick Transition: Fade out Scene 1/Fade in Scene 2
  • Scene 2: Computer Generated Images
    • pictures provided to us
    • music?
    • Transition: black out into next shot
  • Scene 3: Title Page
    • “Winchester Community Park”
    • Slogan
    • Images
    • Transition: Fade
  • Scene 4: Interview with Charlie Stackhouse 
    Add caption
    (Project coordinator)- MAYBE
    • Kirk with the interview
    • basic overview of the project- objective, reasons
    • Transition: black out
  • Scene 5: Introduce the Location
    • Use Jonathan’s Video, Google Maps, images from the street of buildings
    • Jonathan Speaking
    • Transition: fade
  • Scene 6: History of the Land
    • More details into what the land was used for previously, why it is good for the land
    • James Speaking
    • Transition: cut to next
  • Scene 7: More details on the project
    • use further computer generated images provided
    • info what fields will be used for, address questions regarding the facility (public/private, etc)
    • Maybe need someone to talk
  • Scene 8: Benefits to Community
    • Voice of Emily Zieg
    • Props include soccer balls and soccer and jerseys  
    • Location in the Woods
    • Video of Soccer players?
    • mention walking paths
    • Ms. Branley’s daughter interview
    • Transition: Blackout
  • Scene 9: Fundraising
    • James and Nick speaking
    • Goals/ how much they need, have at the moment
    • where you can donate
    • testimonial
    • transition: black screen
  • Scene 10: The End
    • Slogan: One Goal One Passion, Winchester Community Park
    • Fade in from the black screen
    • possible end with some one saying the quote
    • It fades out



Project Overview: Creating an Authentic Mobile Application Design

Project Overview: Creating an Authentic Mobile Application Design:
Mr. Downs
Individual Skills & Tasks:
1.Concept Development 2.App Layout 3.Buttons And Actions 4.Adding Graphics & Text 5.API Introduction/Code Snippets 6.Exporting
Every Individual Student Will Need To:

Keep A Google Docs/Account

After Each Group Planning Session, you’ll need to write 2 Paragraphs and share with Mr. Downs Email (danieldownsphotography@gmail.com)
Each Group Will Need To:

Maintain a folder (Downs Research/Group 1 etc.)containing all project files(Flash,Photoshop,sounds,videos,planning documents and notes).
Group Tasks:
Addressing the Authentic Question:
Plan, Design, and Develop a Mobile Application for the students of your high school community.
As a group you will need to plan a mobile application in terms of content, design and technology which will address this scenario.
Activities:
Planning Activities(Done on one computer together):
1.Venn Diagram Brainstorm (add text over the venn diagram document in photoshop)
2.Click Stream/Information Architecture Organization / Considerations of the user
3.Layout Design(color scheme, button sizes, information architecture)(Use Photoshop over App Layout Sheet).
Technology Based Activities(do not use the computer with the mic):
1.Create A Layout In Flash(multiple pages,major headers and buttons)
2.Integrate Design Components(color scheme, buttons, graphics, images)
3.Integrate API’s & Technology to improve user experience
http://www.makeuseof.com/tag/api-good-technology-explained
4.Export & Test On Device
Check for proper function of the app along with visual presentation
Create an icon that will represent the app in the mobile app marketplace
Presentation
As a “group” you will organize a 5 minute screencast presentation presenting your application to the school community and describe how the application addresses the real world needs of the user and audience of the “authentic question”.
Content Planning With Users & Context In Mind
-Considering the “Authentic Question” Work On These Assignments:
Assignment 1:Venn Diagram Assignment (Planning Activity 20 minutes)
Content:

What types of information is included?(graphics,text,information,photos,galleries,links,sounds,effects,data,videos etc.)
Context:

How and where will the application be used?

What circumstances and needs will this technology address?

Where will users need or want the content?
Users:

Who will this app be targeted at?

Why will they use it?

What value does it provide them?
User Interface:

How will the user interface be influenced by the inclusion in the planning process of content,context and users?
Assignment 2:Information Architecture & Click Stream Activity(30 minutes)
Design Concepts:The are the visual and aesthetic considerations for the content.

color schemes

button sizes

organization of pages and order of pages

screen resolution

Font & Text Styles

Graphics & Images

layouts of buttons

organization of content
Cool Things You Can Add To A Flash App

Web Links(to specific web pages or other web based content)

Link to email

Video(embedded into page on app)

Images/Graphics(right on the page

Buttons(rollover,Photoshop and Flash)

Sounds and sound effects(sounds added to buttons and graphics)

Fade Effects(can be added to objects)

Maps Link(will link to google maps pages)

Swipe effects(can swipe photos or graphics to other pages or images)

Pinch & Zoom(can enlarge or reduce an image or graphic)

Check out the code snippets in the “Flash Actions” Window for more ideas
There are more than listed here so just ask if you have an idea?
Flash CS6 Code Snippets & API Integration
Actions:
Click to go to webpage
Custom Mouse Cursor
Drag and Drop
Play/Stop a Movie Clip
Click to Hide Object
Show Object
Click to Position Object
Click to Display Object
Generate a Random #
Bring Object to front
Simple/Countdown Timer
Audio and Video:
Click to Play/Stop Sound
Click to stop all sound
On Cue Point Event
Click to Play/Stop/Pause/Rewind Video
Click to Set Video Source
Click to Seek to Cue Point
Create a NetStream Video
Timeline Navigation:
Stop at this Frame
Click to go to Previous/next frame and play/stop
Click to go to Previous/next scene and play/stop
Event Handlers:
Mouse Click Event
Mouse Over/Out Event
Keypressed Event
Enter Frame Event
Animation:
Move with Keyboard Arrows
Move Horizontally/Vertically
Rotate Once/Continously
Animate Horizontally/Vertically
Fade In/Out a Movie Clip
Mobile Touch Events:
Tap Event
Touch and Drag Event
Long Press Event
Load and Unload:
Click to Load/Unload SWF/Image
Click to Load Image from Library
Add/Remove Instance from Stage
Load External Text
Mobile Gesture Events:
Two Finger Tap Event
Pinch to Zoom Event
Pan Event
Rotate Event
Swipe Event
Mobile Actions:
Swipe to next/previous frame and stop
Swipe to go to forward/previous scene and play
Move with accelerometer deactivate/activate event
Menu Key Pressed Event
Deactivate/Activate Event
Air For Mobile:
Show Geo Location
Re-orient object on device/rotation
AIR:
Click to Close/Minimize/Maximize or Restore AIR Window
Drag to Move AIR Window
Click to Read from a Text File
Click to Write to a text file
Save/Load Preferences

Mobile Applications Final Spring 2013

Mobile Applications Final



Part 1: Plan and Design



Goal: Plan a 5 page mobile application which addressess the needs of a Special Needs student. This application can address the learning and cognitive skills of the student or assist the student in developmental delays.



Assignment 1:Produce a concise written statement which describes the target audience of the mobile application,context of use and what content the application will include. This statement should be minimum of 2 paragraphs and fully describe the purpose and overview of the mobile application design.
  • What purpose does the application serve?
  • How does it create engagement?
  • Who will use this application?
  • What technologies(pinch and zoom,sound,swipe gesture,buttons,web links,maps etc.) will be integrated into the design.

Outcome:Concise written 2 paragraph essay for use with final video(100points).



Assignment 2:Using Photoshop create a wireframe/mock-up which includes the graphics in terms of color schemes,buttons,button sizes,images and also anticipated user interaction. Be sure to include relevant font/typography styles and consideration for engagement. All of the listed items below are required(color scheme,buttons,navigation,graphics,3 technologies).
  • What are the colors and fonts  used?
  • Why are the buttons located where they are?
  • Where does the user navigate to and why?
  • What will all of the application pages look like?
  • What pages have the required technologies?



Outcome:Complete Photoshop graphic using template(linked below) which shows the listed components(100points). Use the template below in Photoshop to aid in your layout and design.

Part 2:Develop

Assignment 3:Using either the Flash platform or one of my supplied mobile templates integrate your design. Your completed application will be exported as an .apk file. Other options are available if done in Dreamweaver.
Questions to Ask Yourself:
  • Did I integrate all of the required technologies and export correctly?
  • Did I incorporate a cohesive navigation and color scheme?
  • Did I create user engagement?
  • Did I create something a special needs student would actually use?
  • Am I being detailed orientated and looking to solve problems as opposed to not finishing a component of the application?



Outcome:Final mobile application(.apk file) with all the technical &design components listed in part 1 and all of the cohesive design needs listed in part 2(100points).

Basic App Layout In Flash

Components To Add To Your App

How To Make A JQuery Layout

Basic JQuery Slider Template

JQuery Cheat Sheet

Part 3:Evaluate
Assignment 4:Once you have completed the prior components of the project you will have a 2 paragraph concise statement,Photoshop Mock-up and completed mobile application.
All of these components should be organized in a folder on the p drive and also backed up in your documents.

Assignment 4:You will be responsible for creating a 5 minute constructively critical evaluation based on the requirements of the project of someone elses application.

Android 1: Lesson 5

Android 1: Lesson 5



Lesson 5: Expanding on Java for Counter App
INTRODUCTION
In this lesson you will be expanding your Java knowledge, and actually assigning the Java code to the XML layout. Making the app actually alter itself and work like a normal application.



LESSON OBJECTIVES
By the end of this lesson, you will be able to:
1. Importing more pieces of Java
2. Setting the intent of the Java
3. Setting the starting number for the counter
LEARNING SEQUENCE
Required Reading
Read the following:
Introduction To Development Environment
·        Eclipse
·        Android
·        Considerations for beginning programming.
Resources
View the following:
1.      Eclipse
2.      Android Development
Assignments
  1. In this lesson, we’ll start with the your ‘MainActivity.java’ file, and be editing the app solely in java
  2. First you’ll want to import a few more pieces of java to complete the app.
  3. Move your cursor until you are under the ‘android.view.menu’ and type out ‘import android.view.View;’. Make sure that View is capitalized. This is importing the setContentView in the app, letting it view the R.layout.activity_main’ file. Which is your XML file
  4. then you’ll want to type out ‘import android.widget.Button;’ and ‘import android.widget.TextView;’ These both allow you to edit and change the Button and TextView in the java, obviously.
  5. Like HTML coding, and all other coding, you’ll want to make sure you end the code by typing ; at the end each piece of code
  6. Next we’ll be adding the intent. Move your cursor to after the ‘Activity {‘ so that it is located within the activity. hit ‘ENTER’. You can locate it where I have mine, but it doesn’t matter that much. I hit enter twice, then indent. just for convenience
  7. Now type out ‘int counter;’ the color of the code should change to the same we have in our video. This is setting the intent of the app to being a counter, which is a preset word in Java.  
  8. Hit enter again, and type of ‘Button add, sub;’. This is creating the Java for both buttons, one being an adding button, the other being subtraction.
  9. Hit enter again, and type ‘TextView display;’. This piece of code makes the Java for TextView, allowing it to be altered and changed.
  10. Now that that’s done. Move your cursor again past the ‘protect void’, until you pass the ‘(R.layout.activity_main);’. Hit enter again, and type ‘counter = x;’ Where x is, type whatever number you want to change what the starting number is for the counter. Mine is 0, yours can be any number you want.

Android 1: Lesson 6

Android 1: Lesson 6



Lesson 6: Continuing Java Coding
INTRODUCTION
In this lesson you will be learning even more Java and going in depths with the buttons.



LESSON OBJECTIVES
By the end of this lesson, you will be able to:
1. How to add a button in Java
2. How to allow the buttons to change the TextView
3. how to set OnClickListener
LEARNING SEQUENCE
Required Reading
Read the following:
Introduction To Development Environment
·        Eclipse
·        Android
·        Considerations for beginning programming.
Resources
View the following:
1.      Eclipse
2.      Android Development
Assignments
  1. Last time we left off with setting the counter to whatever number you want. Now we’ll be learning buttons and changing the display
  2. After the ‘;’ hit enter and start a new line. type out ‘add’ and hit space. This is telling the java that you will be adding to the display.
  3. Now type out ‘=’ which means that add will be defined as whatever it is equal to. hit space again.
  4. Type ‘(Button)’ which means that the add is connected to a button. Hit space again.
  5. Type out ‘findViewById)R.id.bAdd);’ This tells the java that this button will be connected to the adding button. ‘findViewById’ means that it is finding the object by identification. If you remember, we set the addition button to ‘bAdd’ for button add.
  6. Do the same for the subtraction button. Hit enter after the last piece of code and start out with ‘sub’ then type out the same piece of code.
  7. After the subtraction button code, you’ll want to hit enter again and start to work on the display java.
  8. Type out ‘display = (TextView) findViewById(R.id.tvDisplay);’ This is more or less the same code as the buttons. Just slightly modified so that it fits with a TextView instead of a Button.
  9. Hit enter again and start to set the onClickListener. type ‘add.setOn’ and you’ll see the drop down menu appear. Click on the first one that comes up and it will finish the code to ‘add.setOnClickListener()’
  10. Continue to type ‘new View.’ on the drop down menu will appear again and you’ll want to hit enter on the first one. It will type out a bunch of code under the name ‘Override’ That is ok, keep it.
  11. Under the ‘TODO’ you’ll want to type two more lines of code.
  12. First type out ‘counter++;’ which means that the button, when clicked, will add to the TextView display.
  13. Under that, type out ‘display.setText(“Life Points: “ + counter);” Which adds to the display.  
  14. Move the mouse down to the end of that piece of code, where the error is, and type ‘;’. You just made your button work.
  15. Continue to type out the subtraction button, it will be the same code.
  16. Now the OnClickListener is something that makes the button always ‘waiting’ to be clicked. It creates an instances when clicked, and changes the TextView.

Android 1: Lesson 3

Lesson 3: Starting a New Project and Understanding XML Layout
INTRODUCTION
In this lesson you will be testing what each piece of code does, and how it works. You’ll be changing certain parts of the code to see how it comes out in the ‘Graphic Layout’ of Eclipse.
LESSON OBJECTIVES
By the end of this lesson, you will be able to:
1. Learning how to ‘Clean’ your project
2. Understand TextView and Button code
3. Seeing what each piece of code actually does
LEARNING SEQUENCE
Required Reading
Read the following:
Introduction To Development Environment
·        Eclipse
·        Android
·        Considerations for beginning programming.
Resources
View the following: 
1.      Eclipse
2.      Android Development
Assignments 

  1. During this video, we’ll be showing you what each piece of code does in the ‘activity_main.xml’ and how to clean your project
  2. First we’ll start with how to clean the project. Cleaning your project is when Eclipse scans your app of any false errors, and cleans it.
  3. When you open your app, or you are sure you don’t have any errors in the code, you should clean the app.
  4. Go to PROJECT>CLEAN. Then the Clean menu will pop up. You can either clean all of your projects, or chose to clean only one of the projects. Cleaning all of them takes longer, so check the ‘Clean selected projects below’ and click only your project. This scans the whole app and gets rid of the errors that don’t actually exist, and leaves you with only the true errors
  5. The rest of the errors you can change by checking the coding with the video, and hovering your mouse over the error and seeing what Eclipse suggests to fix it.
  6. Next you will change what each piece of code does. Let’s start with ‘orientation’. This determines if it goes vertical or horizontal. Change the word vertical to horizontal, and open up the ‘graphic layout’ at the bottom left of the XML document.
  7. You’ll now see that the app Layout hasn’t changed, but the TextView and the Buttons have shifted to a horizontal view
  8. Now the ‘android:layout_width/height’ coding. This piece of code determines how much space each piece of code takes up, as described in the last lesson
  9. Changing the code here, you will not see a physical change except that the TextView and Buttons will shift around slightly in the graphic layout
  10. The ‘android:text’ describes what the TextView and Button say on them. the ‘android:textSize’ will change how big the text will be.
  11. You can change the ‘android:textSize’ from dp to xp or sp. Which are all different text sizes. 
  12. xp being the default for most devices, and will keep the text at a permanent size not matter the screen size. sp is another ratio, much like dp
  13. Changing the ‘android:layout_gravity’ will move around the pieces of the app. You can change it from ‘center’, to the ‘right’, and to the ‘left’
  14. ‘android:id’ will not give you anything special in your app, changing this will not be shown in the graphic layout of Eclipse. The id refers to the identification of the app in the java. 

Android 1: Lesson 4

Lesson 4: Java Language
INTRODUCTION
In this lesson you will be learning how to understand and use Java and how it will make your app work
LESSON OBJECTIVES
By the end of this lesson, you will be able to:
1. Learning how to connected your ‘main_activity.xml’ to your Java
2. Understanding what each piece of code does in Java
LEARNING SEQUENCE
Required Reading
Read the following:
Introduction To Development Environment
·        Eclipse
·        Android
·        Activity-Google site
Resources
View the following: 
1.      Eclipse
2.      Android Development
Assignments 

  1. Java is a complicated language, but it is very efficient when used correctly
  2. First we’ll start with creating a new class in the ‘src’ folder, open the ‘src’ folder and you should see the package: ‘com.example.(name of your app)’, and inside that you’ll see the ‘MainActivity.java’ class. Double click on the class and it will open
  3. Here, you’ll see (from the top down) the package name. 3 imports. a public class. and 2 overrides
  4. The imports are what make Java efficient and fast. Java has a massive library of different things it can do, but only if you import it to the app so it knows how
  5. The android ‘import android.os.bundle’ is what allows it to work in the android API
  6. ‘import android.os.Activity’ is where all the actual java happens.
  7. ‘public class’ means that it is open to the users, and the class defines a variable within the class
  8. inside the ‘public class’ are the overrides. One of them has ‘protected void’ and the other has ‘public boolean’
  9. protected means that it can be accessed by the other classes that get related to it
  10. boolean, inside the other override, is a primitive type of object, using less memory (RAM) to run than the more complicated Boolean, with a captial B. Java is very fragile when it comes to capitalization.
  11. onCreate is what actually runs when the app opens. Java runs in a very specific way. It first scans your code for the onCreate method, than runs from there, as seen on the Google website about Activities http://developer.android.com/reference/android/app/Activity.html
  12. Right now, the Java isn’t doing anything with your app and doesn’t have the following pieces of code, but you will be adding them next lesson. You have to assign each thing in the interface to a piece of code in Java
  13. For the TextView, it will be assigned the title of ‘display’, which allows it to get changed and altered by different pieces of Java
  14. You then can assign the buttons to individual pieces of code, cause you don’t want them doing the same thing. Making one of the buttons ‘add’ and the other ‘sub’
  15. ‘int’ tells the Java what it’s going to be doing. if you assign ‘counter’ to the ‘int’, then the Java will know what you’re doing and that it will be adding or subtracting one from the display

Screen-cast Projects: Improving Using Photoshop With Online Tutorials

Today in my class I decided to have student groups produce short videos in which they discussed the differences between their graphic web banners created in Photoshop with and without the use of video screencast tutorials.

Students eagerly awaited their groups turns to make their videos describing their projects. I was glad to see their enthusiasm and willingness describe their progress.

Many students began the unit with a relatively high level of Photoshop knowledge and could open the software and manage a variety of tools. Some students built upon their knowledge in new ways by either being more creative with the software or adding the use of new tools to projects.The largest impact in this project is the fluency of using the software to create the graphics more efficiently.

The tools students improved the most in were the adding of additional layers,applying transparency to images and importing and cropping images for their design. Students used the videos to develop a further fluency using these tools and it was reflected in their final banners. Students who had previous experience with the software also improved in these areas and brought their knowledge to their groups.Student engagement with the process of watching videos to learn can be seen in their motivation in making their own reflective screen-casts. These screen-casts describe their  learning experiences during the unit.

Students become engaged with creating and showcasing their work and having others participate in the process. This process also helps build connections between student learning and contextualizes students experiences with the software while emphasizing skills. Below is some examples of their work.

Classroom Screen-Cast Video Guide

Classroom Screen-Cast Video Guide

Daniel Downs, Ed.D.
@danieldowns
Screencasting In My Classroom
In most of my courses I like to use video screen-casting to help capture the voices,perceptions,ideas and knowledge of my students. I will  ask them at the end of a unit of learning to create a screencast which covers the work they have done and also to provide insight on what they have learned . I am outlining a few of my steps that I use while using screencasting and more specifically Screen-cast-omatic software.

Planning:


Step 1: Show Examples
This can be done by showing other videos you have made or other student examples. Set the bar high with your examples and raise expectations for students. Examples which are detailed and the student shows a variety of learned skills are great.


Step  2: Have students develop a script.
This can be done as an outline or as a line by line description about what they want to say. Make sure all students have done some planning so they are prepared to record. Nothing is worse than an unprepared screencast. Discuss the script with students before they record. Are thuse they prepared?


Step 3:Assess Student Knowledge Of Screencasting Software
Ask around the room about student familiarity with screencasting and Youtube tutorials. Do they already use them to learn? Have they already used them with other teachers? Introduce the tools you plan on using to the whole class but provide individualized instruction using the software.



Process:



Step 4: Work with individual students or small groups.



Work through the details of recording and uploading the videos with smaller groups or individuals. Find a classroom student expert to help you assist groups to properly create and upload without errors. The time spent differentiating instruction will be paid back with less errors in the video and also more success with uploads.



Outcomes:



Step 5: Assessment
Screencasts are a great way to assess student learning and understanding. The videos provide a way for students to share their own insight into projects. Critiques of others work can be done in a screen cast or even a debate. Keep the format “live” and relevant for student sharing.



Step 6:Skill Learning:
Let students learn from video at their own pace. Empower them with skill building and expanding on projects by independantly seeking out the skills necessary and scaffolding knowledge. Let students teach,share and reflect on their process of problem solving.



Step 7:Sharing:
Share videos immediately with students and keep the length tolerable(5-10 minutes long). Show past videos to show students previous outcomes and ideas. Tweet and share videos in context of blog lessons or related web based learning.



Screen-casting Tips:



1.Have a professional account. Screen-cast-omatic only costs $15.00 a year and removes the trademark on the screen. Professional accounts also let  you to zoom in to details during videos.



2.Accurately select the size of the screen which is being recorded. Provide the viewer of the video a perspective of where your files,software and which operating system you are using.



3. Always double check audio levels and recording features. Be sure that if you are recording with an external microphone that it is being picked up by the computer. Be sure that audio volumes on the computer are turned up and not mute.



4.Have a plan when recording. A step by step list or series of ordered ideas.



5.Use titles or notes on the screen to guide viewers. Zoom in where necessary for the input of links or the showing of tiny details.

6.Upload directly to a Youtube account and share with your students and network. Screen-cast-omatic offers this feature and allows me to instantly back up my videos, title them and tweet them immediately.

Storyboard Template Assignment:Commercial Video Project

Using the storyboard in Photoshop create the graphics for your story board.
Create graphics for at least 10 slides. Remember that you can use two of the 10 slides
to represent the opening and closing credits.  Be sure to save two of the story board templates because you will need a total of 10.

This planning will help guide your vision as you decide shots you need to take and decisions on
the locations you need to shoot in,props you may need,transitions between scenes and vocabulary and voices used in script.


Be certain to Include:
Credits:Opening & Closing
Descriptions of action and location under each scene.
Description of important dialogue.
Transition descriptions(fade in/fade out,swipe to scene…etc.)
Graphic included in presentations(text or visuals).
Number each scene
Include prop descriptions(football for throwing,glasses for character,hats).
Sounds(Is there music or sound effects used?)

Video Critque:
After designing the final h gjpeg in Photoshop you will email it to me and I will create a document with all the finished storyboards and each group will be assigned to critique one of the other groups in screen-cast form.

Use this template in Photoshop to get started.
Storyboard Template