Cloud Nebula

Flash Builder not auto completing

2011-11-17T13:40:00.001-08:00

I imported an existing project into FlashBuilder 4.0 and found that content assist (and class linking) didn't work. After a bit of googling and testing it turns out that when you import a project the compiler looks for the main classes in the src folder. If you have them in a different place you need to explictly set this by right clicking the project > properties > Actionscript Build Path and then set the "Main Source folder" to the custom location (it will be set to src by default).

Setting up the mic for Mac Book

2011-07-02T03:41:00.000-07:00

My sister in law and a friend were having trouble setting up the single audio input on the Mac Book to record some audio and couldn't figure out how to get the Mac to use it as an input jack instead of the speaker output. So for anyone else having the same problem, here are the directions:

Open the System Preferences panel -- the icon looks like this:Then in the Hardware section click on Sound (last icon on the right):

On this next screen choose the last option item "Input" (on the far right):

Then at the bottom of this screen select the dropdown for "Use audio port for" and select "Sound Input":

Your line in should now work....

Of course, once you're done you'll have to reset this to "Sound Output" again so that you can use speakers or headphones :-)

missing images in iPhone using Titanium

2011-04-20T08:19:00.000-07:00

Note to future self: If you build an app in Titanium -- do NOT create a folder in the images directory called 'iphone' to place iphone specific images there. They will show up in the emulator but not on the device. I ran into this a few months ago but didn't document the solution and just spent another 2 hours trying to debug it a separate time. Use any other name than 'iphone'!!!

Titanium createHTTPClient issue on Android

2011-04-13T08:22:00.001-07:00

Setting up an Android app on Titanium, I was having problems getting a webservice using a signature. It was working fine on iPhone. Turns out that Titanium auto url encodes the url in an createHTTPClient.open() method -- thus sending a different string than the signature had hecked against -- and thus returning an error.

To fix it, do this:

var xhr = Titanium.Network.createHTTPClient();
xhr.autoEncodeUrl = false;

before you call the open() method.

Blackberry Playbook error using AIR StageWebView

2011-02-19T10:05:00.000-08:00

Here was a crazy error on the latest Blackberry Playbook simulator (0.9.3). If you reference a non-existent file or image, it throws this error:

Error #2044: Unhandled ErrorEvent:. text=Couldn't read a file:// file

It was no fun trying to figure out where this bug was coming from! :-(

Facebook Places throws oAuth error: "The table you requested does not exist"

2011-02-03T14:21:00.000-08:00

Just did a great workshop with Conrad Fuhrman who demonstrated his ARTi application, an augmented reality app build with Titanium. It also uses a new Titanium Facebook module that allows you to connect to Facebook using oAuth. However, when I tried to run the code sample I kept getting this oAuth error:

entries =>
{contents = "type"} = {contents = "OAuthException"}
{contents = "message"} = {contents = "(#603) The table you requested does not exist"}
}
}

After a google search this post turned up which explained it all. It turns out that Facebook Places does not work outside of the US, and since I was trying to access it from Barbados, it was failing.

Detecting Android and iPhone using Javascript

2011-01-14T06:09:00.000-08:00

Here is how you can detect iPhone/ipod and android using javascript:

http://www.hand-interactive.com/resources/detect-mobile-javascript.htm

Creating scrollable divs on a Mobile device

2011-01-10T07:42:00.000-08:00

On mobile devices the scroll property cannot be set for divs on the page since the page itself is scrollable. Google has released a possible workaround that I am trying to get working. It involves disabling the scroll property of the document and animating the div in response to touch events:

http://code.google.com/mobile/articles/webapp_fixed_ui.html

Update: I just found the YUI Scrollview and (after figuring out a critical step to get the scrollbars to work) its awesome!

http://developer.yahoo.com/yui/3/scrollview/

The problem I ran into was how to get the scrollbars to show up. It turns out that the documentation does not include the need to attach a "yui-skin-sam" style to the container that holds the scrollable div. So in order to make it work here is a very simple example:

http://pastie.org/1454114

Getting local HTML file to load in the Blackberry Playbook

2011-01-07T12:05:00.000-08:00

I've been trying out the SDK for the Blackberry Playbook and one thing that was stumping me was how to load a local HTML file using the StageWebView in AIR 2.5.

I placed the local HTML file in the root folder (in the same folder as the .mxml file) and tried to load it this way:

**************

import flash.media.StageWebView;

private var webView:StageWebView = null;

private function init():void{
// get the file location
var f:File = new File("app:/map-simple.html");

webView = new StageWebView();
webView.stage = this.stage;
webView.viewPort = new Rectangle( 0, 0, stage.stageWidth, stage.stageHeight );
webView.loadURL( f.url );

}

**************

...but it didn't work. Fortunately, I stumbled on this post by Mike Chambers that explains a workaround and recoded the app this way:

**************

import flash.media.StageWebView;

private var webView:StageWebView = null;

private function init():void{

var fPath:String = new File(new File("app:/map-simple.html").nativePath).url;

webView = new StageWebView();
webView.stage = this.stage;
webView.viewPort = new Rectangle( 0, 0, stage.stageWidth, stage.stageHeight );
webView.loadURL( f.url );
}

***************

This works great!

By the way, I also tried to use the QNXStageWebView in the latest Blackberry SDK but the FlashBuilder (Burrito) compiler gave me the following error:

A file found in a source-path must have an externally visible definition. If a definition in the file is meant to be externally visible, please put the definition in a package.

This apparently has been faced by other developers (see here) using the QNXStageWebView and the Blackberry support boards indicate that this is a beta Class and has numerous issues -- so I decided not to try to find a workaround (which seems to involve digging up an older swc file).

One caution, the AIR StageWebView is also still in beta and does not currently allow for communicating between the base app and the StageWebView object. In my case however, I am just trying to get a fully working HTML app to run on the Playbook.

Convert string with carriage returns to one line in php

2010-11-11T20:10:00.000-08:00

I have a database string containing new lines characters (\n) and needed to print it out with no linebreaks -- since it was being printed as a javascript variable. This script does the trick:

$input = trim( preg_replace( '/\s+/', ' ', $input ) );

courtesy: http://www.codingforums.com/showthread.php?t=137009

Print booklets on Mac

2010-11-07T03:52:00.000-08:00

One feature that is missing on Mac Snow Leopard is the ability to print a booklet from a pdf. But here is a great free application that fills that void:

http://bit.ly/2JupkE

By the way, to print even and odd pages on a Mac you need to select the "Paper Handling" option in the "Preview" dropdown.

Create AIR app without a taskbar icon

2010-11-04T11:08:00.000-07:00

I needed to create a chromeless AIR app that would act like the the old Active Desktop in Windows -- and did not show a taskbar icon that a user could close. Here is how it was done:

Create a new AIR app (for which a taskbar icon is required). This app spawns a new application component based on mx:Window with the HTMLLoader in it. I used a separate component for this so it could function independently from the main app. Child apps in AIR do *not* require an icon so you can set the type=NativeWindowType.LIGHTWEIGHT on this new component when you open it. As soon as this new window opens it dispatches a complete event. The main window listens for the complete event and then closes itself -- taking the taskbar icon with it. Since (I believe) in Windows 7 the shortcut "Windows/M" works from the items in the task bar, the fact that the child app is not in the task bar prevents it from being minimized by the shortcut.

By the way, this seems to work only on Windows -- not Mac -- so a different solution would be required for that.

Communicating between Javascript and Actionscript in an AIR application

2010-10-28T14:17:00.000-07:00

Using the HTMLLoader class you can communicate between javascript and actionscript in the same application. This means that you can trigger AS3 functions from a loaded HTML page through javascript (and vice versa). Here is a quick sample:

// AS3 code:

var windowBounds:Rectangle = new Rectangle(0,0,1024,768);
var htmlLoader:HTMLLoader = HTMLLoader.createRootWindow(true, null, false, windowBounds );
htmlLoader.runtimeApplicationDomain = ApplicationDomain.currentDomain;
htmlLoader.load(new URLRequest('myfile.html'));

htmlLoader.addEventListener(Event.COMPLETE, onComplete);

private function onComplete(e:Event):void{
// creates a new javascript function in the HTML page that map to the AS3 function
// you don't need to define these functions at all in the JS -- they become available automatically
htmlLoader.window.jsFunction = flashFunction;
}

private function flashFunction(msg:String):void{
trace("message: " + msg);
}

Once the onComplete() function runs, it creates the link between the newly created HTML javascript function and the AS3 function -- which can then be called directly in the HTML:

HTML code:

onclick="jsFunction('called from js');"

Round time to nearest 30 seconds

2010-10-27T14:50:00.000-07:00

I had a requirement to round the time for a video (in seconds) to the nearest 30 seconds. Not being so strong in math, I am grateful to be better at Googling. So here it is for anyone else in a similar situation:

Math.round(myTime/30)*30

Awesome and simple!

Titanium gradient for buttonbar

2010-10-20T15:27:00.000-07:00

Doesn't seem that the gradient works for the buttonbar either. So here is the workaround:

myButtonBar = Ti.UI.createButtonBar({
id:'buttonbar',
height:40,
backgroundColor:'#663399',
style:Titanium.UI.iPhone.SystemButtonStyle.BAR,
labels:['Close Keyboard >']
});

