Overview
Macromedia Flash offers designers the unique opportunity to take control of their work. By merging the design and programming elements, a designer can now create and complete their vision of a dynamic website. All it takes is a bit of understanding and solid foundation of Actionscript. Designers now bridge the gap between these two areas and almost instantaneously become a more valuable asset to their team. Companies that had one designer and one programmer can now hire a designer who can both code and design.
In a business climate where companies are looking to do more for less, the appeal of replacing a designer and a programmer with someone who can both code and design is great.
Last year at Flash In The Can, this presentation provided designers with an overview of some of the key tools and concepts of Actionscript in Flash, providing them with the basics they need to design and program dynamic websites. With so much to cover, the opportunity for a workshop is much more appealing to an attendee. More time can be spent on the important areas and help in building their knowledgebase.
Based on the response and number of attendees last year the presentation “Actionscript For Designers” showed that a gap in this area needed to be filled.
As the goal of good website design is to ensure that users can intuitively find what they are looking for, this workshop will give designers and newbies the foundations needed to start using Actionscript at its full potential.
In my experience working with design interns, I have found that they key to teaching them how to use Flash effectively is to focus on the foundations of Actionscript from a designer’s perspective. In other words, I help my interns by putting the functionality of Flash in terms that do not assume an inherent knowledge of programming languages.
How will I do that?
Using a series of clips building upon each other, the map will be presented and outlined to demonstrate the following key tools and concepts for designers in Flash:
1. Dot Syntax – The Road Map to Actionscript
An often misunderstood concept, I will cover the basics of dot syntax by comparing it to something all web designers are familiar with – html. Key points include:
a. Parallels between dot syntax and html directory structure
b. File organization and structure
c. The processes of naming and calling movieclips
2. The Scripting Window – The Command Centre.
Like “The Bridge” in Star Trek, you can’t run a Starship without understanding where the command centre is and how to use it. In this segment of the presentation I will cover the key features of the scripting window, demonstrating how each work and can be used. Key points include:
a. Actionscript colour coding
b. dictionary definition button
c. find and replace function
d. insert target path function
e. check syntax feature
f. auto format code
g. add script item
h. code hints
i. view options
j. pin scripts feature
3. Objects and Functions – Just Like Getting Up for Work in the Morning
One of the most challenging concepts in learning to program in Flash is object-oriented programming. Using the analogy of the getting ready for work in the morning, I intend to cover the basic idea of object-oriented programming, and the difference between objects and functions. You’ve got to get out of bed before you brush your teeth! Key points include:
a. commenting code
b. script actions
c. language structure
d. variables
e. text fields
f. basic mathematical operators
g. if/else statements
h. LoadVars object
i. “for” loop
j. attachMovie Method
k. custom functions
l. simple forms
m. dynamic menu / navigation
4. Trace Command and The De-Bug Feature – Troubleshooting
Making sure the websites we create are functional and bug-free is the key to good design in Flash. Bugs = Bad User Experience. Bringing all of the concepts together, I will cover the advantages of using the trace command vs.
the de-bug feature to locate errors and de-bug websites. Key points include:
a. Trace Command vs. Debug Feature – description and comparison
b. How to use the trace command to help de-bug
