PROJECT OVERVIEW: Developing Android Mobile Applications in Flash

Overview A curriculum enabling students to design, develop an then test mobile applications on mobile devices addresses several cross cutting trends affecting the learning of technology curriculum (Becta, 2008). The current trend of mobile devices being used in and out of the classroom to communicate, collaborate and personalize learning opportunities makes teaching students the design and technologies involved in how these tools work imperative. Mobile Application Development can be done in a variety of formats and tools. This project focuses on the team development of mobile application design, development and testing using the Flash platform. This enables students to develop their own personalized Web 2.0 tools. By collaborating information can be shared in new ways pushes the personalization of education tools to higher levels. Professional Outlook Jobs related to mobile design and development are expected to grow anticipating needs using multiple development tools. The testing and debugging industry of mobile applications is also an anticipated growth area. According to one Business Week article “The demand for programmers who can write for mobile platforms, such as Apple's iPhone, Google's Android, and Research In Motion's BlackBerry, has stoked competition among recruiters, driven up salaries, and led employers to consider getting new talent through acquisitions”(MacMillan, 2010). This growth is expected to continue as more companies more to employing mobile strategies. Many companies are now including mobile strategies into their marketing plans. To satisfy the need for this type of developer there are the need for skilled developers and designers who are familiar with the mobile applciation process. Students who are introduced and begin learning core skills with mobile design and development are at a distinct advantage entering the job market with critical skills and knowledge of the process of designing mobile applications and the possible development tools. Focus This course will provide an overview of the mobile application landscape in terms of devices, development, operating systems and changing levels of personalization in terms of the technologies available and perspectives on organizing content on this medium.

Content development for mobile applications and the influence interface design has on the user experience will be a focus. Students will acquire technology skills to develop

their own applications in the Flash Authoring software and will test and debug these applications on Android Devices. Student application of Adobe Photoshop and Flash Authoring Software will enable them to gain first hand experience creating the necessary graphics,.apk files and problem solving skills that relates directly to the real world experiences of authentic mobile development. As part of the cumulative project students will investigate and explore the process of uploading their development projects to a real world marketplace(Google Play), and evaluate the requirements and eccommerce benefits. Students will work in collaborative teams to learn and apply the technologies, synthesize design strategies and present a final cumulative project at the end of the course. Each section of this course will represent a key component to the process of developing an application and will need to be repeated collaboratively for the final project. The team approaches to the projects and the ability of groups to address each project efficiently and with a conscientious approach towards design and development will improve the ability of the group to answer an authentic based question which will drive all aspects of the project. Addressing 21st century employability skills such as “real world scenarios, team work, cumulative projects and the sharing of design and technology skills are critical for success. Problem/Project Based on an instructor driven authentic problem, students will work in small groups replicating a design/development studio.Students will be asked to develop projects which address an authentic need for a mobile application. Through the process of concept development, creation and development of the application, testing and debugging the applications, students will be applying collaborative skills to synthesize ideas and technical skills to create the “app” and conclude with a group presentation of their final application design. Learning Challenges Students will need to address a wide range of challenges to complete their projects. Concept Development Student fluency using technology tools Addressing the authentic questions for “real world” scenarios Maintaining a strong collaborative, team approach to problem solve and resolve critical

issues related to technology.

Knowledge/Skills/Attitudes

Knowledge: Information technology disciplines Computer & Tablet Hardware Phones & Tablets Desktop Computers Software Adobe Flash Mobile Operating Systems with an emphasis on OS Application with an emphasis on design. Internet, Web research and web based collaboration tools Digital Media Business/Marketing Trends Social Media Web Based Advertising Skills: Technology Skills Understanding Basic Code Structures Designing graphics Application of Design concepts to software technology Managing different file types and Software knowledge Application of API technologies Interacting with multiple computer based interfaces (desktop computers, mobile devices) Communications Communicate in professional manner (e-mail, voice mail, in person) Listen empathetically Document process Report for feedback Make professional presentation Critical thinking Troubleshooting (problem solve) Synthesize findings (draw conclusions supported by evidence) Problem Solving Collaboration Merging expertise (distributed knowledge) Work together as a team Give/receive feedback Prioritize tasks Compare and evaluate possible solutions Project Management Attitudes (habits of mind): Value teamwork Accountability to team and client Tenacity/Persistence Curiosity and open-mindedness

