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.)

Podmen and PNGs

Sometimes I think we threw the baby out with the bathwater. An animation that weighs in at less than 100KB in Flash, currently weighs in at around 8MB in Processing. Admittedly it's made using pngs rather than vectors but that does seem a little huge. I used 122 pngs to make the animation above, in Processing. It turns out that each frame in the Podman animation weighs in at around 20KB, work it out for yourself, that's pretty huge. So I had a look at how I could compress the pngs to their smallest possible size. I turned to the two big hitters Photoshop and Fireworks but they have next to no PNG24 compression control. If my Podman is to have a nice fluffy drop shadow and a soft edge, I needed the semi-transparency available in the PNG24 format, with some extra control over the compression. PNG24 is billed as a lossless format, meaning it doesn't throw away any information, it just tries to compress the file, with no data loss. I remembered dealing with IE6 and it's buggy handling of transparent pngs. I stumbled upon a tool called ImageAlpha written by a clever bloke called Kornel Lesi?ski. This brilliant free application adds a whole suite of extra compression options to those that ship with Photoshop and Fireworks. You can specify the number of colours, choose from range of compression algorithms, toggle dither and specifically ensure that the exported image is IE6 compatible. Pretty amazing if you ask me. Why these features aren't in either of Adobe's products is beyond me.

PNGs

Although I was well on my way to success. My woes weren't over yet. I had 122 pngs to re-export and ImageAlpha, doesn't seem to support batch processing of multiple files. After consulting the ImageAlpha website I stumbled across this tantalising statement:

"Batch processing
ImageAlpha is mostly based on pngquant. You'll find compiled pngquant executable in ImageAlpha.app/Contents/Resources directory."

This was music to my ears. After visiting the GitHub link, I realised that png heaven was close.

Follow these steps.

1) Do a test export of a .png using the ImageAlpha application. Make a note of the number of colours etc.
2) Select the ImageAlpha application in the Applications directory, right click / ctrl+click the application icon and select "Show Package Contents".
3) In the "Resources" directory you will find a magical executable file called "pngquant" the path to this files will be something like: "/Applications/ImageAlpha.app/Contents/Resources/pngquant" right click / ctrl+click and select "Get Info" to be sure. You will find the path under the "General" drop down arrow. Copy down the path, including the name of the application itself "pngquant".
4) Open Terminal.
5) Paste in the path to "pngquant" adding "-h" immediately afterwards, in my case it looked like this:
/Applications/ImageAlpha.app/Contents/Resources/pngquant -h
This will print out some information onto your Terminal window. It's actually a set of instructions on how to use pngquant, and to perform the batch processing of our 122 pngs.

This is the most useful part of what gets printed out on the Terminal window.

usage: pngquant [options] [ncolors] [pngfile [pngfile ...]]
options:
--force overwrite existing output files (synonym: -f)
--nofs disable Floyd-Steinberg dithering
--ext new.png set custom suffix/extension for output filename
--speed N speed/quality trade-off. 1=slow, 3=default, 10=fast & rough
--quality min-max don't save below min, use less colors below max (0-100)
--verbose print status messages (synonym: -v)
--iebug increase opacity to work around Internet Explorer 6 bug
--transbug transparent color will be placed at the end of the palette

I know it looks complex, displayed there on a spooky Terminal window, but it's really simple honest. Each one of these options is an instruction, that gets sent to "pngquant"

