Despite the belief that Flash/Flex applications run the same in all browsers, this is not always the case. I’ve recently run into some issues with Internet Explorer 7 (surprise, surprise). Most experienced developers probably already use virtual machines, but it can be a great tool for beginner/intermediate developers as well.

“a virtual machine (VM) is a software implementation of a machine (computer) that executes programs like a real machine.” …”Virtual machines can also perform the role of an emulator, allowing software applications and operating systems written for another computer processor architecture to be run.”
- Wikipedia

Basically this means that you can create multiple “computers” on your computer, and install different operating systems on each, that run ‘independently’ from each other. Depending on the VM software you use, you will have more or less options like dragging and dropping between machines, and a whole host of other tools. Our focus here will be to simply run web apps in different browsers, on different operating systems.

here are some VM options: I personally have experience with Parallels Desktop which is easy to set up, and works great.

http://en.wikipedia.org/wiki/Parallels_Desktop_for_Mac

http://en.wikipedia.org/wiki/VMware_Fusion

addthis_url = 'http%3A%2F%2Fblog.flexcommunity.net%2F%3Fp%3D80'; addthis_title = 'Testing+Flex+apps+%28or+anything+else%29+using+virtual+machines'; addthis_pub = '';

An important part of your job as a flex developer (whether designing yourself or interfacing with designers) is skinning/styling the application in such a way as to disguise it’s default flex roots and breath a unique life and identity to the site/application.

Flex in many ways has made this process easy, in some ways it has made it not-so-easy. I think any one of the solutions offered is probably insufficient, and an “all of the above” approach will likely give you the best results.

Here are a few of the available options and some resources I’ve found along the way:

1) Flex Style Explorer
The first and easiest tool is the Flex Style Explorer. This is a great tool, and I use it often for generating css for my apps. You have to realize though, that it’s quite limited in what it can do, and should probably be used in conjuction with some of the other items. Keep in mind that of course css can be written manually and styles can be treated several ways in Flex, so be sure to read the recommended reading (see below)

here’s the style explorer:
http://examples.adobe.com/flex2/consulting/styleexplorer/Flex2StyleExplorer.html

2) CSS Design View.

CSS design view is a method by which you can tinker with a components style visually and convert it to a style. In the design window, in the flex properties panel, select ’standard view’ instead of list view. That’s where you can play with the style.

further reading:
http://www.informit.com/articles/article.aspx?p=1274964&seqNum=7

3) Custom Skins SWFs
This is a very powerful way of styling your apps. Basically this method has you create (or find online- I have yet to find a pre-made skin that I’ve actually used ) a Flash FLA with graphic elements which will correspond to Flex components. After the swf is published, you reference the elements in css. This is the best method to create customized looking components, with the utmost control – which is what we want of course. This method is also time-consuming. The second link below explains this method well.

further reading:
http://mayur-bais.blogspot.com/2007/03/skinning-flex-component.html

http://www.adobe.com/devnet/flex/articles/flex_skins.html

Here’s a css code sample of how to embed assets from an external swf skin:

VScrollBar

{

downArrowDisabledSkin: Embed(source=”./assets/skins/flex_skins.swf”, symbol=”ScrollArrowDown_upSkin”);

downArrowDownSkin: Embed(source=”./assets/skins/flex_skins.swf”, symbol=”ScrollArrowDown_upSkin”);

downArrowOverSkin: Embed(source=”./assets/skins/flex_skins.swf”, symbol=”ScrollArrowDown_upSkin”);

downArrowUpSkin: Embed(source=”./assets/skins/flex_skins.swf”, symbol=”ScrollArrowDown_upSkin”);

}

4) Bitmap Skins

here’s a css code sample of how to embed a bitmap image as a skin:
LinkButton {
cornerRadius: 0;
overSkin: Embed(’./assets/images/skin.png’);
downSkin: Embed(’./assets/images/skin.png’);
textRollOverColor: #ffffff;
textSelectedColor: #ffffff;
letterSpacing: .5;
fontFamily: myArial;
fontSize: 13;
}
further reading:
http://www.thomasdecaux.net/flex-tips/skin-flex-component-with-images.html

http://flexarena.blogspot.com/2006/05/bitmap-skinned-buttons.html

5) Programmatic Skins

This is probably the least user-freindly method for beginner/intermediate Flexers, but you should understand the basics of this, as it’s the most light-weight (using no embedded assets/ bitmaps) and will increase your actionscript 3.0 chops.

