Flex and AS3 for iOS

Introduction

I’ve been doing plenty of research in creating IOS apps using Flash, AS3 and Flex this page is simply a list of relevant links.

Multiplatform

Starting with AIR for Android and iOS – building one app for both platforms

Ant

Ant is essential to create the necessary build files

AIR2 and FDT4 (M4) – A detailed Walkthrough with ANT

FDT Ant Tasks – a more general guid to the usage of Ant scripts in FDT

Using ANT to Compile a Flex Mobile Project for iOS - A definitive guide for the Ant relevant to IOS development in FDT 4

Adobe links

Mobile development using Adobe Flex 4.5 SDK and Flash Builder 4.5 – a good introduction. Especially good is a list of Mobile-ready components in Flex 4.5. Plenty of the information is relevant to producing apps without Flash Builder.

Differences in mobile, desktop, and browser application development

Button and ToggleButton control – Basic Flex button stuff, with simple examples.

Flex 4 sample application: Spark Intranet Sample App

mobile-projects-proof-of-concept – Uses os-platform CSS media query.

Hero View & ViewNavigator – Functional and Design Specification – Think that the ‘hero’ set has been incorporated into the Spark Components

Lay out a mobile application

Define views in a mobile application - good stuff about pushing views.

Relevant Flex Classes

I always find the Adobe Class docs an essential reference, although there seems to be a vast number of different sets of them

Button

ButtonSkin

ViewNavigator - Although the link relates to a set of BETA docs. should be reliable.

Videos

There’re plenty of tutorial videos out there, this is just a very small selection.

Flex on the iPad

Using Flash Builder 4.5 to package applications for Apple iOS devices

PureMVC

A basic PureMVC MultiCore AS3 example using Pipes Utility and Modules – an AS3 implementation of the PureMVC framework.

Understanding the PureMVC Open Source Framework - another AS3 Implementation

10 tips for working with PureMVC – general tips but well worth looking at.

A good relevant post relating to the usage of the ViewNavigator and ViewNavigator Classes and PureMVC, pushing the views!

Using FDT 4 to Create iPhone apps

Introduction

I’ve been looking using HTML5 and javascript to create IOS aps, but was  little disappointed in the lack of an sdk with a true Object Orientated approach. (A topic worthy of another post).  I decided to return to familiar territory – AS3 and see how FDT4 can facilitate in the process.

Requirements

The latest version of FDT 4.5

Air

Solution

FDT 4.5 includes a set of ant templates which translate the as3 code to IOS ‘ipa’ files .

See the FDT tutorials to install the correct Flex and Air SDKs and set up the basic mobile template.

Conclusion

I created the basic as3 as specified in the video tutorial classes but wasn’t successful in creating a ‘debug’ session where trace events from my iPhone appeared in the FDT Console. I’ll have to do more tests and perhaps delve into the Air Development Tool (ADT) Commands.

 

Using Greensock Classes #in

Introduction

I’ve used various tweening engines over the years and have found those provided by Greensock to be the best. This post is intended to document my experience with the Greensock packages and provide quick links and tips for myself and others.

Greensock

The Greensock site is extensive and full of handy features and widgets, including, API Documentation, Interactive Demos, Learning Resources, PluginExplorer. Also there is a forum full of helpful advice. The AS3 Tweening platform (v11) can be downloaded here: AS3.

Tween

TweenMax and TweenLite are the tween engines I tend to use, TweenMax is fully featured whilst as the name implies TweenLite is light weight and fast. The documentation gives plenty of examples to get you going with using the classes.

Plugins

Plugins can be used to extend the use of the tweening packages, using filters, tints and a host of others.

Club Greensock

The ‘Club‘ provides paid for  extras.

I had a big issue with a complex project I was working on where I had to rotate a large loaded image like a pendulum. For this the transformAroundPoint plugin was essential, and well worth the $50 fee.

TransformAroundPoint

My loaded images needed to rotate around a fixed point which was not the Loader’s registration point. ( Loaded Movies and Images always load to 0, 0)

An instructional video in the Learning resources Section explained the solution clearly: TransformAroundCenter Plugin Explained.

Also, I implemented transformMatrix to increase performance. From the tweening tips, also a forum post.

TweenLite.to(holder, duration, { transformAroundPoint:{point:new Point(FULCRUM_X_POSITION, FULCRUM_Y_POSITION)},

transformMatrix:{rotation:rotation},

delay:delay, onComplete:onSwingCompleted, onCompleteParams:array

});

Conclusion

I hope this has provided a good introduction to Greensock and proves useful to myself and others in the future.

Compiling and Running an App using local data with FDT – #in

Introduction

I’m currently creating a ‘mini’ as3 framework which can run on Eclipse and FDT on a thumb drive. Which means I will not have to configure the machine I’m working on. I’m building the swf’s using the FDT Flex compiler without Flash

Data Error

I exported the build to the deploy folder on my thumb drive, where I was attempting to load an xml file. Th following error was traced:

