PROJECT OVERVIEW: Developing Android Mobile Applications in FlashOverviewA curriculum enabling students to design, develop an then test mobile applications onmobile devices addresses several cross cutting trends affecting the learning of technologycurriculum(Becta,2008). The current trend of mobile devices being used in and out of theclassroom to communicate, collaborate and personalize learning opportunities makesteaching and training students to understand the design and technologies involved in howthese tools work imperative.Mobile Application Development can be done in a variety of formats and with varietyof tools. This project focuses on the team development of mobile application design,development and testing using the Flash platform. Enabling students to develop their ownpersonalized Web 2.0 tools enables collaboration and information sharing in new wayswhich push the personalization of education tools to new levels.FocusThis course will provide an overview of the mobile application landscape in terms ofdevices, development, operating systems and changing levels of personalization interms of the technologies available and perspectives on organizing content on thismedium.Content development for mobile applications and the influence interface design hason the user experience will be a focus. Students will acquire technology skills todevelop their own applications in the Flash Authoring software and will test anddebug these applications on Android Devices.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 thecourse. Each section of this course will represent a key component to the process ofdeveloping an application and will need to be repeated collaboratively for the finalproject.The team approaches to the projects and the ability of groups to address eachproject efficiently and with a conscientious approach towards design anddevelopment will improve the ability of the group to answer an authentic basedquestion which will drive all aspects of the project. Addressing 21stcenturyemployability skills such as “real world scenarios, team work, cumulative projectsand 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 groupsreplicating a design/development studio.Students will be asked to develop projects which address an authentic need for amobile application. Through the process of concept development, creation anddevelopment of the application, testing and debugging the applications students willbe applying collaborative skills to synthesize ideas and technical skills to create theapp and conclude with a group presentation of their final application design.Issues:Students will need to address a wide range of challenges to complete their projects.Concept DevelopmentStudent fluency using technology toolsAddressing the authentic questions for “real world” scenariosMaintaining a strong collaborative, team approach to problem solve and resolve criticalissues related to technology.Knowledge/Skills/AttitudesKnowledge:Information technology disciplinesHardwarePhones & TabletsDesktop ComputersSoftwareAdobe FlashMobile Operating Systems with an emphasis on OSApplication with an emphasis on design.Internet, Web research and web based collaboration toolsDigital MediaBusiness/Marketing TrendsSocial MediaWeb Based AdvertisingSkills:Technology SkillsUnderstanding Basic Code StructuresDesigning graphicsApplication of Design concepts to software technologyManaging different file types and Software knowledgeApplication of API technologiesInteracting with multiple computer based interfaces (desktopcomputers, mobile devices)CommunicationsCommunicate in professional manner (e-mail, voice mail, in person)
Listen empatheticallyDocument processReport for feedbackMake professional presentationCritical thinkingTroubleshooting (problem solve)Synthesize findings (draw conclusions supported by evidence)Problem SolvingCollaborationMerging expertise (distributed knowledge)Work together as a teamGive/receive feedbackPrioritize tasksCompare and evaluate possible solutionsProject ManagementAttitudes (habits of mind):Value teamworkAccountability to team and clientTenacity/PersistenceCuriosity and open-mindednessChallenge assumptionsIntended OutcomesResearch Mobile Application trends; document and report findingsResearch career possibilities (Graphic Designer, Programmer, InformationArchitect, Software Developer)Troubleshoot Mobile Application on Device (problem analysis)Use of Flash Software (Actionscript 3.0) to Create Mobile ApplicationDesign Mobile Application Information ArchitectureAnalyze Mobile Application Development EnvironmentTask management/project management/problem solvingPresent proposed solution to Authentic ScenarioAssessmentFormative rubricsEmployability SkillsTeamworkTechnical ComponentsCompletion TargetsSummative rubric“Developing Mobile Applications in Flash” includes team-based problem/project projectswhich address IT skills and implement employability skills.
Project 1: Information Architecture & Content DesignEmployability Skills: Team member roles and tasks; plan,analyze, design and develop methods for organizing content anddeveloping architecture for the anticipated navigation of theconsumer through the content of the mobile application.IT Skills: Problem-solveProject Skills: Create a complete paper prototype which includesideas for graphics, color scheme, text, potential clickstreams and organization of content considering the user.Project 2: Flash App Layout Design ActivityEmployability Skills: Team member roles and tasks; plan,analyze, design and develop a four page mobile application usingFlash software.IT Skills: Problem-solveFlash Skills: Create multiple pages, graphics, text andActionscript code to preview a mobile application.Project 3: Learning About API TechnologyEmployability Skills: Team member roles and tasks; identify andimplement API technologies that can add usability to the mobileapplication design.IT Skills: Integrate API’s using Actionscript and Flash softwareinto design.Project Skills: Create a document that clearly and conciselyrecords the team’s performance. The document should be free ofspelling and grammar errors.Project 4: Creating the Certificate & Exporting the APK fileEmployability Skills: Team member roles and tasks; exportapplication to device and test application for proper functions ofapplication and device use.IT Skills: Properly create self signed certificate and export APKfile for addition to Android device.Project Skills: Exporting the APK file properly will enable thestudents to view the application on the Android device.Project 5: Creating an Authentic Mobile ApplicationEmployability Skills: Team member roles and tasks; plan,analyze, design and develop a mobile application from conceptto finished application based on an authentic scenario providedby the instructor.IT Skills: Problem-solveProject Skills: Concept development, information architecturedevelopment, development of app in Flash software andpresenting the final app on an Android device.Project 6: Presentation of final application
Employability Skills: Team member roles and tasks; present finalapplication and describe details of the process of conceptdevelopment and technology development. The presentationshould also include how the application addresses the authenticscenario and considers the consumer in the design process.IT Skills:Project Skills: Professional organization and presentation ofmobile application content. Well planned and sequenced toexplain their design and development experience.PROJECT 1: Information Architecture & Content DesignPROJECT 1 GOALThe goal of this project is to develop students understanding the proper layout ofinformation in a mobile application and also the anticipated user experience of theconsumer of a mobile app.1. Complete Venn Diagramming for Content, Context and Users2. Complete Information Architecture paper prototype for mobile applicationidea (should contain layout for at least 5 pages).3. Introduction to Flash Mobile Templates4. Self Assessment for Mobile Environment & Design KnowledgePROJECT 1 DESCRIPTIONProject Description: In this project we will investigate the components of a mobilearchitecture and prepare a mobile architecture design.Final Project Outcome: The final project for this will be a completed wireframerepresenting an idea for a mobile application and a series of drawings representing thehome page with navigation and 3-4 other pages.The Project
Scenario:Venn DiagramThis activity begins with the discussion of the variety of mobile content and the needsand wants of consumers when they use mobile applications. Students will be asked todevelop a simple idea for an application based on a children’s game or ……. Studentswill then develop a list of items under ach heading content, context and users. (seeactivity sheet)Paper PrototypingAfter completing the brainstorming activity the ideas will be synthesized into a paperprototype which will take into account the screen size in pixels, color scheme, clickstreams, graphics, text styles and organization of pages and content in application. It mustalso address the anticipated user and their wants.Considerations in This Project:Screen Sizes and resolutionsConsider user interaction with content.Click streams and how they relate to contentPaper prototyping-wire framingDevice differencesCoverage Area Terms:Mobile Strategies, Mobile Design,Needs-Goals-Context,Application Types, ApplicationContexts, 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 andcontent.Technical Components: Flash SoftwareIntroduction to Flash Template Size
Group Components:Group ResearchDiscussionCollaboration with contentInformation Architecture Software LinkProject 1: Aligned Learner OutcomesStudent Outcomes PerformanceIndicatorsEmployabilitySkills? Or 21stCentury OutcomeIntegrated Activity& Assessment1. VennDiagramAssignment2. PaperPrototypewire framingassignmentCreate a completepaper prototypewhich includesideas for graphics,color scheme, text,potential clickstreams andorganization ofcontent consideringthe user interactionwith a mobileapplication.1. Organized lists ofcontent andinformationcontained in theapplication(wireframe).2. Color schemeappropriate fordesign.3.DrawingsdepictingPotential graphicsand text layout.4. Consideration ofuser in button sizesand interaction ondevice of visualelements.5. Organizedstructure ofinformationarchitecturemapping everypossible navigationthrough applicationdesign.6. Description ofnotable clickstreams forconsideration of enduser obtaining data.TeamworkCollaborationIdentifyingconsumer needsMarketingDesign/Layout skillsProblem solvingAssessment: RubricProject 2: Flash App Layout Design ActivityProject 2: Goals
The goal of this project is to have a fully functional 4-5 page application which canbe tested within the program. The application should also contain the components ofthe information architecture and paper prototype from the previous project.1. Integrate information architecture and design into layout into flash software2. Have pages link by buttons back and forth3. Insert images and text4. Test your application as a movie and view for problems(debugging)5. Develop basic understanding of Flash Interface & ToolsProject Description: Using a video tutorial to assist us will walk through laying out amobile application in the Flash software. This tutorial will allow students to learn theinterface 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 of5 pages. Each page should have a button which directs it back to the home page and/orthe next page.Considerations in This Project:Integrating Layout into softwareFlash software skillsCollaborative Technology LearningProblem solving Layout issuesCoverage Area Terms:Flash CS5.5,Layers,Timeline,Libraries,Buttons,Actions,Actionscript3.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 beadded to the application.Making Button-This is an action we can add to a graphic to send the user to another placeon 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 inthe design of the application.Technical Components: Flash SoftwareCreating & Managing LayersMaking ButtonsText ToolsInserting Key framesStage sizing and Placement of ElementsGroup ComponentsTeamwork:
Organization of content as a small groupIdea development deciding on a topic and adding graphics, creating layout and executingprojects.Information Architecture Software LinkVideo TutorialLink of VideoAssessment Rubric/Self AssessmentProject 2: Aligned Learner OutcomesStudentOutcomesPerformance Indicators EmployabilitySkills? Or21stCenturyOutcomeIntegrated Activity&AssessmentCreateacomplete 4-5pagemobileapplicationwhichcan betestedin theFlashinterface.1. Application of information architecture and design(color scheme, graphics, text) into Flash software.2.Technical components of Flash software properlyused(pages,buttons,keyframes,graphics,text,testing,layers,libraries,stage orientation and sizing,templates.3. Use of original graphics in layout and designcreated in Photoshop or other graphics program.4. Consideration of user in button sizes andinteraction on device of visual elements.5. Layout neatly organized and comparable to paperprototype.6. Video tests as expected and moves properly frompage to page.TeamworkCollaborationTechnology taskcompletionDesign/Layout skillsProblemsolvingProjectManagement1. Step bysteptutorialoutliningalltechnicalcomponents of Flashapplication.2.Studentsapply ownprojectidea todesign.
Assessment: RubricProject 3: Learning About API TechnologyThe goals for this project are to introduce students to API technologies and havethem integrate some examples into their own projects.Project 3: Goals 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 ideaProject Description: In this project students will be given an overview of APItechnology and what it can do. Students will also be asked to do their own webbased research on API’ and contribute to class discussion. Understanding what APItechnology can do can have a huge amount of interactivity and power of tools toyour app.Students will conduct web based research in small groups and report out to the restof the class. The web based research should be based on finding what are some newcurrent API’s and identifying the context of the users and technology connected tothese API’s(mobile phones, web based, tablets, apps).Central Question: How can API technology change our interactivity with mobiledevices?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 toan application.Project Outcome: At the conclusion of this project students will have a more broadunderstanding of how API technologies can be integrated into their mobileapplications. Students will also have an understanding of the constantly changingenvironments of technologies as they relate to adding usability to mobile devices.Students should have completed the two video based assignments which includeanalyzing and changing the code in the accelerometer template and the GoogleMaps tutorial.Design Components of This Lesson:Choice of graphics for accelerometer tutorialPage layout for Google mapChoice of videoTechnical Components:Code knowledge for AccelerometerCode knowledge for Google MapIntegrate video into application page(adding files to database/linking video)Group ComponentsTeamwork:Project 3: Learner Aligned OutcomesAssessment Rubric/Self AssessmentStudent Outcomes PerformanceIndicatorsEmployabilitySkills? Or 21stCentury OutcomeIntegrated Activity& Assessment
1. Researchresponsesheet.2. CompletedFlash files ofAccelerometer andGoogleLink.Students will haveabroadunderstanding ofthe APItechnologies andhow and they canadd usability andfunction ability tomobileapplications.Students willresearch theenvironment ofthese technologiesand report back tothe class.Students will thenbe led through 2separate tutorialswhich willintroduce them toapplying API’s inFlash toapplications.Assignment 1:Students will beintroduced to theaccelerometertemplate in Flash.Assignment 2:Students will beshown the exampleof adding a Googlemap link to anapplication.1. Student researchand report a currentweb based article onmobile APItechnology. Studentshould read andreport most relevantinformation aboutthe technologies forclass discussions.2. Students willhave a completedFlash file from theaccelerometertemplate whichrepresents their ownimage and objects.4. Students willhave a final flashfile whichincorporates aGoogle maps link.TeamworkCollaborationSoftware applicationskillsProblem solvingIdentification ofTechnologiesAssessment: RubricProject 4: Creating the Certificate & Exporting the .APK fileProject 4: Goals
The goals for project 4 are to prepare a Flash file for export to an Android deviceand be able to check the application for errors. The icon which shows on ahomepage 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 projectProject Description: This project will allow students to walk through the process ofcreating a file certificate then exporting the .APK file and adding this file to a device fortesting. The goals of this project are to experiment with the process of debugging anapplication by viewing it on a device. In this project the basics of creating an icon for theapplication and the basics of adding an app to the market.Project Outcome: Small groups have successfully exported an .APK and created an iconwhich has been uploaded with the file.Students are also aware of the App market.Design Components of This Lesson:Creating the Icon GraphicResizing ImagesTechnical Components: Flash SoftwareCreating the CertificateExporting the APKAdding the application to the DeviceGroup ComponentsTeamwork:
Assessment Rubric/Self AssessmentStudent Outcomes PerformanceIndicatorsEmployabilitySkills? Or 21stCentury OutcomeIntegrated Activity& Assessment3. Tutorial oncreating anIcon for theapplication.4. Tutorialassistingwith creatingthe selfsignedcertificateandexporting the.APK.5. Adding theAPK to anAndroiddevice andtesting thefunctionality.Students will createa self signedcertificate andexport theirapplication as an.APK file.They will then addtheir application toan Android deviceand test and debugtheir application.1. Exported .APKfile.2. Application fullyfunctional onAndroid device.TeamworkCollaborationSoftware applicationskillsProblem solvingIdentification ofTechnologiesTesting &Debugging issuesGraphicDesign/MarketingSkills.Assessment: RubricProject 5: Creating an Authentic Mobile ApplicationProject 5: Goals
The goal for Project 5 is to have students create a mobile application collaborativelybased on an authentic scenario. Students should need to use all of the projectsleading 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 designand layout Export application to Android device Address authentic scenario proposed by instructorProject Description: This project will allow students to develop their own idea for amobile application based on an authentic question. The students will need to revisit eachproject and master the skills entailed in order to create a cumulative group project. Thechallenge to students will be to collaborate and share skills, ideas as well as address theauthentic scenario provided by the instructor.Project Outcome: Small groups have successfully collaborated and developed severalartifacts from their development. An information architecture, final app on device,development notes, anticipated user experience, icon, graphics, applied technology in theapplication.Groups should be able to describe their approach, challenges, collaborativeexperience and how well they address in a statement how they addressed the needsof the authentic scenario.Design Components of This Lesson:Information architecture based on anticipated user interactionIcon for applicationGraphicsButtonsColor scheme (color scheme designer 3)Technical Components:Flash file containing all pages and technologies in applicationExported .APK fileApplication installed on mobile device for presentationGroup ComponentsTeamwork:Assessment Rubric/Self Assessment