Challenge assumptions Intended Outcomes Research Mobile Application trends; document and report findings Research career possibilities (Graphic Designer, Programmer, Information Architect, Software Developer) Troubleshoot Mobile Application on Device (problem analysis) Use of Flash Software (Actionscript 3.0) to Create Mobile Application Design Mobile Application Information Architecture Analyze Mobile Application Development Environment Task management/project management/problem solving Present proposed solution to Authentic Scenario Assessment Formative rubrics Employability Skills Teamwork Technical Components Completion Targets Summative rubric “Developing Mobile Applications in Flash” includes team-based problem/project projects which address IT skills and implement employability skills. Project Descriptions

Project 1: Information Architecture & Content Design Employability Skills: Team member roles and tasks; plan, analyze, design and develop methods for organizing content and developing architecture for the anticipated navigation of the consumer through the content of the mobile application. IT Skills: Problem-solve Project Skills: Create a complete paper prototype which includes

ideas for graphics, color scheme, text, potential click streams and organization of content considering the user.

Project 2: Flash App Layout Design Activity Employability Skills: Team member roles and tasks; plan, analyze, design and develop a four page mobile application using Flash software. IT Skills: Problem-solve Flash Skills: Create multiple pages, graphics, text and Actionscript code to preview a mobile application.

Project 3: Learning About API Technology Employability Skills: Team member roles and tasks; identify and implement API technologies that can add usability to the mobile application design.

IT Skills: Integrate API’s using Actionscript and Flash software into design. Project Skills: Create a document that clearly and concisely records the team’s performance. The document should be free of spelling and grammar errors.

Project 4: Creating the Certificate & Exporting the APK file Employability Skills: Team member roles and tasks; export application to device and test application for proper functions of application and device use. IT Skills: Properly create self signed certificate and export APK file for addition to Android device.

Project Skills: Exporting the APK file properly will enable the students to view the application on the Android device.

Project 5: Creating an Authentic Mobile Application Employability Skills: Team member roles and tasks; plan, analyze, design and develop a mobile application from concept to finished application based on an authentic scenario provided by the instructor. IT Skills: Problem-solve Project Skills: Concept development, information architecture development, development of app in Flash software and presenting the final app on an Android device.

Project 6: Presentation of final application Employability Skills: Team member roles and tasks; present final application and describe details of the process of concept development and technology development. The presentation should also include how the application addresses the authentic scenario and considers the consumer in the design process. IT Skills: Project Skills: Professional organization and presentation of mobile application content. Well planned and sequenced to explain their design and development experience.

PROJECT 1: Information Architecture & Content Design

PROJECT 1 GOAL

The goal of this project is to develop students understanding the proper layout of information in a mobile application and also the anticipated user experience of the consumer of a mobile app.

1. Complete Venn Diagramming for Content, Context and Users 2. Complete Information Architecture paper prototype for mobile application

idea (should contain layout for at least 5 pages). 3. Introduction to Flash Mobile Templates 4. Self Assessment for Mobile Environment & Design Knowledge

PROJECT 1 DESCRIPTION

Project Description: In this project we will investigate the components of a mobile architecture and prepare a mobile architecture design.

Final Project Outcome: The final project for this will be a completed wireframe representing an idea for a mobile application and a series of drawings representing the home page with navigation and 3-4 other pages. The outcome should reflect the “authentic scenario” described below.

Anticipated Length of Project: Three 45 minute sessions

Authentic Scenario: Student idea development and concepts will be driven by an authentic project which represents a need in the “real world”. In the case of this project students are asked to develop a learning application for children aged 3-7. Students should consider the user needs,context and content in the completion of the project.

The Project Components

Venn Diagram Brainstorm

This activity begins with the discussion of the variety of mobile content and the needs and wants of consumers when they use mobile applications. Students will be asked to develop a simple idea for an application based on a children’s game or ……. Students will then develop a list of items under ach heading content, context and users. (see activity sheet)

Paper Prototyping

After completing the brainstorming activity the ideas will be synthesized into a paper prototype which will take into account the screen size in pixels, color scheme, click streams, graphics, text styles and organization of pages and content in application. It must also address the anticipated user and their wants.

Considerations in This Project: Screen Sizes and resolutions Consider user interaction with content. Click streams and how they relate to content Paper prototyping-wire framing Device differences Coverage Area Terms: Mobile Strategies, Mobile Design,Needs-Goals-Context,Application Types, Application Contexts, Mobile Information Architecture, Elements of Mobile Design(color, look& feel, graphics, type, message). Design Components of This Lesson: Creating a paper prototype with proper screen considerations, device, wireframing and content. Technical Components: Flash Software Introduction to Flash Template Size Group Components: Group Research Discussion Collaboration with content

Project 1: Aligned Learner Outcomes Student Outcomes Performance

Indicators Employability Skills? Or 21st Century Outcome

Integrated Activity & Assessment

