Seeing through transparent video

It’s been eleven years since Steve Jobs revolutionised our back-pockets with the iPhone and dealt Flash what many thought would be a mortal blow. So why is it Flash refuses to die? The recent update of the same in-all-but-name Adobe Animate was incredible.

In banishing the humble SWF to the wilderness Steve broke something more fundamental, progress. With all the faults of the Flash player, the Flash communitiy tried new things, and challenged conventions. The conservative development community chose standards over tearing up the rule-book and in doing so may have stifled creative expression. The days of jaw dropping websites have gone.

I recently did a project for Coca-Cola, which required a dynamic flip clock to count-down to Christmas, but it involved an intricate transition involving Christmas wrapping paper tearing across the screen to reveal the dynamic element underneath. To complicate this still further, the whole scene was full of falling snow. As is often the case with Out of Home, so much of what we do is constrained by very archaic bandwidth considerations. So the only way to easily accomplish this kind of execution was to resurrect the trusty transparent FLV and create a multi-layered application using transparent video. I had to download an old version of Adobe Media Encoder CS6 because that was the last app in which Adobe included support for FLV. In the end, the project went off without a hitch although I’m still not sure how I might have accomplished this so easily in HTML.WebM didn’t seem to layer properly and .mov was just too big. So as Flash winds down, we’re left with a hole, but sadly not in our video.

If anyone out there has any tips on how I might layer-up transparent video, over a dynamic clock element in HTML5 I’d like to hear your thoughts.


Exporting to Flash Player 10.2 from Flash Pro CC2014

As Flash has evolved over the years Adobe has continually jettisoned legacy technology. ActionScript 1 and 2, the bandwidth profiler, even projectors fell by the wayside (in CC at least). Sometimes these features re-surface in new releases, like the motion editor for example, but it seems that once the ability to target a specific Flash Player version is dropped, it remains dropped. In Flash Pro CC2014 the oldest targetable Flash Player is version 10.3.
Sadly, this has been causing me some headaches. There are still some advertising platforms out there which specifically reject anything more recent than Flash Player 10.2. This is a problem because the last time Flash supported this player was way back in Flash Professional CS5.5.

Finally, I decided enough was enough and resolved to solve this problem once and for all. Here’s how I did in.

Firstly download the playerglobal10_2.swc from Adobe’s archive
https://helpx.adobe.com/flash-player/kb/archived-flash-player-versions.html#playerglobal

Rename it playerglobal.swc

Go to “Applications/Adobe Flash CC 2014.app”

Right-click the Adobe Flash CC 2014 application and select “Show package contents.”

Go to this folder:

/Applications/Adobe Flash CC 2014/Adobe Flash CC 2014.app/Contents/Common/Configuration/Players/ActionScript 3.0

Duplicate the directory FP10.3 and rename it FP10.2

Replace playerglobal.swc with the version you just downloaded. Remember to change the name from playerglobal10_2.swc to playerglobal.swc

Next you duplicate /Applications/Adobe Flash CC 2014/Adobe Flash CC 2014.app/Contents/Common/Configuration/Players/FlashPlayer10_3.xml and rename it FlashPlayer10_2.xml

Open FlashPlayer10_2.xml in a text editor delete everything and replace with the following:

