Adrian Parr’s Blog

Last Thursday I went to Flash Camp Manchester and recorded Michael Plank’s FDT4 presentation.

He does some speed coding and then demonstrates all the shortcuts used.

I have used the pre-release version of Adobe’s Strobe Media Playback to play the video.

Watch it here! (Duration 43 minutes)

Note: It’s progressive download, not streamed.

I have just spent ages trying to set the tabIndex order of a bunch of TLFTextFields in Flash CS5. With the old Classic TextFields you would have done something along the lines of …

But with the new TLFTextFields this doesn’t work. You can’t just set the tabIndex property of the TLFTextField directly. When you do, it just doesn’t work.

Then I stumbled across this little bit of info in the docs …

So, for my simple example above to work with TLFTextFields instead of Classic TextFields I ended up writing …

I hope this helps and that you get it to work quicker than I did!

NOTE 1: I’ve noticed that when the user tabs to a Classic TextField the text is selected, but when you tab to a TLFTextField the caret is positioned at the beginning and no text is automatically selected.

NOTE 2: I’ve also noticed that the selection colour for a Classic TextField is black, but the selection colour for a TLFTextField is light blue. This can look a bit strange when you have a mixture textfields on screen near each other.

Recently I stumbled across this post by Ryan Creighton at Untold Entertainment from back in October 2008 titled ‘stop(); Action Ignored on Nested Movieclip‘. It basically demonstrates how (in AS3) a child movieclip does not stop on the first frame (even though you have put a stop(); action on it) when it’s parent/container is dynamically attached to the stage.

To me this does seem like a bug. Unless I am missing some subtle difference in this area between AS2 and AS3 that I am missing. If so, please can someone explain it to me?

I’ve knocked up a couple of examples to demonstrate …

Firstly, here is the AS2 version that attaches the container movieclip to the stage using the old attachMovie method. Sure enough, the child movieclip does as it is told and stays on frame 1.

And here is the AS3 version that instantiates the Contaner class and adds it to the display list using addChild. As you can see the child movieclip ignores the stop() command on frame 1 and goes to frame 2 instead. Why?

You can download a ZIP file containing the source files for these two examples here.

More discussion about this issue can be found on actionscript.org, but no-one really explains why this is happening. Any ideas?

HexoSearch - The World’s First Search Engine Dedicated to Actionscript

I know this has been around for quite a long time now, but I had kinda forgotten about it. It is a seach engine that is set-up specifically to search ActionScript related sites for your search term. This can be better than just using Google because it helps filter out all the non-actionscript content for you.

You can also add HexoSearch directly into your browser.

The GreenSock Tweening Platform (which includes TweenLite and TweenMax) has recently been updated to version 11. It is still available for AS2 and AS3 and claims to be faster and more capable. There is a huge list of improvements on the GreenSock website (it was great before, even better now) and it has now confirmed to me that it is the best ActionScript tweening engine out there. The website is full of loads of help, examples, documentation, tips, speed tests and faq. I’ve always found the interactive examples on the GreenSock website particularly useful.

Three great new additions to the platform are TweenNano, TimelineLite and TimelineMax. TweenNano is only 1.6k in size and designed to be used where filesize is at a premium (i.e. banner ads). TimelineLite and TimelineMax allow you to build and manage sequences of tweens.

There is a feature comparison on the site and a Getting Started Tweening guide which you may find handy.

Go and check it out, and start using it in your projects.

Great work Jack! Thanks.

Joseph Labrecque from the University of Denver has posted his session on Flash and Google Analytics that he presented at the FITC Unconference at Adobe MAX 2009. His example uses the gaforflash API which I hadn’t heard of before. It’s pretty interesting stuff and is definatley something that could be useful in the future. His presentation seems fairly clear to understand and thorough.

Check it out here

Adobe have consolidated all their ActionScript 3.0 help documentation for the Flash Platform in to one central place online. It works using search and filters to show you the information you are looking for.

BETA ActionScript 3.0 Reference for the Adobe Flash Platform
http://help.adobe.com/en_US/FlashPlatform/beta/reference/actionscript/3/

