You see, if you have ever looked over the shoulder of someone who really knew how to quickly master ActionScript stuff, you might know that tutorials are the fastest way to learn. So you are welcome to get the most out of these detailed and interesting tutorials we’ve compiled for you. We hope the following ActionScript related articles will help you, especially if you are a Flash beginner. By the way, you may also write to us if you run into any other exciting practical guidance, to let people take advantage of Flash features beyond what they’ll possibly learn here. Now let’s take a look at the nice AS3 bundle we have diligently prepared for our audience:

1. A Wonderwall-Like Effect, with Traer AS3

Using the ActionScript3 port of the Traer physics engine, get something close to THA’s Wonderwall effect. This tutorial uncovers how to push the boundaries emerging from a seemingly simple form focusing on the deformation of the grid when interacting. The underlying grid pattern is not stretched and deformed as in the original. This experiment solely focuses on the use of physics simulation to recreate the effect.

* * *

2. Traer AS3, the Mandatory Cloth Simulation

It is a cloth-like simulation built with Traer.physics port to ActionScript3, using GraphicsTrianglePath. The mesh is only made of a 8×8 particles grid, or 128 triangles when rendered. The source code for this is available at Github.

* * *

3. AS3 Webcam Motion Tracking

Tutorial comprises the methods for detecting and tracking an object movement in Flash. There you can grab the MotionTracker source code and see it included for the technique used in the demo.

* * *

4. AS3 Shuffle Grid Class

This is a grid sorting/shuffling algorithm of how to drag and drop images and shuffle them around in a grid menu system. The basic logic of the algorithm works by determining how far a dragged item travels along the grid (rows and columns) and then shuffling the surrounding items in the opposite direction by these values, therefore creating space for the dragged item to slot into when released.

* * *

5. Bitmapdata displacement fishes

With the displacement filter you can do a lot of cool effects, like in this particular example moving water. It uses a bitmapdata with perlinNoise moved with the offset parameter to create the movement. Then with some moving fishes you could get a nice little aquarium. A big downside of the displacement filter is that it is quite heavy.

* * *

6. Split rgb effect

This effect is used a lot in videos. This tutorial explaines how to make it with flash, creating a bitmapData object from a movieclip on the stage, then splitting the red blue and green color channels into separate bitmapdata objects using the copyChannel method.

* * *

7. Flash Player 10 Drawing API

With all of the new drawing API features in Flash Player 10, it might take a while to get caught up with this tutorial. Drawing API features challenge you to rethink how you draw images dynamically in Flash Player. With IGraphicsData objects, you will have a standardized data format for maintaining and reusing dynamic drawings whose usage is completely different from that of the older APIs.

* * *

8. Flash CS3 Tutorial – Fractals in AS3

This tutorial will walk you through the basics of producing fractals effects using ActionScript 3. Fractals are shapes or patterns that repeat at many levels and they are fun to play with in Flash because they are a quick way of producing complex, unpredictable results from very basic algorithms.

* * *

9. Cool particle effects in Flash

This tutorial is a great way of getting into programming simple physics and movement. More importantly, it shows that you can produce some beautiful particle effects with straightforward ActionScript. There are techniques for approximating physical phenomena to run the code at lightning speed.

* * *

10. Flower Twist Particle Effect and the Methods Behind It

Here is the tutorial focusing on how to accomplish flower twist effect which is a pixel-based particle system. The motion of the particles there depends on the color of each particle; in particular the luminance (a measure of brightness) is used to control how far the particles fly in the z-direction when the bitmap explodes. The authors have found a very nice way of having the particles twist into a helical pattern as they explode into space.

* * *

11. Dragging in 3D – The Right Way

The following tutorial makes possible dragging an object in 3D in multiple directions. The main function, which is essential to being able drag in 3D – is CameraObject3D.unproject which unprojects coordinates. It takes 2D screen coordinates, and gives you back a vector in world space. In lay terms – this basically shoots a ray from the camera, through where the mouse is, into 3D space.

* * *

12. Vertical 3D Carousel with ActionScript 3 and XML

From this tutorial you’ll get to know how you can create an attractive vertical 3D carousel by using XML and ActionScript 3. They first set up everything ready on the Flash stage, then make the XML file and finally add some ActionScript 3. Check out the end result, in each frame we rotate the carousel according to the mouse position.

* * *

13. Shaky Flash Menu with ActionScript 3

This tutorial will teach you how to create a cool looking shaky menu with ActionScript 3. All the animation is done with ActionScript, so no timeline animation is needed.

* * *

14. Image Accordion Effect in AS3 Flash CS4

The tutorial presents a custom ImageAccordion AS3 class that folds and unfolds an image in accordion-pleated fashion. Use the native Flash Player 10 3D methods to achieve a remarkably realistic effect. On click, an image will folds or unfold in a tweened motion.

* * *

15. The CylindricalGallery Class

This is a cylindrical gallery class which helps to create a spectacular 3D cylindrical gallery fully customizable via a simple XML file.

Related posts:

1. Create Your Own ActionScript 3.0 Pixel Explosion Effect
2. Adobe Flash Tutorials – Best of
3. 40 Quality Photoshop UI Design Tutorials

APIs、Libs、Components

1、as3ebaylib

http://code.google.com/p/as3ebaylib/

2、 as3youtubelib

http://code.google.com/p/as3youtubelib/

3、 as3flickrlib

http://code.google.com/p/as3flickrlib/

4、Yahoo ASTRA Flash Components

http://developer.yahoo.com/flash/astra-flash/

5、 facebook-as3

http://code.google.com/p/facebook-as3/

6、 as3awss3lib

http://code.google.com/p/as3awss3lib/

7、Adobe ActionScript 3:resources:apis:libraries （官方，包括corelib、FlexUnit、Flickr、Mappr、RSS and Atom libraries、Odeo、YouTube）

http://labs.adobe.com/wiki/index.php/ActionScript_3:resources:apis:libraries

8、 Tweener   用于过渡与切换的一组动画库

http://code.google.com/p/tweener/

9、 uicomponents-as3    一组轻量级的AS3 UI组件库

http://code.google.com/p/uicomponents-as3/

10、 as3ds    AS3的数据结构实现

http://code.google.com/p/as3ds/

11、mecheye-as3-libraries    一组主要用于Flash 游戏开发的AS3库

http://code.google.com/p/mecheye-as3-libraries/

12、XIFF   一套XMPP协议的AS3实现

http://svn.igniterealtime.org/svn/repos/xiff/branches/xiff_as3_flexlib_beta1/