Create a complete paper prototype which includes ideas for graphics, color scheme, text, potential click streams and organization of content considering the user interaction with a mobile application.

1. Organized lists of content and information contained in the application (wireframe). 2. Color scheme appropriate for design.3.Drawings depicting Potential graphics and text layout. 4. Consideration of user in button sizes and interaction on device of visual elements. 5. Organized structure of information architecture mapping every possible navigation through application design. 6. Description of notable click streams for consideration of end user obtaining data.

Teamwork Collaboration Identifying consumer needs Marketing Design/Layout skills Problem solving

1. Venn Diagram Assignment

2. Paper Prototype wire framing assignment

Assessment: Rubric

Project 2: Flash App Layout Design Activity ________________________________________________________________________

PROJECT 2:GOALS The goal of this project is to have a fully functional 4-5 page application which can be tested within the program. The application should also contain the components of the information architecture and paper prototype from the previous project.

1. Integrate information architecture and design into layout into flash software 2. Have pages link by buttons back and forth 3. Insert images and text 4. Test your application as a movie and view for problems(debugging) 5. Develop basic understanding of Flash Interface & Tools

________________________________________________________________________ Project Description: Using a video tutorial to assist us will walk through laying out a mobile application in the Flash software. This tutorial will allow students to learn the interface of Adobe Flash and begin the layout of their first project. Project Outcome: For this app you and your partner will create a basic application which has a minimum of 5 pages. Each page should have a button which directs it back to the home page and/or the next page. Anticipated Length of Project: Two 45 minute sessions Considerations in This Project: Integrating Layout into software Flash software skills Collaborative Technology Learning Problem solving Layout issues Coverage Area Terms: Flash CS5.5,Layers,Timeline,Libraries,Buttons,Actions,Actionscript 3.0,Stage,toolbar,pages,keyframes,jpeg,png,Android template,text. Design Components of This Lesson: Creating Pages-These will be the separate areas to add content and navigate between. Adding Graphics-These will be images or pictures made with Photoshop which can be added to the application. Making Button-This is an action we can add to a graphic to send the user to another place on the timeline or web link. Buttons can be made in the Photoshop software as well. Integrating an Information Architecture-This is the organization of content intended in the design of the application. Technical Components: Flash Software Creating & Managing Layers Making Buttons Text Tools Inserting Key frames

Stage sizing and Placement of Elements Group Components Teamwork: Organization of content as a small group Idea development deciding on a topic and adding graphics, creating layout and executing projects. Assessment Rubric/Self Assessment Project 2: Aligned Learner Outcomes Student Outcomes

Performance Indicators Employability InteSkills? Or 21st

Century Outcome

grateActivity &Assessm

Create a complete 4-5 page mobile applicationwhich can be tested in the Flash interface.

