TweetFollow Us on Twitter

Macromedia Flash; Visual vs. Language-Based programming

Volume Number: 18 (2002)
Issue Number: 8
Column Tag: Reviews

Macromedia Flash; Visual vs. Language-Based programming

by Bradley Kaldahl and Jacob Kirk

Macromedia Flash has taken the web by storm and with it a new programming paradigm has evolved that we refer to as "Visual Programming." Non-traditional "Visual Programmers" are producing algorithms that are really quite intriguing. In some respects this new visual paradigm represents an opportunity to create algorithms based on visual logic, which is an interesting alternative to traditional language-based algorithms. Please read on to see if you agree.

In the traditional language-based programming paradigm, the developer relies almost completely on the programming code to accomplish the desired task. While several highly respected authors such as Grady Booch and Coad & Yourdon have created visual diagram-based models for OO development, ultimately the design is translated into code. On the other hand Flash allows both design and implementation in a visual environment. This visual style of programming obviously has a strong appeal to certain individuals, most notably creatives, designers, and those unfamiliar with traditional programming languages and conventions.

Any programmer called upon to work or consult on an ActionScript project should be aware of the issues and idiosyncrasies of this new trend in "Visual Programming" as they will likely encounter legacy code that has been developed using the visual paradigm.

Problem definition

To contrast the visual paradigm with the language-based approach we have defined a simple programming problem.

Using Macromedia Flash 5, animate an object to move across the stage. When the user rolls-over the object have it reverse direction.

If you are familiar with Flash and ActionScript then we hope that you will enjoy the contrast of these two disparate techniques. If you are new to ActionScript we hope you will benefit from our discussion of some of the programming anomalies you will encounter in Flash when using the language-based approach.

Anomalies in ActionScript

While ActionScript resembles JavaScript, it is helpful to remember that ActionScript must conform to the animation and encapsulation features found in Flash. One of the more noticeable programming differences you will encounter in Flash is that you cannot animate an object using a standard FOR or WHILE repeat loop. There has been some debate as to why this is the case. Some have suggested that it is because the computer can execute a repeat loop at a much faster rate than the screen can redraw. While on the surface this sounds plausible, it suggests that computer animation within a repeat loop cannot be accomplished. According to Michael Williams, Associate Product Manager at Macromedia: "The issue here is not the fact that FOR and WHILE execute too quickly, it is because ActionScript, on a frame, executes before the stage is updated. The stage is only updated after all scripts on that frame have been executed."

If you do attempt to use the FOR or WHILE repeat loop for animation you will most likely encounter the following alert.


Figure 1. Flash places a 15 second time-out limit on FOR and WHILE repeat loops.

Mr. Williams explains: "The Flash Player itself provides this option to abort the script. The Flash Player will do this when it plays a movie which contains a one-frame ActionScript loop which can repeat itself indefinitely or for too long. A movie with such a loop can tax the resources of the computer system playing it. Giving viewers the option to end the script helps the Flash Player prevent an SWF file from freezing the viewer's browser or system. To avoid creating a movie that triggers this error message when it is played in the Flash Player, create a loop that goes through frames. You can do this by evaluating a variable in an if statement and, if the variable conditionalizes as true, then have the movie break the loop by going to the next frame. If the variable does not conditionalize as true, then have the movie loop back to the first frame (usually two to three frames back) of the movie."

The question still remains: How can an object be animated and controlled with ActionScript?

As discussed by Mr. Williams: "Use ActionScript applied to a Movie Clip, also known as clipEvents. For example, you have a movieClip on stage named "circle" the following code will move the circle across the X axis 10 pixels once per frame:

onClipEvent(enterFrame) {
    _x += 10;
}

This is dependent on the frame rate of the movie. In the default case this will refresh 12 frames/sec, but this can be increased or decreased by changing the movies frame rate at authortime."

The Language-Based Solution

PsuedoCode

Move the object by 15 pixels per frame.
   If the object goes off the left edge of the stage 
      then place the object on the right side of the stage.
   If the object goes off the right side of the stage
      then place the object on the left side of the stage.
When the user rolls-over the object
   stop the object from moving.
When the user rolls-off the object
   reverse the direction of the object.

Listing 1: Language-Based MovieClip Script