further reading:
http://www.bigroom.co.uk/blog/accessing-the-component-instance-from-a-flex-skin

http://livedocs.adobe.com/flex/3/html/help.html?content=skinning_8.html

http://livedocs.adobe.com/flex/201/html/wwhelp/wwhimpl/common/html/wwhelp.htm?context=LiveDocs_Book_Parts&file=skinning_071_18.html

http://www.davidflatley.com/2007/12/17/programmatic-button-skins-in-flex-3/

6) Themes

You can get ready made themes (skin sets) many of these aren’t usable in my opinion, unless you find exactly the right thing , or something close enough that you could modify to your liking (or the designer’s liking)

You can find some themes here:
http://www.scalenine.com/

7) Fonts (Custom/Embedded)

Just a quick word about fonts. If you want them to render the way you want for every user, I would embed the fonts (this will of course increase file size – and others may object – but this is a design opinion, not an application development one) Also if you want to do effects with your text, especially alpha effects, embedding the font is a must.
Here’s a css code sample of how to embed a font:

@font-face {
src:url(”./assets/fonts/Wingdings 3.ttf”);
fontWeight: normal;
fontFamily: myWingding;
}

Custom Preloader

I think this is a key element that many might ignore just out of laziness. The default preloader looks fine right?. The visual impact of a custom preloader I think is worth the time it takes to create one. It’s like the cherry on top.

further reading:
http://www.onflex.org/ted/2006/07/flex-2-preloaders-swf-png-gif-examples.php

http://iamjosh.wordpress.com/2007/12/18/flex-custom-preloader/

http://www.webapper.net/index.cfm/2008/1/17/Flex-NotSo-Custom-Preloader

9) Integrating Flash Animations, components

Integrating Flash animations and/or components using the Flex component kit or just embedding a flash swf (which can be made to communicate with your application) is a great way to bring some other parts of your toolbox to the table. Flash has a couple component advantages (notably the flv Playback component) and if you want to embed something you’ve already developed in flash (like an mp3 Player), this is a good option. Also you can of course create flash animations, etc. Or anything for that matter, and turn it into a flex component. This is very cool.

further reading:
http://lordbron.wordpress.com/2007/05/01/flex-component-kit-step-by-step/

http://blog.flexcommunity.net/?p=40
http://www.onflex.org/ted/2008/03/flex-skin-design-extensions-flex.php

Hope some of these resources will help. Happy flexing!

More further reading:

http://www.rictus.com/muchado/2007/10/09/design-workflow-features-in-flex-builder-3/

http://blog.comtaste.com/2008/10/flex_skinning_with_adobe_illus.html

http://www.adobe.com/devnet/flex/articles/flex_skins.html

http://www.adobe.com/devnet/flex/quickstart/skinning_components/

http://livedocs.adobe.com/flex/201/html/wwhelp/wwhimpl/common/html/wwhelp.htm?context=LiveDocs_Book_Parts&file=skinning_071_08.html

http://didierburton.net/blog/2008/09/09/skinning-a-flex-component-with-video/

http://livedocs.adobe.com/flex/2/docs/wwhelp/wwhimpl/common/html/wwhelp.htm?context=LiveDocs_Parts&file=00000801.html

http://www.onflex.org/ted/2007/06/flex-3-monday-designerdeveloper.php

http://www.adobe.com/devnet/flex/?navID=fig

http://blog.flexcommunity.net/?p=5

http://blog.flexcommunity.net/?p=7

addthis_url = 'http%3A%2F%2Fblog.flexcommunity.net%2F%3Fp%3D61'; addthis_title = 'How+to+UnFlex+Your+Flex+%E2%80%93+Making+Flex+applications+look+and+feel+unique'; addthis_pub = '';

This example uses geocoding, getRoute, step by step directions, and printing to create a useful google map in flex.

In order to implement this, you need a google account, API key , and you need to download the Flash/flex SDK.

use this link:

http://code.google.com/apis/maps/documentation/flash/

After you unzip the sdk file do the following:

1) take the flex.swc file out of the libs folder (the version I’m using is called map_flex_1_8b.swc)
2) put that file somewhere where you want to keep it (preferably outside of your flex project - in a folder designated for library assets)
3) in your flex file, goto Project -> Properties -> Flex Build Path -> Library Path -> Add SWC
4) browse for your swc and select it.

The only other thing to remember is to import the classes you need and declare a namespace for the map (this is in the source)

