Project 7

Mobile applications

Timing: 15 to 21 hours

Project overview

In this project, students use Adobe Flash Professional CS6 to create a school information application for mobile devices. Students will design and develop the home page, news, campus map, and basic navigation elements of the application. The school guide should allow students and faculty to quickly gain access to campus resources and information and connect with other students and faculty by using their mobile phones and tablets.
The focus of this project is for students to learn how to create a mobile application with an easy-to-navigate interface. Users should be able to locate current academic news stories quickly through an RSS feed and a campus map powered by Google Maps. A sample project with assets is provided to demonstrate key steps in mobile development for your students.

Student product: Mobile application

Note: Portions of the Mobile applications project align to the Adobe Certified Associate, Rich Media Communication objectives. Within the instruction steps and technical guides, the specific learning objectives for the exam are referenced with the following format: 1.1

Project objectives

At the completion of the project, students will have developed the following skills:

Project management skills

• Defining purpose, goal, and users
• Synthesizing and recommending changes during design process

Design skills

• Connecting content and style to user needs
• Making wireframes
• Making design comps
• Consideration of screen sizes
• Designing for multiple devices and outputs
• Designing for usability

Research and communication skills

• Researching existing application marketplaces
• Analyzing similar applications
• Creating user scenarios
• Selecting what information is important
• Conducting peer review
• Critiquing designs
• Providing meaningful but not overly critical feedback
• Connecting goals of the application with user interaction and experience
• Writing and editing content for application
• Conducting usability analysis

Technical skills

Fireworks

• Creating a wireframe
• Creating a design comp

Flash

• Optimizing file size
• Creating and modifying text
• Working with text and text effects

• Creating interactive buttons
• Using drawing tools
• Organizing layers and libraries
• Working with layers
• Creating transparent buttons
• Writing ActionScript
• Using the Device Simulator
• Publishing mobile applications

Project materials

• Adobe Flash Professional CS6 installed on all machines
• Adobe Fireworks CS6 installed on all machines
• Guide: Mobile application design and development
• Electronic file: Campus_Guide.fla
• Electronic file: Campus_Guide.swf
• Guide: Creating user scenarios
• Guide: Principles and rules of copyright
• Fireworks guide: How to create a wireframe
• Fireworks guide: How to create a design comp
• Flash guide: How to maintain consistency
• Flash guide: How to organize content
• Flash guide: How to work with text
• Flash guide: How to draw and create shapes
• Flash guide: How to optimize Flash content
• Flash guide: How to create a button symbol
• Flash guide: How to apply colors and gradients
• Flash guide: How to use rulers and guides
• Flash guide: How to get started with
ActionScript
• Flash guide: How to set up a mobile application file
• Flash guide: How to resize content for multiple screens
• Flash guide: How to create an RSS feed
• Flash guide: How to add a Google map
• Electronic file:
darby_campus_guide_project.zip
• Flash guide: How to test a Flash project
• Guide: How to design for usability
• Worksheet: Usability
• Guide: Peer review
• Worksheet: Review and redesign
• Flash guide: How to publish a mobile application

Background preparation resources

• Technical and content information
• Key terms
• ISTE NETS*S Standard for Students
• Adobe Certified Associate, Rich Media Communication objectives

Project steps

1. Introduce the project. Explain that students will create the home page, news, and campus map pages and basic navigation elements of a campus guide application designed to run on mobile devices. Students will complete the following tasks:

• Define a mobile application.
• Design a mobile application.
• Develop a mobile application.
• Publish a mobile application.

Analyze mobile applications

(Suggested time: 100–150 minutes)

2. Introduce and discuss various kinds of mobile applications. Explain that they are developed for small handheld devices, such as mobile phones, smart phones, and tablet computers. Mobile apps can come preloaded on the handheld device and can also be downloaded from application stores or the Internet. You might look at several types of mobile applications on various mobile devices, including applications that have an RSS feed or a Google map. As you look at examples, discuss how mobile applications differ from websites.

