Fundamentals of ActionScript – Instructor Guide
I recently published Fundamentals of ActionScript 3.0: Design and Develop with PeachPit, which is available in print or via e-book formats like the Kindle or through Safari Books Online. To help instructors integrate the text into their classroom materials, I have prepared a set of student and instructor guides to accompany the book for use in a classroom setting.
The instructor guide provides a synopsis of each chapter with helpful tips on speicifc topics that I have found need special attention when working with new students to ActionScript. In addition, the student guide provides additional project assignments for each chapter that build on previous chapters to help reinforce the learning objectives of the chapter. Finally, there are code troubleshooting sections that will help identify common syntax pitfalls.
The documents are available at the links below. If you have any questions or need further assitance, please contact me at doug@sfdesignerDW.com
SFDesigner:DW’s Weekly Mobile Wunderlist #001
This week saw the rollout of two new OS platforms from two of the largest players in the mobile space. First is the new BBX platform combining the Blackberry and QNX platforms and the other is Ice Cream Sandwich, the nickname for Android 4.0 from Google in combination with the latest Nexus branded device, the Galaxy Nexus from Samsung. In addition, there are other updates on the device front with the new Droid RAZR from Motorola and a new fitness device powered by Android. Read more 
Using Built-In ASDoc Help in Flash Builder 4.5
I wanted to share some tips I have learned from an article posted on Adobe’s Flex Doc Team blog by Mallika Yelandur. The post is on how to use some of the built-in tools in Flash Builder to access ASDoc materials for ActionScript and the Flex framework–right within Flash Builder itself.
I put together a quick screencast to demonstrate the features. My colleague Brian Rinaldi also posted about this cool hidden feature on his blog as well.
Happy coding!
Haz the Sickness
Hey folks…I am recovering from a nasty cold from last week and might not be posting for a couple of days. In the meantime, I will be working on my lab assets for the upcoming Adobe MAX conference. I will be doing a hands-on lab on creating mobile and tablet applications using Flash Professional CS5.5 and ActionScript 3!
Stay healthy!
Troubleshooting removeChild()
I had someone on Twitter send me a message saying they were having difficulty working with the removeChild method for an object within another container. I know that from experience addChild and removeChild can be tricky when you mix up contexts and get lost on where your “stuff” actually is.
So I wanted to post this little code snippet for people to refer to if they get lost. The premise is this:
- A MovieClip is instantiated on the stage. In this example it is called removeMe
- A Loader class is created that loads a resource. The Loader class instance is added to the display stack within the removeMe MovieClip instance
- Another MovieClip is instantiated on the stage. This example names it clickMe. This MovieClip has an event listener attached to it listening for MouseEvent.CLICK, which then executes a callback function removeLoader()
- The removeLoader() event callback removes the Loader class instance from the display stack within the removeMe MovieClip instance
Here is the code that is used to get this done. This is also available as a gist on gitbub:
import flash.display.Loader;
import flash.net.URLRequest;
import flash.events.MouseEvent;
var myLoader:Loader = new Loader();
var myLoaderContent:URLRequest = new URLRequest("http://www.helpexamples.com/flash/images/image1.jpg");
myLoader.load(myLoaderContent);
var removeMe:RemoveMe = new RemoveMe();
stage.addChild(removeMe);
removeMe.x = 25;
removeMe.y = 25;
removeMe.addChild(myLoader);
var clickMe:ClickMe = new ClickMe();
clickMe.x = 475;
clickMe.y = 25;
clickMe.addEventListener(MouseEvent.CLICK, removeLoader);
stage.addChild(clickMe);
function removeLoader(e:MouseEvent):void
{
removeMe.removeChild(myLoader);
}
Links:
San Flashcisco August 2011 Wrap Up
Yesterday I attended the monthly San Flashcisco user group meeting and there were two interesting presentations this time.
Mixamo
The first presentation was from Mixamo. The company offers an online service where you upload your 3D character and you can apply motion directly to your custom characters automatically. These can then be brought into the Flash Player 11 Beta workflow through Flare3D using Flash Builder or other IDEs as an external asset in a 3D scene.
The advantage of their service is to reduce the time consuming and expensive process of building skeletons and rigging and provide a wide variety of animation types that can be transferred from the motion capture library they have amassed and applied to your own models.
Using Flare3D, Flash Builder and Flash Player 11 beta, you can then create scenes that respond to user actions like translation and rotation.
Links
• Mixamo: http://www.mixamo.com/adobe-molehill
• Flare3D: http://flare3d.com/
• Flash Player 11 Beta 2: http://labs.adobe.com/technologies/flashplatformruntimes/flashplayer11/
Animation Principles with Flash Pro
The second presentation was one that I really enjoyed, as it reminded me of how beautiful animation can be and that Flash is still one of the best ways to create amazing animations for the web. Mitra Shahidi made a fluid animation live in front of the audience using Flash Professional. Her explanation of the details you need to consider to create fluid and life-like animation were excellent and she showed some great examples of good, and not-so-good animations and what qualities separate the good from the bad.
Links:
Mitra’s Blog: http://www.chocolatesandpencils.blogspot.com/
Next Month
Next month San Flashcisco will be doing a frameworks shootout! Presentations on a number of popular frameworks including RobotLegs, Hype and others. Looking forward to that one!
My new HP TouchPad…Wait, what did you say? $&%!
Sigh.
So today HP decided to dump WebOS and the devices within the WebOS ecosystem. I have to admit, I was a bit surprised. Only two weeks ago I bought a TouchPad using the special double discount that was offered at Staples and I played with it for a week as my main tablet. The built in applications were a pleasure to work with–easy to use and set up, with a bunch of integration with popular services that I work with.
But alas, it wasn’t enough.
Earlier today I wrote another post on the upheaval of our industry similar to the unveiling of the original PC in 1981. In addition to HP’s decision to dump WebOS and it’s devices, it has decided to leave the PC business entirely. There has been tons of speculation on what that means, starting with Scroble on how that benefits Microsoft and the Windows 8 strategy, to the fact that this act will unravel all of the work of former HP CEO Carly Fiorina.
But what I feel it means at the core is that if you can’t build a base of developers that will create great apps, your platform will suffer.
So in a week of big moves, we now have reduced the number of players by 1 leaving: Google-Motorola, Microsoft-Nokia, and Apple. I’m still on the fence with RIM. They have a significant base now and I have been monitoring the media for their predictions on where they were head. I am encouraged by their latest phones, but the developer workflow for the Playbook has had issues, and the lack of native e-mail still hasn’t been resolved.
Remember when I said in my earlier post only today that company strategies are changing faster than I can think. This is an example of that.
What a week!
GamesJS Meetup Summary
Last night I attended the first session of the GamesJS meet up. This group is a spin-off of the San Francisco JS Hackers group. The premise is to address the growing community of interactive designers and coders that are making games using JavaScript and HTML5.
After a brief introduction, things started off with “lightning” style presentations from three groups:
Crafty.js
The first presenter was Jack Lawson who walked through the crafty.js framework . Currently at version 0.4.3, it is pretty small, coming in at 14.5 KB minified and gzipped. Features include sprite map support, Canvas and DOM manipulation support and cross-browser compatibility including IE6.
Crafty utilizes a class based system for creating object instances that can be animated and linked to sprites. In addition, he demoed integration with Backbone.
The technology seemed to be young, and the documentation is pretty light, but the premise of the platform is interesting. Hopefully the community can help extend the platform and provide more documentation to help people get started.
Jack provided a couple links including one for his presentation:
Jack’s Presentation: https://github.com/ajacksified/Craftyjs-Presentation
Tutorials: https://github.com/starmelt/craftyjstut/wiki
Spaceport
Ben Savage then presented on Spaceport, which is an interesting project that seems to be aimed at people that have been using Flash and ActionScript to make native applications. The premise is to map the Sprite/Shape model that is part of Flash with div and static tags like svg, img and text nodes and then manipulate them using CSS3 for platforms that don’t support WebGL. For WebGL enabled platforms, meshes are used to accelerate the animation process to use the GPU processor.
All of the game logic is created entirely in JavaScript and is then pushed through the cloud compiler to create the native versions.
What seemed odd in my opinion is the focus of this as a native application platform where the content is essentially a web view in a native app file. If people that are using Flash today and want to create native applications, I would think they would go through the AIR on mobile workflow for RIM, iOS and Android as opposed to this workflow. In addition, this project is being monetized through a revenue share model that wasn’t explained in detail, which would seem to put less money in the developer’s hands. Clearly, the biggest benefit seems to be that the cloud-based compiler (similar to PhoneGap Build) can be compelling and take a lot of the environment configuration headaches off the shoulders of the developer.
The project is in closed beta now, but will become public on September 9th. More information is located on their website.
PlayN
Things wrapped up with Lilli Thompson from Google who gave another lighting style presentation on PlayN . This platform was used to create the Chrome version of Angry Birds.
Frankly, this presentation seemed to be out of place. Built on GWT, it is a Java-based platform that creates an abstraction layer for games. These games can then be complied to JS/HTML5, Flash and Android.
The platform has three main components: The game loop, the I/O system and asset management. The game loop is very similar to XNA containing initialization, update and painting attributes within the game. The I/O system abstractions relate to general pointers, mouse and touch interactions. In addition there is support for the HTML5 web storage API and a layering system.
Again, presenting a Java-based solution to a group of JavaScript developers seemed out of place. Also, the obvious omission of iOS as a cross-platform target I suspect would make it difficult for game developers to chose it for their real-world projects, since they would then be forced to make a unique version for iOS. Obviously as the owner of the Android platform, Google is working hard to promote game development for Android from multiple sources, including Java developers using GWT.
Lilli provided her slides to the presentation here: http://html5-slides.appspot.com/slides/playN-8-17-2011/presentation.html#1
I was impressed with the Angry Birds application when it first came out, so there is some definite power with the platform–should be interesting to see where the project goes.
Wrap Up
Overall, the group was a lot of fun, and it will be interesting to see what holds for the next meet up. You can follow the group on the Meetup website.
The Upheaval of Technology a.k.a. Happy Birthday PC!
Recently the original IBM PC celebrated it’s 30th birthday. It’s hard to believe that the PC has been around that long, but at the time it signaled a huge shift to the way we looked at technology and how it was able to enrich our lives. While relatively scarce in the home, it was only a matter of time that the “personal” side of PC would push its way into our homes.
I remember our first PC. It was an 8088-based IBM, complete with CGA graphics. I was not allowed to touch it, but it amazed me nonetheless. Later, when the PC clones started to come out, we had another one, made by Sperry that was in our home office. I was on it non-stop. My step-dad gave me a book on how to program using BASIC and had an amazing time making mini-games and “utilities” (what would I know about utility apps at that age?!) I even created a bridge simulator for the U.S.S. Enterprise in BASIC using the “amazing” 4-color CGA graphics capabilities with the 320×240 resolution. Epic.
What I didn’t realize at the time was that the PC represented a huge shift in computing. To me, it was new, it was something that I was able to pick up immediately without years of pre-existing knowledge and workflow. Jump to today. The market is shifting from traditional PCs to tablets, and while I am excited about the change, I am now the one with the years of pre-existing knowledge and workflow. New languages, new platforms, and a corporate landscape that is changing faster than I can think.
Within two weeks, Google announced it’s acquisition of Motorola Mobility; HP announced they were getting out of the Palm-acquired hardware business (two weeks after I bought a TouchPad–Grr!); and countless patent disputes based on the war chests of giant companies in the industry.
Remember Sperry, the maker of my first PC? Formerly known as Sperry-Univac, then merging with Burroughs to form Unisys? No–I didn’t think so, because they were a casualty of the last technology upheaval, and that is happening in front of us right now, and damn it is scary. Analysists, pundits, bloggers, journalists all say that platform A will win, or B, or even C–all seemingly creating an even larger dust cloud of confusion and misdirection for designers and developers.
Over time things will settle down, and ecosystems, platforms, technologies and corporate politics will normalize in a while. Personally, I feel that in order for me to have a healthy relationship with the industry, I need to keep at some arms length to the dust cloud. I have my likes and preferences, but I refuse to refer to something that is “different” as “crap” and I wish others would do the same thing.
For example–I love my Windows Phone (a Samsung Focus to be specific). Do I hate Android or iOS? Of course not. I respect that they are different, each one with appeal to me in different ways. For example I love the geeky-ness of Android and how customizable it is and easy to develop for. For iOS the simplicity of the platform has been very appealing as well. Again–not “crap”, but different.
The same thing could have been said about the various platforms back in 1981.
CP/M or DOS? Crap or just different?
BASIC or FORTAN? Crap or just different?
I am excited about the upheaval that is happening today, but I also realize that we have been through this before–and we will go through it again at a point further in the future.
How to use the Vector Class
I was recently working on a mobile prototype and wanted to play with the Vector class. The Vector class is very similar to an Array, but all of the elements are of the same data type.
When you create a Vector class, you also need to define the base type of the Vector instance, which defies the data type that the Vector instance can hold.
Creating a Vector
For example, here are two examples that do the same thing, the first using an Array, the second using a Vector:
myBox = new RedSquare();
var boxLoc:Array = [50,100];
myBox.x = boxLoc[0];
myBox.y = boxLoc[1];
addChild(myBox);
myOtherBox = new RedSquare();
var otherBoxLoc:Vector.<uint> = new <uint>[200,100];
myOtherBox.x = otherBoxLoc[0];
myOtherBox.y = otherBoxLoc[1];
addChild(myOtherBox);
In this example, the RedSquare object is a MovieClip or Sprite that is imported into this class. The first instance, myBox is created and an array called boxLoc is created that holds two values, the x and y coordinate values. These values are then assigned to the x and y properties of myBox and then the object is added to the display stack. Simple ‘nuff, but as we can see, the Array is holding two uint values, so the Array data type is overload for what we need.
The second example then uses the Vector class. First, the Vector instance is created using the var statement. When you create an instance of the Vector class you need to define the base type, which is identified within pointed brackets after the Vector class name using dot notation. So in this case, the otherBoxLoc object will be a Vector that contains only uint values. Then you create the new instance and using the same pointed bracket format, identify the data type, and then provide the values using familiar array bracket notation.
Vector elements are referenced just like arrays through bracket notation and element index numbers, the first being element 0, so the rest of the code runs the same way.
The code for creating the Vector can be broken up into individual lines to completeness:
var otherBoxLoc:Vector.<uint>;
otherBoxLoc = new Vector.<uint>();
otherBoxLoc.push(200,100);
In this case, the Vector is defined, but not populated on the first line. The new, empty instance of a uint based Vector is created on the second line. Finally, on the third line the values matching the base type are defined and pushed onto the Vector. You’ll note that the push method is used here. That is shared between the Array and Vector data types, as well as other methods like slice, pop, shift, sort, and others.
Working with Empty Values
One of the differences between vectors and arrays is that vectors are “compact”. This means that all of the indexes in the vector must have a value. Here is an example that illustrates that:
var myEmptyArray:Array = new Array;
myEmptyArray[10] = "Value";
trace("Array: " + myEmptyArray);
var myEmptyVector:Vector.<String> = new Vector.<String>;
myEmptyVector[10] = "Value";
trace("Vector: " + myEmptyVector);
When you try to run this, you get this in console:
Array: ,,,,,,,,,,Value
RangeError: Error #1125: The index 10 is out of range 0.
at VectorExample/_init()
at VectorExample()
The Array works fine, because you can create a value anywhere in the index, in this case at index 10. When you do this, it creates empty values for indices 0-9. With a Vector, you can’t do that. In fact you get the error message that states that the index you specified, 10, is out of the allowed range. Since the Vector is empty, that means that it can only be within the range of 0. Below is another example of this:
var myEmptyVector:Vector.<String> = new Vector.<String>;
myEmptyVector[0] = "Value";
myEmptyVector[5] = "Value";
trace("Vector: " + myEmptyVector);
When you run this you get an error again, because the index 5 isn’t legal since it isn’t consecutive with the last index of the Vector.
Looping through a Vector
Using similar methods as an Array, you can loop through a Vector. I prefer to use the length property and use a generic for loop:
var myVector:Vector.<uint> = new Vector.<uint>;
for (var i:uint = 0; i < 10; i++)
{
myVector.push(Math.round(Math.random()));
}
for (var i:uint = 0; i < myVector.length; i++)
{
var side:String;
if (myVector[i] == 0)
{
side = "heads";
} else {
side = "tails";
}
trace(side);
}
In this example, the vector is created, but is empty. Then through a for loop, a new value is pushed to the vector, in this case a uint value that is either 0 or 1 (simulating the flipping of a coin ten times). Then in the second loop the length property is used to determine the loop and the indices of the Vector are accessed and then displayed in the console.
Wrapping Up
The syntax is a bit funky, but I’m a big fan of only using what you need when you are coding, especially for mobile projects when you can easily have multiple arrays that could be using more memory than you really need.
The ActionScript docs have more on the Vector class, including some good examples. Hopefully my brief intro helped!
Happy Vector-ing!