13、 FZip   一套AS3库，可用作对ZIP压缩文件的载入、修改与创建

http://codeazur.com.br/lab/fzip/

14、 FlexLib   一套开源的Flex界面组件库

http://code.google.com/p/flexlib/

15、 AnimatedGIfLoader Flex Component     可载入GIF的Flex组件

http://dougmccune.com/blog/animatedgifloader-flex-component/

16、 goplayground    一套轻量级的，可用创建属于你自己的AS3 动画工具的库

http://code.google.com/p/goplayground/

17、 AlivePDF   开源的用于PDF创建的AS3库

http://www.alivepdf.org/

18、 jwopitz-lib   一组开源的Flex用户界面组件

http://code.google.com/p/jwopitz-lib/

19、 as3crypto   AS3实现的一套加密库，包括多种加密算法

http://code.google.com/p/as3crypto/

20、 flare    一套强大的可视化交互的AS3类库

http://flare.prefuse.org/

21、 SWFAddress    一小而强大的库，可以为Flash和Ajax提供深链接的功能

http://www.asual.com/swfaddress/

22、 SWFObject    用于嵌入Flash，Adobe官方也认可了

http://code.google.com/p/swfobject/

23、 ulse Particle System 一套开源的强大的AS3动态粒子系统

http://code.google.com/p/pulse-particle/

http://www.rogue-development.com/pulseParticles.html

24、 SpringGraph Flex Component

http://mark-shepherd.com/blog/springgraph-flex-component/

25、 GoASAP    AS3动画库

http://code.google.com/p/goasap/

http://www.goasap.org/index.html

26、 asaplibrary   一套开源的Flash Actionscript3.0 RIA库

http://code.google.com/p/asaplibrary/

http://asaplibrary.org/

http://asapframework.org

27、 as3mathlib 开源Flex/Actionscript数学库

http://code.google.com/p/as3mathlib/

28、 as3corelib 包含一些基础功能AS3库

http://code.google.com/p/as3corelib/

29、 minimalcomps 一组AS3 UI组件

http://www.bit-101.com/minimalcomps/

30、 as3gif

http://code.google.com/p/as3gif/

31、queueloader-as3     一组AS3库，用来进行资源序列载入及监测

http://code.google.com/p/queueloader-as3/

32、 TweenMax (AS3)

http://blog.greensock.com/tweenmaxas3/

33、 Atellis Reflection Component             一款Flex反射效果组件

http://labs.atellis.com/2007/07/11/atellis-reflection-component/

34、 AS3Eval    简单来说，就是用AS3实现的AS3编译器

http://eval.hurlant.com/

35、 ByteArray的组件、库合集，包括liquid components、mousegesture、ASZip、GIF Player、GIF Animation Encoder、AlivePDF、Live JPEG Encoder、ScaleBitmap等

http://www.bytearray.org/?page_id=82

36、 AS3C    针对AVM2虚拟机，用C#写的字节码编译器

http://code.google.com/p/as3c/

37、 as3httpclientlib   as3实现的http客户端

http://code.google.com/p/as3httpclientlib/

38、 as3ui  一组常规的as3　ui界面库

http://code.google.com/p/as3ui/

39、 as3xls　让你在flex中可以读写Excel文件

http://code.google.com/p/as3xls/

40、 as3flexdb 让你的flex程序可以连接到MySQL服务器，主要是使用AMFPHP来访问PHP服务器

http://code.google.com/p/as3flexdb/

这 一是一篇详细使用介绍的教程

http://itutorials.ro/viewtopic.php?f=9&t=7

41、 vivisectingmedia-as3 　一组AS3/Flex实用库，是作者在实践中总结出来的

http://code.google.com/p/vivisectingmedia-as3/

Actionscript 3.0 Class

1、fZip   此类可允许你载入标准的zip文件并提取里面包含的文件

http://wahlers.com.br/claus/blog/zip-it-up/

2、 AS3: Layout class for Flash CS3    一组用作布局的类

http://www.senocular.com/?id=2.8

3、 CSSLoader    该类允许Flex应用程序在运行时载入CSS

http://www.rubenswieringa.com/blog/cssloader

4、 AS3: QueryString     一个单例类，用来获取URL地址后所带参数值对

http://evolve.reintroducing.com/2008/07/03/as3/as3-querystring/#more-141

5、 ActionScript 3 Contextual Menu Manager Class        AS3关联菜单管理类

http://www.blog.noponies.com/archives/103

2D & 3D Engine

1、APE (Actionscript Physics Engine)  物理引擎

http://www.cove.org/ape/

2、 Away3D

http://code.google.com/p/away3d/

3、Papervision3D

http://code.google.com/p/papervision3d/

4、 Sandy    开源3D库

http://www.flashsandy.org/versions/3.0

5、FORM  一套AS3完成的用于2D刚性物体的物理引擎

http://code.google.com/p/foam-as3/

6、 Five3D   基于矢量的Flash 3D 交互动画创建

http://five3d.mathieu-badimon.com/

7、 Flade (Flash Dynamics Engine)   一套开源的2D物理引擎，AS2实现

http://www.cove.org/flade/

8、 Box2DFlashAS3     2D物理引擎，AS3实现，基于强大的Box2D C++物理库

http://box2dflash.sourceforge.net/

9、 Paradox   基于Flash的第一称3D引擎

http://animasinteractive.com/propaganda/

10、 ND3D AS3 3D Engine 　一款简单的AS3开源3D引擎，编译后的引擎大小仅约10K

http://code.google.com/p/nd3d/

http://www.nulldesign.de/nd3d-as3-3d-engine/

FrameWorks

1、 Cairngorm   Adobe官方出的Flex框架

http://labs.adobe.com/wiki/index.php/Cairngorm

2、 PureMVC   纯AS3框架，也有其它语言的实现

http://www.puremvc.org/

3、ASWing AS3  一套开源的AS3 GUI框架

http://www.aswing.org/

4、EasyMVC  由事件驱动的MVC框架

http://projects.simb.net/easyMVC/

5、Mate 基于Tag及事件驱动的Flex框架

http://mate.asfusion.com/

6、ARP    基于模式（Pattern）的RIA框架，Flash平台，支持AS2和AS3

http://osflash.org/projects/arp

7、 Gaia  开源的Flash前端框架，支持AS2和AS3，用于快速开发

http://www.gaiaflashframework.com/

8、 flest  Actionscript3.0/Flex应用程序框架，用来开发企业级的RIA

http://code.google.com/p/flest/

9、 Gugga     Flash Framework    更新至AS3

