A ‘Flash’ of Freshness : Repurposing Existing Flash Content for Use in Mobile Development

Preview:

DESCRIPTION

A ‘Flash’ of Freshness : Repurposing Existing Flash Content for Use in Mobile Development. Agenda. Introductions Objective What we are not going to cover Basic r eusability - Example #1 Advanced r eusability - Example # 1 Advanced reusability - Example #2 - PowerPoint PPT Presentation

Citation preview

A ‘Flash’ of Freshness: Repurposing Existing Flash Content for Use in Mobile Development

A ‘Flash’ of Freshness: Repurposing Existing Flash Content

for Use in Mobile Development

A ‘Flash’ of Freshness: Repurposing Existing Flash Content for Use in Mobile Development

Agenda• Introductions• Objective• What we are not going to cover• Basic reusability - Example #1• Advanced reusability - Example #1• Advanced reusability - Example #2 • Applying previous examples to mobile• Creating an IPad app• Questions

A ‘Flash’ of Freshness: Repurposing Existing Flash Content for Use in Mobile Development

Introductions• Mike Raines– eLearning & Web Developer

for ICF International– Flash, ActionScript, HTML,

JavaScript experience

Micheal.Raines@icfi.com

@elearnDevGeek

A ‘Flash’ of Freshness: Repurposing Existing Flash Content for Use in Mobile Development

Objectives• How to repurpose existing Flash content for use in mobile

development• Techniques for maximizing reusability in your Flash projects

A ‘Flash’ of Freshness: Repurposing Existing Flash Content for Use in Mobile Development

What we are not going to cover• Developer Certificates• Provisioning Profiles• Final packaging for app stores

A ‘Flash’ of Freshness: Repurposing Existing Flash Content for Use in Mobile Development

Visual Aids

• ActionScript• Flash• FlashBuilder• Dreamweaver• XML

A ‘Flash’ of Freshness: Repurposing Existing Flash Content for Use in Mobile Development

What do I mean by ‘Reusability’?• Develop once, use many times

A ‘Flash’ of Freshness: Repurposing Existing Flash Content for Use in Mobile Development

Basic Reusability

• Simple MovieClip• No ActionScript in

MovieClip

A ‘Flash’ of Freshness: Repurposing Existing Flash Content for Use in Mobile Development

Basic reusability

• Add ActionScript elsewhere– Main timeline– Another MovieClip

A ‘Flash’ of Freshness: Repurposing Existing Flash Content for Use in Mobile Development

Advanced reusability

A ‘Flash’ of Freshness: Repurposing Existing Flash Content for Use in Mobile Development

Example #1: Flash / XML banner• Creating a class• What is a class?– Basic set of instructions– Not reinventing the wheel– Building on what has come before

A ‘Flash’ of Freshness: Repurposing Existing Flash Content for Use in Mobile Development

Example #1: Flash / XML banner• Why Build a class?• Reuse• Make it’s purpose very specific

A ‘Flash’ of Freshness: Repurposing Existing Flash Content for Use in Mobile Development

Example #1: Flash / XML Banner• Why use XML?– Specific != boring– Expand reusability

A ‘Flash’ of Freshness: Repurposing Existing Flash Content for Use in Mobile Development

Example #2 Flash / XML interactions• Same concept – more complexity

A ‘Flash’ of Freshness: Repurposing Existing Flash Content for Use in Mobile Development

That’s great but how does this apply to mobile?

A ‘Flash’ of Freshness: Repurposing Existing Flash Content for Use in Mobile Development

Applying previous examples to mobile via FlashBuilder & AIR

• Loading a SWF at runtime• Embedding a SWF• Importing SWC library

A ‘Flash’ of Freshness: Repurposing Existing Flash Content for Use in Mobile Development

Loading a basic SWF• Loaded SWF’s offer more flexibility– Loaded SWF’s can be “defined” at runtime via user

action or external data (XML, JSON)• Loaded SWF’s CANNOT contain ActionScript*

A ‘Flash’ of Freshness: Repurposing Existing Flash Content for Use in Mobile Development

Embedding a basic SWF• Embedded SWF’s are hard coded into your

app– Embedded SWF’s are compiled during the build

process• Embedded SWF’s CAN contain code

A ‘Flash’ of Freshness: Repurposing Existing Flash Content for Use in Mobile Development

SWC explained“An Adobe SWC file is a package of precompiled Flash symbols and ActionScript code that allows a Flash or Flex developer to distribute classes and assets, or to avoid recompiling symbols and code that will not change.[1] SWC files can be generated by the Flash authoring tool, and by Flex. They are sometimes referred to as class libraries and cannot be directly executed by the Flash Player.”

http://en.wikipedia.org/wiki/Adobe_SWC_file

A ‘Flash’ of Freshness: Repurposing Existing Flash Content for Use in Mobile Development

Exporting SWC from Flash

A ‘Flash’ of Freshness: Repurposing Existing Flash Content for Use in Mobile Development

Importing SWC into FlashBuilder

A ‘Flash’ of Freshness: Repurposing Existing Flash Content for Use in Mobile Development

Do I need a SWC for each SWF?• Yes!• No!• Maybe?

A ‘Flash’ of Freshness: Repurposing Existing Flash Content for Use in Mobile Development

Some assembly required• Existing Flash pieces will need modification– Paths– Strict ActionScript code– File types

A ‘Flash’ of Freshness: Repurposing Existing Flash Content for Use in Mobile Development

Creating an IPad app

A ‘Flash’ of Freshness: Repurposing Existing Flash Content for Use in Mobile Development

Creating a project with FlashBuilder • You have some options

A ‘Flash’ of Freshness: Repurposing Existing Flash Content for Use in Mobile Development

Creating an IPad app: steps• Name• Build Paths• SDK

A ‘Flash’ of Freshness: Repurposing Existing Flash Content for Use in Mobile Development

Creating an IPad app: steps• Platform• Basic app settings

A ‘Flash’ of Freshness: Repurposing Existing Flash Content for Use in Mobile Development

Creating an IPad app: steps• Target device

A ‘Flash’ of Freshness: Repurposing Existing Flash Content for Use in Mobile Development

Creating an IPad app: steps• Library path– Assets– Classes

A ‘Flash’ of Freshness: Repurposing Existing Flash Content for Use in Mobile Development

Creating an IPad App: steps• Library path– Flex SDK– SWCs

A ‘Flash’ of Freshness: Repurposing Existing Flash Content for Use in Mobile Development

Creating an IPad app: steps• Certificate• Provisioning

Profile

A ‘Flash’ of Freshness: Repurposing Existing Flash Content for Use in Mobile Development

Creating an IPad app: steps• Package

contents

A ‘Flash’ of Freshness: Repurposing Existing Flash Content for Use in Mobile Development

Creating an IPad app: starting files

Main.as

Main-app.xml

A ‘Flash’ of Freshness: Repurposing Existing Flash Content for Use in Mobile Development

Contact UseLearnDevTech blog: http://elearndevtech.blogspot.com

Twitter :@ICFI , @elearnDevGeek,@gardelearndev, @mas_edev