I was reading my flexcoders mailing list this morning and noticed that Flash player 10 was released on labs.
http://labs.adobe.com/technologies/flashplayer10/demos/
Looks like some pretty fancy new features coming out! Definitely excited about the improved font rendering engine with multi-column support.
Add comment May 15th, 2008
Well, this one just about killed me this morning. Well, it wasn’t actually that bad, but it’s one of those obscure little issues that will drive you nuts.
So, how do you resize a TextArea control mx.controls.TextArea based on the container Text Area Height? Pretty easy really once you use the callLater function. This is a throwback solution from the Flash days where the mantra, “if all else fails, wait a frame” works again.
private function resizeTextArea():void
{
captionTxt.height = captionTxt.textHeight + 10;
}
id="captionTxt"
selectable="false"
horizontalScrollPolicy="off" verticalScrollPolicy="off"
resizeEffect="Resize"
text="{yourBoundTextVariable}"
valueCommit="callLater(resizeTextArea)"/>
I also threw in a nice resizeEffect so that it happens all smooth and sexy.
word.
3 comments February 27th, 2008
This is a pretty quick post and I’ve done this a long time ago but ended up having to look this up when trying to help my mom post her iWEB built site to a 1and1 super cheap hosting account. When you export your iweb site to a folder and upload to the server via FTP you may have a home page that’s named something like “Welcome.html”. To get that page to load by default, you just need to create a text file and upload to the root of your website with the following line added:
DirectoryIndex index.html Welcome.html
Upload and check it out.
Add comment February 26th, 2008
I recently came across this situation in a project I was doing where the client wanted to sync an audio sound to a bouncing soccer ball during the loading process. For speed I wanted to make sure the sound was embedded in the library.
Here is a recreation of what I did, simplified for this example:
Now I’ve done this many times with nested MovieClips with Custom Classes, but handling the sound is a bit different than accessing MC instances that are defined within your document class.Essentially you want to make sure your export settings are set for the sound and then within any custom class you can use the syntax:
// make sure you have the appropriate classes included
var classRef:Class = getDefinitionByName('YOURSOUNDCLASSNAME') as Class;
snd = new classRef();
channel = snd.play(0, 0, new SoundTransform(1, 0));
Here is a more complete example of what I'm talking about: Important thing to note is that whenever I create a new flash project one of the first things I do is open up the “File” > “Publish Settings” dialog and then switch to the “Flash” tab and then click the “Settings” button and uncheck the “Automatically declare stage instances” checkbox.This checkbox will add property names in your main class for you at compile time and can make for some tricky debugging so I like to define everything by hand unless there are stage assets that I really don’t care about.So the first real work I’ve done here is to just add a ball movieclip to the stage, give it a drop shadow for coolness, and get the directories set up for my classes. I always create a nested set of folders starting with “com” then putting a “useflashmore” folder inside of that. All of my classes will reside in the “useflashmore” folder and this is done to avoid class name collisions. Because my domain name is unique, if I reverse the domain name into folders, then I can be reasonably assured that my classes won’t have the same name as other classes in a larger application where my swf may be included. This is not necessary, but more of a best practice when coding your actionscript.
The next step would be to create your document class which I call Main.as and extend MovieClip. I then add the required import statements to bring in the Tweener functionality, the Sound classes, and all of the helper classes I’ll need to get the audio to play at the given time.
Here’s what I’m importing:
import caurina.transitions.Tweener;
import flash.media.Sound;
import flash.media.SoundChannel;
import flash.media.SoundTransform;
import flash.utils.getDefinitionByName;
import flash.utils.setTimeout;
I next build three functions to handle the bounce loop, to handle the timer to start the audio sound, and a function to actually play the sound.
Here’s what those three functions look like:
private function bounceBall():void
{
Tweener.addTween( ball_mc, {y:25, time:0.75, delay:.5, transition:"easeInOutBack"} );
Tweener.addTween( ball_mc, {y:238, time:0.75, delay:1.25, transition:"easeOutBounce", onStart:startBounceSound, onComplete:bounceBall} );
}/* Func : startBouncSound
Desc : starts the timers to play the bounce sound
*/
private function startBounceSound():void
{
setTimeout(playSound, 200, .35);
setTimeout(playSound, 500, .15);
}/* Func : playSound
Desc : gets the class from the library and creates a new instance of that class and plays the sound
*/
private function playSound(vol:Number):void
{
var classRef:Class = getDefinitionByName(’sbRev’) as Class;
snd = new classRef();
channel = snd.play(0, 0, new SoundTransform(vol, 0));
}
The bounceBall function uses the Tweener Class and applies a bounce transition function which is built in to the Tweener Class.
The startBounceSound function uses the setTimeout Class to wait for the designated time and then calls the playSound function.
The playSound function is where the interesting stuff happens and this is where we grab the Sound from the library and create a new instance of that sound. The getDefinitionByName Class/function takes a string which should match up with the name of the class which you’ve defined in your linkage properties in Flash.
The only thing that’s left to do is to get everything started with a call to “bounceBall()” which I do in the constructor.
The was a bit challenging too because I needed to time the sound with where the ball was within the Tweener animation. I ultimately decided to use timers as the easiest solution but it’s probably not the cleanest.
Hope this helps someone who may run into a similar situation.
I’ve attached the working example here.
Add comment February 19th, 2008
I recently came across a runtime error in my Flex application (Error #2025) which took a couple of days to narrow down. There seems to be a bug in the Flash FocusManager Class unless I’m missing something here. Using a few of the Flash Components and the Flex PopUpManager Class, when clicking Tab, this runtime error comes up.
To simplify my explanation of the issue, I’m just going to post the example and code along with the FLA.
Working Example with view source enabled
Screen grab of the error:
In this example I have a TileList embedded in a UIComponent which has been added to the Flex application inside of a Canvas Control. When the user clicks a button, a form pops up. If the user clicks Tab immediately, a 2025 runtime error gets thrown.
Here’s the full error which I didn’t find very helpful:
ArgumentError: Error #2025: The supplied DisplayObject must be a child of the caller.
at flash.display::DisplayObjectContainer/getChildIndex()
at mx.core::Container/getChildIndex()[E:\dev\flex_3_beta3\sdk\frameworks\
projects\framework\src\mx\core\Container.as:2398]
at mx.containers::Panel/getChildIndex()[E:\dev\flex_3_beta3\sdk\frameworks\
projects\framework\src\mx\containers\Panel.as:1027]
at fl.managers::FocusManager/getChildIndex()
at fl.managers::FocusManager/sortByDepth()
at Array$/_sort()
at Array/http://adobe.com/AS3/2006/builtin::sort()
at fl.managers::FocusManager/sortFocusableObjects()
at fl.managers::FocusManager/keyDownHandler()
I’ve done a bunch of searches and the only two worthwhile urls I’ve found are:
http://www.thanksmister.com/?p=64
http://tech.groups.yahoo.com/group/flexcoders/message/75214
Neither of which address the situation completely
I’ve also attempted to grab the KeyboardEvent using the code Alex Harui posted on flexcoders with not luck.
systemManager.stage.addEventListener(KeyboardEvent.KEY_DOWN, eatTabHandler, true);private function eatTabHandler(event : KeyboardEvent) : void
{
if (event.keyCode == Keyboard.TAB) event.stopImmediatePropagation();
}
3 comments January 30th, 2008
I had the opportunity to attend the flex camp here in Boston today. The keynote by Christophe Coenraets has been great so far. He’s demoing flex 3 and a lot of the new components available. There are some really great data component improvements for the flex 3, but the real improvement has to be the RSL support for the flex framework. This is a simple drop-down option on the library tab in your flex project properties.
I’ll be posting images and notes throughout the day.
Add comment December 7th, 2007
v1 of the Scrollable Accordion Component seems to be working and relatively stable! There are definitely some improvements that need to be made in v2 as far as implementing the rest of the dataProvider functionality along with validating button position after tweens are complete. I’d really like to hear anyone’s feedback on this control as it’s my first whack at a useful flex custom component control.
I couldn’t have done the scrolling without completely butchering Doug Mccune’s scrollable Canvas component on Flexlib.
Check out the working example of the Scrollable Accordion Component here.
Source view is enabled.
Specifically take a look at the UFMButtonList.as found in com > useflexmore > controls
All in all, I’m very happy with how this turned out so far. The larger Mountain Workshops project is very very close to completion now and I’ll do a big fat write up on that one too.
Cheers,
Justin Winter
13 comments December 3rd, 2007
The Examples
Scrollable Tree Control - [example] [source]
I apologize for this being done in the Cairngorm Architecture. Perhaps the biggest overkill of all time! 
It was easier to hack apart my larger application versus rebuild the tree tests I’d done from scratch. This is the closest I’ve gotten to what I want so far.
Scrollable Accordion Menu (nested lists) [example] [source]
This example could definitely be more comprehensive but I don’t see the outcome getting me that much closer than the tree.
List with Custom Item Renderer - [example] [source]
I’m using Peter Ent’s example as a starting point (List Item Renderer using States & Transitions)
The problems I’m facing now are that the height for each itemRenderer in Peter’s example is hard coded. I need the child itemRenderer to size as large as possible and I also need the parent list to size as large as possible too. I’ve simplified my original goal of making this recursive for now.
So, the highest level priorities at this point are:
1. Size itemRenderer and parentList according to itemRenderer height after ChildList opens
2. Figure out how to apply the maxSize property to parent and child lists.
Add comment November 21st, 2007
PART II
SCROLLABLE ACCORDION MENU COMPONENT
THE THOUGHT PROCESS
There are several different components that seem to have bits and pieces of the functionality I’m looking for.
Accordion - has the tween functionality I’m looking for but not the recursive levels or built-in list scrolling. This solution would require custom accordion functionality cascaded with the list control with custom renderers that render according to whether or not the node has children. I don’t like this solution right off the bat because there seems to be a lot of high level dependency that cascades to each level which will inevitably add file size and headaches. Even though I hate headaches, I decided to give it shot.
Tree - has the recursive ability but extends list which makes scrolling branch levels of nodes really difficult. This is pretty much a show stopper at this point because I need to scroll. Even though I knew this was a show stopper I went ahead and gave it a shot to see how much I could style the tree to look/behave like I needed.
Menu - Hey, I’m creating a menu right… well, kinda. Again, Menu extends List which is fine except for the fact that when a user clicks on a list item all siblings below the selected item need to “slide” down to make room for selected node’s child list container. Also, Menu create’s a popUp which adds the container to the top of the displayList so I’d need to extend the Menu control to add the container to a parent node’s child list container. After taking a look at Doug Mccune’s Scrollable Arrow Menu I was convinced this was the best approach so I went ahead and gave this a shot.
Option X - Well, what do you know, I developed an AS2 version of an accordion style navigation about a year ago using MovieClips and arrays.
http://www.useflashmore.com/accordion-menu-example/
Worked pretty well and I turned it into a component and used it on a few different projects. I could rewrite the AS2 component in AS3 and extend UIComponent or ScrollControlBase and manage all of the resizing, tweening myself. I can’t do that, right??? Seems like I’d be turning my back on all the sweet sweet available flex options. To be continued…
Next up: - The Examples
1 comment November 21st, 2007
I’ve decided to document my process of creating an accordion style flex navigation component. The component I’m creating is a little bit tree, a little bit list, a little bit accordion, and lot of frustration! I’m going to break this up into different parts so it’s easier to digest if anyone is interested in reading this.
DISCLAIMER: This series probably comes off pretty cynical. I love Flex and Flash. I’ve made my career out of working with Actionscript and Flash/Flex. I’ve been a programmer for over ten years now although much of that time has been focused on the art of sculpting a web page to look and act right with various server-side scripting languages. This article is intended as a kind of journal of the process I went through creating this component as a sort of case study. As I write this I am frustrated over how difficult this task became. There have been may instances where Flex has solved some very complex issues for me, not this time though.
PART I
SCROLLABLE ACCORDION MENU COMPONENT OVERVIEW
I have way more time invested in developing this component than I am comfortable writing here. However, suffice to say the time I’ve taken to explore this solution I probably should have found a different way to do this.
To give you a bit of background, I have a project that I work on each year for a photography workshop that requires a navigation component which allows for easy access to several different sections and one section has about a hundred sub nodes. Another probably easier way to put this is to just show the structure.
Now the goal of this component is that it would be able to create as many levels as needed based off of a xml file so that this could be used on other projects.
So, after working with Flex 2/AS3 and Flash CS3 for over a year and having, what I’d consider, a fair amount of AS2 experience I figured this would be cake and I’d bang this out in a day or two. RIIIIIGGGGHT… (Peter, I’m going to need you to come in on Saturday)
Add comment November 21st, 2007