2.Technical components of Flash software properly used(pages,buttons,keyframes,graphics,text,testing,layers,libraries,stageorientation and sizing, templates.

1. Application of information architecture and design (color scheme, graphics, text) into Flash software.

Technology task completion

3. Use of original graphics in layout and design created in Photoshop or other graphics program. 4. Consideration of user in button sizes and interaction on device of visual elements. 5. Layout neatly organized and comparable to paper prototype. 6. Video tests as expected and moves properly from page to page.

Teamwork Collaboration

Design/Layout skills Problem solving Project Management

1. Step bystep tutorioutlining technical componenof Flash applicatio2. Studentapply ownproject iddesign.

AssessmeRubric

Project 3: Learning About API Technology ________________________________________________________________________ PROJECT 3:GOALS The goals for this project are to introduce students to API technologies and have them integrate some examples into their own projects.

● Complete overview of API’s ● Conduct research on current available API technology ● Complete Accelerometer tutorial ● Complete Google Map Tutorial ● Complete Video Tutorial ● Integrate API into current Application idea

______________________________________________________________________ Project Description: In this project students will be given an overview of API technology and what it can do. Students will also be asked to do their own web based research on API’s and contribute to class discussion. Understanding what API technology can do can have a huge amount of interactivity and power of tools to your app. Students will conduct web based research in small groups and report out to the rest of the class. The web based research should be based on finding what are some new current API’s and identifying the context of the users and technology connected to these API’s(mobile phones, web based, tablets, apps). Central Question: How can API technology change our interactivity with mobile devices? Assignment 1: Web Research response sheet on API technology. Assignment 2: Students will be introduced to the accelerometer template in Flash. Assignment 3: Students will be shown the example of adding a Google map link to an application. Project Outcome: At the conclusion of this project students will have a more broad understanding of how API technologies can be integrated into their mobile applications. Students will also have an understanding of the constantly changing environments of technologies as they relate to adding usability to mobile devices. Students should have completed the two video based assignments which include analyzing and changing the code in the accelerometer template and the Google Maps tutorial. Students should also have conducted web research on API technology and reported back to the class.

Anticipated Length of Project: Two 45 minute sessions Considerations in This Project: Mobile Device Interaction User Technologies Operating System Differences(OS ,Android, Windows) Coverage Area Terms: API’s Video Audio Accelerometer GPS Maps Design Components of This Lesson: Choice of graphics for accelerometer tutorial Page layout for Google map Choice of video Technical Components: Code knowledge for Accelerometer Code knowledge for Google Map Integrate video into application page(adding files to database/linking video) Group Components Teamwork in developing fluency with technology application. Communication on critical technical components of tutorials Project 3: Learner Aligned Outcomes Assessment Rubric/Self Assessment Student Outcomes Performance

Indicators Employability Skills? Or 21st Century Outcome

Integrated Activity & Assessment

Students will have abroad understanding of the API technologies and how and they can add usability and function ability to mobile applications. Students will research the environment of these

1. Student research and report a current web based article on mobile API technology. Student should read and report most relevant information about the

Teamwork Collaboration Software application skillsProblem solvingIdentification of Technologies

1. Research response sheet.

2. Completed Flash files of Accelerometer and Google Link.

technologies and report back to the class. Students will then be led through 2 separate tutorials which will introduce them to applying API’s in Flash toapplications.

2. Students will have a completed Flash file from the accelerometer template which represents their own image and objects.

Assignment 1: Students will be introduced to the accelerometer template in Flash. Assignment 2: Students will be shown the example of adding a Google map link to an application.

technologies for class discussions.

4. Students will have a final flash file which incorporates a Google maps link.

Assessment: Rubric Project 4: Creating the Certificate & Exporting the .APK file ________________________________________________________________________ PROJECT 4: GOALS The goals for project 4 are to prepare a Flash file for export to an Android device and be able to check the application for errors. The icon which shows on a homepage is also created and added to the file.

● Learn the steps to create a self signed certificate ● Learn how to export the .APK ● Add file to the Android device file system. ● Test and debug application on device ● Install Adobe Air Software ● Create 48pxX48px icon for app project and add to project ● Understand how to add additional files to package of project

________________________________________________________________________ Project Description: This project will allow students to walk through the process of creating a file certificate then exporting the .APK file and adding this file to a device for testing. The goals of this project are to experiment with the process of debugging an application by viewing it on a device. In this project the basics of creating an icon for the application and the basics of adding an app to the market. Project Outcome: Small groups have successfully exported an .APK and created an icon

which has been uploaded with the file. Students are also aware of the App market. Anticipated Length of Project: Two 45 minute sessions Considerations: Creating A Certificate Creating the Icon(Icon Design) Device file systems Debugging issues Exporting the .APK file Coverage Terms: Self signed Certificate APK File Managers Design Components of This Lesson: Creating the Icon Graphic Resizing Images Technical Components: Flash Software Creating the Certificate Exporting the APK Adding the application to the Device Group Components Teamwork Communication Collaboration with sharing the processes involved with creating certificate and exporting files.

Assessment Rubric/Self Assessment Project 4: Aligned Learner Outcomes Student Outcomes Performance

Indicators Employability Skills? Or 21st Century Outcome

Integrated Activity & Assessment

Students will create a self signed certificate and export their application as an .APK file. They will then add their application to an Android device and test and debug their application.

1. Exported .APK file. 2. Application fully functional on Android device.

Teamwork Collaboration Software application skills Problem solving Identification of Technologies Testing & Debugging issues Graphic Design/Marketing Skills.

3. Tutorial on creating an Icon for the application.

4. Tutorial assisting with creating the self signed certificate and exporting the .APK.

5. Adding the APK to an Android device and testing the functionality.

Assessment: Rubric

Project 5: Creating an Authentic Mobile Application ________________________________________________________________________ PROJECT 5:GOALS The goal for Project 5 is to have students create a mobile application collaboratively based on an authentic scenario. Students should need to use all of the projects leading up to this one in order to be successful.

● Students groups synthesize and create paper prototype ● Collaborate on the integration of Flash software to create application design

and layout ● Export application to Android device ● Address authentic scenario proposed by instructor

________________________________________________________________________

Project Description: This project will allow students to develop their own idea for a mobile application based on an authentic question. The students will need to revisit each project and master the skills entailed in order to create a cumulative group project. The challenge to students will be to collaborate and share skills, ideas as well as address the authentic scenario provided by the instructor. Project Outcome: Small groups should have successfully collaborated and developed several artifacts from their development. An information architecture, final app on device, development notes, anticipated user experience, icon, graphics, applied technology in the application. Groups should be able to describe their approach, challenges, collaborative experience and how well they address in a statement how they addressed the needs of the authentic scenario. Anticipated Length of Project: Eight to ten 45 minute sessions. Considerations: Project Based Approaches Project Management Authentic Tasks Mobile Design Process 21st Century Skills Coverage Area Terms Testing and Debugging Information Architecture Layout Design Components of This Lesson: Information architecture based on anticipated user interaction Icon for application

Graphics Buttons Color scheme (color scheme designer 3) Technical Components: Flash file containing all pages and technologies in application Exported .APK file Application installed on mobile device for presentation Group Components Teamwork Collaboration Presentation skills Assessment Rubric/Self Assessment

Project 5: Aligned Learner Outcomes Student Outcomes Performance

Indicators Employability Skills? Or 21st Century Outcome

Integrated Activity & Assessment

Students will create a fully functioning mobile application which addresses the Authentic question posed by the teacher. Students will apply their knowledge of mobile design, interface design and information architecture to create app which serves its consumer. Students will present the cumulative project to their classmates and describe their creative and development process. Connections to authentic needs should be made in the presentation.

1. Completed 4-5 page mobile application which addresses authentic question. 2. Application fully functional on Android device. 3. Application includes icon and works smoothly and effectively on device. 4.Group presentation contains components of the groups design and development process and addresses authentic questions needs. Presentation is professional in quality.

Teamwork Collaboration Software application skills Problem solving Identification of Technologies Testing & Debugging issues Graphic Design/Marketing Skills.

1.Group project work and journaling addressing the mobile design and information architecture. 2.Application of API technologies. Desire to add heightened levels of interactivity with technology. 3.Project management with group and ability to delegate tasks necessary to complete project. 4. Application exported to device and debugged for errors and bugs. 5. Final professional presentation of all group members describing design process and development. Includes descriptions of how the design addresses the authentic question.

Assessment: Rubric

Project 6: Professional Group Project & Presentation ________________________________________________________________________ PROJECT 6:GOALS The goal of this project is to present in aprofessional manner the application which has been developed and also present to a group the components of the mobile design as well as the process of development. 1.Complete process of exporting .APK file and creation of icon for the application. 2.Develop keywords and product description for the application to be marketed with. 3.Create promotional graphics and visual presentation outlining the marketing strategy for the application(includes content,context and user needs). 4.Present a cumulative project which walks through the process of concept development and design,development strategies and issues and addresses the real world application of the app. _____________________________________________________________________ Project Description: Using a video tutorial to assist us will walk through laying out a mobile application in the Flash software. This tutorial will allow students to learn the interface of Adobe Flash and begin the layout of their first project. Project Outcome: For this app you and your partner will create a basic application which has a minimum of 5 pages. Each page should have a button which directs it back to the home page and/or the next page. Anticipated Length of Project: Considerations in This Project: Integrating Layout into software Flash software skills Collaborative Technology Learning Problem solving Layout issues Coverage Area Terms: Flash CS5.5,Layers,Timeline,Libraries,Buttons,Actions,Actionscript 3.0,Stage,toolbar,pages,keyframes,jpeg,png,Android template,text. Design Components of This Lesson: Creating Pages-These will be the separate areas to add content and navigate between. Adding Graphics-These will be images or pictures made with Photoshop which can be added to the application. Making Button-This is an action we can add to a graphic to send the user to another place on the timeline or web link. Buttons can be made in the Photoshop software as well. Integrating an Information Architecture-This is the organization of content intended in the design of the application. Technical Components:

Use of professional presentation software displaying on Tablet Devices Group Components Teamwork: Organization of content as a small group Clear and Professional presentation using software and Professional presentation Assessment Rubric/Self Assessment Project 6: Aligned Learner Outcomes

Student Outcomes

Performance Indicators

Employability Skills? Or 21st Century Outcome

Integrated Activity &Assessment

Professional Presentation using presentation software and tablet technology

Professional technology infused presentation.

Teamwork Collaboration Technology task completion Design/Layout skills Problem solving Project Management

1. Step by step tutorial outlining all technical components of Flash application. 2. Students apply own project idea to design.

Group Involvement All students show an understanding of all core material. Marketing Strategy Students present strategies for the marketing of their app to a target market.

All member participation and involvement. Clear strategies for marketing application in presentation.

Use of modern technology tools and descriptions throughout project presentation. Collaborative Approach apparent in final project and presentation.

Assessment: Rubric

Presentation includes discussing the process of design and development Students are dressed professionally and present with proper vocabularly.