March 21st, 2010
While working at Flint on the site for Paper Stone Scissors, I ran in to the little explored area of flash player 9′s maximum rendering area – the site uses JQuery to dynamically resize the flash HTML container to use browser scrollbars for long pages and unfortunately FP9 stops rendering graphics beyond 2880×2880 pixels… a bit of a problem where the site often scrolls to 4000px or more…
Redesign to use flash-based scrollbars wasn’t an option. After hours of messing around, I found a solution: use Javascript to keep the size of the flash within the renderable area, and fool the user in to thinking they are scrolling HTML content when they are actually scrolling the flash.
Do this by:
- Initially setting the size of the flash element to the desired full size (this sets the correct scrollbar size).
- While scrolling, use external interface to pass the scroll value of the browser in to flash.
Track the value in JS and in flash, and if the scroll value hits the maximum value:
- In Javascript - reset the size of the flash html element to the max renderable size
- In flash – as the browser scrolls, scroll the flash content container in the other direction (this keeps the flash content within the maximum render area)
- In Javascript – add padding to the top of the flash html element to keep the scroll position correct
I had a lot of trouble finding resources about this issue online, I hope this can help someone with the same problem.
Posted in flash, tutorials with 1 comment »
March 28th, 2009
The problem with being a flash developer from a traditional graphic design background is that there are some things that just don’t come naturally. One of these is working in a command-line environment.
I’ve been using the Flash IDE as my development environment on the Mac since Flash 4. Around the time of Flash 5 I started using BBEdit to edit external .as files, around MX I switched to TextMate for AS2 development, and now use TextMate exclusively for AS3 projects. But I’ve always used the IDE as my compiler, and there was always my designer’s preference to use the IDE to draw and layout objects rather than generate everything programatically. In developing my WordPress library I’ve been forced to bite the bullet and move to MXMLC, for the simple reason that the built in RPC libraries and Ak33m’s XML-RPC are only available for the Flex SDK.
I’m basically a total unix-command-line newbie, and there is a real dearth of information for people like me on how to command line compile in the mac environment. There is this tutorial by Senocular for the PC, and there are plenty of tutorials out there about using MXML, integrating shell commands to use ANT etc etc, but all of these assume you know what you are doing already.
I don’t know what I’m doing though. All I want is to be able to integrate the Flex SDK classes without having to purchase and learn Flex and MXML – I’ve discovered that this is of course not only possible, but easy - not that you’d know it by looking online.
Here’s a way to do it
1. Download the Flex2 SDK from Adobe Labs
The Flex2 SDK is free! It includes the flex libraries and and the mxmlc compiler you will need to use the command line.
2. Put the Flex2 SDK somewhere sensible
I put mine in ~/Documents/Library/Flex/flex2_sdk_hf1/
3. Open a terminal window
Usually ~/Applications/Utilities/Terminal.app
4. Navigate to your project folder, eg:
cd Documents/Projects/my_flash_project/Development/
5. Run fcsh
Fcsh is the Flex Compiler SHell, a wrapper for MXMLC that makes compiling fast and easy. The simplest way to run this command is use the Finder to navigate to where you put the Flex SDK, find fcsh (in bin/fcsh) and drag and drop this file into your terminal window.
You should now see the following:
Adobe Flex Compiler SHell (fcsh)
Version 2.0.1 build 159086
Copyright (c) 2004-2006 Adobe Systems, Inc. All rights reserved.
(fcsh)
6. Compile your flash app using mxmlc
The syntax to use is:
mxmlc path/to/MainFileForYourApplication.as -sp path/to/source/folder -o relative/path/to/output/filename.swf
eg:
mxmlc src/com/reubenstanton/Main.as -sp src/ -o ../Deployment/main.swf
The output will be something like:
fcsh: Assigned 1 as the compile target id
Loading configuration file /Users/absent/Documents/Library/Flex/flex2_sdk_hf1/frameworks/flex-config.xml
../Deployment/main.swf (82769 bytes)
You see that last line ../Deployment/main.swf? If you navigate to this folder, you should see your swf sitting there! That’s it.
As you see above, fcsh Assigned 1 as the compile target id. This is just a shortcut to the compile command you just wrote – it means next time you want to compile you can just enter mxmlc 1 instead of typing the whole command again.
Now you can use Flex libraries in your flash projects without learning Flex and MXML.
This took me hours to figure out, so I hope it helps some of you out there.
Here are a few resources to help along the way:
Posted in flash, tutorials and tagged actionscript, programming with no comments »