Recently I had a project where I needed to allow the user to print out a PDF document from my AIR application, but I really didn’t need the user to actually view the document first and I didn’t want to display the default PDF control bar. I needed some way to send the PDF file to the printer directly from ActionScript. Enter PDF cross-scripting and Acrobat JavaScript. The following information should help you achieve the same result (note you need to have access to a copy of Adobe Acrobat Pro to add the JavaScript code to your PDF file).

There are several steps required for this to work …

1. Open the PDF document you want to print in Adobe Acrobat Pro.
2. Add the JavaScript code to your document and save it.
3. Create an HTML page that contains a JavaScript function and embed the PDF document.
4. In your Flash (or Flex) file add a button that prompts the user to print the document.
5. Add the ActionScript 3.0 code that communicates with the HTML page you created in step 3.
6. Publish your AIR file (making sure you include the HTML and PDF files).
7. Test your AIR app.

Here is a copy of the PDF file I am printing in the following example.

Right, let’s explain each of the above steps in more detail.

Step 1

I presume you already have a PDF file prepared which you wish to print. Open this file up in Adobe Acrobat Pro. I’m pretty sure this works in version 7.0 and onwards.

Step 2

Open the ‘JavaScript Functions’ dialog box in Adobe Acrobat Pro by going to ‘Advanced’ > ‘Document Processing’ > ‘Document JavaScripts’.

Enter ‘myOnMessage’ in to the textfield and click on the ‘Add…’ button.

Then enter the following JavaScript code in to the window and click on the ‘OK’ button.

Then remember to re-save your PDF file.

Step 3

Create a blank HTML file and save it next to the PDF file. Then add the following code …

Step 4

For this example I’m using Flash CS3. Create a movieclip on stage that acts as a button prompting the user to print the PDF document. Give the button instance the name of ‘button’.

Step 5

In this example I have put all the ActionScript code into the document class. The code looks like this …

Basically, we disable to button straight away and add a CLICK event listener. We then check the ‘HTMLLoader.pdfCapability’ property to see if the user has Adobe Reader 8.1 or greater installed on their system. If it equals ‘HTMLPDFCapability.STATUS_OK’ then we can continue. We then create a new instance of the HTMLLoader class, add a listener for the COMPLETE event. We then create an instance of the URLRequest class passing it the name of the HTML file we created in step 3. Next we call the ‘load’ method on our _htmlLoader instance, passing it the urlRequest instance. Then we add the _htmlLoader instance to the stage using addChild.

Normally, when you want to actually display the PDF file on screen, you also need to specify the width and height of the HTMLLoader instance. But in our case we don’t want to actually display it to the user. You may be wondering why we add it to the display list using addChild if we don’t want it to be visible. But I have found that it doesn’t work if you don’t add it to the display list. Not specifying the width and height also means it is not visible (which is what we want on this occasion).

Now we just have the two event handlers to write. The event handler for the HTMLLoader COMPLETE event just makes the button on screen active. We didn’t want the user to be able to click it before the COMPLETE event was fired.

The event handler for the button CLICK event calls the JavaScript function inside the HTML page, which we wrote in step 3.

Step 6

Now you are ready to publish the SWF file and then package it up as an AIR app in the usual way. The important thing to remember is to include the two external files (HTML and PDF) in the AIR Settings dialog box.

You can create a self-signed certificate for the purposes of testing. I have included my self-signed certificate with the source files (the password is ‘1234′) which you can use if you wish, or you could just create a new one.

Step 7

Once you have exported your AIR file it is a good idea to test it on a few different computers to make sure it works properly. Try it on a machine that doesn’t have Adobe Reader installed, or one that has an older version (< 8.1).

Download example AIR app

Click here to download the example AIR file

Download source files

You can download a ZIP file containing my example source files from here.

Useful links

Here are some other blog posts and articles I found useful …

• Acrobat Developer Center - JavaScript for Acrobat
• Cross-scripting PDF content in an Adobe AIR application
• Adobe Acrobat 8.1 - JavaScript for Acrobat API Reference (PDF file)
• Adobe Acrobat 7.0 - Acrobat JavaScript Scripting Guide (PDF file)
• Dry_By_Design - Adobe Air: PDF Cross-Scripting
• Dry_By_Design - Adobe Air: PDF Cross Scripting (Part 2)
• Adobe AIR 1.5 Documentation - Adding PDF content
• Flex 3 Documentation - Adding PDF content