cannot access local resource data.xml. Only local-with-filesystem and trusted local SWF files may access local resources.

Simple Solution

In the Run Cinfiguration -> Compiler Arguments add the following:

-use-network=false

AVAudioSession recording making other sounds quiet – #in

Introduction

I’m making an app which both needs to play ‘tap’ generated system sounds and to record user inputted sound to trigger an event. The sounds, which are triggered by the UITapGestureRecognizer play SystemSounds via the SoundEffect Class, whilst the recorder uses the AVAudioSession Class.

The audio was working fine in the simulator, but when played on my iPhone all sound was diverted to the receiver ( that’s the small telephone speaker at the top rather than the larger speaker by the dock-connector), which is much quieter.

Source of the Solution

The solution was found here: problem with AVAudioSession and Voice Recording

“When you start recording on an iPhone the audio will switch from the main speaker to the in call speaker which has lower volume, you need to redirect the audio route. “( From Steve Oldmeadow)

The Code

The Audio Session Programming Guide in the iOS developer documentation lists the solution:

“..Changing the default output route. … This option is available starting in iOS 3.1…“

I’ll paste the code snippet here:

---

---

// need to import now

#import <AudioToolbox/AudioToolbox.h>

---

---

-(void) initializeRecorder{

 //Instanciate an instance of the AVAudioSession object.

 AVAudioSession * audioSession = [AVAudioSession sharedInstance];

 //Setup the audioSession for playback and record.

 [audioSession setCategory:AVAudioSessionCategoryPlayAndRecord error: &error];

 //Activate the session

 [audioSession setActive:YES error: &error];

 // change the default output

 UInt32 doChangeDefaultRoute = 1;

 AudioSessionSetProperty (

  kAudioSessionProperty_OverrideCategoryDefaultToSpeaker,

  sizeof (doChangeDefaultRoute),

  &doChangeDefaultRoute

  );

}

Conclusion

Hopefully this post will be good for my own future refrence and perhaps to others.

 

 

Opening ppt files from a Flash presentation – #in

Introduction

Recently, I was working on a project for a Flash presentation which was to be distributed on a  thumb drive. In part of the presentation a button was set to open a Powerpoint (ppt) file.

Context

The Flash application was written for Flash Player 8 using ActionScript 2.0 (AS3),  using Flash CS4 on an iMac running OSX 10.6.

Code

The pertinent button had the following code on a onClipEvent:

getURL("location/file.ppt", "_self");

Whilst running both the swf file and Projector app file, rather than opening the file the applications opened the containing folder. This was OK for my client, but I had the feeling this result was inconsistent to what I had experienced before.

Experiment

Whilst running a cut down version of the Flash project for myself in a the same context, rather than opening the containing folder my Projector and swf launched the ppt file in NeoOffice.

Conclusion for the Projector

I can only assume, if the user’s machine does not have an application set to open ppt file the Projector  will open the containing folder, without asking anything.

Further Experiments

Also, I decided to experiment running the swf using different file types within different browsers.

The result were inconsistent, for the doc and ppt files Safari opened the files’ containing folder, Firefox and Opera gave an option box to open the files, whilst Google Chrome just downloaded the files without asking anything, with a momentarily big arrow pointing a link to the file in the bottom of the browser window.

For a text file (txt), all browsers opened the file within the bowser window.

 

 

 

 

Sound Conversion for Cocoa Touch – #in

Introduction

I’ve been making an iPhone app for myself at home where I wanted to play sounds. I came across a few issues but I managed to find effective solutions. The first issue being my phone was set to silent but I won’t elaborate that here!

Sound Players and Sound File Formats

There are two framworks I’ve discovered which can be used to control audio:

* AudioToolBox

* AVFoundation

The AudioServices Class  within the  AVFoundation Framework which I was using plays sounds which must be: – No longer than 30 seconds in duration – In linear PCM or IMA4 (IMA/ADPCM) format – Packaged in a .caf, .aif, or .wav file.

So my mp3 file was playing in the Simulator fine, but not on my iPhone device,  as the simulator uses regular QuickTime for playback.

Convert mp3 to caf

Core Audio Format (caf) is the Apple’s preferred format for audio sound. So it makes sense to convert mp3′s to the caf format.

That’s sound like a repetitive task for automation!

I found the perfect shell script here: How do I use afconvert to convert all the files in a directory from wav to caf?

##
## Shell script to batch convert all files in a directory to caf sound format for iPhone
## Place this shell script a directory with sound files and run it: 'sh converttocaf.sh'
##
for f in *; do
    if  [ "$f" != "converttocaf.sh" ]
    then
        /usr/bin/afconvert -f caff -d LEI16 $f
        echo "$f converted"
    fi
done

Further Considerations

I might be good to have a ‘watch folder’ that would activate the script when a mp3 is added to it!

TextMate – Shortcut Heaven! – #in

Introduction

i’ve started to learn HTML5, to discover how close the new functionality it has, can compete with Flash, which has functionality I’m familiar with. I decided to use TextMate to write the necessary html and css and discovered a world of numerous, sometimes fiddly but efficient shortcuts.