Animate and wrap object.
/* onClipEvent(load) is being used to define some of the variables.
The variable moveAmount is the number of pixels the object will be animated.

ballLoc: (ball location) is used to define the location of the center point of the movieClip that 
encapsulates the ball-Button object. 

_parent: is a relative reference to the movieClip that encapsulates the ball object.*/

onClipEvent (load) {         
   moveAmount = 15;   
   ballLoc = _parent
               
}

/* The (enterFrame) clipEvent is the animation repeat loop used by Flash.
ballLoc._x += moveAmount will move the object by the moveAmount each time a new frame is called. The 
two IF statements (with the magic numbers) are checking to see if the object has exceeded the left or
right edge of the stage. They are set to create an object wrap so the object appears to leave one 
edge and return on the opposite edge of the stage. */

onClipEvent (enterFrame) {
   ballLoc._x += moveAmount;
   if (ballLoc._x>640) {
      ballLoc._x = 0;   
   }
   if (ballLoc._x<0) {
      ballLoc._x = 640;
   }
}

Listing 2: Language-Based Object Script

Reverse object direction.

/* This script is placed inside a button object on the stage. 
Both rollOver and rollOut use the this. reference which insures that only the object that received 
the event will have its variables altered. If multiple instances of the ball object were used without 
the this. parameter all the objects on the stage would reverse direction. storePosition is a global 
variable created on the fly. It holds the original moveAmount before temporarily setting the 
moveAmount to 0 to stop the object. rollOut restores the original moveAmount, then reverses the 
direction of the object by setting it to the opposite of its original value. */

   on (rollOver) {
      this.storePosition=moveAmount;
      this.moveAmount=0;
      }
   on (rollOut) {
      this.moveAmount = storePosition;
      this.moveAmount = moveAmount *-1;
      }

Since the programmer has taken control of the object with ActionScript, knowledge of the timeline is not needed. This animation takes place on a single frame. However, the developer does need to know how to create a button symbol since it is the only object that will respond to a rollOver event. Additionally the developer needs to know how to encapsulate the button in a movieClip symbol, since it is the only object that will accept a clipEvent.

In contrast the visual solution, presented below, utilizes the Flash timeline and its tweening capabilities to create the movement. The animation capabilities of Flash simplify the scripting.

The Visual Solution

Some might refer to the visual solution as a "designers approach" or a "non-programmers" solution, but to minimize it would be inappropriate as it demonstrates many of the features that programmers strive for when creating an algorithm. It is simple, elegant, fast and responsive, and with Flashs built-in encapsulation capabilities, it is easily reusable. Bradley Kaldahl refers to the visual algorithm presented below as "Equal Parallel Inverse Animation's," or EPI.

Description of the visual solution

Frame #            Frame #
1------------------------40 *      100-----------------140**
 >>>>>>>>>>>>>>>      <<<<<<<<<<<<<
Animate Left to Right      Animate right to left
   * = Script to loop back to frame 1
   ** = Script to loop back to frame 100

The object is animated to move from left to right (frame 1-40) using a motion tween. In frame 1 the object is on the LEFT side of the stage and in frame 40 the object is on the far RIGHT. When the animation playback-head reaches frame 40 it loops back to frame 1 using a simple "gotoAndPlay" navigation script placed on the timeline. An equal inverse animation is created further out on the timeline, in which the object is animated from right to left (frame 100-140). In frame 100 the object is on the RIGHT side of the stage and in frame 140 the object is on the LEFT. The two animation's are on the same timeline but move in opposite directions as shown in Figure 2.


Figure 2. The Animation Timeline

When the animation begins, the playback head is looping from frame 1-40, i.e., the object is moving from left to right. To capture the rollOver event and jump the playback-head to the inverse animation another simple navigation script is placed inside the object.

On RollOver
gotoAndPlay frame (x of the inverse animation)
End RollOver

It is important to note that there are two separate instances of the ball object shown in figure 2 above. Each instance of the ball object can have a different script. The first instance begins on frame 1, and the second instance begins on frame 100. (Technically speaking there are actually 4 instances of the ball because each keyframe on the timeline represents an instance. Frame 40 and frame 140 both display a one frame instance of the ball object. For the sake of discussion we will refer to the first animation as instance one and the second animation as instance two). To view the code in the first instance of the ball object you would click on frame 1 on the timeline then click on the ball object on the stage. To view the code in the second instance of the ball object, click on frame 100 on the timeline then click on the ball object on the stage.