It has just been announced at Adobe MAX that Flash Professional CS5 will allow you to set your publish settings to ‘iPhone’. This will compile your movie as a native iPhone app that can be submitted to the Apple AppStore. This is great news. Still no word on Flash within Safari on the iPhone, but to be honest I think being able to create useful standalone applications for the iPhone is better.

Read more info on Adobe Labs
http://labs.adobe.com/technologies/flashcs5/appsfor_iphone/

Developer FAQ
http://labs.adobe.com/wiki/index.php/Applications_for_iPhone:Developer_FAQ

Developing for the Apple iPhone using Flash
http://www.adobe.com/devnet/logged_in/abansod_iphone.html

Adobe TV: Building Applications for iPhone with Flash Pro CS5

I have just come across a few issues whilst building a video player that plays streaming video from a Flash Media Server.

I thought I had everything set up fine but then when I tested I got the following error message …

ReferenceError: Error #1069: Property onBWDone not found on flash.net.NetConnection and there is no default value.

So to resolve this you need to set the client property of the netConnection instance to the object on which callback methods should be invoked. For example …

and then you need to have an empty public method called onBWDone, like this …

Sometimes you may get the following error message …

ReferenceError: Error #1069: Property onFCSubscribe not found on XXX and there is no default value.

In which case you’ll need to add …

The same goes for this error message …

ReferenceError: Error #1069: Property close not found on XXX and there is no default value.

In which case you’ll need to add …

I then discovered that the netConnection with the server was being closed after 5 minutes of inactivity (e.g. pause the video and leave it for 5 minutes). What you need to do in this case is listen for the ‘NetConnection.Connect.IdleTimeOut’ NetStatusEvent, and gracefully close the netStream yourself. For example …

Have just built a video player that allowed the user to switch to FullScreen mode and toggle the play/pause state using the SPACE key on their keyboard. However, I found that everytime the Flash movie entered FullScreen mode the playing video would pause and visa-versa.

I then discovered that the Flash Player was dispatching a KEY_DOWN event when entering FullScreen mode. More specifically, the keyCode == 32, which corresponds to the spacebar on your keyboard.

My Flash Player version is WIN 10,0,32,18

See an example of it here …

Here is code for the above demo movie …

I managed to find an entry for this bug in the Adobe Flash Player Bug and Issue Management System (JIRA Database). FP-814: Flash Player dispatches KEY_DOWN event when entering FullScreen Mode

I also found a very similar blog post by TyZ which was posted on 25th August 2009 titled ‘Flash bug when enter fullscreen keyboard events fired - Workaround‘.

The workaround is to temporarily remove the KEY_DOWN event listener, and add it again with a slight delay once the FULL_SCREEN event has been dispatched. You could create the delay by using either a Timer, an ENTER_FRAME event or the setTimeout method. In TyZ’s example he used an ENTER_FRAME event, in my example below I use an instance of the Timer class.

WORKAROUND EXAMPLE

Here is the code for the workaround …

Download the source files for the workaround here

Yesterday I was taking a look at Balsamiq Mockups and liked the way that the mouse always pointed to the centre of the screen when in fullscreen mode. So I thought I’d quickly knock something to together that did this, and share it here.

It’s pretty simple stuff, but handy to have available to copy-and-paste, if you need something similar.

The code is all in the document class …

Download the source files here

I have just come across some great video tutorials for the Box2D physics engine in Flash AS3. They have been recorded by a chap called Todd Kerpelman. The website address is …

http://www.kerp.net/box2d/

He has over 70 screencasts on there going through the process of using Box2DFlashAS3.

I also found a few useful links over on a blog post by Matthijs Kamstra.

A blog focussing on the Open Source Media Framework has just been launched. Product Manager Sumner Paine has posted a couple of blog posts. I’d recommend adding their RSS feed to your aggregator of choice.

Find out more …

• http://blogs.adobe.com/osmf/
• http://www.opensourcemediaframework.com
• http://opensource.adobe.com

Adobe have launched the Adobe Flash Platform Blog.

To quote their ‘About‘ page …

