Build Applications Faster with SWCs

Build Applications Faster with SWCs Chris Black

Overview
Asset overview
Beyond the button
Examples
Images
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 Assets
Small initial footprint
Many loading stages
Larger apps and dynamic content
Embedded Assets
Larger 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 conflicts
Font conflicts can cause major headaches
Don't duplicate class definitions between SWC and Flash Builder
Asset organization
Break down folders and Flash files
Think ahead

Types of Assets

SWCs
Advantages
Code completion
Vector art
9-slice scaling
Timeline code is executed
PNGs are compressed
Visual placement
Linkage support
Disadvantages
Larger file size
Hard to debug

Embedded SWF
Advantages
Vector art
9-slice scaling
PNGs are compressed
Visual placement
Linkage support
Disadvantages
Larger file size
Timeline code is not executed
No code completion
More code
Requires two frames*

Embedded SWF Live Demo

Loaded SWF
Advantages
Smaller app footprint
Vector art
9-slice scaling
PNGs are compressed
Visual placement
Timeline code executed*
Disadvantages
More code
No linkage support!
No code completion

Images
Advantages
Version control
Flash not required
Disadvantages
Lots of files
Harder to compress
No vector art
More code

Flex Module
Advantages
Smaller initial footprint
Code completion
Encapsulate code and assets
Disadvantages
Requires 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/

http://www.blackcj.com	277
http://www.slideshare.net	1
http://translate.googleusercontent.com	1

Build Applications Faster with SWCs

by Chris Black on Apr 05, 2010

Accessibility

Categories

Tags

Upload Details

Usage Rights

3 Embeds 279

Statistics

Build Applications Faster with SWCs — Presentation Transcript