A list of shortcuts

This list isn’t meant to be exhaustive list, rather a first set of key combinations to remember.  I’ve used the key notation used by the TextMate manual, I’ve provided a brief explanation of the glyphs used below the list.

General shortcuts

⌘T – Go to File– Use this to quickly jump straight to any file you wish to be in.

⇧⌘T – Go to Symbol– This works in the same way as Go to File but for within a specific file.

⌘L – Go to Line

⇧⌘L – Select Line – Select the entire line of code you’re working on.

⌃⌘ + ARROW – Move Code – Move the selected code up or down.

⌃S –  Simple Search – Allows you to do a quick search in the current file iteratively.

⌘] and ⌘[ –  Block indentation

⇧⌃T – To-do list– This feature scans the project for code marked as ‘FIXME’, ‘TODO’ and ‘CHANGED’.

⎋ – Complete the current word – based on matches in the current document. Press continuously will cycle through multiple matches

HTML Bundle Shortcuts

⌥⌘.  –  Insert close tag Will find one missing end tag and add it – perform multiple times if a few are missing.

⌃⇧H – Tidy – Will format code and give you warnings.

⌃< – Insert Open/Close Tag – Creates a <p></p> pair, where the p can be overwritten.  (Remember need the shift as well as the < key).

⌃⇧W – Wrap selection with a logical wrapper, again the p can be overwritten.

⌃⇧V –  Validate Syntax –  Sends the document to the W3C’s validation service and displays the results in a HTML window, adding links to jump back to errors.

⌃⇧L – Wrap selection as link.

lorem⇥  – Inserts lorem ipsum paragraph

OSX Glyphs ( as used above )

⌘ – Command (On older keyboards the Apple key with a  )

⇧  – Shift

⌃ – Control ( or ctrl )

⎋ – Escape ( or esc )

⌥ – Option ( or confusingly alt )

⇥ – Tab

Links

• A good introduction to TextMate.
• An explanation of typing the glyphs.
• A good list of the shortcuts.
• The TextMate Cheat sheet invaluable!

Setting up Eclipse/FDT for AS3 Using the CS5 iPhone Packager

Introduction:

Further to previous post, Packager for iPhone I began experimenting with creating an AS3 project for iPhone OS. My aim was to set up FDT, so I could write the AS3 code with all the normal hints and typical IDE assistance rather than be plagued by a multitude of red dots. Also, I need to link to a new set of classes which which Flash uses to run  the iPhone specific API.

Requirements:

• Flash CS5 (Although many of these tips might hold true for CS3 or CS4)
• Eclipse – my version is Galileo 3.5.1
• FDT- i’m using 3.5, I haven’t upgraded to 4 yet.

Instructions:

In Flash CS5 there is for some reason no AS3 Classes in a ‘ First run’ folder, and we need the FDT project to link to the correct ‘Core Library’, so we will to find another source for the ‘Core Library’.

This blog: Accessing Flash Player 10.1 from Flash CS4/5, gave me some tips on the procedure.

• Create a new FDT Project which uses some of the new API ( I copied the Computer Arts Project source) .
• Download the Flex 4 SDK.
• Copy the 10.1 playerglobal.swc form this sdk to the FDT Plugin. These files are bit buried, in my configuration they are so:

  • /Applications/flex_sdk_4.1/frameworks/libs/player/10.1

  • Applications/eclipse/plugins/com.powerflasher.fdt.shippedflex_3.3.0.4852_1000/flex/frameworks/libs/player/10/playerglobal.swc

• Change the Core Library in FDT. ( See the above link for guidance ).
• Rebuild the FDT Project, the red dots which relate to not having sat the Multitouch Classes should disappear.

Further Links:

• Developing for iOS using Flash, a very good introduction to the subject.
• Visualator,  the Computer Arts Flash to iPhone project
• Flash Player 10.2 beta – A description of the newest player.
• Muititouch – the API of one of the new Classes

Conclusion:

i’m a few steps closer to making a Flash iOS project, I hope this post has can provide a few pointers to fellow migrating AS3 developers. Expect further posts as I further explore this topic.

#in

Packager for iPhone – #in

Introduction:

I was prompted by a colleague to purchase Computer Arts Projects magazine issue 144. With the title: Build an App using Flash. The magazine has has inspired to me to look into creating an app using Flash, because the featured project uses AS3 with PureMVC.

Restriction Changed

In a previous post Apple v Adobe, I believed that Apple would keep the restriction to keep the Adobe out of the arena. See, New App Store guidelines go deeper than Adobe for some reasons why I was wrong. ( This post has Some good info about App review guidelines too ).

Packager

The Packager for iPhone is a feature of CS5 Flash or is “…is also available as a standalone technology through this release on Adobe Labs…” . See: Adobe Labs Downloads

There’s a good FAQ’s page, and a forum.

Conclusion

I’ve downloaded the stand a alone packager and will follow the magazines project. So, expect further post detailing my Flash iPhone app!