<?xml version="1.0" encoding="UTF-8"?>
<players>
  <player id="FlashPlayer10.2" version="11" asversion="3">
   <name>Flash Player 10.2</name>
        <path builtin="true" />
        <path platform="WIN">Device Central/adcdl.exe</path>
        <path platform="MAC">Device Central/adcdl</path>
        <playerDefinitionPath as2="$(UserConfig)/Classes/FP10;$(UserConfig)/Classes/FP9;$(UserConfig)/Classes/FP8;$(UserConfig)/Classes/FP7" as3="$(AppConfig)/ActionScript 3.0/FP10.2/playerglobal.swc" />
        <feature name="multiScreenPublish" supported="true" />
        <feature name="mobileAuthoringIntegration" supported="true" />
        <feature name="deviceSound" supported="false" />
        <feature name="exportStreamingSound" supported="true" />
        <feature name="exportEventSound" supported="true" />
        <feature name="FSCommand2" supported="false" />
        <feature name="gradient_linearRGB" supported="true" />
        <feature name="gradient_overflow" supported="true" />
        <feature name="shape_strokeHint" supported="true" />
        <feature name="shape_cap" supported="true" />
        <feature name="shape_join" supported="true" />
        <feature name="shape_mitre" supported="true" />
        <feature name="shape_scale" supported="true" />
        <feature name="linkage_exportForActionscript" supported="true" />
        <feature name="linkage_exportForRuntimeSharing" supported="true" />
        <feature name="linkage_exportInFirstFrame" supported="true" />
        <feature name="linkage_importForRuntimeSharing" supported="true" />
        <feature name="linkage_importAndAddToCache" supported="false" />
        <feature name="publish_localPlaybackSecurity" supported="true" />
        <feature name="publish_hardwareAcceleration" supported="true" />
        <feature name="symbol_blendMode" supported="true" />
        <feature name="actionScript_documentClass" supported="true" />
        <feature name="symbol_blendMode" supported="true" />
        <feature name="filters" supported="true" />
        <feature name="component_binding" supported="true" />
        <feature name="component_schema" supported="true" />
        <feature name="screens" supported="true" />
        <feature name="video" supported="true" />
        <feature name="deviceVideo" supported="false" />
        <feature name="accessibility" supported="true" />
        <feature name="dynamic_text_kerning" supported="true" />
        <feature name="static_text_charwidth_nondeviceFont" supported="true" />
        <feature name="static_text_charwidth_deviceFont" supported="true" />
        <feature name="advanced_anti_alias_text" supported="true" />
        <feature name="nine_slice_scaling" supported="true" />
        <feature name="runtimeNumberMinMax" supported="true" />
        <feature name="use8kSampleRate" supported="true" />
        <feature name="useDefineFont4ForDeviceText" supported="true" />
        <feature name="useDefineFont4ForEmbeddedFonts" supported="true" />
        <feature name="textLayoutFramework" supported="true" />
        <encodingPresets>
            <preset uuid="da5cac1a-417a-4d86-b7f7-ef21010a5d7d" name="FLV - Match Source Attributes (High Quality)" ext="flv" default="true" />
        </encodingPresets>
        <testmenu>
            <menu name="ID_testInFlash" default="true" />
            <menu name="ID_testInDeviceCentral" />
        </testmenu>
        <debugmenu>
            <menu name="ID_debugtInFlash" default="true" />
            <menu name="ID_debugInDeviceCentral" />
        </debugmenu>
    </player>
</players>

Now relaunch Flash Pro CC 2014 and behold Flash10.2 has been added to the targetable Flash Player list.

Target Flash Player 10.2 in Flash Professional CC 2014

Finally, if you want, you can delete Flash CS5.5 from your system (unless you want to run the Gaia Flash Framework for Flash – in which case your stuck with CS5.5 for a while longer.)

Experiments in the Gaia Framework

I’ve recently discovered the joys of the Gaia Framework for Flash. It’s an awe inspiring framework designed to allow Flash designers or developers to rapidly develop really complex applications very easily. One of the best things about it is an adherence to accepted best programming standards. An application built in Gaia kind of takes care of itself. My current project features hundreds of videos and pages. Gaia managed to make short work of organising them all into something that not only solved the problem but also kept everything neat and tidy. I could preload / cache / transition and bookmark, pages, video, content, elements, everything! It implements swfObject, swfFit, swfAddress and Greensock automatically putting every library you could need at your finger tips.
It also makes you think about how you could use it in other projects. It is just made for presentations.

Next time somebody asks me for a Powerpoint presentation done in Flash. I’ll be using the Gaia Framework.

If you were putting together a presentation in Gaia you could build your slides first and bring them all together before the client has time to approve them. Leaving you free to do the alterations rather than finding yourself torn between finishing the application and polishing the content.