here is the main actionscript to make this happen: (Right click on the map for full source)

import mx.controls.Alert;
import flash.events.Event;
import com.google.maps.*;
import com.google.maps.overlays.*;
import com.google.maps.services.*;
import com.google.maps.controls.*;
import mx.managers.PopUpManager;
import mx.containers.TitleWindow;
import TitleWindowDirections;
import com.tetraktysdesign.TitleWindowWpath;

private var titleWindow:TitleWindowWpath;

private var dir:Directions;

private var turnCounter:uint = 0;

public var step:String = “”;

private var doIt:Boolean = false;

private function onMapReady(event:MapEvent):void {
map.addControl(new ZoomControl());
doGeocode();
dir = new Directions();

dir.addEventListener(DirectionsEvent.DIRECTIONS_SUCCESS, onDirLoad);
dir.addEventListener(DirectionsEvent.DIRECTIONS_FAILURE, onDirFail);

}

private function processDirections(event:Event):void {
dir.load(”from: ” + from.text + ” to: ” + to.text);

turnCounter = 0;

}

private function onDirFail(event:DirectionsEvent):void {
Alert.show(”Directions Failed - Check your address and try again.”);
}

private function onDirLoad(event:DirectionsEvent):void {
var dir:Directions = event.directions;
var startMarker:Marker;
var endMarker:Marker;

map.clearOverlays();
map.addOverlay(dir.createPolyline());
map.setZoom(map.getBoundsZoomLevel(dir.bounds));
map.setCenter(dir.bounds.getCenter());

startMarker = new Marker(dir.getRoute(0).startGeocode.point, new MarkerOptions({fillStyle: {color:Color.GREEN}}));
endMarker = new Marker(dir.getRoute(0).endGeocode.point, new MarkerOptions({fillStyle: {color:Color.BLUE}}));
map.addOverlay(startMarker);
map.addOverlay(endMarker);
if(doIt==true){
processTurnByTurn();
}
}

private function processTurnByTurn():void {

var stepText:String;
var stepMarker:Marker;
step = “”;
for(var i:int=0; i turnCounter++;

if (turnCounter <= dir.getRoute(0).numSteps) {
stepText = dir.getRoute(0).getStep(turnCounter-1).descriptionHtml;
stepMarker = new Marker(dir.getRoute(0).getStep(turnCounter-1).latLng, new MarkerOptions({label: turnCounter.toString()}));
map.addOverlay(stepMarker);
step += "Step " + turnCounter + ": " + stepText + "'\n'";
} else {

step += "Arrive at " + to.text + " : " + dir.getRoute(0).summaryHtml;
}
}
launchDirections();

}

public function launchDirections():void{

var myTitle = TitleWindowDirections;

titleWindow = PopUpManager.createPopUp(this, myTitle, true) as TitleWindowWpath;
titleWindow.path=step;
}
private function doGeocode():void {

var geocoder:ClientGeocoder = new ClientGeocoder();
geocoder.addEventListener(
GeocodingEvent.GEOCODING_SUCCESS,
function(event:GeocodingEvent):void {
var placemarks:Array = event.response.placemarks;
if (placemarks.length > 0) {
map.setCenter(placemarks[0].point,15,MapType.PHYSICAL_MAP_TYPE);
var marker:Marker = new Marker(placemarks[0].point);

marker.addEventListener(MapMouseEvent.CLICK, function (event:MapMouseEvent):void {
marker.openInfoWindow(new InfoWindowOptions({content: placemarks[0].address}));
});
map.addOverlay(marker);
map.addControl(new PositionControl());
map.addControl(new MapTypeControl());
}
});
geocoder.addEventListener(
GeocodingEvent.GEOCODING_FAILURE,
function(event:GeocodingEvent):void {
Alert.show(”Geocoding failed”);
trace(event);
trace(event.status);
});
geocoder.geocode(to.text.toString());
}

addthis_url = 'http%3A%2F%2Fblog.flexcommunity.net%2F%3Fp%3D49'; addthis_title = 'Using+Google+Maps+API+in+Flex'; addthis_pub = '';

I just read the second issue of Flash & Flex Developer’s Magazine, the cover story being “A Breath of Fresh AIR for Desktop Apps” - And let me tell you, this magazine is a breath of fresh air for me!

Being a subscriber to Web Designer and Practical Web Design (which are great publications, but are aimed at designers – not developers) I have felt the need for a developer-centric magazine, and have actually said to myself “why isn’t there a magazine for actionscript developers?”. Well, here it is.

