AllFlashWebsite Template, CASA Release [AS2] · Apr 3, 11:24 PM

Based on the original AFW Template. This version uses CASA to accomplish the same thing, only better. Here is the original description:

This template attempts to be a complete solution you can use for any Flash website that needs features going beyond the trivial Flash animation doohickey. Don’t judge the template by the unattractiveness of the demo (it’s pretty ugly). It isn’t meant to offer you any visual styling help, whatsoever. That’s all up to you. Hopefully you’re a Flash developer who creates original, interactive sites that actually use Flash to push the boundaries of the browser beyond HTML. This template allows you the flexibility to create whatever kind of site you want, but offers a framework which will help you work more efficiently and create a site that is highly compatible in many different ways. Some of the benefits include cross-browser compatibility, CMS, effortless SEO, mixing flash and non-flash content, XML in Flash, RSS in Flash, Printing from Flash…

See the demo here (this is the demo of the non-CASA version)

For additional information, please read about the first version of the AFW Template.

See the new demo here

In this new release, the Textpattern stuff has not changed. However, the Flash side is significantly different. The code is more straightforward, and more robust.

Download AllFlashWebsite Template, CASA Release

Download AllFlashWebsite Template, CASA Release

After you download and unzip the archive, copy all the files and folders inside the www folder to your website’s root directory (this can be any folder on your web server that you chose). Now read the original AFWTemplate installation instructions which will explain how to setup Textpattern.

Where to Start

You should treat most of the .fla files included with the template (except main.fla) as crude examples of implementing different features. If developing a project from the beginning, main.fla can be your starting point. main.fla is the only file that has been adopted from the original template to use the CASA Framework. The rest of the flash files are mostly unchanged from the original template.

Whether you use CASA in the rest of your project is up to you. If you prefer to use a different Framework, you might (optionally) want to port main.fla. If you don’t currently use a framework in your project, I highly recommend using CASA as it will improve your coding speed and efficiency.

To learn more about CASA, start by reading the Quick Tips and Articles at the CASA Wiki. The CASA documentation is also filled with examples.

main.fla Overview

main.fla handles all the movie loading and integration with SWFAddress. Depending on project requirements, it might make sense to store the locations of various media files as XML documents on the server. (For this purpose, you can manage the XML via the Textpattern CMS in a similar way that the AFW Template flash movies read XML stored in Textpattern Articles.) The template takes a simpler approach by embedding the filenames in main.fla.

main.fla stores a preloader animation and the navigation components in it’s library. Both the preloader animation and navigation components are controlled via the ActionScript in the actions layer (frame 2) of the main timeline.

main.fla ActionScript (frame 2)

The first bit of code loads dependencies used by main.fla.

  1. import org.casaframework.load.media.MediaLoad;
  2. import org.casaframework.time.Chain;
  3. import org.casaframework.time.Sequence;
  4. import org.casaframework.time.EnterFrame;
  5. import org.casaframework.time.FrameDelay;
  6. import org.casaframework.util.MovieClipUtil;
  7. import org.casaframework.layout.DistributionCollection;
  8. import mx.utils.Delegate;
  9. import org.casaframework.math.geom.Rectangle;
  10. Download this code: /files/code-tcasa-1.1.txt

MediaLoad replaces Flash’s builtin loadMovie() function.
Chain manages events allowing a queue of tasks to execute in order, one at a time.
Sequence “Creates a sequence of methods calls at defined times”.
EnterFrame replaces Flash’s builtin onEnterFrame
FrameDelay “Helps prevent race conditions by allowing recently created MovieClips, Classed, etc… a frame to initialize before proceeding”
MovieClipUtil replaces Flash’s builtin attachMovie() function.
DistributionCollection and Rectangle are used to layout movie clips loaded into main.fla.

