Penner AS2 ProFMX: Chapter 8: PhysicsAS2 classes for ProFMX Chapter 8.

We’re moving directly from Chapter 5 to Chapter 8 of Robert Penner’s Programming Flash MX.
We’re skipping Chapter 6 because it’s all about event-based programming and uses the old ASBroadcaster, so there’s no need to go into it. If you’re interested in event-based programming after reading the chapter and don’t know much about it, look into mx.events.EventDispatcher, there’s a ton of documentation out there on it.
We’re also skipping Chapter 7 because it focuses on the Motion and Tween classes that Macromedia licensed from Penner and wrapped into one mx.transitions.Tween class, so no need to recreate that class, although we will need to use it for the class I have converted in Chapter 8. Penner himself converted the other classes from Chapter 7 to AS2: the now famous easing equations that you can download from his site.

Chapter 8 begins to delve into the world of physics. Most of the chapter focuses on using the Vector class with the core principles–velocity, acceleration, force–and the relationships between them.

This chapter contains only one class: WaveMotion, which will be included in the com.robertpenner.effects namespace.

Documentation:
com.robertpenner.effects.WaveMotion

Source:
Penner AS2 ProFMX: Chapter 8 Classes

Dependencies:
mx.transitions.Tween

Posted in Flash | Leave a comment
Penner AS2 ProFMX: Updates CompleteThe robertpenner package updates are complete.

The packages for the Penner AS2 classes have been updated and my previous posts and documentation have been updated to reflect the changes. Below you will find a list of the changes that were made.

Changes:
1) The Vector and Vector3d classes have been moved from the com.robertpenner.vector package to the com.robertpenner.geom package.
2) There is no longer a com.robertpenner.vector package.
3) The Constant class no longer exists, it has been merged with the Utility class into the new MathUtil class.
4) The MathUtil, Degree, and Polar classes have been moved from the com.robertpenner.math package to the com.robertpenner.utils package.
5) There is no longer a com.robertpenner.math package.

Posted in Flash | 1 Comment
Penner AS2 ProFMX: Package UpdatesI've decided to make some tweaks to the robertpenner package structure.

There is always a fine line between how long you should devote to the planning stages of a project and when you just need to crank through stuff and get it out. With this Penner AS2 project that I’ve undertaken, I wanted to start releasing as soon as I made the announcement. Even though I had spent plenty of time up front thinking through the book and all the different classes that would need to be converted, I didn’t give the package names that much forethought. Penner had already come up with most of the class names (although in certain circumstances I have tweaked the name where I thought appropriate), but in AS1 there was obviously no need to think through package names.

The package names I initially chose for the classes I’ve released to date made sense at first, but as I started moving my way through the book I found areas where I wasn’t thinking broadly enough. I’ve decided to go back and update these packages to follow standards set in place by Macromedia (Adobe) for the naming conventions of their packages… and to be the most up-to-date, I have decided to follow the AS3 package conventions, which vary slightly from the Flash 8 package conventions.

The vector classes will now be under the geom package and the math classes will be under the utils package and some actual class names might be tweaked slightly as well.

As soon as I get everything updated (including the previous posts), I will make a new post with all of the details. Sorry for any inconvenience, but I think in the long-run this will make more sense and allow the robertpenner namespace to remain flexible.

Posted in Flash | Leave a comment
Penner AS2 ProFMX: Vector3d ExampleDemo of the AS2 classes for ProFMX chapter 5.

Graphic3d

Click image to view demo


Below you will find the updated code for the example at the end of Chapter 5 to show you how to use the two classes from the Chapter 5 Penner AS2 post.

Add the following code on the first frame of a blank MovieClip centered on the stage.
Make sure to have another MovieClip exported for ActionScript with the linkage name of “dot” in the library to be used as the actual 3d graphic.

import com.robertpenner.display.Graphic3d;

function getWallPoints (width:Number, height:Number, xDivisions:Number, yDivisions:Number):Array {
	var x:Number;
	var y:Number;
	var z:Number;
	var pts:Array = new Array();
	var depth:Number = 0;

	for (var i:Number = 0; i <= xDivisions; i++) {
		for (var j:Number = 0; j <= yDivisions; j++) {
			x = width * (i / xDivisions - .5);
			y = height * (j / yDivisions - .5);
			z = 0;
			pts.push(new Graphic3d(x, y, z, this, "dot", depth++));
		}
	}
	return pts;
}