The final question is: Which frame in the inverse animation will produce a smooth reverse?

Algorithm - Equal Parallel Inverse Animation's with Flash

Flash provides an easy-to-use property called _currentFrame, which provides the number of the frame when the event occurs. Using this property the following algorithm finds the inverse frame in the reverse animation.

    Inverse of first the first animation instance = Number of Frames in the Animation - Current Frame Number + Distance to the Reverse Animation or (NFA - CFN + D2RA = Inverse).

    Inverse of the second animation instance = Distance to the Reverse Animation - Current Frame Number + Number of Frames in the Animation or (D2RA - CFN + NFA = Inverse).

For example, using figure 2 and discussion above, if the user rolled over the object while it was on frame 23... NFA(40) - CFN(23) + D2RA(100) = Frame number 117.

By jumping the playback head to frame 117 the object appears unchanged with the exception of reversing direction of movement.

Listing 1: Visual Solution, first animation timeline loop script

Placed in frame 40 of the timeline
gotoAndPlay (1);

Listing 2: Visual Solution, second animation timeline loop script

Placed in frame 140 of the timeline
gotoAndPlay (100);

Listing 3: Visual Solution, first object instance script

Placed in the first instance of the object
// The Number of Frames in the Animation = 40;
// Distance to the Reverse Animation = 100;
on (rollOver) {
   stop ();
}
on (rollOut) {
   gotoAndPlay (40 - _currentFrame + 100 );
}

Listing 4: Visual Solution, second object instance script

Placed in the second instance of the object
on (rollOver) {
   stop ();
}
on (rollOut) {
   gotoAndPlay (100 - _currentframe + 40 );
}

Encapsulation

Encapsulation is what really makes Flash so powerful. Converting either the language or visual animation into a movieClip not only captures the animation but also encapsulates both Frame and Object scripts. Basically a movieClip becomes a self contained animated object that knows how it should behave to specific events. Once encapsulated as a movieClip multiple copies can be dropped on the stage and each plays independently. We have encapsulated and extended the code from this article to produce a couple of different web games. The games and source code can be found at www.hotFlashBook.com

Conclusion

While certain problems clearly require a language-based solution, such as score keeping in a game, a variety of other functions are more easily accomplished using the visual paradigm. To see two examples that appear fairly complex but were easily accomplished using the visual solution visit the web site listed below. The fact that these functions can be accomplished with little code and an aptitude for logical thinking makes it easy to see why many creatives are so excited about Flash. It is interesting that, when presented with a Flash problem, we both tend to look for code-based solutions first, yet on several occasions we have been delighted to discover simpler visual solutions that met our needs. One thing that is clear is that ActionScript programmers need to be familiar with Flash and its visual capabilities as well as the scripting language. An excellent resource for both novice and experienced Flash users is the book EZ Flash 5 by Bradley Kaldahl. It uses short 2-8 page hands-on projects to provide a wealth of both visual and code-based ideas and solutions. To find out more about the book EZ Flash 5 visit www.hotFlashbook.com

Acknowledgements

Special thanks to Michael Williams, from Macromedia, for your insight and information and to Suzy Ramirez, from Macromedia, for your wonderful assistance.


Bradley Kaldahl is a professor of Computer Publishing at Montgomery College and is author of the book EZ Flash 5. You can contact him through www.hotFlashBook.com

Jacob Kirk is a Designer, Teacher, Author and an all around Interactive Web "Whiz-kid". He specializes in using Macromedia Flash and Adobe LiveMotion. More information about what Jacob is up to can be found at www.EmazingMedia.com.

 

Community Search:
MacTech Search:

Software Updates via MacUpdate