http://www.gugga.com/flashblog/

10、 Prana 另一个提供了IOC反转控制的框架，类似著名的Spring框架

http://www.pranaframework.org/

11、 OpenFlux   开源的Flex组件框架，让开发Flex组件更加快速容易

http://code.google.com/p/openflux/

12、 Degrafa      声明式的Flex图形框架，允许以MXML标签的方式绘制图形、创建皮肤，还包括对CSS的支持

http://code.google.com/p/degrafa/

13、 FlexMVCs   针对AS3和Flex的应用程序框架，基于PureMVC，作了些修正和精简

http://code.google.com/p/flexmvcs/

Flash & Flex Tools、Servers

1、FlexUnit     Flex/Actionscript3.0单元测试框架

http://code.google.com/p/as3flexunitlib/

2、 Visual FlexUnit 增强的FlexUnit，支持“可视化断言”

http://code.google.com/p/visualflexunit/

3、 RED bug      debug调试控制器，让Flash、Flex、AIR应用程序更加容易

http://www.realeyesmedia.com/redbug/

4、 reflexutil 可在运行时对Flex组件进行调试

http://code.google.com/p/reflexutil/

5、 FxSpy   当Flex应用程序运行时可以检测和动态的改变可视化组件属性值

http://code.google.com/p/fxspy/

6、 ThunderBolt 基于Firefox的Firebug插件的日志扩展，支持AS2及AS3

http://code.google.com/p/flash-thunderbolt/

7、 FlashTracer Firefox扩展，可以以侧栏的方式将Flash中trace()的结果显示

8、RIALogger　另一款 Flex/AIR的Debug工具

http://renaun.com/blog/flex-components/rialogger/

9、 Alcon 一款轻量级的AS2及AS3的Debug工具，AIR方式将Debug信息展示出来

http://blog.hexagonstar.com/alcon/

10、 GDS (Granite Data Services) 开源，提供了Adobe LiveCycle Data Services类似功能的服务器

http://www.graniteds.org/

Flex Explorers  （大部分为Flex2版本，但同样适用于Flex3）

1、Flex3 Component Explorer   Flex各类组件示例

http://examples.adobe.com/flex3/componentexplorer/explorer.html

2、 Resize ManagerFX Explorer （此为商业作品，要收费的）

http://www.teotigraphix.com/explorers/ResizeManagerFX/ResizeManagerFXExplorer.html

3、 Flex3 Style Explorer

http://examples.adobe.com/flex3/consulting/styleexplorer/Flex3StyleExplorer.html

4、 Flex2 Style Explorer（添加了Kuler功能）Flex UI组件风格定制并可输出为CSS

http://www.maclema.com/content/sek/

5、 Flex2 Style Explorer（Adobe 原始的版本）

http://examples.adobe.com/flex2/consulting/styleexplorer/Flex2StyleExplorer.html

6、 Flex2 Filter Explorer   查看各类滤镜效果并可进行设置

http://merhl.com/flex2_samples/filterExplorer/

http://merhl.com/?p=40   (AIR版本)

7、Flex2 Primitive Explorer   在Flex中创建各种简单形状

http://www.flexibleexperiments.com/Flex/PrimitiveExplorer/Flex2PrimitiveExplorer.html

Related posts:

1. 15 Detailed Expert Tutorials for ActionScript 3
2. Flash Websites: the Pros and Cons
3. 15 of the Most Promising Flash CMS Solutions

Searching for ‘flash tutorials’ via Google & Co. won’t provide you with the results you expect. Not that you won’t find any relevant results, on the contrary — you will be directed to a large number of Flash repositories which offer everything: sometimes useful, but mostly not. Besides, browsing through these repositories isn’t that much fun — as you sometimes need to figure out whether a link you see is a hidden AdSense-block or the actual tutorial. And it’s really hard to find something “refreshing” and new simply using some standard keywords.

This article provides hand-picked professional Flash tutorials which can enrich your design skills and improve the quality of your works. We’ve tried to select most interesting and useful tutorials. Most sources can serve as the entry point for further tutorials.

[Offtopic: by the way, did you know that Smashing Magazine has one of the most influential and popular Twitter accounts? Join our discussions and get updates about useful tools and resources — follow us on Twitter!]

Animation and Effects

Flash Tutorial Create Water Wave Effect Animation Using Masking Tween
We’re going to make a flash animation water wave effect and we going to move step by step to give you a clean explanation about how to make a water wave effect in flash using masking technique.

Picture Animation
In this detailed lesson you will see how to create on a simple way picture animation using the Brush Tool and mask.

High-tech city animation
This detailed lesson made for Flash 8 will teach you how to create a really cool and advanced light city animation… More tutorials from this site.

Animate a Logo in Flash
With web and multimedia design there is the opportunity to add a little fun and creativity to your logo by creating a simple animation effect. Obviously this process isn’t limited to just your logo; animating an element can help draw attention to a particular object or area of a webpage or digital presentation.

Misty River
Read this tutorial and see how to create misty river animation. You will also learn how to use flash filters (Blur, Bevel and Drop shadow filter) and more.

Hypnotic Gear Rotation
I’m not sure what inspired me to do this crazy gear rotating animation, but for some reason I just started making a simple gear in flash, then what does a gear do? well it rotates!

Execute Lightbox Scripts From Flash: Part Deux
Since the first thread showing you how to execute Lightbox scripts from Flash was such a big hit, I decided to write another showing you how to gain even more functionality in this regard. Tonight I will be showing you how to initiate a Lightbox containing a Flash movie from a Flash movie, and how to initiate Lightbox groups containing images as well as Flash movies.

Simple Shape Animation
In this tutorial you will see how to transform image in many shapes. To create this tutorial, you don’t have to use action script. Only one thing that you need is flash. More tutorials from this source.

Old Grains Effect (Old TV Effect) in Flash
In this tutorial we are going to emulate a Grain Effect in Flash which is similar to what we see in old televisions. This effect is widely used in movie scenes to indicate a event that have occurred ages ago. More tutorials from this source. Has also a collection of video tutorials.

Zoom in Zoom Out Flash Animation with Fading Effect
This tutorial will teach you how to create a simple zoom in & zoom out animation with fade-in and fade-out effect in Flash. You can use this zooming effect on any image or text.

Creating a 3D Tunnel Effect in Flash
Learn how to create this very cool 3D tunnel effect in Flash using some simple 2D animation techniques.

Creating realistic Fireworks in Flash
Create a realistic particle based firework display using Flash.