3. Identify and discuss best practices for developing a mobile application. Things to discuss include:

• Briefly review design principles from previous projects.2.2
• Review design and development phases.1.5
• Explore diversity of mobile devices (for example, screen size, resolution, feature support) and operating systems and how that affects design and content decisions.4.1
• Discuss designing for mobile devices and how it is different from designing for desktops.
• Review best practices for navigation, images, content, audio, video, including metadata in SWFs, and so on when designing for mobile devices.2.1

Guide: Mobile application design and development 1.5, 2.1, 2.2

Define a mobile application

(Suggested time: 150–200 minutes)

4. Ask students to identify the goals and purpose of their campus guide application.1.2 Ask students to identify the needs of their audience for the application.1.1 Demonstrate the provided example of the Darby University campus guide application.

Electronic file: Campus_Guide.fla

Electronic file: Campus_Guide.swf

Note: To view the Darby University application example, open the Campus_Guide.fla file by clicking

Control > Test Movie > In AIR Debug Launcher (Mobile).

5. After students have determined their goals and audience for the mobile application, introduce the concept of user scenarios. Explain that user scenarios describe in detail what users do and why they do it. They often tell a short story about a person using a website or application, detailing their motivations and goals so a designer can understand users’ desires and needs. To help your students understand user scenarios, you can show the sample from the Darby University project.

Guide: Creating user scenarios 1.1

6. Ask your students to create two or three user scenarios for their mobile applications.1.1

Design a mobile application

(Suggested time: 150–200 minutes)

7. To help contain the project, explain that the campus guide mobile application should include the following features:

• A home page with easy access to a collection of campus resources and a top-level navigation system for accessing all subpages.
• An easy-to-use navigation system with which users can move quickly back and forth between the home page and various campus information and resource pages.
• A news page that includes an RSS feed to current campus news stories.
• A campus map page powered by Google Maps.
• All pages (other than the home page) should include a Home button for returning to the home page.
• The news page should include two levels of content and a Read More button. The first level of content is a list of current news stories from which users can click the Read More button to view the full news story in a separate browser window on the mobile device.

8. In teams, allow students time to identify and discuss the content and basic navigation elements needed for their mobile applications. Review copyright when considering images to use in the project.

Guide: Principles and rules of copyright 1.4

9. Ask students to create wireframes and design comps of their mobile applications. Remind students that they will create the home page, news page, campus map, and basic navigation elements. They can also choose to include navigation elements to additional pages, even if they will not build them out in this project.

Fireworks guide: How to create a wireframe

Fireworks guide: How to create a design comp

Develop a mobile application

(Suggested time: 200–250 minutes)

10. The design of the pages and navigation should be consistent and the content should be organized effectively. Review how to design consistent pages and navigation in Flash. Instruct students to create a template for their pages and navigation based on their wireframes and design comps.

Flash guide: How to maintain consistency 2.1

Flash guide: How to organize content 2.5

11. To help your students prepare to create the design elements of their mobile applications, review the following skills in Flash:

• Working with text
• Creating and optimizing images and graphics (alternatively, discuss how to create images and graphics in Photoshop or Illustrator and import them into Flash)
• Using symbols, instances, and buttons
• Applying colors and gradients

• Using guides and rulers

Flash guide: How to work with text 4.4, 4.5

Flash guide: How to draw and create shapes 4.2

Flash guide: How to optimize Flash content 3.8

Flash guide: How to create a button symbol 4.6, 4.8

Flash guide: How to apply colors and gradients 4.2

Flash guide: How to use rulers and guides 3.5

12. Ask students to collect or develop assets for their applications, such as images and graphics. If students have created images or graphics in another application, such as Photoshop or Illustrator, demonstrate how to import their assets into their Flash project. 4.3

13. In preparation for developing the code required to power the RSS feed and the Google map, review