6) Finally I constructed the following line to complete my task:
/Applications/ImageAlpha.app/Contents/Resources/pngquant --nofs --iebug 64 Documents/Processing/Podland/Podland/test/*.png
it breaks down as follows:

[Path to "pngquant"] [--nofs = no dithering] [--iebug = fix the ie bug] [number of colours] [path to my directory ending in the wildcard "/*.png" to process all images ending with the ".png" extension at this location]
7) Hit return.

8) Check out your directory and enjoy your freshly exported images.

NOTE: My animation is still 1MB though. Next stop: SVG.

Processing in WordPress

[pjs4wp] //Info: https://processingjs.org/reference void setup(){ size(110, 110); background(#444444); stroke(#00ff00); font = loadFont(“Akkurat-Bold-32.vlw”); textFont(font, 20); text(“draw”, 10, 30); } void draw() { if(mousePressed==true){ line(0, 0, mouseX, mouseY); } } void mousePressed(){ cursor(CROSS); background(#444444); } [/pjs4wp] [pjs4wp] //Info: https://processingjs.org/reference int xPos=0; PFont font; void setup() { size(112,112); xPos=0-width/2; strokeWeight(2); fill(255, 100, 0); background(#444444); } void draw() { background(#444444); createBlob(); ellipse(xPos, height/2, random(100), random(100)); xPos++; if(xPos>width*1.5){ xPos=0-width/2; fill(255, 100, 0); stroke(0); } } void createBlob(){ font = loadFont(“Akkurat-Bold-32.vlw”); textFont(font, 20); text(“click”, 10, 30); } void mousePressed(){ fill(random(255), random(255), random(255)); } [/pjs4wp]

I’ve been fiddling around with Processing for a couple of months. It’s quite honestly the most excited I’ve been about any technology since ActionScript arrived in Flash 5. Here’s a little embedding experiment using Keyvan Minoukadeh’s excellent Processing JS plugin for WordPress. Make sure your get the right one!

It’s quite a simple plugin, all it does is add a “Processing” button to the WordPress text editor. It injects sample JavaScript snippet into your page or post, allowing you to paste in your own Processing code. It took me a while to work out the best way to use the button. The default formatting is pretty basic so I tried editing the PHP in order to wrap canvas elements in a styled div but nothing seemed to work properly. In the end I just wrapped the injected javascript code in divs with inline styles. I guess this is ultimately the more flexible approach, allowing me to format canvases individually to fit the layout of specific posts.

These are the first, rather rubbish, Processing Sketches I ever wrote; saved here for posterity and encouraging me to pull my finger out and post the recent stuff, when it’s finished.

Chrome Font Display Issues

I recently took up the Google Chrome challenge and ditched Safari to see if the habit took. Sure enough I’m loving Chrome, although I noticed that some sites displayed type incorrectly. Replacing fonts with peculiar glyphs and generally screwing up.

I checked the sites in Safari and Firefox, and the type displayed perfectly. So, what do I do?

Well, I noticed that the typeface in question was Arial, common enough. So I thought, maybe Chrome is looking in the wrong place? I use Font Explorer to manage my fonts, so I tried deactivating every Arial font on my system. Then I closed Chrome and reactivated all the Arial fonts again. Effectively re-setting the Font Explorer library entry for Arial. Guess what? It worked!

However a day later the same thing happened again. I successfully went through the same rigmarole again, but now, two weeks later, I’m beginning to ignore the display error, which is hardly ideal.

Seems a bit rubbish to me.

Here’s a picture of the offending bug. If anyone can suggest a more permanent solution I would be grateful.

fontmissing

 

After scrabbling about I finally I found a solution. It turns out that it’s actually an issue with FontExplorer X Pro. You need to make sure that it is set up to answer font requests from Chrome.

Here’s how you do it.

FONT EXPLORER X PRO > PREFERENCES > FONT REQUESTS and add Google Chrome to the list and ENABLE (or Allow) the PERMISSION.

I hope this brief post is of some use to someone out there.

 

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.

Flash on the iPhone

There may be times when it is essential that a Flash animation is available to users on Apple devices such as the iPhone and the iPad. Here is a technique that addresses this requirement using Google’s rather wonderful open source project Swiffy.

Firstly, your Flash movie should be no larger than 1MB and ideally exported for Flash Player 5 although Swiffy supports most of the AS2 specification. For those of you who don’t remember, you can do a great deal with Flash 5 and AS2. Probably a great deal more than Safari on the iPhone will allow us to do.

Under the hood, Swiffy processes the SWF file and generates a JSON file. A client-side JavaScript runtime loads that JSON file and renders it using HTML, SVG and CSS which is supported by Webkit-based browsers such as Safari running on Apple devices.

When you process your swf, Swiffy outputs an html page that you can place on your page using an iFrame. I know, I know an iFrame! However we’re only using our iFrame to serve alternative content to less than 5% of our visitors. There’s nothing for Google to index so it makes very little difference to the end user. I’ve added an alternative version to the header of this page, making the animation, podman cursor follower and all, viewable to iPhone users, for what it’s worth. It’s pretty clunky, probably only making 8 frames a second on my iPhone, but it’s a pretty complex multilayered animation, with lots of bitmaps and transparency. While the animation in the header of this page may not have been designed for WebKit, it could probably be optimised quite easily. A little trial and error goes a long way. Maybe I’ll follow this article up with a sequel.

Installing an SSH key

If your developer passes you an SSH bundle containing a couple of files to give you access to a web server.

webSSH.pub
webSSH

Don’t panic.

Open terminal type:
open ~/.ssh

drop the files into this directory.

Back in terminal type:
ssh-add ~/.ssh/webSSH

Now you can type:
ssh root@xxx.xxx.xxx.x

Voila!

Joomla! Install: Display Errors: On / Off

This one always catches me out and I find myself looking up the same thing time and time again. So for future reference I thought I’d make a note.

When you install Joomla there’s an setting check that lists any problems with your set-up that may effect the running of Joomla! In my case (both on 1&1 AND on MediaTemple) the Recommended Settings have flagged Display Errors as “On” when it should be set to “Off” – The solution is pretty simple.

Open the htaccess.txt file installed with Joomla! add:

php_flag display_errors “0”

save it to your server and rename it .htaccess

Voilà!

My Flash strokes look blurry.

This is a tip that I’m sure most people who’ve used Flash will appreciate.  Try drawing a few strokes on the stage – all a pixel thick. They may look fine and dandy in the Flash IDE but try exporting the swf and prepare to be shocked. There’s a fair chance that one, some or all of your lines look blurred and fuzzy. How annoying!

Well here’s a few things you can try to ensure that your strokes remain crisp and perfect, just the way you intended.

First, check the X and Y co-ordinates of your strokes and round them up or down to a round number.

If things don’t improve go into your stroke width setting and change the number from 1 to 0.9

If thing’s still don’t improve try reducing the width of your stroke incrementally from 0.9 to 0.8, 0.7 etc.

It worked for me:

I swear that this is a genuine screen grab of the offending lines – before and after.

Good luck!

Glow filter clipping on text.

Ever noticed that a line of text in a movie clip gets clipped by about 3 pixels at the end of the line? Rather an annoying bug, I tried everything, rounding the positioning up to exact pixels, adjusting the glow, checking tweens but nothing worked. I finally solved the problem by changing the font display quality to ‘animation’ instead of ‘readability’ worked fine!