Rotating Letter Effect in Text
See this tutorial and learn how to rotate letters in series using some special flash tricks. You don’t have to use action script code to make this lesson. More tutorials from this source.

Eye Catching Effect With Flash
This is an eye-catching effect that could not be created too easily without ActionScript. Flash allows you to create many cool effects using only (or almost only) ActionScript, I hope you can make a good effect.

Images and Videos

How to Make Video Panoramas from Your Digital Camera’s Video Clips
Your digital camera probably shoots video clips as well, and by stitching those clips together, you can make a full-motion video panorama. Landscapes, streetscapes, interior shots, birthday parties, they all come to life in sparkling, wide-angle videoramas. If you liked our panographies, you’ll love our videoramas. Read on to see an example and learn how it’s done.

360 Grad View
Create a panoramic view of the image with Flash.

Creating movie clips with reflections in ActionScript 3.0
Ben Pritchard’s tutorials. You’re probably aware of those nice reflections appearing in some of the latest websites, online ads, and even software. It’s an effect common to “Web 2.0″ designs, in which something like an album cover or video player appears to reflect some sort of virtual floor beneath it. This tutorial steps you through the creation of the Reflect class.

Flash Tutorial – Fullscreen Flash Movie with no Warping or Stretching
Flash movies inherently have a predetermined height and width, as defined by the size of the Stage in the Flash authoring tool. Generally when a Flash movie is resized in the web browser, its contents get warped and stretched. This is sometimes not a problem with vector graphics, but with bitmap graphics it is an utter disaster. There are, however, some clever ActionScript techniques that can allow you to resize a Flash movie without any distortion of its contents. 5 pages.

Infinitely Zooming Image
Image contains a frame which zooms out forever

Flash Slideshow Image Gallery
This tutorial will show you how to make a simple, yet effective, slideshow-type image gallery using Flash with minimal scripting.

Using Flash to Get In Focus
A visual cue will help draw people into checking out your images. Get website visitors to explore your pictures by having the image come into focus when it is rolled over. More tutorials from this site.

Classes and Movie Clips
In Flash CS3, you have support for creating ActionScript 3.0 (AS3) projects. Besides allowing you to write code in the new AS3 language, there are some subtle differences that may go unnoticed unless you are actively looking for new things. One such difference is what happens when you create or convert something into a new movie clip. 5 pages. More tutorials from this site.

Space Shooter – Movie Clip and Movement
A series of Space Shooter tutorials in 5 parts. The texts are easy read and the author supplies all the needed code. More tutorials from this site.

Most popular YouTube videos of the day in Actionscript 3
This tutorial is a pretty basic introduction to AS3, to give you a kickstart before the final release of Flash CS3. If you’re familiar with AS3, this probably isn’t anything for you, but if you’ve done some stuff in AS1 & 2, maybe had a look at 3.

Jagged Images Transition Effect
A Flash tutorial to create a jagged transition gallery.

+

Advanced Picture Gallery
In the tutorial listed below I will instruct you, how to make advanced picture gallery in flash 8 using the Action Script.

Advanced Flash elements

Creating a Flash-based site
An extensive tutorial on how you can create a complete Flash-based web-site from scratch.

PhoneBook
This tutorial will show you how to create application for searching (Phonebook),using the Action Script in flash. You will also learn how to cretae Input fields, how to create and use instance name and more.

Flash MX, 8 or 9 Pong Tutorial
We’re going to be making a Pong game in Flash MX, 8 or 9. It’s a very simple game but will show you some of the more important gaming functions in Flash such as the hitTest function and how to move a player based on keyboard input.

The Best Structure for your Flash Site
An extensive article about how to build the Flash-based site from scratch and select the best structure for the site.

Easy Flash Quiz
Tutorial about how to make quiz with correct answer counter.

Roll the Dice Flash Game
In this Flash tutorial I will show you how to make a simple but yet smart dice roll game. This tutorial will cover a lot of simple programming issues, the use of buttons, make your own functions, make use of movie clip properties through actionscript, using simple math and random function an much more. I hope you enjoy it. More tutorials from this site.

Train Simple videos: Introduction to Flash game development
Jiro Ietaka for Adobe. The following videos are excerpts from Train Simple’s Flash 8 Game Development online course and DVD hosted by Jiro Ietaka. Jiro takes you through the necessary steps to build a Flash-based game with extensive use of Flash ActionScript 2.0. 3 pages. More tutorials from this source.

Vector Art Tutorial
The key to great vector art is patience, a virtue which i lost a while ago. You can spend days doing it, but in the end it IS worth it. For an example I’ll do a vector art piece of an eye, keep in mind my skills are kind of rusty as i havent done this in 6 months but I will give out files in the end so keep ur pants on.

The Secret of Tweening
One of the biggest problems with animation in Flash is that it’s so easy to cheat. You’ve got motion tweens and shape tweens and timeline effects and the Spaghetti Monster knows what else that all books on Flash demonstrates as “how you animate in Flash”.

Funky Flash Website Tutorial
A tutorial showing you how to create a funky flash website. More tutorials from this site.

How to design a cool futuristic website interface
In this easy Flash 8 professional lesson I will explain you how to design a great interface for your Flash website. You will learn to make the following:

Flash Analog Clock with ActionScript
In this tutorial it will be shown how to create a awesome flash analog clock using ActionScript. For attempting this tutorial is required for you to have basic knowledge of Flash and ActionScript . The result should be the following flash analog clock: More tutorials from this source.

Flash Painting Program
Create a simple dynamic painting program in Adobe Flash. Use your mouse to paint on a simulated canvas. More tutorials from this source.

3D Flash Menu
This detailed lesson will teach you how to create advanced 3D flash menu in flash 8 using the Action Script.You will also learn how to design a menu, how to create buttons animation and how to draw a 3D cube using the Line Tool.

Actionscript: Drawing With Your Mouse
In this Macromedia Flash tutorial you will learn how to actionscript code a simple painting flash program in just a few lines of code.

Basic elements

Classic filling preloader
Learn how to create a filling preloader for your Flash movies.

Simple flash header
This lesson will show you how to make simple flash header using some special flash tricks. You can apply this simple and on the same time very useful flash header on any web sites.

Interactive flash content box
Using this detailed tutorial, you will learn how to create interactivity flash content box using the action script. You can use this content box for any web site.

Nine Tips for Drawing in Flash
Drawing has always been a well hidden non-talent of mine but every now and then comes a project that requires me to face my demons. Using a mouse to draw is a new experience and if you are not familiar with programs like Illustrator and don’t own a Wacom board Flash is a very easy place to start learning.