The next snippet defines the function required by SWFAddress. Any time a change takes place in the Flash application that requires the address bar to change, handleChange() should be invoked. You will want to modify this function to suite your project requirements.

  1. // SWFAddress calls this function when the address changes
  2. // (2 Ways: The Browser's address bar , or SWFAddress.setValue())
  3. function handleChange(event:SWFAddressEvent) {
  4. trace("handleChange");
  5. var path_arr = extractPaths(event.path);
  6. var movie_name = (path_arr[0] == "" or path_arr[0] == undefined) ? "index" : path_arr[0] ;
  7. trace("movie_name: "+movie_name);
  8.  
  9. if (movie_name == "index") {
  10. doLoadMovie("index.swf", movie_name, new Array("xml", "index"));
  11. } else if (movie_name == "gallery") {
  12. doLoadMovie("AFWGallery.swf", movie_name, path_arr);
  13. } else {
  14. doLoadMovie("article.swf", movie_name, path_arr);
  15. }
  16.  
  17. // Set the title bar text
  18. var flink = (path[0] eq '') ? '' : ': ' + path.join(" / ") + '';
  19. SWFAddress.setTitle('AFW' + flink);
  20. }
  21. SWFAddress.addEventListener(SWFAddressEvent.CHANGE, Delegate.create(this,handleChange));
  22. Download this code: /files/code-tcasa-1.2.txt

The handleChange() function calls doLoadMovie() which handles all of the loading using CASA’s MediaLoad, Sequence, Chain, and DistributionCollection. When doLoadMovie() loads a movie, it waits 1 frame to allow the movie to initialize, then calls the movie’s setPath() function and passes a single argument, an array that represents the current URL path. Therefore, every movie loaded by main.fla should define a setPath() function which allows that movie to change state as the URL path changes.

  1. function doLoadMovie(url, movie_name, path_arr) {
  2. trace("path_arr: "+path_arr);
  3. if (this.curr_movie != movie_name) {
  4.  
  5. // If a movie is already loading, abort before loading the new one
  6. if (this.mediaLoad.isLoading()){
  7. this.mediaLoad.stop();
  8. this.mediaLoad.destroy();
  9. this[curr_movie].removeMovieClip();
  10. curr_movie = last_movie;
  11. }
  12.  
  13. last_movie = curr_movie;
  14. curr_movie = movie_name;
  15.  
  16. // create an empty mc for the movie we're loading
  17. var mc = this.createEmptyMovieClip(movie_name, this.getNextHighestDepth());
  18.  
  19. // add the new movie to the distribution, which will handle positioning
  20. this.distribution.removeItem(this[last_movie]);
  21. this.distribution.addItem(mc,1);
  22. this.distribution.positionItems();
  23. this.mediaLoad = new MediaLoad(mc, url,true);
  24.  
  25. // Add an event observer to display load progress
  26. this.mediaLoad.addEventObserver(this, MediaLoad.EVENT_LOAD_PROGRESS, "onMediaLoadProgress");
  27.  
  28. // prepare call to setPath()
  29. var seq:Sequence = new Sequence(false);
  30. seq.addTask( new FrameDelay(mc, "setPath", 0, path_arr) , "start", 0);
  31.  
  32. // The chain will start the MediaLoad, then wait for an onEnterFrame event before calling this.loadMediaComplete()
  33. // We wait a frame because Flash is wierd like that
  34. // (See org.casaframework.time.FrameDelay Help for additional information)
  35. var chain:Chain = new Chain(false);
  36. // loads the file
  37. chain.addTask(this.mediaLoad, "start", MediaLoad.EVENT_LOAD_INIT);
  38. // waits 1 frame
  39. chain.addTask(this.pulseInstance, "start", EnterFrame.EVENT_ENTER_FRAME);
  40. // calls mc.setPath()
  41. chain.addTask(seq, "start", Sequence.EVENT_COMPLETE);
  42. // transition
  43. chain.addEventObserver(this, Chain.EVENT_COMPLETE, "loadMediaComplete");
  44. chain.start();
  45.  
  46. } else {
  47. // Since this movie is the curr_movie, just call setPath
  48. this[movie_name].setPath(path_arr);
  49. }
  50. }
  51. Download this code: /files/code-tcasa-1.3.txt

— Pickle

---

Comment

Textile Help