Dropbox 193.4.5594 - Cloud backup and sy...
Dropbox is a file hosting service that provides cloud storage, file synchronization, personal cloud, and client software. It is a modern workspace that allows you to get to all of your files, manage... Read more
Google Chrome 122.0.6261.57 - Modern and...
Google Chrome is a Web browser by Google, created to be a modern platform for Web pages and applications. It utilizes very fast loading of Web pages and has a V8 engine, which is a custom built... Read more
Skype 8.113.0.210 - Voice-over-internet...
Skype is a telecommunications app that provides HD video calls, instant messaging, calling to any phone number or landline, and Skype for Business for productive cooperation on the projects. This... Read more
Tor Browser 13.0.10 - Anonymize Web brow...
Using Tor Browser you can protect yourself against tracking, surveillance, and censorship. Tor was originally designed, implemented, and deployed as a third-generation onion-routing project of the U.... Read more
Deeper 3.0.4 - Enable hidden features in...
Deeper is a personalization utility for macOS which allows you to enable and disable the hidden functions of the Finder, Dock, QuickTime, Safari, iTunes, login window, Spotlight, and many of Apple's... Read more
OnyX 4.5.5 - Maintenance and optimizatio...
OnyX is a multifunction utility that you can use to verify the startup disk and the structure of its system files, to run miscellaneous maintenance and cleaning tasks, to configure parameters in the... Read more
Hopper Disassembler 5.14.1 - Binary disa...
Hopper Disassembler is a binary disassembler, decompiler, and debugger for 32- and 64-bit executables. It will let you disassemble any binary you want, and provide you all the information about its... Read more
WhatsApp 24.3.78 - Desktop client for Wh...
WhatsApp is the desktop client for WhatsApp Messenger, a cross-platform mobile messaging app which allows you to exchange messages without having to pay for SMS. WhatsApp Messenger is available for... Read more
War Thunder 2.33.0.135 - Multiplayer war...
In War Thunder, aircraft, attack helicopters, ground forces and naval ships collaborate in realistic competitive battles. You can choose from over 1,500 vehicles and an extensive variety of combat... Read more
Iridient Developer 4.2 - Powerful image-...
Iridient Developer (was RAW Developer) is a powerful image-conversion application designed specifically for OS X. Iridient Developer gives advanced photographers total control over every aspect of... Read more

Latest Forum Discussions

See All

A Legitimate Massage Parlor, I Swear – T...
In this week’s Episode of The TouchArcade Show we talk about some of the major new releases on mobile this week including Warframe, we go over all the major news that came out from the Nintendo Direct Partner Showcase on Wednesday, we read our one... | Read more »
TouchArcade Game of the Week: ‘Rainbow S...
I feel like I am in a fever dream right now. What is this game that I’m playing? It’s a Rainbow Six game? But it’s all cutesy, and cartoony, and also kind of psychedelic? How is this a real thing? Well, it’s no fever dream, it is indeed a real thing... | Read more »
SwitchArcade Round-Up: ‘Promenade’, ‘Cho...
Hello gentle readers, and welcome to the SwitchArcade Round-Up for February 23rd, 2024. It’s Friday, so we have to check out the remaining releases of the week. Not so many big ones today, but a healthy crop nonetheless. After summarizing all the... | Read more »
Steam Deck Weekly: Gundam Breaker 4 and...
Welcome to this week’s slightly shorter edition of the Steam Deck Weekly. I was a bit unwell this week so no reviews in this edition, but there is a lot of news and new Steam Deck Verified and Playable games to catch up on. I have something special... | Read more »
The 10 Best Run-And-Gun Games for Ninten...
The year 2024 is a rare one, because it is a year with a brand-new Contra game. Contra: Operation Galuga might be the freshest face on the block when it comes to Nintendo Switch run-and-gun action games, but it’s hardly fighting that war alone.... | Read more »
Version 1.4 of Reverse: 1999 will be lan...
Free up your diary for February 29th, as Bluepoch has announced the impending release of the award-winning Reverse: 1999s Version 1.4 update. The Prisoner in the Cave is an Ancient Greece-themed update with new recruits, gameplay modes, and plenty... | Read more »
Premium Mobile RPG ‘Ex Astris’ From ‘Ark...
Arknights developer Hypergryph’s premium RPG Ex Astris () recently had its release date confirmed, and we finally have an extended gameplay showcase. | Read more »
Apple Arcade Weekly Round-Up: Updates fo...
Following yesterday’s big Hello Kitty Island Adventure update, a few more notable game updates and events have gone live on Apple Arcade. Cypher 007 () has gotten its first content update in a few months taking you to Egypt for five new levels... | Read more »
‘Thunder Ray’ and ‘Hime’s Quest’ Are Now...
Crunchyroll has pushed two new games into the Crunchyroll Game Vault including Purple Tree Studio’s Thunder Ray which was already on iOS before as a premium release. Shaun even reviewed it last year. Read his review here. The second game is Poppy... | Read more »
Adorable Kitty-Collector Sequel ‘Neko At...
Ya’ll. This October will mark the ten-year anniversary of Hit Point launching Neko Atsume, the adorable kitty collecting sim that has become a runaway success and essentially created a sub-genre of cozy pet-collecting life sim games. Sure, the... | Read more »