Walk Cycles: The Right Way
This tutorial isn’t about walk cycle theory. I’m assuming you already know that part. If you don’t, go buy Richard Williams’s Animator’s Survival Kit. My goal is to show you ways to use Flash that make it easier to create a good cycle, in regards to solid foot placement and consistent speed–two things that I’ve seen lacking in many Flash animated walk cycles.

ActionScript 3.0 for developers and designers: Creating a preloader
Jamie Kosoy for Adobe. Adobe Flash is unique in that the content you create with it is intrinsically artistic and programmatic. Even if you are working by yourself, design and development must work in harmony in order for a piece to reach its full potential. With ActionScript 3.0, Flash has become a far more powerful tool—and in some ways, far more intimidating. 4 pages.

Attractive Object Appearance with Sound
With this lesson, you are going to learn how to make attractive object appearance with sound in flash 8 with no Action Script. This effect is very useful and you can use it for any flash header….

Creating a preloader for your Flash site using the image of a bottle and a rectangular mask
In this detailed tutorial made for Flash 8, you will see how easy it is to create a preloading system that is gradually displaying an image as your site loads. More tutorials from this site.

Flash Tabs Menu
In this tutorial it will be shown step by step how can be developed an awesome flash menu with tabs. We will use MovieClips, masks, invisible buttons and some ActionScript.

Sound In Flash On Click
In this easy flash lesson, you will see how to import a sound in flash and how to launch it on click usign the play button. To create this lesson, you don’t have to use action script code and you don’t have to need more experience of Flash.

Sky bluish Preloader
This detailed tutorial will show you how to create bluish preloader like sky using the action script code. You will also learn how to use mask option in flash, how to create percent for preloader and much more. More tutorials from this source.

Buttons

Create a Glossy Button in Flash
Flash has created an era of Highly interactive and eye catching wedesign techniques. Of course, the design of the web site also plays and important role in its promotion.Here we are going to create a glossy round button in flash.

Making an Aqua Gel Button
Ever wanted to make those shiny, nice looking aqua buttons? Yes, but in Flash? You can make them in Photoshop or Fireworks. But creating them directly in Flash makes your file size a lot smaller.

Further Resources and References

There are many other sources you can learn from. Here is the list of the ones you might want to keep bookmarked for the further references.

• GoToAndLearn Video Tutorials
  A large collection of ActionScript tutorials.
  
• Flash Perfection
  A variety of Flash tutorials including 3D tutorials, actionscripting, animation, audio, special effects, interactivity, optimization, Flash Video and Swish.
• Getting Started with ActionScript 3.0 in Adobe Flash CS3
  With Flash CS3 comes support for ActionScript 3.0 – the newest, standards-based programming language for Adobe Flash (SWF) movies and applications. More so than in the past, you may find it difficult to get started with ActionScript 3.0 when compared to older versions of ActionScript. This articel includes a Brief History of ActionScript in Flash. 5 pages!
• Macromedia Flash MX Tutorials
  This set includes a number of newbie tutorials for shape tween effects, playing with text, frame by frame animation etc.
• Kirupa: Flash and ActionScript tutorials
  A growing collection of text and video tutorials for drawing, special effects, ActionScript, Server Side and Flash, isometry and game development.
• TheFlashBlog Tutorials
  93 simple and advanced Flash tutorials.

Related posts:

1. Adobe Illustrator Tutorials – Best Of(copy from smashingmagazine.com)
2. 15 of the Most Promising Flash CMS Solutions
3. 15 Detailed Expert Tutorials for ActionScript 3

Author: Daniel Apt

Hi there, I’m Daniel! I’m a 17-year-old Dutch web designer. I have a passion for all forms of design. I’ve been working with Flash for 5 years.

The Pros: Graphics

Animation:

Flash is a great animation tool, you can use tweens and/or frame by frame animation to create animations. These days jQuery can create some nifty animations (click on the links for transitions), but I doubt that jQuery would be capable of creating a transition similar to the ones found on Davi-T’s website.

3D:

Since the advent of Flash CS4 it is possible to work in 3D (well, sort of) the 3D in Flash CS4 allows you to move objects around in 3D space, however these objects won’t have depth. Luckily there are several ActionScript libraries which are capable of creating some amazing 3D graphics. Just look at the Papervision3D site. There are of course other libraries than Papervision3D, like Away3D and FIVe3D.

(Web)Camera and Microphone interaction:

With Flash it’s not that difficult to access the webcam and/or microphone. If we’d want to use either of those, Flash would be the easiest (online) solution.

Browser consistency

If you have ever developed an HTML / CSS site, you have probably encountered browser inconsistencies. Luckily Flash sites don’t have any inconsistencies throughout browsers, there are actually only two things necessary to get a Flash site working. The browser must have the (correct) Flash Player Plugin installed and ideally JavaScript should be enabled (actually JavaScript is not necessary to get Flash working, however JavaScript is often used in combination with Flash, like SWFObject and SWFAddress).

So is this is a big problem? Not really. Adobe states on their site that content for Flash Player reaches 99% of internet-enabled desktops. And W3Schools states that in January 2008 only 5% had JavaScript disabled. Over the years this amount has been decreasing consistently. It’s safe to say that a vast majority of users will be able to use your Flash site, and we’ll discuss later how to make your site usable for people without the Flash Player Plugin and/or JavaScript.

Luckily there’s a solution to this, namely SWFObject. SWFObject is a JavaScript script which is able to display an alternative content to people who don’t have the (correct) Flash Player plugin, we’ll discuss SWFObject more thoroughly during the SEO part of this article.

The cons: Browser Inconsistency

Ok, sorry guys, I haven’t mentioned one small browser inconsistency. Because of a patent ruling, plug-ins which are loaded by the use of <embed>, <applet> and/or <object> tags are only interactive after the user clicks on them. Now this actually only seems to happen in Internet Explorer, meaning that in IE your Flash site won’t be able to respond to the user before it has been activated.

Again SWFObject can help us remove this click-to-activate behavior. By simply embedding a Flash movie with SWFObject, the click to activate behavior disappears. On Kirupa there’s a great tutorial explaining how to use SWFObject to solve the embedding problem.

Content Management

With any site that you run or own, you’ll want the freedom to manage the content within it. The most important thing is that you go dynamic; load your content externally so you’re free to change it as often as is necessary. Use static text fields only if you’re sure you’ll never change the text inside those fields.

It’s very common to store your content in an XML file, then within your Flash site you’ll load this XML file and display its contents.

