Build Applications Faster with SWCs

Chris Black

Overview

Asset overview

Beyond the button

ExamplesImages

Components

Vector art

Summary

What's an Asset?

An image, animation or graphical element used in creating an application.

Examples:JPEG, PNG, GIF

Vector art

SWF animation or interactive components

How are they used?

Designs are created in Photoshop, Illustrator and Fireworks

Flash IDE and Flash Catalyst (coming soon) for asset production

Flash Builder 4 (Flex Builder 3), and Flash Develop for coding

Why are they Important?

Flash CS4 + Code = BAD

Flash Builder Flex Framework great for existing components (buttons, grids, drop downs...)

Time consuming for new components

ActionScript only projects + Flash IDE = AWESOME

Use the right tool for the job

Types of Assets

Loaded AssetsSmall initial footprint

Many loading stages

Larger apps and dynamic content

Embedded AssetsLarger footprint

Single loading stage

Smaller apps and core content

Beyond the Button

http://www.ammap.com

http://www.greensock.com/

Images in SWCs

Compress transparent PNGs

Simplify code

Quickly change global compression

Harder to version control

Slide Show

Imagine a slide show with cross fading images, XML configuration and a loading indicator.

How many lines of code would this take?*

Slide Show Pro

Slide Show Pro

Live Demo

Component Advantages

Use components built for Flash

Quick and easy

Code completion

Slide Show Pro

Snowboard Demo

Snowboard Demo

Constructor

Parse Board Art

Snowboard Demo

Snowboard

Snowboard Advantages

Vector art

Layering

Components

Code completion

Things to Watch Out For

Class conflictsFont conflicts can cause major headaches

Don't duplicate class definitions between SWC and Flash Builder

Asset organizationBreak down folders and Flash files

Think ahead

Types of Assets

SWCs

AdvantagesCode completion

Vector art

9-slice scaling

Timeline code is executed

PNGs are compressed

Visual placement

Linkage support

DisadvantagesLarger file size

Hard to debug

Embedded SWF

AdvantagesVector art

9-slice scaling

PNGs are compressed

Visual placement

Linkage support

DisadvantagesLarger file size

Timeline code is not executed

No code completion

More code

Requires two frames*

Embedded SWF

Live Demo

Loaded SWF

AdvantagesSmaller app footprint

Vector art

9-slice scaling

PNGs are compressed

Visual placement

Timeline code executed*

DisadvantagesMore code

No linkage support!

No code completion

Images

AdvantagesVersion control

Flash not required

DisadvantagesLots of files

Harder to compress

No vector art

More code

Flex Module

AdvantagesSmaller initial footprint

Code completion

Encapsulate code and assets

DisadvantagesRequires Flex

Must still embed assets with another method

Summary

SWCs are great

Use the right tool for the job

Think ahead

Resources

Adobe Livedocs

http://www.ammap.com

http://www.greensock.com/

Blackcj.com

Snow

Vector Art

http://slideshowpro.net/