Price Scanner via MacPrices.net

16-inch M3 Max MacBook Pro on sale for $300 o...
Amazon is offering a $300 instant discount on one of Apple’s 16″ M3 Max MacBook Pros today. Shipping is free: – 16″ M3 Max MacBook Pros (36GB/1TB/Space Black): $3199, $300 off MSRP Their price is the... Read more
Apple M2 Mac minis on sale for $100 off MSRP...
B&H Photo has Apple’s M2-powered Mac minis in stock and on sale for $100 off MSRP this weekend with prices available starting at $499. Free 1-2 day shipping is available to most US addresses: –... Read more
Apple Watch SE on sale for $50 off MSRP this...
Best Buy has all Apple Watch SE models on sale this weekend for $50 off MSRP on their online store. Sale prices available for online orders only, in-store prices may vary. Order online, and choose... Read more
Deal Alert! Apple 15-inch M2 MacBook Airs on...
Looking for the lowest sale price on a new 15″ M2 MacBook Air? Best Buy has Apple 15″ MacBook Airs with M2 CPUs in stock and on sale today for $300 off MSRP on their online store. Prices valid for... Read more
Amazon discounts iPad mini 6 models up to $12...
Amazon is offering Apple’s 8.3″ WiFi iPad minis for $100-$120 off MSRP, including free shipping, for a limited time. Prices start at $399. Amazon’s prices are among the lowest currently available for... Read more
Apple AirPods Pro with USB-C discounted to $1...
Walmart has Apple’s 2023 AirPods Pro with USB-C in stock and on sale for $199.99 on their online store. Their price is $50 off MSRP, and it’s currently one the lowest prices available for new AirPods... Read more
Apple has 14-inch M3 MacBook Pro with 16GB of...
Apple has 14″ M3 MacBook Pros with 16GB of RAM, Certified Refurbished, available for $270-$300 off MSRP. Each model features a new outer case, shipping is free, and an Apple 1-year warranty is... Read more
Save $318-$432 on 16-inch M3 Max MacBook Pros...
Apple retailer Expercom has 16″ M3 Max MacBook Pros on sale for $318-$432 off MSRP when bundled with a 3-year AppleCare+ Protection Plan. Discounts are available for Silver models as well a Space... Read more
New today at Apple: 16-inch M3 Pro/M3 Max Mac...
Apple is now offering 16″ M3 Pro and M3 Max MacBook Pros, Certified Refurbished, starting at $2119 and ranging up to $530 off MSRP. Each model features a new outer case, shipping is free, and an... Read more
Apple is now offering $300-$480 discounts on...
Apple is now offering 14″ M3 Pro and M3 Max MacBook Pros, Certified Refurbished, starting at $1699 and ranging up to $480 off MSRP. Each model features a new outer case, shipping is free, and an... Read more

Jobs Board

Part-time *Apple* and Peach Research Assist...
…and minimum qualifications: + Assist with planting, pruning, and harvesting of apple and peach trees + Conduct regular maintenance tasks to ensure optimal Read more
Housekeeper, *Apple* Valley Villa - Cassia...
Apple Valley Villa, part of a senior living community, is hiring entry-level Full-Time Housekeepers to join our team! We will train you for this position and offer a Read more
Sublease Associate Optometrist- *Apple* Val...
Sublease Associate Optometrist- Apple Valley, CA- Target Optical Date: Feb 22, 2024 Brand: Target Optical Location: Apple Valley, CA, US, 92307 **Requisition Read more
Sublease Associate Optometrist- *Apple* Val...
Sublease Associate Optometrist- Apple Valley, CA- Target Optical Date: Jan 24, 2024 Brand: Target Optical Location: Apple Valley, CA, US, 92307 **Requisition Read more
Housekeeper, *Apple* Valley Village - Cassi...
Apple Valley Village Health Care Center, a senior care campus, is hiring a Part-Time Housekeeper to join our team! We will train you for this position! In this role, Read more
All contents are Copyright 1984-2011 by Xplain Corporation. All rights reserved. Theme designed by Icreon.