Here an example, we have our XML file named content.xml:

<root>
	<bio>
		Hi there my name's Daniel.
	</bio>
</root>

Then we could access its contents inside Flash with a script like the following:

//create our text field
var bio_text:TextField = new TextField();
bio_text.width=400;
bio_text.height=400;
addChild(bio_text);

//our request
var request:URLRequest=new URLRequest('content.xml');

//load our request
var loader:URLLoader=new URLLoader(request);

//when loader has finished loading, call the function displayContent
loader.addEventListener(Event.COMPLETE, displayContent);

function displayContent(event:Event) {
	//store the data of the loader in a variable named xml
	var xml:XML=new XML(event.target.data);
	var xmlList:XMLList = new XMLList(xml);

	//change the text of bio_text to what's inside the <bio> tags
	bio_text.text=xml.bio;
}

Now that our content is stored externally (not inside our Flash site), it’s easier to manage it.

Luckily there are of course Content Management Systems (CMS) specially built for Flash, which make content management a lot easier. On Designm.ag there’s a good article to read, 15 of the Most Promising Flash CMS Solutions.

SEO

Before we even start discussing anything about SEO, it’s important to know how search engines work. Little programs “crawl” over the web in search of content which can be indexed to a search engine. These programs are called bots, spiders, ants and probably something else too.

These bots will index the HTML content of a page, though (here comes the problem) Flash is simply embedded in the HTML of a page, so the search engine bot has no idea what’s inside it. If we want search engines to index our site, we need to point them to HTML content which it can index.

So now we really can start talking about SEO, what is SEO actually? Well Wikipedia succeeds in explaining it spot on:

Search engine optimization (SEO) is the process of improving the volume or quality of traffic to a web site from search engines via “natural” or un-paid (“organic” or “algorithmic”) search results.

Basically we have one problem which we’re trying to solve:

“How can I make the content inside my Flash site accessible to search engines?”

Luckily there are several solutions. Let’s go through them one by one:

SWFObject

SWFObject is a JavaScript script which makes it possible to display an alternative content to the user, if he or she has no (or an outdated) Flash Player Plugin. And if the user doesn’t have JavaScript, it degrades gracefully. SWFObject has three advantages:

1. Search engine bots will read the alternative content. This can help make your Flash site search engine friendly.
2. Not only bots will read the alternative content, people who don’t have the (correct) Flash Player Plugin will also see it.
3. As already mentioned in the Graphics section, SWFObject removes the click to activate box in Internet Explorer.

However SWFObject has one small problem, it will display an alternative content for the whole Flash movie, of course it is a bit too much to display all the content of our flash site on one page as alternative content. Ideally we would want to display the alternative for the specific page the bot or user is visiting.

Now I haven’t found a well documented solution, however I’ve decided to use a combination of Flash detection and SWFAddress. Let me first explain what SWFAddress is.

SWFAddress

George Kendros explains in his tutorial Build a Simple Website Template Using SWFAddress spot on what SWFAddress does:

SWFAddress is a Javascript/ActionScript library which gives you the power to change the browser’s URL, add entries to its history list and fire off ActionScript events when the URL changes. It also allows search engines to find specific content in your site.

With SWFAddress we can utilize so-called deep linking. A deep link is a link which points to a specific page instead of the home page. This means we can use SWFAddress to link to a specific page inside our Flash site.

So what are we going to do?

First we’re going to build an HTML site, this HTML site will be for bots and users who can’t view our Flash site. We’ll also use a Flash detection script, which will redirect the user to the Flash site, if the user has the correct Flash Player Plugin. The redirecting will use deep linking, thus we can redirect the user to the same page, but within the Flash site.

How do we detect if the user has the correct Flash Player Plugin installed? Well there’s an article on Kirupa named Flash Detection Scripts. There you’ll find a Flash detection script, which I’ve edited a bit:

function redirect(version, flash_url){
	var MM_contentVersion = version;
	var plugin = (navigator.mimeTypes && navigator.mimeTypes["application/x-shockwave-flash"]) ? navigator.mimeTypes["application/x-shockwave-flash"].enabledPlugin : 0;
	if ( plugin ) {
			var words = navigator.plugins["Shockwave Flash"].description.split(" ");
		    for (var i = 0; i < words.length; ++i)
		    {
			if (isNaN(parseInt(words[i])))
			continue;
			var MM_PluginVersion = words[i];
		    }
		var MM_FlashCanPlay = MM_PluginVersion >= MM_contentVersion;
	}
	else if (navigator.userAgent && navigator.userAgent.indexOf("MSIE")>=0
	   && (navigator.appVersion.indexOf("Win") != -1)) {
		document.write('<SCR' + 'IPT LANGUAGE=VBScript\> \n'); //FS hide this from IE4.5 Mac by splitting the tag
		document.write('on error resume next \n');
		document.write('MM_FlashCanPlay = ( IsObject(CreateObject("ShockwaveFlash.ShockwaveFlash." & MM_contentVersion)))\n');
		document.write('</SCR' + 'IPT\> \n');
	}
	if ( MM_FlashCanPlay ) {
		window.location.replace(flash_url);
	} else{
		//nothing needs to be done, stay at this page
	}
}

In our HTML page we can now call with JavaScript the function redirect, which will only need two parameters, namely the Flash Player version, and the URL to the page it must redirect to if the user has the correct Flash Player Plugin. Let’s say we have the following HTML Page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>About</title>
<meta http-equiv="Content-Type" content="text/html; utf-8"/>
<script type="text/javascript" src="flash detection.js"></script>
<script type="text/javascript">
redirect(10, 'http://www.example.com/#/about');
</script>
</head>

<body>
<!-- the about content -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit....</p>
</body>
</html>

We’ll focus on the 8th line. What will happen is the following; if the user has Flash Player 10, then it’ll redirect the user to http://www.example.com/#/about and afterwards SWFAddress will use deep linking to display the correct page, inside the Flash site.

Development

Creating a Flash website is tough, for multiple reasons. First you’ll need to spend a lot of time coding everything, we need to write code for almost everything. We need to code dynamic graphics, we need to code the layout, keeping things positioned where we want them. We need to code and/or animate transitions between the pages. We must load content and also display it. Creating a Flash site takes a lot of time and it’s complicated, do not take it lightly.

Luckily for us there are several frameworks which can make developing a Flash site easier. These frameworks might differ in what they offer, but each framework can help lighten your workload in a specific area.

Here are some frameworks, which might help you during development:

• Gaia
• Flash Camouflage
• PureMVC Framework