“Welcome to the Flash Platform blog from Adobe. This group blog provides the latest news, updates, and insights into the technologies, tools, and partners across the Flash Platform. Join the conversation on the latest topics with our experts, engineers, product managers, and others on the platform team.”

I find it is not very easy on Adobe Labs to quickly and easily see what all the current projects are. Just seeing a list of names like Durango and JamJar doesn’t really tell you very much at a glance, and it takes a little while to click through each one in turn to find out what they all are. So here is a list of all the current projects and a short summary (copied and pasted) from their respective pages.

Acrobat.com Presentations

A better way to create, edit, and share presentations with others online. Built on the Adobe® Flash® platform, Acrobat.com Presentations looks and behaves like a desktop presentation application but operates inside a web browser.

Acrobat.com Tables

a better way to work with others on data and information — such as task lists, schedules, contacts, sales numbers, etc. — that are typically created and shared in spreadsheets or simple databases. Built on the Adobe® Flash® Platform, Acrobat.com Tables looks and behaves like a desktop application but operates inside a web browser.

Alchemy

Alchemy is a research project that allows users to compile C and C++ code that is targeted to run on the open source ActionScript Virtual Machine (AVM2).

Blueprint

Blueprint is a plugin for Adobe® Flex® Builder™ 3 and Adobe Flash® Builder™ 4 that allows users to query for Adobe Flex and Adobe Flash code examples found on the Web directly inside of the development environment.

BrowserLab

BrowserLab provides web designers exact renderings of their web pages in multiple browsers and operating systems, on demand. BrowserLab is a powerful solution for cross-browser compatibility testing, featuring multiple viewing and comparison tools, as well as customizable preferences. Since BrowserLab is an online service, it can be accessed from virtually any computer connected to the web.

ColdFusion 9

The ColdFusion 9 public beta release unveils three main themes: unrivaled developer productivity, deep enterprise integration and simple work flow with Adobe Flash® Builder™, Adobe AIR® and AJAX to create expressive applications.

ColdFusion Builder

Adobe ColdFusion Builder is an Eclipse based IDE for ColdFusion development that is deeply integrated with ColdFusion 9. Now you can manage your entire ColdFusion development cycle from concept to production all in one easy to use tool.

Configurator

Configurator is an open source utility that enables the easy creation of panels (palettes) for use in Adobe Photoshop® CS4. Specifically, Configurator makes it easy to drag and drop tools, menu items, scripts, actions, and other objects into a panel design, then export the results for use inside Photoshop. These panels leverage the support for Adobe Flash® built into Photoshop, making it possible to drag and drop audio, video, images, and even other SWF files into a panel design.

Distributable Player Solution

The distributable player solution enables developers to create rich applications for the latest version of Adobe® Flash Lite® and directly distribute their content to millions of open OS smartphones, providing a better on-device user experience.

Durango

Durango is a framework that allows developers to build Adobe® AIR™ applications that can be customized by end-users. Durango allows developers, designers and end-users to easily mashup independent components to create new applications or extend existing Durango-enabled applications. These “mashable” components can be visual or non-visual (e.g., web services). Designers and developers can rapidly create prototype applications and then generate Adobe Flex® MXML source projects for further development. End-users can take parts of their favorite applications and bring them together in new ways.

Flash Builder 4

Welcome to the Adobe® Flash® Builder™ 4 (formerly Flex Builder) public beta release on Adobe Labs. The first thing that you’ve already noticed is that we are renaming Flex Builder to Flash Builder. This name change will create a clear distinction between the free open-source Flex framework and the commercial IDE.

Flash Catalyst

Adobe® Flash® Catalyst™ is a new professional interaction design tool for rapidly creating user interfaces without coding. Transform artwork created in Adobe Photoshop® and Adobe Illustrator® into functional user interfaces. Create interactive prototypes with the ability to leverage them in the final product. Publish a finished project as a SWF file ready for distribution. Work more efficiently with developers who use Adobe Flash Builder™ 4 to create rich Internet applications (RIAs). Designers use Flash Catalyst to create the functional user experience then provide the project file to developers who use Flash Builder to add functionality and integrate with servers and services.

Flash Collaboration Service