Just use a background color and the Titanium.UI.iPhone.SystemButtonStyle.BAR as the style -- and the app will create a gradient for you -- from lighter to darker.

Show and hide hidden files on a Mac

2010-10-19T10:54:00.000-07:00

This command shows the hidden files in Finder on a Mac:

$ defaults write com.apple.finder AppleShowAllFiles TRUE
$ killall Finder

and this hides them again:

$ defaults write com.apple.finder AppleShowAllFiles FALSE
$ killall Finder

Titanium does not currently support the clipboard

2010-10-08T10:20:00.000-07:00

Just a heads up for anyone that might stumble on this accidentally. Titanium Mobile does not currently support copying to the clipboard. I should have checked that before I coded a copy feature into my app...

Time Machine issues when hard drive is partitioned

2010-10-07T14:59:00.000-07:00

I have a Mac Book Pro (Snow Leopard) and set up Time Machine using a 1 TB Seagate external USB hard drive. The first time I set it up, I partitioned the drive into 600GB and 400GB and used the 600GB partition for Time Machine -- leaving the 400 GB partition for standard backups. However I found that the behavior of Time Machine was very buggy. For instance, if I tried to enter TM with any programs open, the Mac would freeze and I would have to restart.

So in order to use TM I had to close every program I had running. Secondly, about a month ago I maxed out the 600GB and TM stopped working altogether. It would just fail when I tried to back up.

In any event, I reformatted the drive to a single 1TB partition and now Time Machine works exactly as advertised...

UPDATE (November 5): After a few months I have had another error that the HD cannot be used by Time Machine and cannot be repaired. Either the HD is defective for Time Machine just doesn't play nice with it...

Creating a Titanium gradient button for iPhone

2010-10-07T14:14:00.000-07:00

This took a while to figure out. I wanted to get a gradient button in Titanium but there were a number of variables that didn't seem to work properly. Here is a finished button with a gradient from black to lighter gray:

closeButton = Titanium.UI.createButton({
title:'Close',
width:150,
height:40,
style:Titanium.UI.iPhone.SystemButtonStyle.PLAIN,
borderRadius:10,
font:{fontSize:16,fontFamily:_fontFamily,fontWeight:'bold'},
backgroundGradient:{type:'linear',
colors:['#000001','#666666'],
startPoint:{x:0,y:0},
endPoint:{x:2,y:50},
backFillStart:false},
borderWidth:1,
borderColor:'#666'
});

It seems that a few items are critical to make it work:

1. You have to define the style as "style:Titanium.UI.iPhone.SystemButtonStyle.PLAIN" -- BORDERED will not work and if you don't have a style it also won't show.
2. Make sure that the gradient property for backFillStart is false.
3. There seems to be a bug when you put in #000000 as one of the colors. You need to set it to #000001 (or something like that), in order to get black to show

Titanium Titanium.App.Properties problem

2010-09-26T11:34:00.001-07:00

Here is another case where in Titanium the iPhone simulator successfully runs a feature that fails on the iPhone. In this case its the Titanium.App.Properties. This is supposed you allow you save global variables. From the documentation, you set it up like this:

Save variable:
Titanium.App.Properties.setString("myVar","myValue");

Retrieve variable:
Titanium.App.Properties.getString("myVar"); '// returns "myValue"

This works fine on the simulator but fails on the iPhone unless you follow two additional steps:

1. From the Kitchen Sink project -- copy /modules/iphone/settings.bundle
2. Create a /modules/iphone folder in your project and paste the settings.bundle file there
3. Make sure to name all your variables with a "_preference" suffix. So our examples above should be:

Save variable:
Titanium.App.Properties.setString("myVar_preference","myValue");

Retrieve variable:
Titanium.App.Properties.getString("myVar_preference"); '// returns "myValue"

Titanium build and iPhone simulator issues

2010-09-26T10:02:00.001-07:00

I've found that the iPhne simulator and Titaniums build process are quite buggy. For instanace I have had numerous occasions where for no apparent reason Titanium refuses to launch in the simulator. Sometimes there is an error message -- like the iPhone SDK was installed in the wrong place -- and other times it launches and then just shuts down without an error code.

I've found that when there is no obvious reason for the issue, I create a new project and then copy all of the assets from the Resources folder of the original project and place them in the new project Resources folder and (usually) we're back in business.

It's a pain but after all it is free software! :-)

Unable to write to filesystem using Titanium

2010-09-25T21:13:00.000-07:00

This took several hours to figure out...

In Titanium Mobile it allows you to create and write to files in the Resources directory (Titanium.Filesystem.resourcesDirectory) using the emulator, but it fails when you try to run it on the iPhone. This is because you don't have actual write permissions on that directory -- you need to save data to the Titanium.Filesystem.applicationDataDirectory.