Should I have a Flash site?

I truly love Flash sites, when made properly they just look so incredibly beautiful, however there is one very important thing to remember:

Sites are about the content they communicate to the user, Flash just provides one way to display that content.

What precisely do I mean with this? Well a blog wants people to read the posts, so its design must work in a way which allows the user to easily read a post. Flash is not needed for this.

However if you’re going to create a photography portfolio site, then you want to show the the content (images) in an easy and simple way to the user. Clicking on links and waiting for the images to load is not a great user experience. Flash is a possibility to provide the content in a more intuitive way. Lesse Pedersen’s site uses a great navigation to serve the content (images) to the user.

There is also a great post on the site Wake Up Later named 6 Places that Flash Does Not Belong which I believe you all should read.

Thank you

I’ve once again had a great time writing for Activetuts+, I hope you’ve learnt something and why not join the discussion? Leave a comment, and you can of course find me on Twitter, @DanielApt.

Related posts:

1. 15 of the Most Promising Flash CMS Solutions
2. Adobe Flash Tutorials – Best of
3. Build a Simple Website Template Using SWFAddress

SWFAddress is a Javascript/ActionScript library which gives you the power to change the browser’s URL, add entries to its history list and fire off ActionScript events when the URL changes. It also allows search engines to find specific content in your site. This is all functionality which, according to its creators, is missing in today’s rich web technologies.

Let’s take a look..

Background

Before we jump right into the code, we’ll explore what SWFAddress is and how we need to adjust our work flow to use it. Essentially, SWFAddress is a javascript/ActionScript library which gives you the ability the change the browser’s URL, add entries to it’s history list and fire off ActionScript events when the browser changes its URL. SWFAddress will listen for specific browser events (URL changes) and signal its ActionScript counterpart to trigger certain events. The ActionScript class also gives us an easy to use API for controlling various browser actions (ie. changing the URL, changing the page title).

SWFAddress sites differ from some traditional sites because the navigation logic must be string based and it must have a central junction. It’s common for many flash based sites to have a unique function attached to every navigation element. For example, the first button may trigger a function showPage1() and the second could trigger a function showPage2() etc. In a SWFAddress page every navigation element will trigger the same function, namely the one that instructs SWFAddress to change the URL.

SWFAddress will also simultaneously trigger its change event at which point you will need to evaluate the current URL and decide what action to take. Once you get comfortable with this difference you’ll find that SWFAddress creates little resistance to your regular workflow. In fact, many developers already use a similar navigation architecture on their non-SWFAddress sites.

This tutorial will begin by building a basic page with 4 navigation elements. We’ll then introduce SWFAddress into the mix to give us some deeplinking support. Finally, for the advanced users, we’ll swap out our static menu/text and use an external XML file to supply the content.

Step 1: Setting Up the Workspace

Our SWFAddress powered website will consist of a few key files. We’ll need our main FLA, the SWF it compiles, an HTML page, the SWFAddress .as libraries, the SWFAddress .js libraries and the SWFObject libraries (the javascript libraries are in the swfaddress and swfobject folders).

Step 2: The HTML File

Our HTML page is a basic SWFObject dynamic embed with a line for SWFAddress. We won’t go too in depth into it since the HTML and js are beyond the scope of this tutorial. Suffice to say, the only differences between a typical SWFObject HTML template and this is the HTML on line #7 (see the line highlighted in blue).

Step 3: Basic FLA Setup

Now that the source files are in place we’ll start making our FLA. Create a new AS3 document, set its dimensions to 600 x 400px then save it to the project directory as “tutorial.fla”. We’ll also set the background color to #999999 so it looks less boring.

Step 4: Menu Items Array

For this tutorial we’re going to make an array to hold our menu items. This will make it easier to incorporate an XML based menu at a later date if you want. We’ll start by making a new layer on the timeline which we’ll call “actions”. We’ll then pull up the actions panel (with that layer selected) and use the following code:

var menuArray:Array = new Array("Home", "About Us", "Services", "Contact Us");

It should look something like this:

Step 5: Drawing the Menu Holder

Now we’re going to start making the menu. We’ll make a new layer (call it “menu”) and begin by drawing a simple 400 x 50px rectangle with a 2px corner radius on the new layer. The color isn’t important because we’ll tweak it later.

Step 6: Converting the Menu to a Movie Clip

Now we’ll select the menu and press F8 to convert it to a movie clip. We’ll give it a library identifier of “menu” and an instance name of “menuHolder”.

Step 7: Making the Menu Background

Double-click on the newly created menu movie clip to enter its edit mode. We’ll select the shape inside and again convert it to a movieclip (F8). This time however, we’ll be applying a 9 slice scaling grid to it. We do this so we can have a background for the menu that we can scale cleanly without having to scale the menu itself. We’ll give it a library and instance name of “menubg”.

I’ve also added a subtle blue glow to the menu using a glow filter with the blurx and blury set to 6, strength set to 50% and the color set to #32CCFF.

Step 8: Drawing the Menu Items

Now we’ll go back to the main document and begin creating the actual menu items (ie. the “links” that will populate the menu). Although we’re drawing these on the main document we could draw them anywhere as they’ll be dynamically added to the stage later. We’ll first create a textfield and set it to dynamic and give it an instance name of “txt”. We’ll set the font to Arial, the size at 22pts and the color to white #ffffff. Make sure the textfield is not selectable (the first button below the anti-alias drop down menu). Finally, we’ll embed the font. You can use any font you like, but you’ll need to remember to adjust the font size so that it fits the menu height wise.

Step 9: Exporting Menu Items for ActionScript

We’ll now convert the menu items to movie clips, but we’ll need to take an extra step since we’ll be re-using this movie clip in our ActionScript. Select the textfield and press F8 to bring up the movieclip dialog, input “menuItem” into the name field then select the “Export for ActionScript” check box. Once done click OK, then click OK again on the following confirmation dialog (it may not appear depending on your settings).

Step 10: Creating the Menu Items (ActionScript)

We’ll use the following code to populate the menu with the appropriate menu items:

var xval = 20;

for (var i:int = 0; i<menuArray.length; i++){
var clip = new menuItem
clip.txt.autoSize = 'left'
clip.txt.text = menuArray[i]
clip.x = xval
clip.y = (menuHolder.height/2) - (clip.height/2)
xval += clip.width + 30
menuHolder.addChild(clip);
}

menuHolder.menubg.width = menuHolder.width + 20;
menuHolder.x = (stage.stageWidth/2) - (menuHolder.width/2)