While I and probably most developers answer much of their questions, and solve many of their problems with the online docs and blogs, printed publications do serve a nice purpose: They can be bookmarked and used for reference, they can make good bathroom reading material, they keep you informed of what’s new, but most importantly they can provide you with ideas and solutions you may not have thought of before (you can’t google something you haven’t thought of), and they usually come with a companion CD with apps and tutorial files. This magazine fits the bill nicely.

The table of contents of this issue contains the following sections:

1-In Brief: What’s Hot in The Flash World
2-For Beginners
3-Actionscript Development
4-Server-Side Interaction
5-Mobile World
6-Books Review
7-Column
8-Coming UP

I judge a magazine on a few criteria:

1) Do I actually use any of the examples/tutorials in an actual project

2) if not, do the articles inspire me to try something, or expand on something that I wouldn’t otherwise?

3) Does the magazine tip me off to a new ’something’ that I didn’t know about before?

4) Does it inspire me?

This magazine passes the test. Although I have not yet used any of the examples in a project (I just got it), I’m excited to implement the solution on using the Google Maps API with Flex in the article titled ‘Google Maps in Flex (I actually have a project in development now that I plan to use it in). Also, both Articles in the Server-Side Interaction section: Sending Mail in Actrionscript Using SMTP, and Developing a Mini-Blog Using Flex and PHP are great. The article ‘Flash Player 10 Beta First Look’ gives a nice overview of the new player, and as far as inspiration, it’s nice to see the interview with Mike Chambers in there talking about the future of AIR and Flash.

There’s much more in here for the avid Actionscript developer too.

I think this magazine is a nice addition to the arsenal of tools for an Actionscript developer, and I look forward to future issues.

Thumbs up guys, nice work!

addthis_url = 'http%3A%2F%2Fblog.flexcommunity.net%2F%3Fp%3D48'; addthis_title = 'Flash+%26%23038%3B+Flex+Developer%26%238217%3Bs+Magazine+%28review%29'; addthis_pub = '';

I was looking around for a blog display widget for flash (AS2) to stick in an older project. I found one similar to this, but they were charging for it - so I figured I’d just do one right quick. This is very rough, and is more of a first draft. It does not support comments or anything like that, but it would not be hard to do so. I’ve got it reading the published articles of this blog…

The main actionscript to make this happen is:

(more…)

addthis_url = 'http%3A%2F%2Fblog.flexcommunity.net%2F%3Fp%3D47'; addthis_title = 'Simple+WordPress+Blog+displayer+in+Flash+AS+2'; addthis_pub = '';

It seems that there is a 127 maximum font size for (at least) label and textArea. If you set fontSize larger than that it will stay at 127. Very annoying. (Ugly) workaround: use scaleX and scaleY to make text bigger. I wanted a fontsize of 170, so I divided it by 2 and made my fontSize 85, then set the scaleX and scaleY to 2.

addthis_url = 'http%3A%2F%2Fblog.flexcommunity.net%2F%3Fp%3D46'; addthis_title = 'Undocumented+Maximum+FontSize'; addthis_pub = '';

I just got the FlashEff Text animation component. I will write a more complete review (with examples) after I have played around with it more. I just wanted to report that my first impression is good. I looked at my clock when I opened the folder for the first time (it was 11:41 am). After installing the mxp, quickly skimming the docs, opening an FLA, and creating a working sample (albeit a very basic one), the clock read 11:47 am. Six minutes!, and a working text effects animation. This is definately off to a good start. I’m interested in digging deep into this component, and see how powerful and flexible it is. I can tell it will be a huge time-saver when clients ask for text effects, and you can deliver cool examples in minutes! (although you might not want them to know how easy it is!)

Note to potential users: FlashEff is offering a$2500 prize for FE patterns. Put on your creative hat, (and coding hat) and submit your best. more details here.

addthis_url = 'http%3A%2F%2Fblog.flexcommunity.net%2F%3Fp%3D45'; addthis_title = 'Review+-+FlashEff+Component+%28part+1%29'; addthis_pub = '';

Here’s an opportunity to complain about the tool we all love…

http://www.flexcommunity.net/node/5

Mine are (to start with),
1)weak HTML support
2)not-very-cascading CSS support

addthis_url = 'http%3A%2F%2Fblog.flexcommunity.net%2F%3Fp%3D44'; addthis_title = 'What+annoys+you+about+Flex%3F'; addthis_pub = '';