ActionScript—specifically, how to work with code snippets when designing in Flash.

Flash guide: How to get started with ActionScript 4.11

14. To prepare your students for creating a mobile application, use the “I do, we do, you do” method to demonstrate the following in Flash, using the sample Darby University electronic assets:

• Setting up a mobile application for various mobile devices
• Resizing content for multiple screens
• Creating an RSS feed
• Adding a Google map
Flash guide: How to set up a mobile application file Flash guide: How to resize content for multiple screens Flash guide: How to create an RSS feed 4.11
Flash guide: How to add a Google map 4.11

Electronic file: darby_campus_guide_project.zip

Note: The darby_campus_guide_project.zip file contains the Flash project file and all source files to build the Darby University campus information application. The ActionScript code snippet text files for the home page, RSS feed, and Google map integration will assist your students in building these more advanced ActionScript-based elements of the mobile application.

15. Allow time for your students to build the home page, news page, campus map, and basic navigation elements.

Review and redesign

(Suggested time: 100–150 minutes)

16. Review how to test and debug a Flash project, specifically demonstrating how to use the Device

Simulator.

Flash guide: How to test a Flash project 5.1

Flash guide: How to publish a mobile application 4.14, 5.1

Note: If students have access to an iOS or Android mobile device, they can debug the application directly on the device to test the application more completely.

17. Review how to create a usability test and ask teams to pair up to conduct a test.

Guide: How to design for usability 5.2

Worksheet: Usability 5.2

Note: A true usability test would utilize various mobile devices for testing, but depending on time and resources, you may decide to conduct the tests by using the Device Simulator.

18. Ask teams to pair up and conduct peer review of one another’s mobile applications, providing feedback for improvement. They should take notes during the peer review and then use the review and redesign document to help them organize any necessary changes.

Guide: Peer review 1.6

Worksheet: Review and redesign

19. According to the feedback from the usability tests and peer review, allow teams time to make any changes to their mobile applications.

Publish a mobile application

(Suggested time: 50–100 minutes)

20. Ask teams to perform final testing and publish their application.

Flash guide: How to publish a mobile application 4.14, 5.1

21. Remind students that they will need to publish their mobile applications to at least two devices (for example, an iPad and an Android phone or any other combination). Using the “I do, we do, you do” method, demonstrate how to publish a mobile application to another device.

• Open a new project or save an existing document as a new file.
◦ If opening a new project: Select AIR for IOS or AIR for Android from the Type list and specify application settings. Copy the layers from the original project and paste them into the new project.
◦ If saving an existing document, select new target runtime.
• Adapt and scale the content as necessary for the target screen size.
• Select and confirm publishing settings.
• Test and publish application.

Flash guide: How to resize content for multiple screens

22. Have students create a presentation of their mobile application, identifying the following:1.6

• How the application is designed for their audience 1.1
• How the mobile application design best practices influenced their application design

Extension activities

You can extend the project in the following ways:
• Constructive feedback: To help students use more concrete feedback words, brainstorm a list of design features and critique terms with the class. Place these terms in a hat and have each student pick a term and use it when critiquing an application.
• Additional features: If time allows, ask students to add additional pages, such as information about faculty, transportation, schedules, library resources, sporting events, and links to the school’s Facebook and Twitter sites. Limit the number of pages students add, depending on the time available for students to complete the project.
• Peer teaching: If some groups use a guide to learn about a technical feature, have them hold a mini- seminar to teach the rest of the class. Their presentation could include:
◦ A working example
◦ A short explanation of when and why to use this feature (design challenges it helps to solve)
◦ A step-by-step demonstration of how to use the feature
• Alternative feedback: For a different type of feedback process, you can have the evaluating team rate the applications with point values. For example, have them rate navigation on a scale of 1 to 10, where
1 means the navigation is very difficult to use and not designed well and 10 means the navigation is completely usable and designed effectively. The design and evaluating teams can then discuss how the design team can implement any necessary changes.
• Fast finishers: For students who finish early, ask them to create a campus-wide advertising and marketing plan aimed at getting students and faculty to use their application.