Basically we’re looping through the elements of our array and for each element creating a new instance of menuItem. Then we’re setting the textfield inside menu item to “autoSize = left” so that it expands to fit the text that’s placed inside it. The next line sets the text inside the textfield according to the array element which corresponds with the current iteration of the loop. xval is a variable we use that stores the position of the menu item so we can place them beside each other. Then we center the menu Item within the menu and finally add the menu Item’s width and the padding value to xval. Next we add the menu item to the menuHolder. The last 2 lines of code make the menuHolder’s background stretch to fill the menu holder (we add 20px for padding) and center the menu on the stage.

Step 11: Creating the Content Area

Before we move on to assigning actions to the menu items and setting up SWFAddress, we’ll need to create some content to display. For the sake of simplicity we’ll use the default flash tweening engine. Create a new layer called content. On this layer create a rectangle measuring 500 x 250px and convert it to a movie clip with an instance name of “content”.

Step 12: Adding Textfield to Content Area

Now that we’ve created the content area we’ll double click it to enter edit mode and place a dynamic textfield on it. This textfield should be the almost as large as the “content” movie clip. We’ll use the same text settings as the menu (arial 22pt, white) with fonts embeded. We’ll give it an instance name of txt and change the behavior (under paragraph settings) to multi line.

Step 13: Creating the content

Now let’s create some content that we can populate the content area with when menu items are selected. For the sake of simplicity we’ll just create 4 different string variables, but in a more advanced site you would likely be replacing this with some external data source. Add the following 4 variables to our ActionScript code:

var text1:String = "This is the text for the Home page"
var text2:String = "Here is the text that you would see on the About Us page"
var text3:String = "This page would feature the various services we provide"
var text4:String = "These are the various methods you can get in contact with us. You will also find a map here"

You can place these near the top of the code.

Step 14: Making the Textfield’s Change Function

We’ll now create a simple function that changes the textfield’s content and animates the transition. Paste in the following code then we’ll explore it line by line:

import fl.transitions.Tween;
import fl.transitions.easing.*;
var cTween:Tween = new Tween(content, "x", Regular.easeOut, 50, 50, .1,true);
var mainText:String

function textChange(){
cTween.continueTo(-800, .4);
cTween.addEventListener("motionFinish", setText)
}

function setText(e:Event){
content.txt.text = mainText
cTween.continueTo(50,.4)
}

The first 2 lines simply import the tween class and easing functions. The next line initializes the tween so we can more easily manipulate it with the continueTo function. The 4th line creates a variable which holds the current string, this variable will be set by SWFAddress and the content area will load this variable into its textfield whenever it’s tweening back into position. The textChange function tweens the content area off to the side and sets an event listener to trigger the setText function when it’s done. The setText function tweens the content area back on stage and sets its textfield to whatever mainText has been set to by SWFAddress.

Step 15: Initializing SWFAddress

To initialize SWFAddress we simply need to add its CHANGE event and create that event’s handler. These few lines of code will do it;

SWFAddress.addEventListener(SWFAddressEvent.CHANGE, addressChange)

function addressChange(e:Event){
//stuff to do when address changes
}

The “addressChange” function will run every time the browser changes the URL (via back/forward buttons, re-writing the address bar URL or any other method) or you change the URL (via the SWFAddress.setValue function).

Step 16: Adding Actions to the Menu Items

Our next step is to add some behavior to the menu buttons we created earlier. We’ll be doing this by revisiting the menu creation loop we built earlier.

var xval = 20

for (var i:int = 0; i<menuArray.length; i++){
var clip = new menuItem
clip.txt.autoSize = 'left'
clip.txt.text = menuArray[i]
clip.x = xval
clip.y = (menuHolder.height/2) - (clip.height/2)
xval += clip.width + 30
menuHolder.addChild(clip);
clip.addEventListener('click', menuClicked)
}

The last line before the closing brace is the one we need to add. It creates an event on the menu items that fires when a menu item is clicked. We’ll now need to add the corresponding event handler.

var xval = 20;

for (var i:int = 0; i<menuArray.length; i++){
var clip = new menuItem
clip.txt.autoSize = 'left'
clip.txt.text = menuArray[i]
clip.x = xval
clip.y = (menuHolder.height/2) - (clip.height/2)
xval += clip.width + 30
menuHolder.addChild(clip);
clip.addEventListener('click', menuClicked)
}

function menuClicked(e:Event){
SWFAddress.setValue(e.currentTarget.txt.text)
}

The last three lines of code we added are executed every time a menu item is clicked. It instructs SWFAddress to execute its setValue function which changes the page and fires its CHANGE event handler. The parameter we’re passing to the setValue function is the text of the menu item that the user has clicked.

At this point, if we uploaded the files to our web server and tested the HTML file, we would have the address URL changing as we clicked the buttons but the file wouldn’t do anything as we haven’t told SWFAddress what to do when the address changes.

Step 17: SWFAddress Actions

We now have the menu set up and the menu buttons are properly triggering SWFAddress. The last part of the equation is to tell SWFAddress what to do when it’s triggered. Earlier in the tutorial (Step 15) we created the SWFAddress event listener and handler. We’ll revisit that block of code and add the following:

SWFAddress.addEventListener(SWFAddressEvent.CHANGE, addressChange)

function addressChange(e:Event){

if(SWFAddress.getValue() == "/Home"){
mainText = text1
textChange()
}

if(SWFAddress.getValue() == "/About Us"){
mainText = text2
textChange()
}

if(SWFAddress.getValue() == "/Services"){
mainText = text3
textChange()
}

if(SWFAddress.getValue() == "/Contact Us"){
mainText = text4
textChange()
}

SWFAddress.setTitle(SWFAddress.getValue());
}

The key difference is all the code inside the “addressChange” function. We created several conditional statements that check what the current page is, set “mainText” to the appropriate text then launch the “textChange” function which is responsible for animating the transition and setting the text of the content area. The last line sets the page’s HTML title to the current page. This function could be cleaned up with a switch case, but for the sake of simplicity we’ll leave it as is.

Step 18: All Done

Your files should now match the ones in the source files. Publish the FLA, upload the files to your server and you’ll now have a fully functional page.

Conclusion

We’ve now completed our simple SWFAddress powered page. This file should serve as a suitable base for any SWFAddress site and can easily be extended with dynamic content with minimal extra code. I hope you enjoyed following along!

Related posts:

1. Simple Page Peel Effect with jQuery & CSS
2. 15 Essential Checks Before Launching Your Website
3. Flash Websites: the Pros and Cons