Adobe Flash Collaboration Service is a Platform as a Service that allows Flex developers to easily add real-time social capabilities into their RIA (rich Internet applications). Comprised of both Flex-based client components and a hosted services infrastructure, Adobe Flash Collaboration Service allows you to build real-time, multi-user applications with Flex in less time than ever before. And because Acrobat.com hosts the service, issues like deployment, maintenance, and scalability are taken care of for you.

Flash Player 10

Adobe® Flash® Player 10, code-named “Astro,” introduces new expressive features and visual performance improvements that allow interactive designers and developers to build the richest and most immersive Web experiences.  These new capabilities also empower the community to extend Flash Player and to take creativity and interactivity to a new level.

Flex Builder 3 for Linux

Flex Builder Linux is a plugin-only version of the Flex Builder that you can use to build Flex applications on Linux. Feedback from previous alpha releases has been very positive, and we are pleased to continue offering this version.

Flex 4 SDK

Welcome to the Adobe Flex® 4 SDK beta release on Adobe Labs (previously code named Gumbo). This release marks an expanded role for the Flex framework, now supporting both developers creating Flex applications and designers using Adobe® Flash® Catalyst™ to create interaction design.

Hub

Hub is a client Adobe® AIR® application that connects to Adobe LiveCycle® ES services for the purpose of generating PDFs or assembling different PDFs into packages.  It demonstrates how to connect a client desktop to LiveCycle ES services using Adobe Flex® Remoting. The drag-and-drop client interface allows the user to upload files, watch the progress and retrieve the content back to the desktop with a single gesture. Hub was developed in response to customer requests for a client connector to Adobe LiveCycle ES.

InContext Editing

Welcome to the free preview of Adobe InContext Editing, the first Adobe hosted service developed for web professionals. Adobe InContext Editing is an online service that allows designers to create, manage, and control editable web pages. Web designers can use Dreamweaver CS4 to easily create editable or repeating regions, specify editing options or define CSS styles made available to authors. Content editors and publishers can also use Adobe InContext Editing to update website content through their browser — without learning HTML, installing software, or compromising design integrity.

JamJar

We invite you to see for yourself the kind of interactive, visually attractive, and scalable rich internet application that can be developed using Flex 2 technologies. JamJar provides a private and persistent canvas for small groups to easily exchange digital content in order to Plan events, Exchange ideas, Manage projects, Centralize information and Share files and images.

knowhow

knowhow is a technology preview that delivers single-click, contextual access to relevant help information from a panel in Adobe® Creative Suite® 3 software. knowhow gives users access to a wide variety of information—basic tool descriptions and short cuts, Adobe Help content, as well as community-generated tutorials, tips, and techniques on the web.

LiveCycle Data Services 3

LiveCycle Data Services server makes it possible to easily integrate Flex with Java/J2EE based applications.

Mars Project

The Mars Project is an XML-friendly representation for PDF documents called PDFXML. PDF, an ISO standard format, is the global standard for trusted, high fidelity electronic documentation. The PDFXML file format incorporates additional industry standards such as SVG, PNG, JPG, JPG2000, OpenType, Xpath and XML into ZIP-based document container. The PDFXML plug-ins enable creation and recognition of the PDFXML file format by Adobe Acrobat Professional and reading of PDFXML-format files by Adobe Reader software.

Photoshop.com Mobile Beta

the easiest way to upload, view, and share photos online from your Windows Mobile phone. Getting started is simple. All you need is a supported Windows Mobile® handset and a Photoshop.com membership. Available only to U.S. consumers as a free beta download.

Pixel Bender

The Adobe® Pixel Bender™ technology delivers a common image and video processing infrastructure which provides automatic runtime optimization on heterogeneous hardware. You can use the Pixel Bender kernel language to implement image processing algorithms (filters or effects) in a hardware-independent manner. The Pixel Bender graph language is an XML-based language for combining individual pixel-processing operations (kernels) into more complex Pixel Bender filters.

Spry framework for Ajax

The Spry framework for Ajax is a JavaScript library that provides easy-to-use yet powerful Ajax functionality that allows designers to build pages that provide a richer experience for their users. It is designed to take the complexity out of Ajax and allow designers to easily create Web 2.0 pages. The Spry framework is a way to incorporate XML, JSON or HTML data into pages using HTML, CSS, and a minimal amount of JavaScript, without the need for refreshing the entire page. Spry also provides easy to build and style widgets, providing advanced page elements for end users.