function arrayRotateXY (particleArr:Array, angleX:Number, angleY:Number):Void {
	var i:Number = particleArr.length;
	while (i--) {
		particleArr[i].position.rotateXY(angleX, angleY);
		particleArr[i].render();
	}
}

var wall:Array = getWallPoints (100, 100, 4, 6);

this.onEnterFrame = function() {
	this.arrayRotateXY (wall, _ymouse/20, _xmouse/20);
}
Posted in Flash | 1 Comment
Penner AS2 ProFMX: Chapter 5: Vectors in Three DimensionsAS2 classes for ProFMX Chapter 5.

Chapter 5 of Robert Penner’s Programming Flash MX extends upon what was learned in Chapter 4 by adding a third dimension to vectors.

This chapter contains two classes: Vector3d, which will be included in the com.robertpenner.geom namespace, and Graphic3d, which will be included in the com.robertpenner.display namespace.

Documentation:
com.robertpenner.geom.Vector3d
com.robertpenner.display.Graphic3d

Source:
Penner AS2 ProFMX: Chapter 5 Classes

Dependencies:
Penner AS2 ProFMX: Chapter 4 Classes
Penner AS2 ProFMX: Chapter 3 Classes

Posted in Flash | 1 Comment
FlashPaper Component 0.7.1Updated my FlashPaper component to fix a small bug.
UPDATE (April 22, 2007):
FlashPaper 0.8 has been released.

I have fixed a small bug that caused the FlashPaper component to not process a new documentPath if set dynamically before the component had completely loaded.

Description:
The FlashPaper component simplifies the process of working with the FlashPaper API and adds functionality either not documented or not provided in the API.

Installation:
- Unzip FlashPaper_0.7.1.zip
- DoubleClick on FlashPaper.mxp to install with the Extension Manager.

Documentation:
FlashPaper Component Documentation

Download FlashPaper

Posted in Flash | 15 Comments
Penner AS2 ProFMX: Chapter 4: Vectors in Two DimensionsAS2 classes for ProFMX Chapter 4.

Chapter 4 of Robert Penner’s Programming Flash MX begins to show you “how to break out of the world of one-dimensional variables and harness the power of two-dimensional data structures” with vectors.

This chapter contains one class: Vector, which will be included in the com.robertpenner.geom namespace.

Documentation:
com.robertpenner.geom.Vector

Source:
Penner AS2 ProFMX: Chapter 4 Classes

Dependencies:
Penner AS2 ProFMX: Chapter 3 Classes

Posted in Flash | Leave a comment
Penner AS2 ProFMX: Chapter 3: Trigonometry and Coordinate SystemsAS2 classes for ProFMX Chapter 3.

We’re officially starting with Chapter 3 instead of Chapters 1 or 2.
Chapter 1 is more of an overview of Robert Penner’s history and learning process.
Chapter 2 begins to teach Object Oriented Programming and some of Penner’s techniques to use OOP with AS1.
Since I am converting the AS1 classes to AS2, we can leave off that chapter. If you want an overview of OOP, there are plenty of resources out there including multiple Flash AS2 books on the subject.

Chapter 3 lays out the framework for working with Trigonometry and Coordinate Systems in Flash. Both are essential throughout the rest of the book.

I’ve broken down the AS1 code in Chapter 3 into 3 seperate AS2 classes: Degree, MathUtil, and Polar, all of which will be included in the com.robertpenner.utils namespace.
(I won’t be walking you through too much of the usage of these classes, because they are covered in depth in the actual book. My documentation will include at least one usage of each method, but beyond that you really should buy the book.)

Documentation:
com.robertpenner.utils.Degree
com.robertpenner.utils.MathUtil
com.robertpenner.utils.Polar

Source:
Penner AS2 ProFMX: Chapter 3 Classes

Posted in Flash | 1 Comment
AS2 Resource for Robert Penner’s Programming Flash MXI've decided to make my way through the book and update all of his code to AS2.

Even though Robert Penner’s Programming Flash MX hit the store shelfs almost 4 years ago, I still find it one of the most advanced books on the subject to date. Obviously the biggest drawback is that all of the sourcecode is written in AS1, but Penner was using OOP techniques with Flash way before it was fashionable. His techniques in AS1 set the standard for much of the way the community is coding in AS2 to this date.