Here is how you write to a file: (btw -- if the file does not already exist, it creates it automatically -- you don't need to use the Ti.Filesystem.createFile() method)

var f = Titanium.Filesystem.getFile(Titanium.Filesystem.applicationDataDirectory, 'myFile.txt');
f.write('this is the new file');

To read the contents of a file:

var g = Titanium.Filesystem.getFile(Titanium.Filesystem.applicationDataDirectory, 'myFile.txt');
var contents = g.open();
Titanium.API.info("Contents of the file = " + contents.text);

Window height in Titanium/iPhone

2010-09-23T14:29:00.000-07:00

Just a caution: while using Appcelerator Titanium, we aware that Titanium.Platform.displayCaps.platformHeight includes the iPhone status bar height -- which is essentially unusable real estate since it always shows in an application. So you have to deduct 20 to get the actual usable space on an iPhone.

For instance:

I created a buttonbar (with a height of 50) and wanted position it at the bottom of the screen. So I thought that the easiest way would be to use the Titanium.Platform.displayCaps.platformHeight as my layout height and then just set the buttonbar to have a top value of Titanium.Platform.displayCaps.platformHeight - myButtonBar.height.

However, this always placed the buttonbar too low on the screen. It was only when I modified the variable to account for the 20 pixel status bar did everything line up properly:

Titanium.Platform.displayCaps.platformHeight - myButtonBar.height - 20

"Error creating project" in Titanium

2010-09-22T12:53:00.000-07:00

I had installed Titanium a few months ago and had not used it for a while but when I tried to create a new project -- or compile an old one -- I kept getting errors.

In the end, I installed the Android SDKs and followed the advice in this post:

https://developer.appcelerator.com/question/34821/build-failed

but without installing the patch.

After this was all done -- and updated -- Titanium allowed me to correctly create a new project from iPhone but it still doesn't find the Android SDK. I'll leave that for another day....

Phonegap for iPhone development

2010-09-22T12:01:00.000-07:00

For what it might be worth to others, I have tried Phonegap for a while now and although its relatively easy to get started if you have a straight forward html/javascript project, it doesn't seem to be so simple to access the native functions of the iPhone. For instance, I tried to implement the tab bar and after several tries found that it does not position properly -- nor could I quite figure out how to add an icon to a tab item.

I'm going to try and use Titanium and see how hard it is to port the existing code to it.

Firefox download manager

2010-09-21T07:48:00.000-07:00

After failing for the second time to successfully download the newest XCode and iPhone SDK (3+Gb) I found this list of download managers on LifeHacker:

http://lifehacker.com/347827/top-10-free-download-managers

It seems the highest rated is the Firefox extension: Download Them All!

Update: Turns out that Apple has a non-resume on their SDK download so I had to try a few more times before I got the whole thing down in one try....

XCode shows: "No provisioned iPhone device is connected"

2010-09-20T18:20:00.000-07:00

In case this is helpful for anyone else. I was trying to install a demo iPhone project on my iPod Touch and got the error: "No provisioned iPhone device is connected". I knew that I had the provisioning set up -- but it turns out that I had not upgraded the SDK -- so while the iPod Touch was 4.0, the SDK was 3.2. Once the SDK was updated the install went fine.

Solved - Problem connecting Mac using Check Point SecureClient

2010-09-17T07:04:00.000-07:00

On a Mac (Snow Leopard) I was having issues using a Check Point Secure access. I kept getting "Gateway not responding | Connection failed". I had installed the latest software from Check Point (Check Point VPN-1 SecureClient NG with Application Intelligence - R56 HFA2 Build Number 015), but I was still having a problem.

A friend finally suggested that I try disabling NAT filtering in my modem.

This solved it!

Restrictions on flash fullscreen mode

2010-09-04T15:08:00.000-07:00

From Adobe:

The ActionScript that initiates full-screen mode can be called only in response to a mouse click or keypress. If it is called in other situations, it will be ignored (in ActionScript 2.0) or throw an exception (in ActionScript 3.0).
Users cannot enter text in text input fields while in full-screen mode. All keyboard input and key-related ActionScript is disabled while in full-screen mode, with the exception of the keyboard shortcuts that take the viewer out of full-screen mode.

That last bit is sad news if you want to allow a user to share via email while in fullscreen mode :-(

Very cool Flash debugger tool

2010-06-18T20:02:00.000-07:00

While trying to do some live web debugging of a flash app I came across this great Air app that lets you see all of your trace and error statements as the app is running. It outouts the standard trace commands so there is no need to import any new classes and write to a console.

Awesome!!

http://bit.ly/ck3KpN

Flash CS cannot find fl.core and fl.video packages

2010-06-13T13:32:00.000-07:00

This is just strange. I was trying to import the classes in fl.core and fl.video into a Flash project and the compiler gave a "Definition could not be found." error. Apparently this has been a problem since (at least) Flash CS3. The IDE does not automatically add those libraries to the classpath so you need to do it yourself.

Here are the instructions:

Open Flash
Go to Edit>Preferences>Actionscript>ActionScript3 Settings>

and add these two paths to the Source Path:

$(AppConfig)/Component Source/Actionscript 3.0/User Interface
$(AppConfig)/Component Source/Actionscript 3.0/FLVPlayback

Hiding dotted lines around links in Firefox

2010-05-21T14:40:00.000-07:00

This is just simple and brilliant:

http://sonspring.com/journal/removing-dotted-links

/* this removes the dotted line around everything linked item */

:-moz-any-link:focus {
outline: none;
}

Adding shadows to divs

2010-05-14T10:10:00.000-07:00

Safari and Firefox also have different ways of adding shadows to divs:

// safari

-webkit-box-shadow: 1px 1px 3px #888;

//mozilla

-moz-box-shadow: 1px 1px 3px #888;

Adding gradients to divs

2010-05-14T10:08:00.001-07:00

Safari and Firefox require different css to create gardients:

#myDiv{

//Safari:

background-image: -webkit-gradient(linear,left top,left bottom, from(#666), to(#000));

//Mozilla:

background: -moz-linear-gradient(top, #666, #000);

}

How to delete a post from a Wordpress database

2010-05-04T13:59:00.000-07:00

For some reason the data that I inserted into a post got corrupted and I was unable to delete or edit it within the Wordpress console. So to manually delete a post from the database just do this update:

update (name of posts table) set post_status = 'trash' where id = (ID of offending post)

Unable to see SD card on Blackberry

2010-03-03T06:41:00.000-08:00

I was helping someone today to put some documents on their Blackberry Bold 9000 and for some reason when I connected it to my PC I a drive letter was assigned to the Blackberry itself but not the SD card. Doing a bit of Googling it seems that this is a hige problem for users and there were hundreds of hits for this exact problem -- including people trying to use the Roxio Media Manager. In any case, one post had the answer that worked for me and here is the step by step solution:

1. Click Start>Run and then type: compmgmt.msc
2. Select Disk Management
3. In the right panel you should see both the Blackberry and the SD card as separate devices
4. Right click the SD card and select: Change Drive Letter and Paths
5. Click "Change" and then select the drive letter you want to assign to the device. Make sure that you do not assign an already assigned drive letter. If in doubt, right click your My Computer icon on the desktop and choose Map Network drive, then open the dropdown for the drives and note one of the unassigned drive letters.
6. Click OK

Hopefully you'll now be able to see the SD card and can treat it like any other USB drive. All in all this is way better than using the Roxio Media Manager app(which is a 200MB+ download!). But in any case once you've assigned the drive properly Roxio should now be able to access the drive as well.

Comparing two objects in jQuery

2010-02-20T00:02:00.001-08:00

Had a strange problem in comparing two objects in js. I am dynamically creating a number of divs, adding them to the DOM and also placing them into an array in order to keep tack of what divs are hidden or shown at a given time. Later, I tried to loop through all of the divs and compare them using the === operator but they never returned true -- even though both objects were divs and even showed the same innerHTML.

Anway, a Google search turned up a suggestion to add this function to the jQuery prototype:

$.fn.equals = function(compareTo) {
if (!compareTo || !compareTo.length || this.length!=compareTo.length)
{
return false;
}
for (var i=0; i
if (this[i]!==compareTo[i]) {
return false;
}
}
return true;
}

Problem fixed!

Great javascript editor - Aptana Studio

2010-02-06T09:52:00.000-08:00

I have been using Dreamweaver for over 10 years and never thought I would need another html code editor -- and ponied up the price for updates every few years. But now that I'm spending increasing time doing javascript development I found that it just wasn't that good for code completion/hinting/documentation etc. After a bit of searching I came across Aptana Studio and absolutely love it. It's built on Eclipse and has everything I could hope for js development -- including being able to install plugins for various frameworks like JQuery, DoJo and more. Plus you can even add a plugin for AIR development.

To install the JQuery plugin just go to:

Help>Install Aptana features>Ajax>JQuery Support

Did I mention that its free?

IE7 javascript error in for each loops

2010-01-28T10:26:00.001-08:00

One of the reasons I like Flash is the fact that one piece of code will work on every browser. But not so with javascript. Case in point:

If you have an array (langArray) in javascript and want to loop through it the common way is this:

for each(var item in langArray){
...
}

but this causes IE 7 to choke. Instead you have to use the more verbose:

for(var item=0;item var item = langArray[i];
...
}

Flash elements disappear in full screen mode

2010-01-21T04:28:00.000-08:00

I was surprised to find that a button and a dropdown list disappeared when I went full screen on a Flash app. Turns out that if you use an FLVPlayerback component it forces everything else on screen to disappear if you go fullscreen. Nice feature unless you don't want that to happen.

To fix it:

myFlvPlayback.fullScreenTakeOver = false;

Thanks Adobe forums :-)

Working with AS3 Video cuepoints

2010-01-07T01:23:00.000-08:00

I have been working with cuePoints in flash video and so far have been unable to add actionscript cuePoints and then seek to them. (Update: see solution below)

Encode a video: "myVideo.flv" without embedded cuePoints
Attach the video to a FLV playback component "my_FLVPlybk"
Add cuepoints like this: my_FLVPlybk.addASCuePoint(15, "Cue1");
Set up an event Listener to see if the cuepoints are there:

my_FLVPlybk.addEventListener(MetadataEvent.CUE_POINT, cp_listener);

function cp_listener(eventObject:MetadataEvent):void {
trace("Elapsed time in seconds: " + my_FLVPlybk.playheadTime);
trace("Cue point name is: " + eventObject.info.name);
trace("Cue point type is: " + eventObject.info.type);
}

When you run the app, it all works expected. Once the cuepoints are reached it traces out each point. However when you try to go to the cuepoint using this method:

my_FLVPlybk.seekToNavCuePoint("Cue1");

It fails with this error:

VideoError: 1003: Invalid seek
at fl.video::FLVPlayback/seekToNavCuePoint()

Now, this last bit of code works fine if you embed navigation cuepoints in the video itself -- using Adobe Media Encoder (FLV only -- F4V seems not to support cuepoints--at least not well), but according to Adobe it should be possible to add the cuepoints and reference them through actionscript only. In this particular case its not a problem for me since its easier to add the cuepoints to the encoded video, but if anyone has come up with a solution, please post it!

***************************

Update: I found the solution on another forum (http://bit.ly/8EdgdN):

The answer is to locate the cuePoint using findCuePoint() -- which returns an associative array of the point -- and then get the value of "time". At this point you can just do a seek. The final code would be like this:

my_FLVPlybk.seek(my_FLVPlybk.findCuePoint("Cue4", CuePointType.ACTIONSCRIPT)["time"]);

Making sense out of MVC in Flex

2009-12-16T05:41:00.001-08:00

Now that the video project is nearly out of the way, I'm anxious to get back more to Flex and to do this MVC is a top priority. Looking around the web there are a lot of tutorials but most focus on using frameworks like Cairngorm and PureMVC and very light info on the concepts of MVC and how they are implemented in AS3. Fortunately I stumbled upon this one--from the writers of an OReilly book on the subject -- and it's so good I'm thinking about buying the book:

http://www.as3dp.com/category/design-patterns/mvc/

Subtitle issues in DVD Studio Pro

2009-11-10T06:39:00.000-08:00

After a lot of experimenting, we have settled on the following subtitle settings for the NTSC and PAL versions of the DVD.

PAL: Helvetica Bold 34pt
NTSC: Arial Bold 29pt

We found that when we used Helvetica Bold for the NTSC version, the lower case "w" was a lot smaller than the other letters and looked very odd. Also the dot on the lower case "i" was not clear so it looked more like an "l".

We also liked that the top stem of the "t" was angled down a bit, making it a bit easier to read. Going back we might have used Arial for the PAL version too but we didn't have the time to test it.

For Persian text we found that the only good way of getting subtitles to look good was to do them in Photoshop -- one by one. We used a black font with a bold yellow outline, saved it as a png and imported into DVDSP. This will show up as a white letter and black outline. Make sure the outline is thick enough.

To do this for both NTSC and PAL:

1. Create the subtitle at 1024x576 (PAL 16:9). White background, black letter, yellow outline. Make sure to create guides for the title safe and keep the subtitle within this area.

2. Keep the subtitles in a separate folder and save backups--you'll use this set of subs to create the compressed NTSC and PAL subtitles.

3. Once you have all of the subs do a batch convert of them and resize them to 720x576. This will give you the PAL subtitles.

4. The do another batch conversion of the original set and resize them to 720x480. This is the required size for NTSC.

As far as our timing between the subtitles, we used a 4 frame gap -- but in retrospect we could have used 3 or 2 if necessary. It was also a happy accident that we did all of this on the PAL timeline (at 25 frames per second) and we were able to use the exact same stl file for NTSC. We didn't test this but I'm pretty sure that DVDSP would cough up an stl file for a PAL project that used the 29 frames per second timing.

Keylistener failing in Flex with creationComplete

2009-10-16T08:03:00.000-07:00

Just a quick note. It appears that the stage does not get initialized in a Flex app until the applicationComplete event is fired (not creationComplete).

So if you have an init() function that sets up the listener like this:

private function init():void{
stage.addEventListener(KeyboardEvent.KEY_DOWN, myKeyDownHandler);
}

calling it from the application tag like this will fail:

but this will work:

AS3 writeUTF vs writeMultiByte with diacriticals, curly quotes and other special characters

2009-10-16T01:13:00.000-07:00

I'm working on an Air app that allows a user to modify blocks of video subtitle timecodes. The user can open an stl file, splits the file into an arrayCollection and puts it into a datagrid. They can then select a block of timecodes and adjust them based on the modified start time. This will be a huge timesaver since the film we had completed required a re-edit and we have thousands of subtitles that will now need to be changed as a result.

In any event, when the work is done the user can save the file to the system. In the save process, I naturally used the writeUTF() method but found that although it's supposed to save using utf-8 encoding, things like diacritics, question marks, curly apostrophes and quotes were broken in the resulting file.

So what should have looked like this: “This is a quote”
Looked like this: â€œThis was a quoteâ€o

However, if you use the writeMultiByte() method and set the encoding to utf-8 it works perfectly.

So instead of : fileStream.writeUTF(myText);
try: fileStream.writeMultiByte(myText,"utf-8");

Since Google came up empty for search for the answer to this problem I though I would post this. Maybe it will help someone else....

Great replaceAll in AS3

2009-10-14T23:07:00.000-07:00

Simple and powerful. Found at:

http://snipplr.com/view/10998/replace-all/

var theContent:String = "Test String with lots of t's"
trace(replace(theContent, "t", "z"));

function replace(str:String, fnd:String, rpl:String):String{
return str.split(fnd).join(rpl);
}

"This PNG contains additional data for Adobe Fireworks, which will be discarded upon save."

2009-09-28T02:11:00.000-07:00

This prompt appeared when I had modified a number of files with Fireworks and then tried to execute a batch command in Photoshop on the files:

"This PNG contains additional data for Adobe Fireworks, which will be discarded upon save."

And although I clicked ok for the first file, it appeared again for each one--rendering the batch process useless. I couldn't find a solution in Google, so it seems that the only logical way to solve the problem was to run the batch using a Fireworks command instead. And it is just as easy to create a "command" in FW than an "action" in PS:

1. Open a file in Fireworks
2. Open the History dialog box
3. Make sure the History list is clear
4. Go through whatever steps you wantto modify the image as needed
5. In the History panel, highlight the steps that you want to set as the command
6. In the History options drop down select "Save as Command"
7. Give your command a descriptive name
8. Select File>Batch Process
9. Select the files you want to run the command against
10. In the next step (Batch Process dialog) open the Commands list and select the command you made.
11. Run it
12. Done!

NDF and DF problems in converting subtitles for use in Final Cut Pro and DVD Studio Pro

2009-09-27T07:52:00.000-07:00

It has proven to be extremely complicated to do subtitles for this project using DVD Studio Pro and Final Cut Pro. The latest wrinkle was to export the STL file back into Final Cut pro using Subbits. The program works well--but is not well documented so a lot comes down to trial and error.

The subtitles STL file we created for DVD Studio pro worked out fine but when we took the exact same file and converted it to XML using Subbits, the subtitles slowly got out of synch as the film advanced. The solution required us to adjust the STL in Subbits using the "Recalculate NDF to DF" option (a completely undocumented feature in the Subbits manual). On top of that when you choose the option it prompts you with the alert: "This will shift all timecodes down from 30fps to 29.97 fps. Are you sure you want to continue?" but since we are using PAL this makes no sense.

However, chosing this option -- despite the erroneous warning -- solved the out of synch issue with FCP.

** Update: It appears that this solution only fixed one out of the 4 subtitle STLs that we were working with. The others simply needed to have the Subbits settings for the project set to PAL instead of NTSC. (Clcik Edit>Preferences>PAL). Don't have the time to figure out why the two STLs needed to be processed differently--could have been a FCP setting instead. All in all though I still say Subbits is the best -- and lowest cost -- solution to the problem. I hope Apple will just create a more logical work flow to work with subtitles in FCP and DVD Studio Pro in their next version!

Use Nero to make an ISO image

2009-09-20T00:50:00.000-07:00

We have a DVD that we are creating and want to make an ISO image of it that can be downloaded over the internet. However, Nero Essentials doesn't make it very clear how to do it (I suppose to limit piracy). However a thread at this forum <http://forum.my.nero.com/index.php?showtopic=658> gave instructions on how to do it which I've modified below to cover Nero 7 Essentials (this version has a different interface than the one in the forum post) :

1. Open Nero Express Essentials
2. Click the arrow button on the far left of the Nero window to expose the Advanced panel (I had never noticed this arrow button before)
3. Place your DVD in the DVD player
4. Select "Copy Audio CD Tracks"
5. It will list the DVD track as a single track with a start, length, mode listing and the "Total" field will indicate something like: "1 Track, 343:25:23(3019 MB)"
6. Change the Output file format to "ISO image file (*.iso)
7. Set the name and path where you want the .iso to save
8. Click "Go"

Importing stl files into Final Cut Pro and DVD Studio Pro

2009-09-17T22:48:00.001-07:00

Surprisingly, the workflow to import subtitles into DVD Studio Pro and Final Cut Pro are entirely different. After all, the programs are both from Apple so you would think that they would work well together.

In any event, we made hundreds of subtitles in .stl format -- because this is the preferred method to import subtitles into DVD Studio Pro. But Final Cut Pro requires an xml format for importing subtitles -- and DVD Studio Pro does not allow you to export their subtitles out!

So we had to find a way to convert the stl into the xml format for Final Cut Pro. Thank goodness for Subbits:

http://www.videotoolshed.com/?page=products&pID=12

For $200 it allows you to open various subtitle formats and then export them into other formats -- including Final Cut Pro, Avid and more -- including the xml format required for flash video subtitling. It's also a decent subtitler on its own. Great solution.
(Disclaimer--I am in no way related to the creator of Subbits -- as proven by the bugs listed below)

You can also use TitleExchange for conversions:

http://www.spherico.com/filmtools/TitleExchange/index.html

...and it even lets you convert 50 subtitles at a time for free. This can save you buying it for small projects, but can be very time consuming if you are in a large project and have iterations. TitleExchange is also a converter only--whereas Subbits includes a full featured subtitler.

A few more things (bugs) about Subbits. You'll find that it allows you to open files with other character sets--such as Persian-- but you can't view or edit the text in the interface --since the characters show up as rectangles. But it still does the conversion properly.

The Mac version also seemed a bit more buggy than the one for PC:

1. It converted diacriticals into HTML encoded entities.
2. It took the comma that separated the end time from the subtitle -- in the stl file -- and made it the first character in the subtitle. So all of the subtitles looked like this: ", We thought it would be best to..."

So make sure to test the free demo thoroughly before you buy it. I decided to buy the PC version since it seemed to read the stl files better than the Mac version.

Subtitling issues using stl files and DVD Studio Pro

2009-09-17T22:37:00.000-07:00

We are working on a film project and are now in the process of doing the DVD authoring in DVD Studio Pro 4. There are a lot of subtitles so we decided to create an stl file using a spreadsheet. The structure is as follows:

Column 1: Start time <00:00:00:00>
Column 2: comma <,>
Column 3: End time <00:00:00:00>
Column 4: comma <,>
Column 5: Subtitle text

Once we are done with the file we copy and paste it into notepad and then save it as as .stl file using UTF-8 encoding.

Things generally have worked well with this process aside from one quite significant issue: If the subtitle starts with certain special characters -- in English this includes a quotation mark -- the character does not import into DVD Studio Pro -- it just disappears. In the case of Persian, the first character of every subtitle -- no matter what it was -- would not be imported.

Fortunately the fix is simple. Just make sure to add a space at the beginning of a subtitle that starts with an offending character. This seems to fool the importer into allowing the character to import.

After effects video tutorials

2009-09-13T05:58:00.000-07:00

Here is a GREAT site to learn After Effects!:

http://www.videocopilot.net/

How to lock a layer in After Effects and still be able to edit it

2009-08-29T22:09:00.000-07:00

I have been working with After Effects to modify a film clip that needed an animated mask to hide part of the image. However, every once in a while I would select the layer by accident and move it--which if you don't catch your mistake immediately, messes up your entire animation. Anyway, a bit of Googling and I found this brilliant (and simple solution here):

http://generalspecialist.com/2008/03/locking-after-effects-layers-so-they.asp

The short version is to select the layer in question, open the expressions panel for the "position" property and place the current position of the layer in brackets like this [123,23]. This simple script resets the position of the layer back to the original every time you mistakenly move it. BRILLIANT!

inDesign pixelated photos while printing

2009-08-15T03:17:00.000-07:00

I am working on an InDesign project that uses a lot of image. I kept having a problem where the images would look fine on screen but when I printed the file some of the photos were pixelated (but not all of them).

Fortunately I found a forum post with the answer:

Choose Print>Settings>Graphics
and then under Images set "Send Data" to "All"

Create MOV from Flash freezes - SOLUTION

2009-06-17T01:21:00.000-07:00

I was trying to create a MOV file from Flash CS4 and the progress bar filled up and froze while doing "Recording Flash Content". Thanks to this post http://www.kirupa.com/forum/showthread.php?t=275007 it turns out that I had additional keyframes after a stop() action and had chosen to export until the end of the timeline was reached.

But since the stop action occurred before the end of the timeline was reached then of course it froze. There are two workaround. One is to remove the stop() action or just set the timeframe that you want to stop exporting. So in this case I just set to to only export 2 minutes.

Brilliant.. thanks Kirupa forum!

Saving filesize in a Flex app

2009-03-09T07:12:00.001-07:00

I'm starting to use modules to try and get the filesize down in Baha'i Explorer. This has helped bring the initial load down from 380kb to 280kb. Although the separate modules add up to more than the original size, it does make it a quicker to load initially. Two other things to keep in mind to keep the file sie down are these compiler options:

-optimize=true;

If set to true, it enables the ActionScript optimizer. This optimizer reduces file size and increases performance by optimizing the SWF file's bytecode. The default value is false.

In my case setting it to true saved 50kb

Also, make sure to set the debug option to false when you are deploying :

-debug=false

This can save nearly 100kb.

For additional compiler options: click here >

How to set focus on a Flex app (and how to reset it after losing it)

2009-02-22T06:21:00.001-08:00

If you are running a Flex app and click on another app, you'll lose focus from the Flex app. In most programs in order to regain focus you just reclick the app and off you go. However Flash does not regain focus automatically unless the user clicks on some element that has an onClick event listener set up for it. This can be a problem especially if you have an app that is supposed to run using keyboard controls only (like a slideshow).

In order to regain focus, make sure that your main component on the stage -- like the canvas that holds your app -- has a click listener set up like this:

click="enableKeyListener(event)"

and then you can have a function that is called like this:

public function enableKeyListener(evt:Event):void{
application.addEventListener(KeyboardEvent.KEY_DOWN,keyUpListener);
world.setFocus();
}

You'll note that the enableKeyListener function is called by the application on creationComplete and explicity calls setFocus() on an element that exists on the stage. And it needs to do this again if you want to regain focus. AFAIK there is no setFocus() method in the stage object so you need to choose an element that is on the stage instead.

Turn off labels on a Flex chart

2009-02-21T03:55:00.001-08:00

If you don't want the labels along the side and bottom of a chart in Flex to show, set the "showLabels" property of the axis renderer to false like this:

<mx:horizontalAxisRenderer>

<mx:AxisRenderer showLabels="false"/>

</mx:horizontalAxisRenderer>

<mx:verticalAxisRenderer>

<mx:AxisRenderer showLabels="false"/>

</mx:verticalAxisRenderer>

Creating full screen Flex apps

2009-02-18T00:06:00.000-08:00

I'm not sure why Adobe doesn't just add this as an option to FlexBuilder but in order to allow your Flex app to go fullscreen you need to follow these steps:

1. Go here to download html templates for fullscreen support: http://www.adobe.com/devnet/flashplayer/articles/full_screen_mode.html
2. Delete all of the files in the html-template folder in your Flex project and place the contents of either the "full-screen-support-with-history" or "full-screen-support" folders from the zip file
3. Add this to the application tag in your Flex project: preinitialize="systemManager.stage.scaleMode = 'showAll'"
4. Call this when you want the app to go fullscreen: systemManager.stage.displayState = StageDisplayState.FULL_SCREEN;

Embedding an swf into Flex will remove all of the timeline code

2009-02-17T23:24:00.001-08:00

It appears that if you try to load an swf file into Flex using the SWFLoader you can access functions and variables inside the swf from Flex by using this syntax: mySWFLoader.content.myvariable.

However if you use the embed directive in the SWFLoader, all timeline code is lost, meaning that you can't access functions, use gotoAndStop(), etc...

RSL error 1 of 1 / error #2048 and Vista

2009-02-01T13:06:00.000-08:00

A user reported a problem using a Facebook Flex app that uses Runtime Shared Libraries. On Vista/IE they tried to load the app and got this error : RSL error 1 of 1 / Error #2048

In Googling the error, most everyone said that the server needs a cross domain file -- but that is in place and I'm not able to replicate the issue in WinXP(Firefox and IE) or Mac(Firefox).

One forum (http://www.adobeforums.com/webx/.59b6ed13) indicated that a MIME type was needed for the .swz file so I put this in the .htaccess file: AddType application/x-swz .swz

But that didn't fix it either.

Finally I was looking at the date stamp for the framework_3.0.0.477.swf and framework_3.0.0.477.swz files and found that the ones on the server were older than the ones in the bin-debug directory of Flex (the server ones were 4 months while the latest ones were 2 months old). Anyway, I pushed the newer ones to the server and the app loaded perfectly.

Odd that this would only appear with Vista/IE. I was not able to test it with Vista/Firefox...

Using the Share-button to post multimedia (audio, video and flash) in FBML

2009-01-31T23:54:00.000-08:00

I have been frustrated in trying to find out how to add multimedia using the share button. The FBML fb:share-button documentation (http://wiki.developers.facebook.com/index.php/Fb:share-button) provides an example of sharing video, but does not give all of the meta information that you can use if you want to share other media types -- they just link to another page which hides the info -- and it is only revealed if you click on the rather innocuous link: "How do I make sure the Share Preview works?". arghhh...

I had gone to that page numerous times and it was only in desperation I discovered it. Anyway, here is the "hidden" info:

Multimedia Tags

The ideal way for you to connect video and media files to the share link is to make the URL in the link point to an html page that contains the <meta>/<link> tags described above (title, description, image_src) along with some additional <meta>/<link> tags:

Audio (required)

<meta name="title" content="page_title">
<meta name="description" content="audio_description">
<link rel="image_src" href="audio_image_src_url">
<link rel="audio_src" href="audio_src_url">
<meta name="audio_type" content="Content-Type header field">

Audio (optional)

<meta name="audio_title" content="audio_title (eg. song name)">
<meta name="audio_artist" content="audio_artist_name">
<meta name="audio_album" content="audio_album_name">

Video* (required)

<meta name="title" content="video_title">
<meta name="description" content="video_description">
<link rel="image_src" href="video_screenshot_image_src_url">
<link rel="video_src" href="video_src_url">*
<meta name="video_height" content="video_height">
<meta name="video_width" content="video_width">
<meta name="video_type" content="Content-Type header field">

Video (example)

Here is an example Flash Video embed:

<embed src="http://www.example.com/player.swf" flashvars="video_id=123456789" type="application/x-shockwave-flash" width="300" height="200"></embed>

For that video, the appropriate metadata would look like this:

Beware of Facebook documentation and blogs

2009-01-30T00:11:00.000-08:00

After working on a Facebook app for some time now I have finally come to the conclusion that you can't trust either the documentation or blog posts on how to make something work. It appears that Facebook changes the way things work on a regular basis -- and don't document them very well -- thus breaking your code or making those easy tutorials you found from last year completely useless. Perfect case in point is how to create infinite sessions :(

Facebook-updating a profile box using a cron and using an "infinite session"

2009-01-27T05:53:00.000-08:00

I have a profile box that was created for a Facebook app -- one for a narrow page (when the box appears on the left side of your profile page) and the other for the boxes tab. The box displays the most recent blog post and a randomly selected video -- so it needs to be updated every day. The content is the same for everyone so there was no need to grab the users id and loop through a record set and update each one individually.

Anyway, I looked all over to find out how to do this and didn't seem to get any clear answers. The problem was how to run a cron when the server can't log you into Facebook to rebuild the profile pages. This required creating an infinite session -- but Facebook has changed how you do this in the past year and there are many blog posts that contradict each other on it.

After several failed attempts (the cron would work for a day and then fail), I found this recent blog post: http://www.emcro.com/blog/2009/01/facebook-infinite-session-keys-no-more/

I followed his instructions on getting an infinite session and now this is how it now looks:

$appapikey = 'app api key';
$appsecret = 'app secret key';
$infiniteSessionkey = 'app session key';
$facebook = new Facebook($appapikey, $appsecret);
$userid = your userid;

// log into facebook using the userid and infinite session key
$facebook->api_client->user = $userid;
$facebook->api_client->session_key = $facebook_infinite_session_key;
$facebook->api_client->expires = 0;

// how that you're logged in you can call fbml_refreshRefUrl() to reset the contents
$facebook->api_client->fbml_refreshRefUrl("http://www.youyrsite.com/facebook/profile-narrow.php");

You can then just run a cron on your server that calls the page periodically to refresh the profile box:
/usr/bin/wget -O - -q -t 1 http://www.mysiteurl.com/facebook/refresh-profile-apps.php

UPDATE (Feb 3, 2009): It appears that I made it work by pure accident. If you notice the code above (which I had copied and pasted) I set the session_key to be equal to a non-existent variable:

$facebook->api_client->session_key = $facebook_infinite_session_key;

So the session key was being set to nothing. When I changed it to use the infinite session key I went through all the trouble of getting, it said that the session had expired. In fact if you comment out the line entirely it still works. I'm thinking that the trick is the following line that sets the expires to 0:

$facebook->api_client->expires = 0;

I'll have to experiment a bit more with this since its likely Facebook will plug this hole up sooner or later.

Also, a recent comment from a Facebook employee to the blog mentioned above links to a number of docs that were posted to the Facebook Developer blog that deal with what used to be called "infinite sessions" but are now "offline access":

*************************

http://developers.facebook.com/news.php?blog=1&story=116
http://developers.facebook.com/news.php?blog=1&story=130
http://developers.facebook.com/news.php?blog=1&story=132
http://developers.facebook.com/news.php?blog=1&story=135

The initial doc for it (mentioned in those posts):
http://wiki.developers.facebook.com/index.php/New_Design_Platform_Changes#Changes_to_Session_Keys

A FAQ about changes to authentication:
http://wiki.developers.facebook.com/index.php/New_Design_User_Login
http://wiki.developers.facebook.com/index.php/Authorizing_Applications

The easy way to get an “infinite session” is to prompt your users for offline access, as described here (and again, announced in those blog posts):
http://wiki.developers.facebook.com/index.php/Extended_permissions

*************************

Unfortunately, no one updated the official docs when they made these changes, so searching for "infinite sessions" in the Wiki brings up none of this new info...

Flex error : Only local-with-filesystem and trusted local > SWF files may access local resources

2009-01-24T21:25:00.000-08:00

Set this compiler flag to fix it: -use-network=false

Nice flex video player

2009-01-14T06:25:00.001-08:00

Setting up a video display in Flex is easy but there is no prebuilt controller (not sure why that is...). Anyway, here was a good one for free:

http://www.fxcomponents.com/flex-video-player/

Update (jan 23 2009) this is not consistent scrubber -- as longer videos don't scrub properly...

Expand Flex tree by clicking row

2009-01-14T06:13:00.000-08:00

This is cool, useful and easy. It allows the user to opne a tree branch by clicking anywhere in the parent row (not just the arrow icon):

import mx.events.ListEvent;

private function tree_itemClick(evt:ListEvent):void {
var item:Object = Tree(evt.currentTarget).selectedItem;
if (mytree.dataDescriptor.isBranch(item)) {
mytree.expandItem(item, !mytree.isItemOpen(item), true);
}
}

...
itemClick="tree_itemClick(event);" />

Dynamically loading embedded images in AS3

2008-12-04T04:42:00.000-08:00

Huge kudos for a post found on UltraShock that saved me today when I was on a crazy deadline to finish something:

I had recently completed a project that was built as a flash projector file. Originally the movie used external .jpg's that loaded at runtime, but to make it safer to distribute it was decided that all of the jpgs had to be embedded into the swf and loaded from there.

The actionscript stored all of the image names in an array and called them in sequence to load into a movieclip. To do this I just used a Loader() object. However when moving the assets into the swf I couldn't (quickly) find a simple way to load them dynamically anymore.

The first step was to turn each image into its own class with the filename as the class name -- so IMG_45.jpg was turned into a class (using the linkage panel) called IMG_45, etc. So far so good. But then we got stumped on how to load it dynamically. While I could have made them all movieclips, put them all on the timeline and called: this['IMG_45'] -- but that would have required that all 60 high res images be placed on the stage and probably killed performance.

In the end I had about 15 minutes to find a way to load the specific class when all I had was a the name of it -- as a string.

Anyway, some Googling found this brilliant function that solved it in 5 minutes instead:

import flash.display.Bitmap;
import flash.display.BitmapData;
import flash.utils.getDefinitionByName;

var bitmapData:BitmapData = getBitmapData(myImg);
var bitmap:Bitmap = new Bitmap( bitmapData ); this.addChild(bitmap);

function getBitmapData( className:String ):BitmapData{
var obj:BitmapData;
var cls:Class = getClass( className );

try{
obj = new cls( 0, 0 );
}catch(err:Error){}

return obj;
}

function getClass( className:String ):Class{
return getDefinitionByName(className) as Class;
}

Awesome -- truly!!

stopAllSounds() in as3

2008-12-04T04:38:00.000-08:00

FYI - The old stopAllSounds() method in Actionscript 2 has been replaced with the static method SoundMixer.stopAll()

You implement it this way:

import flash.media.SoundMixer;

SoundMixer.stopAll();

Facebook: can't next fb:name inside of a meta tag of an fb:share-button

2008-12-02T02:40:00.000-08:00

This won't work:

<fb:share-button class="meta">

<meta name="medium" content="blog"/>

<meta name="title" content="<fb:name uid=<?php echo $userid ?> useyou=false /> found this great video"/>

<meta name="video_type" content="application/x-shockwave-flash"/>

<meta name="video_height" content="345"/>

<meta name="video_width" content="473"/>

<meta name="description" content="Cleaning the coastline"/>

<link rel="image_src" href="http://mysite.com/myimage.jpg"/>

<link rel="video_src" href="http://mysite.com/myimage.flv"/>

<link rel="target_url" href="http://mysite.com"/>

</fb:share-button>

Now you are probably wondering why I wouldn't just set the name var in php and print that instead but this was being used as the return call from ajax and I wanted to try and use the fb:name tag just like any other fb tag. But it doesn't work. So it appears that "some" fb tags can be nested but not this one (or just not in this way).

As a workaround I sent the name along with the other params in the ajax call and just built the whole string on the server instead:

<?php

$username = $_GET['username'];

$itemId = $_GET['itemId'];

$itemDescription = $_GET['itemDescription'];

$itemURL = $_GET['itemURL'];

$itemImage = $_GET['itemImage'];

$itemType = $_GET['itemType'];

if($itemType=='video'){

echo '<fb:share-button class="meta"> <meta name="medium" content="blog"/> <meta name="title" content="' . $username . ' found this great video on Baha\'i Explorer"/><meta name="video_type" content="application/x-shockwave-flash"/><meta name="video_height" content="345"/> <meta name="video_width" content="473"/> <meta name="description" content="'. $itemTitle . '"/> <link rel="image_src" href="http://i3.ytimg.com/vi/'. $itemId . '/default.jpg"/> <link rel="video_src" href="http://www.youtube.com/v/' . $itemId . '&hl=en&fs=1"/> <link rel="target_url" href="' . $itemURL .'"/> </fb:share-button>';

}

?>

Facebook share pod causes flash to become invisible

2008-12-02T00:40:00.000-08:00

Another problem with Facebook and Flash playing together. Using the fb:share-button: when the user clicks it the share pod appears in IE but it also makes the flash on the page disappear. This only happens in IE. I've tried setting the fb:swf wmode param to transparent but it doesn't help. Very frustrating...

update: I thought of a really cheap (but workable) hack. I've made a screenshot of the flash app and then covered it with a 80% black tint and made a .jpg. This is used as the background of the div that surrounds the flash movie. This way, when a user clicks on the share and the flash disappears the disabled grayed out image shows instead -- making it "look" like everything is fine. Of course the state is different (different text is showing for instance) but the user is focused on the share pod anyway.

I'm not thrilled with it but it will work for the time being until I can figure out how to have flash make calls directly to the server. Perhaps I should be skipping to Facebook Connect??

Facebook error: "Errors while loading page from application Runtime errors: URLExceptionEmpty URLs not allowed here"

2008-11-30T06:46:00.001-08:00

I got this error while coding a canvas page:

"Errors while loading page from application Runtime errors: URLExceptionEmpty URLs not allowed here"

It turns out that I had an image tag that I wanted to start empty and then set the src at a later time using javascript:

<img id="myimg" src="" />

But the error above gets thrown when you try to leave the img src blank. So as a workaround I've placed a transparent spacer image instead and now it works fine...

Form.submit does not work in Facebook FBJS

2008-11-29T07:23:00.000-08:00

Just a note: Facebook apparently does not support the ability to submit a form using javascript -- or fbjs -- (form.submit). Thus a user must click something in order for it to submit a form.

This came up because I'm working on a Facebook app in Flex that needs to post items to the user's feed. The Facebook AS3 API (http://code.google.com/p/facebook-actionscript-api/) appears to no longer work completely -- or at least the google code page indicates that development has stopped on it -- and I'm getting very gun shy about developing too tightly against a Facebook API that changes too quickly. As a result, I've decided to use javascript to pass values out of Flash and into hidden form fields on the facebook canvas page. The problem is that I can't call a function from flash that can also submit the form. So it seems that the best work around will be to create a button that shows above or below the Flex app that a user can click when they want to share an video or audio clip on their feed. The form will be updated with the proper values from Flex whenever a user changes their audio or video selection. It's not the cleanest implementation but the tests so far prove that it can work...

Making sense out of Facebook feeds - Part one: Template Bundles

2008-11-29T01:52:00.000-08:00

I'm trying to make posting content to a Facebook feed work and have run into quite a few problems finding a good tutorial that actually works. So I'm posting these notes for myself and anyone else who might find them useful:

In order to publish a item from a Facebook application to a users feed you need to follow a couple of steps:

1. Create a "Template Bundle": This is a template that contains up to three types of feed templates, a title only (one line), a title and short content (short story) or a longer amount of content (full story). The template contain "tokens" which are essentially placemarks where dynamic content will be inserted once a user actually publishes content to their feed using this template. Tokens have this format {*name-of-token*}. {*actor*} and {*target*} are two reserved tokens and if used will be replaced with the name of the facebook user {*actor*} and/or the target of the action {*target*} such as : "Joe tagged Joanie". There are additional reserved words that can't be used for token names such as "flash", "images", "mp3" and "video".

Here is an example of a php page that creates and registers a template bundle. In this example we will use the {*actor*} token and also create a another token called {*author*}:

<?php

// create the different feed templates

// one line feed template

  $one_line_story = array('{*actor*} saw a great video from {*author*}!');
 
//short story template 

  $short_story = array(

  'template_title' => '{*actor*} saw a great short video from {*author*}!',
 
  'template_body' => 'Check this video out >'

  ); 



//full story template 

  $full_story = array(

  'template_title' => '{*actor*} saw a great full video from {*author*}!',

  'template_body' => 'Check it out! I found on <a href="http://www.youtube.com">YouTube</a>: <br/>'

  );



// now register the bundle

  $res = $facebook->api_client->feed_registerTemplateBundle($one_line_story, $short_story, $full_story);

// this is the template bundle id

echo $res

?>

2. Once you've registered this bundle you can save the id you got in the last line:

 echo $res

or go to the Facebook Developer "Registered Templates Console" (http://developers.facebook.com/tools.php?templates) and get the ID for the particular template you want to use later.

3. Now you are ready to set the feed.

4. Lets say that you have a canvas page where you post a number of videos from YouTube and CNN. On the page you want to allow the user to let people know which one they looked at--such as: "Bill watched a video from CNN". To do this you need to create a form on your page with a required tag fbtype="feedStory" and the action param that points to a php page that will process the feed content and post it for you:

<form fbtype="feedStory" action="http://apps.facebook.com/myapp/set-feed-item.php"> 

<select size=2 name="author"> 

<option value="" selected="true">Select an author</option> 

<option value="CNN" > CNN </option> 

<option value="YouTube"> YouTube</option>

</select> 

<input type="submit" label="Submit" /> </form>

5. Now here is the php processing page:

<?php

$feedReturn = array(

  'content'=> array(

  'feed'=> array(

  'template_id'=>100566785645,

  'template_data'=> array (

  'author'=>$_POST['author']

  // add additional tokens here

)

) 

),

'method'=>'feedStory'

);
echo json_encode($feedReturn);

 
?>

Once the user has submitted the form from the canvas page, this page will process the information and post the feed. However, this sample will only post text. While I have successfully implemented adding an image to a short story feed post, I have been unable to add flash, videos and mp3s - despite following the Facebook documentation closely. Hopefully I will be able to figure this out shortly and add to this post later...

Finally figured out how to have Flash call Javascript in Facebook!

2008-11-28T05:27:00.000-08:00

This took some doing. My goal was to have a Flash as3 movie (built in Flex) to communicate with Javascript on a Facebook canvas page. Here are the steps (quickly):

1. On the Facebook Canvas page insert a <fb:fbjs-bridge/> tag ABOVE your embedded flash movie (very important that it is ABOVE).
2. Insert the <fb:swf /> as indicated in the Facebook docs. Facebook will automatically pass a localConnection name via flashvars into the swf (the var is called "fb_local_connection").
3. In your flash movie get the localConnection name that Facebook passed in:

private var connectionName:String = Application.application.parameters.fb_local_connection;

4. Facebook exposes the Javascript that has been placed on a Canvas page by providing the function "callFBJS" in the bridge flash movie. This function requires two arguments:

callFBJS(myFunctionName:String,myArgs:Array)

5. With this info you can make the connection and call the javascript function:

connection.send(connectionName,"callFBJS",myFunctionName,myArgs);

Here is the sample code of a AS3 Flex app that call a js function on the canvas page called: showInvite();


<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:ns1="components.*" creationComplete="init();">

<mx:Script>

<![CDATA[

import flash.net.LocalConnection;

private var connection:LocalConnection = new LocalConnection();

private var connectionName:String = "";



private function init():void{

connectionName = Application.application.parameters.fb_local_connection;

}



private function callFBJS(methodName:String,args:Array):void {

if (connectionName!=""){

connection.allowDomain("apps.facebook.com", "apps.*.facebook.com");

connection.send(connectionName,"callFBJS",methodName,args);

}

}



private function showInvite():void{

var args:Array = new Array("arg1","arg2");

callFBJS("showInvite",args);

}

]]>

</mx:Script>

<mx:Button x="40" y="10" label="click" click="showInvite()"/>

</mx:Application>

For more info on this evolving drama (Facebook changes stuff all the time it appears): http://wiki.developers.facebook.com/index.php/Fb:fbjs-bridge

Facebook and Flash -- problem with fbjs-bridge

2008-11-28T04:49:00.000-08:00

I'm learning the hard way how much of a pain it is to develop apps for Facebook. Documentation is quite bad, there are very few good tutorials-- and they change things without saying anything.

Here is a GREAT example. I'm trying to use their fb:fwjs-bridge to allow an swf file to communicate with js on the facebnook page -- using a localConnection. But it turns out that it completely fails if you don't place the fb:fbjs-bridge tag ABOVE your own swf file tag (fb:swf). If you put it below, nothing works.

Makes NO sense but there it is.....

Save the hassle -- code FBML in blocks

2008-11-23T23:57:00.001-08:00

After struggling with using a series of inline fbml blocks in order to create a narrow and wide version of a profile box, I've decided to just do two different versions each surrounding each with either<fb:wide><fb:/wide> or <fb:narrow><fb:/narrow> tags. This saves having the complicated inline tags every line or so. It also allows me to use the style block since that is also inside the FBML tag.

Cannot use FBML in css style block

2008-11-23T23:04:00.001-08:00

I'm learning a lot about facebook right now -- especially that there are not a lot of good resources whe you want to do more complex coding with it. The tutorials mostly skim the surface of the easiest integration -- or provide you wiht code that you have to deconstruct. Even the OReilly "Essential" book is a joke--it give a few pages of intro and then just provides the API in book form.

In any event, here is a css tip: you cannot use FBML is a style block. For instance, if you have a div like this:

<div class="content"></div>

and you define the style in a block:

<style>
.content{
width:400px;
}
</style>

you can't use FBML to change the property based on something like the width of the profile box it appears in:

<style>
.content{
<fb:wide> width:400px;</fb:wide>
<fb:narrow> width:100px;</fb:narrow>
}
</style>

Instead, you'll need to use inline styles --or enclose the tag itself in the fbml code:

<fb:wide> <div id="content" style="width:400px"></fb:wide>
<fb:narrow> <div id="content" style="width:100px"></fb:narrow>

Facebook and Flash -- getting an embedded Flash app to work with getURL() or navigateToURL()

2008-11-20T07:22:00.001-08:00

Long story short, you can't use getURL() or navigateToURL() with Flash when you embed the piece with fb:swf. The Flash security sandbox prohibits this in a flash movie loaded from a different domain. You can use an iframe but that causes other issues with Facebook. The folks at Facebook decided to resolve this by using a localConnection instead.

To use it add this FBML tag to the page where your FB:swf tag is:

fb:fbjs_bridge

I then created a util function called getURL() to remind me of the good old days. This function first checks to see if it can make the navigateToURL() directly and if not uses the lc instead. This way the same movie will work as a standalone and on Facebook too:

public static function getURL(thisURL:String):void{
var request:URLRequest = new URLRequest(thisURL);
try{
navigateToURL(request);
}catch(er:Error){
// for Facebook
var conn: LocalConnection = new LocalConnection(); ;
conn.send("callFBJS", "document.setLocation",[thisURL]);
}

}

Here is more info onthe genesis of the problem:

http://bugs.developers.facebook.com/show_bug.cgi?id=994#c28

Facebook errors: fb:redirect: redirect forbidden

2008-11-20T07:19:00.000-08:00

I'm working on putting a flash app onto facebook and had this error when I tried to use a page in a tab:

fb:redirect: redirect forbidden by flavor TabFBMLFlavor on the profile tab.

A bit of searching revealed that you can't require ogin: $userid = $facebook->require_login();

Unless you check to see if the userid is null:

$userid = $facebook->get_profile_user();
if(is_null($userid)){
$userid = $facebook->require_login();
}

Outline around a Flash movie in Firefox -- with SWFObject

2008-11-03T01:40:00.000-08:00

Suprisingly this one took a while to find the answer to. I embedded a flash movie using SWFObject and found that once a user clicked on the movie, a dotted line appeared around the edge of the swf (in Firefox). I tried adding "outline:none" to the css for the div but it didn't help. The only thing that worked was to add this to the javascript right after creating the swfObject:

swfobject.createCSS("#growth","outline:none");
(where growth was the name of the target div)

So here was the full code for the swfObject:

swfobject.embedSWF("web-v2.swf", "growth", "1024", "768", "9.0.124","expressInstall.swf", flashvars, params, attributes);

swfobject.createCSS("#growth","outline:none");

Dreamweaver CS3 crashes after Daylight Savings Time ends

2008-10-20T07:25:00.000-07:00

Wow--talk about an obscure bug. I've been working with php in Dreamweaver CS3 and kept getting file errors sporadically that caused the program to crash. The problems were not present in the CS4 trial and was about to give up and reinstall CS2 in the hope that it wouldn't have the same problem.

But then I came across this technote on a discussion board: "Dreamweaver CS3 crashes after Daylight Savings Time ends" -- and it just so happens that daylight Savings Time ended in Israel a few weeks ago.

Sure, enough I applied the fix and no more crashes!!

Adobe announces inContext editor

2008-10-17T00:02:00.000-07:00

This is a very col new service from Adobe -- the inContext Editor service allows the non-technical person to edit their website without a web designers help. :

http://labs.adobe.com/technologies/incontextediting/

I have been a big fan of Contribute -- but now Adobe has raised the bar higher by letting designers focus more on design and development and leave even simple typo fixes and changes to the client.

And its done in Flex :)

Digest mismatch with RSL framework_3.0.0

2008-10-12T07:28:00.001-07:00

After launching a brand new Flex app, I had a user report that they got this error when they tried to open the app:

"Digest mismatch with RSL framework_3.0.0.477.swf. Redeploy the matching RSL or relink your application with the matching library"

This very cryptic message related to the feature in Flex3 to have Runtime Sharing Libraries (or RSL's) -- essentially shared libraries of the framework so you don't have to export your swf with everything in it. This awesome feature cuts down on file size dramatically. If the user has visited another site that uses the same library it will save them having to download it again since the framework has been cached inside of Flash Player.

In any event, after some searching I found some pretty intense suggestions to fix this error but I also found this article on Adobe.com:

http://labs.adobe.com/wiki/index.php/Flex_3:Feature_Introductions:Flex_3_RSLs

which indicates that RSLs require Flash Player 9.0.60. After asking the user to update their Flash player, the problem was fixed.

Hopefully this might save another person who gets the same error and only finds very complicated solutions on Google for this error. Start with this approach and if that doesn't work you can try the others...

and good luck...

Sound problem fixed in Flashplayer 10

2008-10-06T06:16:00.000-07:00

After finally discovering the root of the problem I was having with the Sound object (see below) I decided to try the beta for flash player 10 and found that the bug has been fixed!! So this just means that I can continue the development of the app and just let users know that the fix can be applied by installing the new player (which will no doubt be released in a very short time -- now that CS4 was announced)...

...phew... I was beginning to debate about building the player in AS2 and embedding it the Flex app -- and that would have been a major pain!

Sound complete event problem in AS3 (with some mp3 files)

2008-10-01T10:51:00.001-07:00

Ok, another frustrating one. It appears that the Sound.complete event in AS3 does not work properly. Here is what is happening:

I'm building an MP3 player and want to include a progress bar that allows a user to scrub the track. Since the Sound object can't tell at the beginning how long the track is until its fully loaded, I'm using the rss feed tag to initially set the duration. Once the sound has fully loaded I have an event handler that gets called by the Complete event. This usually works -- but I have found that for SOME mp3 files (not sure why its only some of them) when the event.COMPLETE fires the Sound.length shows that the sound is TWICE as long as it really is. A second later it return sthe proper value but that means I can't rely on the event to determine what the true length of the file is.

At least I know where to put the hack in (I'll probably wait a second or two and THEN sent the final duration)

Since I didn't get any other Google hits for this exact error (although others have reported errors with the Sound object--including the COMPLETE event), I thought I'd blog it.

Hope it helps somebody else...

SimpleXML

2008-09-22T05:37:00.001-07:00

parsing XML with Flex/AS3 is a breeze but I need to do some work with php and it isn't quote as straightforward as i had hoped. In any event, the best bet seems to be to use simpleXML. And here is a pretty good tutorial:

http://debuggable.com/posts/parsing-xml-using-simplexml:480f4dfe-6a58-4a17-a133-455acbdd56cb

I'm still trying to get used to how to use custom namespaces but i'm close (i hope!)

The future of the web

2008-08-28T00:51:00.000-07:00

This is the most amazing thing I have seen in years:

http://labs.mozilla.com/2008/08/introducing-ubiquity/

Problems adding AS3 created objects to Flex Components

2008-08-20T05:42:00.000-07:00

I have spent the better part of a day discovering that adding actionscript created UIComponents to the display list of a flex component will cause the component to not set the scrollbars properly.

Here is what I had:

1. An mx:Canvas object added to the stage using the tag
2. An AS3 class called ImageHolder that was extended from UIComponent
3. A loop to adds a series of 28 images into the Canvas, setting the x and y props so that they were spaced into rows of 4.

When I ran it, the objects would start to add properly but when it got to the bottom row of the canvas (where the rest of the images would have to be hidden inside the container) the images showed on above the canvas and then suddenly get hidden by the container -- as though they were on top of the canvas and not inside of it. In addition the scrollbar would not properly scroll to the last row of images -- essentially hiding the from view. I assume this is because the Canvas component was not recognizing that those last items were there and wouldn't resize again.

After trying a number of different approaches, I finally decided to create a custom component that was based on a canvas and add the images to it instead. Once I did this and added this Component to the Canvas it worked perfectly.

It probably says somewhere in the docs that you should use components as a building blocks instead of creating actionscript objects, but I just assumed that they would play nice together...

Nice data visualization for Flash

2008-08-19T05:05:00.000-07:00

This is a pretty awesome framework:

http://flare.prefuse.org/

creating a browser window in a flex app

2008-08-06T06:28:00.000-07:00

Here is a very cool way of creating a browser window -- using an iframe -- inside of flex:

http://deitte.com/archives/2006/08/finally_updated.htm

It also points out in the update why this is not the best way to go about this problem -- primarily because of accessibility (it can't be accessed by screen readers) -- but it is useful if really needed....

Awesome resource for css and javascript

2008-07-08T23:50:00.000-07:00

Just another note to myself. Here is a great javascript and CSS resource:

Quirksmode.org

PHP email with attachments -- and how to do sendAndLoad in AS3

2008-07-08T23:32:00.000-07:00

I took a bit of a break after the marathon 2 months to get this DVD ready and worked on a wordpress site -- and learned a lot about reconfiguring it to do what I really wanted. In any event, I'm back to working on the final steps of porting the Flash DVD to the Web. This has posed all sorts of Flash AS3 challenges as we are trying to make it usable for both high and low bandwidth users.

One new feature for the web version will be to allow users to email a copy of a selected photo to a friend. Of course, this meant learning how to use the AS3 version of sendAndLoad -- and also how to do file attachments in php email.

These links have come in handy for both of these:

How to do sendAndLoad in AS3 >

How to do file attachments in PHP email - option 1> | option 2 > | option 3 >

So far I've implemented the php code in option 1 and found it quite easy. I'll try the html version in option 2 if I get time. Option 3 is to PHPMailer. I'd like to try it someday but generally prefer to learn the code rather than implement a class built by someone else...

Odd behavior with E4X filtering in AS3

2008-05-19T08:37:00.000-07:00

This one drove me nuts today and so I thought I'd better blog it. I was trying to create a function that to filter an xml file using E4X and locate a node with a specific "photoid" attribute:

First I tried to get retrieve the node with the correct id by filtering:

_{var myList:XMLList = pdXML..photo.(@photoid=="123");}

but, it appears that unless the XMLList has more than one item it won't trace anything out when you do this:

_{trace(myList.toString()); //shows nothing
trace(myList); //also shows nothing}

...even though the list clearly has one item in it:

_{trace(myList.length()); //returns 1}

The only way that it will show the node attribute value is when you refer specifically to the attribute in the trace statement like this:

_{trace(myList.@photoid); // shows "123"}

If the xmlList has more than one node it traces fine using toString(). But the thing that JUST occurred to me is that I SHOULD have used toXMLString()-- which (as I just correctly tested) traces the single node correctly. Even so, the xmlList should trace properly even without using the toString() or toXMLString() methods -- like this: trace(myList);

In any event, I'm not sure if this is a bug or a feature but it sure was a frustrating way to spend an afternoon...

Tutorials for skinning Flex components

2008-05-16T11:30:00.000-07:00

Here is a blog posting that points to a number of tutorials on how to skin Flex components. I'm not ready to review them now but they will probably come in handy later ;-)

Click Here >

Bandwidth and debugging tool

2008-05-14T07:40:00.001-07:00

Here is a GREAT tool for testing and debugging:

http://www.charlesproxy.com/

It lets you throttle your bandwidth to test how your page(or flash) works for different users -- plus it allows you to monitor the download times of various objects and the backend communication between flash and your server. VERY useful!

Playing with AS3 Drawing

2008-05-12T07:01:00.000-07:00

I've been going through Colin Moocks' AS3 book and trying out some of the examples (along with getting distracted by trying related things). In this piece I tried to create a dynamic randomized drawing window. The colors are pulled randmly from an array, and the app randomly draws 3-9 lines to form an object and also randomly selects the alpha prop. After 6 objects are drawn it deletes the lowest one in the display list. People have been doing this kind of thing for a long time but this was fun to do with AS3:

Good article on Flex performance management

2008-05-04T00:14:00.000-07:00

Flex RIA Performance Considerations Part 2: Application Startup