Stratus

Adobe® Flash® Player 10 and Adobe AIR® 1.5 introduce a new communications protocol called the Real-Time Media Flow Protocol (RTMFP). The most important features of RTMFP include low latency, end-to-end peering capability, security and scalability. These properties make RTMFP especially well suited for developing real-time collaboration applications by not only providing superior user experience but also reducing cost for operators. In order to use RTMFP, Flash Player endpoints must connect to an RTMFP-capable server, such as the Stratus service. Stratus is a beta, hosted rendezvous service that aids establishing communications between Flash Player endpoints. Unlike Adobe Flash Media Server, Stratus does not support media relay, shared objects, scripting, etc. So by using Stratus, you can only develop applications where Flash Player endpoints are directly communicating with each other.

Text Layout Framework

Welcome to the beta release of the Text Layout Framework for Adobe® Flash® Player 10 and Adobe AIR® 1.5. The Text Layout Framework is an extensible library, built on the new text engine in Adobe Flash Player 10, which delivers advanced, easy-to-integrate typographic and text layout features for rich, sophisticated and innovative typography on the web. The framework is designed to be used with Adobe Flash CS4 Professional or Adobe Flex®, and is already included in the next version of Flex, code named Gumbo. Developers can use or extend existing components, or use the framework to create their own text components.

Wave

When a friend posts a status update or there’s new content on your favorite site, be the first to know.  Adobe® Wave™ software gets the information you care about right to your desktop.  Click on the Adobe Wave badge on a website you want to follow and you’re ready to go.  Best of all, you’re in control: you choose which sites can contact you.  If you’re no longer interested, turning it off is a click away — Adobe Wave does not share your email address with websites. With Adobe Wave, get all of your notifications through a single application. You don’t have to worry about downloading a separate notification application for each website. To find out more, click on a notification to take you to a browser pointing right where you want to go.  Built with Adobe AIR® technology that has been installed over 200 million times, Adobe Wave lets you see all your most recent alerts at a glance.

XMP Library for ActionScript

Welcome to the XMP Library for ActionScript v1.0 preview. Adobe® Extensible Metadata Platform (XMP) is a labeling technology that allows you to embed data about a file, known as metadata, into the file itself.  XMP is an open technology based on RDF and RDF/XML.

A new augmented reality framework for AS3 has been released. It is called ARtisan and is from OneZeroThrice. It claims to be easier to use than the popular FLARToolkit from Tomohiko Koyama (aka Saqoosha) (I think ARtisan is built on top of FLARToolkit). I haven’t had a chance to try it out yet, but the YouTube video is pretty interesting.

If you are interested in this you should also check out FLARManager.

This morning I had a need to draw some circles on the stage by clicking-and-dragging, this led me to building a little visual display for lines, mid-points, rects, ellipses, angles, and circles (from centre and from corner).

It is all pretty simple stuff, but I thought I’d post it in case anyone else finds it useful.

You can download a ZIP file of the source code from here.

With the release of Acrobat 9 comes the new Acrobat.com website where you can upload and share documents online. One cool new feature is the ability to embed a PDF file on your website using the PDF Widget. It is basically a SWF movie that works like FlashPaper used to. Thanks to Lori DeFurio for making me aware of this and providing an explanation of how to create one yourself.

Below is an example of the PDF Widget, displaying the ‘Programming ActionScript 3.0‘ document from Adobe.

I was looking around for a simple example of using SWFAddress 2.1 with SWFObject 2.1 and Flash CS3 (ActionScript 3.0) and came across this blog post by Rachel. She has kindly put a simple demo online and made the source code available.

There are a few things that I have updated and am making available here (at the bottom of this post) …

• Updated SWFAddress from v2.0 to v2.1
• Updated SWFObject from v1.5 to v2.1
• Reorganised the folder structure (see below)

Download the updated source files here …

SWFAddress2.1_SWFObject2.1_AS3.zip (583 KB)

UPDATE 20/04/09: Lee Brimlow has a good tutorial on using SWFAddress 2.2 on his gotoandlearn() website. I suggest you check it out.