One of the best features of Gaia is the XML Scaffolding feature. You write an XML schema describing your application, import the XML into the Gaia panel in the Flash IDE and press the button. Hey Presto! All your Flash files, AS3 classes, symbols, swf, pre loaders, AS imports etc, all get built automatically.

I’ve had a few issues with open Flash files crashing the Flash IDE during a Gaia export but this has never really bothered me. It just encourages me to avoid putting code on any timelines. It’s all open source and free to use. The support and documentation on the website are second to none. Steven Sacks has done an amazing job.

Anti-alias when scaling images and video in Flash

Here’s one of those tips that you stumble upon, and feel embarrassed that you didn’t know this years ago.

Notice when scaling a bitmap or video up and down the image is subject to serious aliasing. Especially with a transparent background. Everything looks pixelated and choppy. Right?

Here’s the solution. In the properties of your image in the Flash library you will see the following setting.

Smoothing

Note that “Allow smoothing” is checked. This allows Flash to re-sample the image when it is scaled up or down, naturally there is some quality  loss but essentially it solves your problem. Used sparingly it may help with your bitmap manipulation.

What about video? No problem. The same principle applies, but you have to use ActionScript.

var nc:NetConnection = new NetConnection();
nc.connect(null);
var ns:NetStream = new NetStream(nc);

myVideo.attachVideo(ns);
ns.setBufferTime(0);
ns.play(“mymovie.flv”);
myVideo.smoothing=true;

The last line is the killer!

TextMate for ActionScript

Wow! I’ve been exploring the various features of TextMate and how it’s use relates to Flash / ActionScript development. There are some great built in features and lively communities offering excellent bundles for extending TextMate.

Here’s how I set it all up.

Essentially you install the ActionScript bundle and use the Bundle Editor to point everything in the proper direction.

class test {
function test() {
// Empty constructor
}
// Hook for MTASC. This method will be called to start the application
static function main() {
var myVar:String;
myVar=” Patrick”
_root.createTextField(“hello_txt”,1,0,0,800,30);
_root.hello_txt.text = “Hello, World!”+myVar;
_root.Button1._alpha=50;
_root.Button1.onRelease = function(){
_root.Button1._alpha=100;
trace(“Hello World!”);
}
}
};

I copied the above .as file from the one that’s automatically generated by selecting file>New from template>ActionScript>MTASC sample and fiddled with it.

If you stick a .yaml file in the same directory as your .as and .swf file you can pass parameters to your preview like, trace, in my case through console, and the SWF header.

——————

# Name of your output file:
swf: test.swf

# Name of your main class:
app: test.as

# Folder/URL/file to open when compilation succeeds. Use ‘textmate’ to preview in TextMate:
preview: textmate

# SWF Header:
player: 8
width: 800
height: 600
fps: 31
bgcolor: 000000

# Optional, use it to send additional MTASC parameters (i.e: -strict)
params: -main -mx

# If you want to use Console.app (see )
trace: console

——————

Variables in objects

How come I never knew the following?
I’ve got a lot on fun ahead of me.

var myObject = {
firstname: “Patrick”,
lastname: “Wall”
getlastname: function(){return this.lastname;}
}
trace(myObject.firstname);
trace(myObject.getlastname());

Class in classes

In an attempt to learn classes and ratchet up my knowledge to the next level of useage I’m going to add some entries to my blog as I learn. So that I can chart my progress.

By declaring a GenericObject an external actionscript class of the same name is automatically called when the movie plays. For instance:

var myGenericObject:GenericObject=new GenericObject();
trace (myGenericObject);

will trace [object Object] from .as file with the name of GenericObject.as.

For instance:
class GenericObject{

}

The player automatically looks for it in the root directory and hey presto – you have created a class!

getURL – Trash the target!

How many times must I try my _self targeted Flash links in IE only to discover that they open in new browser windows rather than into _self.

The following:
getURL(“https://www.google.com”, “_self”);
…doesn’t work in IE.

For future referrence – trash the target!

The following:
getURL(“https://www.google.com”);
…works!!