I’ve decided to make my way through the book and update all of his code to AS2. Obviously some of it already has been done for us… ie the Penner easing equations and the Tween class that’s included with Flash now. Some people have also converted the Vector classes to AS2, but I wanted to make a single location that people could go to and download all of the classes and documentation (as long as Robert Penner doesn’t mind). These classes will also be keeping the com.robertpenner namespace to obviously give credit where credit is due.

Keep your eye out, because I’ll be starting shortly. So dust the book off the shelf or better yet go buy the book and follow along.

Posted in Flash | 2 Comments
FlashPaper Component TutorialHere's a tutorial walking you through the usage of the complete API for my FlashPaper component.

I originally started working on my FlashPaper component right when FlashPaper 2 was released. It seemed like a great technology that was easy to load into your Flash project but a little awkward to customize and interact with. Before you could call any FlashPaper methods on the doc, you had to setup an interval to watch for the FlashPaper interface to exist and once it became available, kill the interval, create a variable reference to the interface within the doc, and then start calling the methods on that interface. This quickly became repetitive to include in each project that I wanted to add FlashPaper to. So I set about to create a wrapper for the FlashPaper api, and eventually this wrapper became my FlashPaper component.

When I first created this component, I wanted to obviously make it the best I could, and at the time I thought that extending the Version 2 component architecture would be the best. I quickly realized that this bloated the final swf (adding around 29k) and wasn’t even necessary for this component. Although I realized this, it took me about a year before I found the time to get back to it and completely rewrite it from the ground up to be based on MovieClip instead. This final component now adds only about 8k vs the original 29k and adds 2 new classes and more features that the original did not have. So all in all, not too bad of a rewrite.

With this tutorial I thought I would walk you through the different options that are available with my new component.

For any steps you don’t fully understand read my documentation.

Part 1:

  1. First download the component from my site and install it by doubleclicking on the mxp file in the zip.
  2. If you don’t already have a FlashPaper swf somewhere on your computer, create one using the FlashPaper 2 program or right click and save this link.
  3. Open up a new movie in Flash and drag an instance of the FlashPaper component onto the stage from the “Components” window. (Also notice the pretty new icon I added to the component ;) ).
  4. Click on the component on stage and give it an instance name of “document_fp”.
  5. Click on the “Parameters” tab for the component and customize the FlashPaper component parameters to your liking … making sure to change the “Document Path” to the FlashPaper swf from step number 2. Make sure that you don’t add the actual link from step 2 into the path parameter because that FlashPaper 2 swf does not have AllowDomains added into it and it will lock up when you try to publish. Instead use a local FlashPaper swf on your computer.
  6. “Current Zoom” can be set to “width”, “page”, or a number from 10 to 999 (which is a percentage value).
  7. If you look closely in the “UI Elements” parameter window that opens there are 12 UI elements that you can set the visibility to but in the original FlashPaper api you can only access 10. I have added “Brand” and “Close”. The former allows you to hide the Macromedia brand logo at the top left of the FlashPaper document and the latter allows you to add a close button to the document.
  8. Test your movie and keep trying the different settings to see how it affects the FlashPaper document. Just this alone without the component would have been a little annoying to code up in Flash.

Part 2:

  1. Click on the “UI Elements” parameter and make sure to set “Close” to true.
  2. Add a movieclip or button to the stage and give it an instance name of “button01_mc”.
  3. Add an actions layer to your Flash movie.
  4. On the actions frame, add the following code:

    			button01_mc.onRelease = function() {
    				document_fp.showUIElement("Close", false);
    				document_fp.traceUIElements();
    			}
    			
  5. Test the movie and once the FlashPaper doc has loaded click on your button… you should see the close button disappear. You can do that with any of the elements in the “UI Elements” parameter popup.

Part 3:

With the following steps, replace the content within the “onRelease” function with the content from each step and test each one individually to see the possibilities of the component.

  1. Download or create another FlashPaper swf and save it next to the first FlashPaper swf you created. Name it “FlashPaperContent02.swf”.

    			document_fp.documentPath = "FlashPaperContent02.swf";
    			document_fp.load();
    			
  2.  
    			document_fp.load("FlashPaperContent02.swf");
    			
  3.  
    			trace(document_fp.borderThickness);
    			document_fp.borderThickness = 20;
    			
  4.  
    			trace(document_fp.borderColor);
    			document_fp.borderColor = 0xFF0000;
    			
  5.  
    			trace(document_fp.getViewerType());
    			
  6.  
    			trace(document_fp.getViewerVersion());
    			
  7.  
    			trace(document_fp.getCurrentPage());
    			document_fp.setCurrentPage(5);
    			
  8.  
    			trace(document_fp.getNumberOfPages());
    			
  9.  
    			trace(document_fp.getLoadedPages());
    			
  10.  
    			document_fp.printTheDocument();
    			
  11.  
    			document_fp.currentZoom = "page";
    			trace(document_fp.currentZoom);
    			
  12.  
    			document_fp.setSize(300, 250);
    			
  13.  
    			document_fp.goToLinkTarget("http://www.yourpalmark.com");
    			
  14.  
    			document_fp.enableScrolling(false);
    			
  15.  
    			trace(document_fp.getCurrentTool());
    			document_fp.setCurrentTool("select");
    			
  16.  
    			var sel:FlashPaper.SelectionRange = new FlashPaper.SelectionRange();
    			sel.headPageIdx = 1;
    			sel.headCharIdx = 20;
    			sel.tailPageIdx = 5;
    			sel.tailCharIdx = 999999;
    			document_fp.setTextSelectionRange(sel, true);
    			trace(document_fp.getTextSelectionRange());
    			
  17.  
    			trace(document_fp.getSelectedText());
    			
  18. This will only work if your FlashPaper document has a sidebar.

    			trace(document_fp.getSidebarWidth());
    			document_fp.setSidebarWidth(10);
    			
  19.  
    			trace(document_fp.getFindText());
    			document_fp.setFindText("the");
    			
  20.  
    			document_fp.findNext();
    			
  21.  
    			trace(document_fp.getVisibleArea());
    			document_fp.setVisibleArea(document_fp.getVisibleArea());
    			

Part 4:

Events.

	var flashpaperListener:Object = new Object; 

	flashpaperListener.onLoadStart = function(evtObj) {
		trace("onLoadStart: " + evtObj.target);
	}
	flashpaperListener.onLoadProgress = function(evtObj) {
		trace("onLoadProgress: " + evtObj.target);
	}
	flashpaperListener.onLoadComplete = function(evtObj) {
		trace("onLoadComplete: " + evtObj.target);
	}
	flashpaperListener.onLoadInit = function(evtObj) {
		trace("onLoadInit: " + evtObj.target);
		document_fp.borderThickness = 20;
		document_fp.move(0,50);
	}
	flashpaperListener.onLoadError = function(evtObj) {
		trace("onLoadError: " + evtObj.target);
	}
	flashpaperListener.onUnload = function(evtObj) {
		trace("onUnload: " + evtObj.target);
	}
	flashpaperListener.onDisplay = function(evtObj) {
		trace("onDisplay: " + evtObj.target);
	}
	flashpaperListener.onPageChanged = function(evtObj) {
		trace("onPageChanged: " + evtObj.target);
	}
	flashpaperListener.onZoomChanged = function(evtObj) {
		trace("onZoomChanged: " + evtObj.target);
	}
	flashpaperListener.onSelection = function(evtObj) {
		trace("onSelection: " + evtObj.target);
	}
	flashpaperListener.onToolChanged = function(evtObj) {
		trace("onToolChanged: " + evtObj.target);
	}
	flashpaperListener.onEnableScrolling = function(evtObj) {
		trace("onEnableScrolling: " + evtObj.target);
	}
	flashpaperListener.onVisibleAreaChanged = function(evtObj) {
		trace("onVisibleAreaChanged: " + evtObj.target);
	}

	document_fp.addEventListener("onLoadStart",flashpaperListener);
	document_fp.addEventListener("onLoadProgress",flashpaperListener);
	document_fp.addEventListener("onLoadComplete",flashpaperListener);
	document_fp.addEventListener("onLoadInit",flashpaperListener);
	document_fp.addEventListener("onDisplay",flashpaperListener);
	document_fp.addEventListener("onLoadError",flashpaperListener);
	document_fp.addEventListener("onUnload",flashpaperListener);
	document_fp.addEventListener("onPageChanged",flashpaperListener);
	document_fp.addEventListener("onZoomChanged",flashpaperListener);
	document_fp.addEventListener("onSelection",flashpaperListener);
	document_fp.addEventListener("onToolChanged",flashpaperListener);
	document_fp.addEventListener("onEnableScrolling",flashpaperListener);
	document_fp.addEventListener("onVisibleAreaChanged",flashpaperListener);
	

And there you go. Play around and feel free to comment with your questions. Enjoy :)

Posted in Flash | 57 Comments
  • Pages

  • Categories

  • Archives