About Being a Do'er

The headline on my email from Adobe today reads “Build for multiple mobile platforms using a common code base.”  (http://www.adobe.com/products/flash-builder.html)

Since the National Association of Broadcasters conference where Adobe announced the launch of Creative Suite 5.5, I have been very excited about some of the new integration updates to their products.  On the Flash Builder front it is the annoucement that

“Flash Builder 4.5 includes full support for building ActionScript® applications for Apple iOS.”

and

“Flex support is planned to be available later in 2011.”

Also exciting in the HTML & Javascript side, is the integration of PhoneGap into Dreamweaver.  PhoneGap is the utility used to convert javascript applications into iOS applicattions as well.  With updates to Dreamweaver CS 5.5’s support for PhoneGap, jQuery Mobile, and WebKit we are seeing Adobe’s strategy in REALLY allowing developers to “PROGRAM ONCE and PUBLISH EVERYWHERE.”

To learn more about the updates here is a post from the Adobe blog: http://blogs.adobe.com/conversations/2011/04/introducing-adobe-creative-suite-5-5-product-family.html

I am really excited about these updates because it means I (hopefully) don’t have to learn all new syntax to be able to build mobile apps for my clients, and I can begin to expand my audience into the really huge market of mobile users.

~ bill king

I recently was presented with the challenge of integrating some Adobe Flash-based content into a design that required static imagery and other HTML content to show visible ABOVE that content.  Whether it is because I didn’t use the appropriate search terms or this topic has started to become a bit stale, I found very little help from my web searches with Google.

I was able to piece together quite a bit of missing knowledge, though, in the quest to solve this problem. 

I knew that with other content in HTML I could easily layer images, divs, and other elements by incorporating the css z-index property.  Here is a quick example of its use:

#header {
position: absolute;
z-index: 2; 
} 

Note that the z-index property will only be parsed by the browser when it is accompanied by the ‘position: absolute’ setting.  The above css will place any items having a lower z-index value below this item in the view stack, and any items with a higher z-index value above it in the view stack.  (Think of a stack of pancakes with the bottom pancake representing z-index:1 and pancakes above being counted up as they stack.)

That part, to me, was easy as I had done this type of work with image files many times in the past.  I found, however, that this method did not immediately work with my flash file.  The flash plugin likes to layer over the browser to look like it is part of the browser window, when in fact it is a separate application from the browser (that’s why we need tags like <OBJECT> and <EMBED>.)

Since it is the case that the flash player is separate from the HTML pane in the browser, there needs to be some intervention, and the way to do that is with Javascript.  The preferred method is with the Javascript library swfObject (now in version 2.2 and the project is hosted through Google code.)  The project web site for swfObject has quite a bit of documentation and goes pretty far into how to implement flash using this library, and I highly recommending working through the documentation to know what is going on here.

The issue I ran into, however was that I was unable to figure out how to get the layers to work together with my HTML.  I had read on many other programming forums and other blog posts that the trick was to not only get the DIV into my stack of pancakes correctly, but also to add the transparency mode to the flash object.   Since the swfObject functionality inserts the embeded flash movie file into the view after the HTML is rendered we can apply attributes to the flash embed code through the swfObject instance.

Here is the Javascript for the addition of the transparency attribute:

<script type=”text/javascript” src=”/js/swfobject.js”></script>
<script type=”text/javascript”>
var flashvars= {
sourceUrl:”mywebsitepage”
};

var params = {
wmode:”transparent”
};

var attributes = {
id:”myMovie”
};

swfobject.embedSWF(“/swf/myFlashFile.swf”, “destinationDIV”, “width_in_pixels”, “height_in_pixels”, “version_number”,”/swf/expressInstall.swf”, flashvars, params, attributes);

</script>

Notice there are three areas where you can place flash variables (anything the SWF file needs to receive from the web page,) params (anything of the parameters that can be applied to the Object tag, ) and the attributes (define the Object tag attributes.)  The one to note here is the param labeled ‘wmode.’  Setting this value to transparent allows the magic.

The great thing about using a library like swfObject is that this code can be very flexible and you can depend on the BEST cross browser support available for your work.  For any further details about swfObject and code examples visit the project at http://code.google.com/p/swfobject

I needed a quick and dirty way to log users to a page on one of my sites.  It was easy enough to do with Adobe ColdFusion, and I am sure this can be modified and done just as easily in other languages.

STEP 1: Create an empty text file Called userlog.txt
This file would be best located in a secure (non-web accessible) directory, but for simplicity I am placing it the same directory as the page that will be tracked.

STEP 2: Define the log string 
This is the string of text that you will want each time the page is read.  It should be placed in a conspicuous location on the ColdFusion file that you want to track. The string should be comma-delimited so that you could open your file in your favorite spreadsheet program.  You can customize the columns that you would like to track but here is an example:

   pagename, [optionselected…,] user IP, date/time

You can also record things like your user’s browser and OS information. In the third step (below) this line will be written to your log file each time the page is loaded, so it should stay relatively simple.  Here is the code I used:

<cfset UserLogData = ‘landing page 1, ’ & form.optionfield & ‘, ’ &  
   cgi.REMOTE_ADDR & ‘, ’ & DateFormat(Now(),’mm/dd/yyyy’) & ’ ’ &
   TimeFormat(now(),’hh:mm:ss’)>

STEP 3: Write the log string to your log file.
Now that you have the values that you want to write to your log file (written to a variable called UserLogData) you simply append the new log string to the file you created in STEP 1.

<cffile action=”APPEND” file=”#ExpandPath(‘Userlog.txt’)#”  
  output=”#UserLogData#” addnewline=”Yes”> 

You will now be able to download this file and view in your favorite spreadsheet program at any time.    I would suggest deleting the contents of this file regularly, since it can fill up pretty fast.

Good Luck!