Assessment

• Project rubric

Background preparation resources

• Review the student step-by-step guides referenced in this project.
• To view video tutorials aligned with the skills required to complete this project, visit the Digital Design
CS6 show on Adobe TV: http://tv.adobe.com/show/digital-design-cs6/
• For more teaching and learning resources on mobile applications and other topics in this project, search for resources from the community on the Adobe Education Exchange: http://edexchange.adobe.com
• For an overview of the interface and for more information on the technical aspects of Fireworks, see
Fireworks Help.
• For an overview of the interface and for more information on the technical aspects of Flash
Professional, see Flash Help.

• For more information on creating for mobile and tablets use the Adobe TV tutorial:
http://tv.adobe.com/show/creating-for-mobile-and-tablets/.

Mobile applications

• Adobe Flash showcase for mobile: http://m.flash.com/site.php#/home
• Adobe apps, digital publications, games, and other apps created with Adobe tools:
http://m.adobeshowcase.com/index
• Adobe AIR showcase apps for mobile developers:
www.adobe.com/devnet/air/samples-mobile.edu.html
• Adobe Developer Connection – Mobile App Development:
www.adobe.com/devnet/devices/mobile-apps.edu.html
• Mobile web initiative: www.w3.org/Mobile/
• A look inside mobile design patterns: www.uxbooth.com/blog/mobile-design-patters/
• Tutorials and information on creating designs for the mobile web:
www.digitalfamily.com/mobile/index.html
• Mobile Design and Development by Brian Fling (O’Reilly Media, Inc., 2009):
http://proquest.safaribooksonline.com/book/programming/mobile/9780596806231

Key terms

• application
• design comp
• Device Simulator
• Google Maps
• mobile device
• output
• peer review
• RSS feed
• screen size
• usability
• user interaction
• user scenarios
• wireframe

ISTE NETS*S Standard for Students

This project is aligned to the ISTE NETS*S Technology Standards. Depending on the subject and content area the student selects you may research your own state content standards to see how this project aligns to your state requirements.
ISTE NETS*S: Curriculum and Content Area Standards – NETS for Students
1. Creativity and Innovation
Students demonstrate creative thinking, construct knowledge, and develop innovative products and processes using technology. Students:
a. apply existing knowledge to generate new ideas, products, or processes. b. create original works as a means of personal or group expression.
2. Communication and Collaboration
Students use digital media and environments to communicate and work collaboratively, including at a distance, to support individual learning and contribute to the learning of others. Students:
a. interact, collaborate, and publish with peers, experts or others employing a variety of digital environments and media.
b. communicate information and ideas effectively to multiple audiences using a variety of media and formats.
d. contribute to project teams to produce original works or solve problems.
3. Research and Information Retrieval
Students apply digital tools to gather, evaluate, and use information. Students:
b. locate, organize, analyze, evaluate, synthesize, and ethically use information from a variety of sources and media.
c. evaluate and select information sources and digital tools based on the appropriateness to specific tasks.
d. process data and report results.
4. Critical Thinking and Problem Solving
Students use critical thinking skills to plan and conduct research, manage projects, solve problems and make informed decisions using appropriate digital tools and resources. Students::
b. plan and manage activities to develop a solution or complete a project.
d. use multiple processes and diverse perspectives to explore alternative solutions.
5. Digital Citizenship
Students understand human, cultural, and societal issues related to technology and practice legal and ethical behavior. Students:
a. advocate and practice safe, legal, and responsible use of information and technology.
b. exhibit a positive attitude toward using technology that supports collaboration, learning, and productivity
d. exhibit leadership for digital citizenship.
6. Technology Operations and Concepts
Students demonstrate a sound understanding of technology concepts, systems, and operations. Students:
a. understand and use technology systems.

