Archive for the ‘flash’ Category

AS3: Hello World!

23 October 2005 | filed under flash, flex | no comments »

There is this superstition that you should always create a “Hello World” program before anything else when learning a new programming language. So I did for ActionScript 3.0 and if you’re lazy, feel free to download the source code from my blog and compile your own Hello World! sample before it’s too late!

Actionscript:
  1. package {
  2.  
  3.     import flash.display.TextField;
  4.     import flash.display.MovieClip;
  5.  
  6.     public class HelloWorld extends MovieClip {
  7.  
  8.         public function HelloWorld () {
  9.  
  10.             var t:TextField = new TextField();
  11.             t.text = “Hello World!”;
  12.             addChild(t);
  13.         }
  14.     }
  15. }

FLEX Builder logo There’s one important tip that I can give you regarding this piece of code: when dynamically creating stage elements such as TextFields or MovieClips, they will remain invisible unless you actually assign them a place in the new DisplayList using, in this case, .addChild().

If you haven’t downloaded the FLEX 2.0 Builder alpha from Macromedia Labs yet, I highly recommend you do so right away.

One of the coolest things regarding the alpha is that it doesn’t just allow you to create FLEX 2.0 apps (which is cool anyway), you can also use it to program and compile for Flash Player 8.5!

FLV Player updated

3 October 2005 | filed under flash | 3 comments »

FLV icon I have been working on a new version of FLV Player. The most important change is the ability to play On2 VP6 encoded FLV files. Other improvements include a resizable window and zoom 1x/2x buttons to allow for quick jumping to the FLV’s original size (after resizing FLV Player’s window, for example) and to look at your .flv file at 200% zoom. Version 1.3.2 and later also supports loading an FLV file or stream from either a regular webserver or an RTMP streaming server.

FLV Player is compatible with Windows 2000, XP and Vista. An OS X version is in the works, no info on a release date yet.

  • Download installer (sponsored page) - click the bottom-most link on the next page, you can also download tryout versions of flv recording and flv conversion software there.
  • Download source files (.fla, .as, .sws)

FLV Player screenshot 1 This new version is based on Flash Player 8 and utilises the default Macromedia FLV Playback component, which uses a slightly customised skin (blue instead of green highlights). FLV Player is built with Screenweaver Open Source, which is still in beta, so your mileage may vary. Let me know if you encounter unexpected results. Or, even better, join the Screenweaver Open Souce initiative and help us create an even better version of Screenweaver!

FLV Player screenshot 2 One often requested feature that hasn’t been incorporated yet is the “fullscreen” option, Partly because I need some additional time to work on that specific ability, partly because I’m not sure if it’s that usefull. Playing FLV’s fullscreen is very CPU intensive. I think the zoom 2x feature and the resizeable window will suffice for now, but if you’d really like a fullscreen option, drop me line in the comments.

An important note to keep in mind: FLV Player uses the Macromedia Flash 8 FLV Playback component to play .flv files with. This component functions best when your .flv contains valid metadata. All .flv files created with recent encoders such as Macromedia Flash 8 Video Encoder have their metadata injected automatically. However, if you wish to view older .flv files they may not contain up-to-date metadata. I highly recommend you use Buraks FLV Metadata Injector to automatically inject correct metadata into those files.

FLV Player screenshot 2This program is the fruit of my spare time. This means there may be some glitches, rough edges and other minor and/or major annoyances you may discover. Please tell me about issues you encounter, so I can fix them and please understand that my time and attention isn’t dedicated 100% to maintaining and supporting this free, open source project. Feel free to download the source files and improve upon them.

1 FLV Player is a Windows only application. However, if Screenweaver Open Source is made available on OS X, rest assured that I will start working on an OS X version in that case.

MovieClip.scale9Grid example

21 September 2005 | filed under flash | no comments »

Another cool new feature in Flash Player 8 that hasn’t got a lot of attention yet (probably due to the overwhelmingly sexy filters stuff :-) is the ability to scale MovieClips in a much more intelligent way.

The new scaling mechanism is called scale9Grid and it’s implemented as a new property of the MovieClip class. Scale9 scaling basically works by cutting the MovieClip into 9 parts, each of which are scaled differently. The effect of this is that you can easily create objects that scale just like a operating system window, without any additional coding. This will come in very handy when creating user interface elements!

When you want to use scale9Grid, you need to pass a Rectangle (also new in Player 8) to define the inner area of the clip. This area will be scaled normally, all other parts will be scaled according to their position relative to the inner rectangle (see the MM docs for all the details) :

Actionscript:
  1. import flash.geom.Rectangle;
  2. var grid:Rectangle = new Rectangle(5, 5, 40, 40);
  3. myClip.scale9Grid = grid;

To switch scale9Grid off, you must set it to undefined:

Actionscript:
  1. myClip.scale9Grid = undefined;

I created a simple example, see the Flash demo below. Click the mouse to flip between different clips. Press any key to switch scale9Grid on or off.

[kml_flashembed movie="/download/scale9/scale9Grid.swf" width="450" height="400" fversion="8" /]

Some limitations to keep in mind: scale9Grid doesn’t work for TextFields and child clips. Also, when rotating a scale9 clip, the scale9Grid property will be ignored.

flash.external.ExternalInterface example

16 September 2005 | filed under flash | 2 comments »

An exciting new feature introduced with the Flash 8 Player is ExternalInterface. This feature allows you to communicate seamlessly between Flash and its container, usually the browser. I put together a simple example to demonstrate how ExternalInterface works.

Basically, ExternalInterface.call enables Flash to call a function in Javascript, while Javascript can just as easily access functions within your Flash movie.

No more getURL("javascript:.."), fscommand or setVariable hassle!

I can hear some of you think: “Can’t be that easy, bet it won’t work with Firefox or Safari.”. Well, it really is that easy. All major browsers support ExternalInterface. IE uses ActiveX technology to support it; Firefox and Safari (1.3+) rely on the NP Runtime API.

Enough text, here’s a simple demo:

Flash Player 8 or better required. You can bypass the detection if you wish.
Enter text in the HTML form below to send data to Flash:

> received from Flash.

Download the source files (both Actionscript and HTML/Javascript file are included) to see how this demo works.

More FDT details released

12 August 2005 | filed under flash | no comments »

FDT logo The PowerFlasher team, creators of the FDT, an ActionScript 2.0 plugin for Eclipse just posted details at the osflash.org mailinglist on their planned release date and pricing. Some of the stuff they mention in the osflash.org post:

  • 199 Euro’s (about 250 US$)
  • released: August 22nd
  • Type Hierarchy
  • Quick Outline
  • Editable TopLevel Functions supporting TRACE and ASSERT
  • Code Hints for Arguments
  • More Navigation Features
  • Autocompletion of Event Metadata Tags
  • Selectable Core/Std Libraries
  • Better MTASC support

Why crossdomain.xml is a good thing

28 July 2005 | filed under flash | 2 comments »

I regularly encounter Flash users as well as clients that wonder why the Flash player implements a cross-domain sandbox security model using policy files named crossdomain.xml. I drew 6 simple diagrams that demonstrate its use.

As you can see in the slides below, a malicious user could steal data from your LAN. This is made possible by the fact that every SWF file you view runs locally on your machine. This means that a SWF would have HTTP access to all machines behind the company firewall. Not a good thing.

To prevent this, every server other than the one the SWF is loaded from, needs to have a crossdomain.xml file available, listing all domains that have access to that particular server. If the crossdomain.xml file is either absent or does not list the domain the SWF originates from, the SWF won’t have access to that server.

[kml_flashembed movie="/download/about_cd.swf" width="450" height="580" /]

The crossdomain.xml file prevents SWFS from snooping around on the LAN. And it not only works for servers within your LAN, but also for other servers on the Internet. For example, if you want to play around with the Flickr API, you first need to register with them, so they will add your domain to the Flickr.com crossdomain.xml file. This way, Flickr can easily control access to their API.

Please note that, at best, I’ve only scratched the surface of the whole policy file system. For more information, please check these helpful pages at Macromedia website.

Project: Volkswagen Transporter

22 July 2005 | filed under flash, projects | no comments »

Unfortunately, the lifespan of this campaign has ended, so I have removed all external links. You will have to take my word for it that this was a cool campaign site :-).

Volkswagen Transporter screenshot 2 A while ago, one of our clients asked us to create a clear overview of a number of Volkwagen Transporter models, specifically the models with a double cabine (extra passenger seats in the back).. We created a Flash based campaign site that offers both a detailed visual impression of each model (both interior and exterior), as well as a feature-by-feature comparison table. I personally like clicking the labels in the interior and the exterior sections most, as that triggers a nice zoom-in / zoom-out effect. Also checkout the comparison table (under “vergelijken”), you can select multiple models to compare the features and price of each model.

Volkswagen Transporter screenshot 3 For me, the most interesting parts of this assignment, were the comparison table and the loading mechanisms for the zoom in feature for the interior and exterior mode of each model. When an interior or exterior section is loaded, all detailed zoom-in looks are subsequentially loaded, as each of these zoom effects consists of a single swf that was handmade by our designers to deliver the best possible experience for each zoom animation. All clickable labels listen to the progress of these zoomed views being loaded.

Volkswagen Transporter screenshot 4 Please note that this site is targeted for the Dutch-speaking market, so beware, although I think most of the button labels will be clear enough for English speaking folk as well.