b. select and use applications effectively and productively. c. troubleshoot systems and applications.
d. transfer current knowledge to learning of new technologies.

Adobe Certified Associate, Rich Media Communication objectives

1.1 Identify the purpose, audience, and audience needs for rich media content.
1.2 Identify rich media content that is relevant to the purpose of the media in which it will be used
(websites, mobile devices, and so on).
1.4 Demonstrate knowledge of standard copyright rules (related terms, obtaining permission, and citing copyrighted material).
1.5 Understand project management tasks and responsibilities.
1.6 Communicate with others (such as peers and clients) about design and content plans.
2.1 Identify general and Flash-specific best practices for designing rich media content for the web, mobile apps, and AIR applications.
2.2 Demonstrate knowledge of design elements and principles.
2.5 Organize a Flash document.
3.5 Use Flash guides and rulers.
3.8 Identify best practices for managing the file size of a published Flash document.
4.1 Make rich media content development decisions based on your analysis and interpretation of design specifications.
4.2 Use tools on the Tools panel to select, create, and manipulate graphics and text.
4.3 Import and modify graphics.
4.4 Create text.
4.5 Adjust text properties.
4.6 Create objects and convert them to symbols, including graphics, movie clips, and buttons.
4.8 Edit symbols and instances.
4.11Add simple controls through ActionScript 3.0.
4.14Publish and export Flash documents.
5.1 Conduct basic technical tests.

Assessment

	0 - Does not meet expectations	3 - Meets expectations	5 - Exceeds expectations
User scenarios	Absent or incomplete.	Students create two user scenarios describing why each user uses the application and how they use it.	Students create three user scenarios describing, in detail, why each user uses the application and how they use it. Each user scenario is like a short story describing the person using the application and detailing their motivations and goals.
Wireframe	Absent or incomplete.	Students create wireframes based on design principles and delivery requirements to organize content and navigation for the mobile application.	Students create wireframes based on design principles and delivery requirements to organize content and navigation for the mobile application. Students support each decision on elements in the wireframes with data and information gathered from research.
Design comps	Absent or incomplete.	Students create design comps that accurately reflect audience, goals, color choices, mood, images, text, and navigation choices. The selected comps reflect a variety of approaches to the design.	Students create design comps that accurately reflect audience, goals, color choices, mood, images, text, and navigation choices. The selected comps reflect a variety of approaches to the design. Students can clearly articulate the ways design principles are implemented to impact the audience.
Technical test	Absent or incomplete.	Students create test plans to test technical aspects of the application. Students test the application in the Device Simulator, document bugs, and fix bugs.	Students create detailed test plans to test all technical aspects of the application. Students test applications in the Device Simulator and on various mobile devices. They clearly document and fix all bugs.

0 - Does not meet expectations

3 - Meets expectations

5 - Exceeds expectations

Usability test

Absent or incomplete.

Students create user feedback forms and run usability tests with peers. Students document observations of user subjects and gather reports for user feedback from the test. Design teams implement all feasible suggestions from user test.

Students create detailed user feedback forms and run usability tests with multiple peers. Students clearly document observations of user subjects and gather detailed reports for user feedback from the test. Design teams implement all suggestions from user test and provide clear articulation of the impact these changes had on the overall site.

Mobile application

Absent or incomplete.

The mobile application includes a home page with a collection of campus resources. The application features a navigation system with which users can move back and forth between the home page and current campus information and resource pages. It also features a news page that includes an RSS feed to current campus news stories and a

campus map page powered by Google Maps. The

application is published to two mobile devices.

The mobile application includes a home page with easy access to a collection of campus resources. The application features an intuitive and easy-to-use navigation system with which users can move back and forth quickly between the home page and current campus information and resource pages. It also features a news page with an RSS feed to current campus news stories and a campus map page powered by Google Maps. The