Get RAD: Part III

We’re RAD y’all!

In today’s post, we’re going to cover the following:

• A new version of Framer
• Tweaking our HTML ever so slightly to accommodate the app
• Loading the PSD and creating global variables for our views
• Adding sound effects
• Configuring our view states
• Animating our views

A whole new world

No, this isn’t a segue into Aladdin but it’s as equally exciting. A new version of Framer was released shortly after my last post and fortunately for us, the new build includes a host of changes and improvements. Thankfully, only a few of those changes impact our project; the need for Fastclick which removes the 300ms delay on press and some small syntax changes.

Make sure to update your version of Framer and grab these project files before you begin. Moving forward, I’m going to assume that you’ve downloaded the project files, opened the PSD and have run Framer to compile the project directory.

Tweak it

The new version of Framer doesn’t include as much in the head of our index.html so now we’ll need to make some adjustments. These include:

• Using the viewport meta tag to control the size of our view on devices
• Adding the apple-mobile-web-app-capable to make the app fullscreen
• Setting apple-mobile-web-app-status-bar-style to black (personal preference)
• Using the Ben Markowitz method to add app icons
• Naming our app “xiti” with the apple-mobile-web-app-title tag
• Adjusting the body css, which we did already
• Adding jquery and an HTML5 Mobile audio library, which I’ll cover shortly
• All of which can be found in project files

Load the PSD and global variables

Once you’ve updated your index.html, open the app.js file. You’ll see that Framer has included a line of code to import your PSD file. Leave this in there and let’s make things easier by adding for loop to make our views global variables for quick access. The loop reads through our myLayers array and creates a variable for the layer group name and for it’s original state, such as the opacity, position, etc. Doing so will make it a lot easier to animate them. I’ve also included a console.log for our view names because then I don’t have to jump back into PS to remember a layer group name.

myLayers = Framer.Importer.load("imported/iPhone5-Portrait") for (var layerName in myLayers) {     window[layerName] = myLayers[     window[layerName].originalFrame = myLayers[layerName].frame;     console.log(layerName); } 

Add fancy

This next bit of code doesn’t have much to do with Framer but the Devil’s in the details, right? We’ll be using the jquery.mb.audio library for mobile HTML5 audio to add a small “pop” on load. Why now you ask? Because I’m saving the best for last.

• Download the library
• Add it, and jquery, to the body of index.html like this:<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js“> </script> <script src=”assets/jquery.mb.audio.js”> </script>

Open your app.js and add the following:

$.mbAudio.sounds = {     effectSprite : {         id  :   "effectSprite",         mp3 :   "assets/click.mp3",         sprite :    {             intro : { id:"intro", start: 0, end: 1, loop: false}         }     } } App_background.on("start", function(){     $.mbAudio.play('effectSprite', 'intro'); }) 

The above code:

• Creates an mbAudio object, assigns an ID and asset to it and sets the play methods
• Then waits for the app background animation to start and on doing so plays the sound

We could change App_background to any view name, such as Tab_Bar or Slide_1, and the sound would play when that view has begun animating.

Configure view states

• Design for the animation end state
• Get each elements initial properties using the loop above
• Configure “from states” for the items you’d like to animate — For example, I’m going to animate the background in from Opacity: 0, so I’ll set it to 0 in the code then animate it to 1
• On event, such as click, animate the object using the configured state to their “end”, or designed, stateApp_background.opacity = 0; Slide_1.y = 1000; Bullets.opacity = 0; Active.opacity = 0; Active.scale = 0; Tab_Bar.y = 1200;

The above code does the following:

• Sets the app background, or blue gradient, to 0
• Places the Slide_1, xiti logo, just outside of the view
• Makes the bullets and the active bullet invisible
• Shrinks the active bullet down
• Moves the tab bar off screen using the Y coordinate

Now for the fun part

Here’s what happens with our animation:

• Change the App_background opacity from 0 to 1
• Move Slide_1, the xiti logo, up to it’s original position as shown in the design
• At the same time, bring the Tab_Bar up as well but delay it by .1 second
• Also bring the Bullets into view by changing the opacity from 0 to 1
• When the bullets have finished animating, change both the opacity and scale of the active bullet using a “spring” curve

Let’s take a close look at our first animation call.

// Animate our app's background App_background.animate({ // Set the end state properties: {     opacity: 1.0 },  // Set the desired animation time time: .5  // On end, do stuff }).on("end", function(){     Slide_1.animate({... 

Now let’s add them all together.

App_background.animate({     properties: {     opacity: 1.0 },  time: .5  }).on("end", function(){     Slide_1.animate({         properties: {             y: Slide_1.originalFrame.y         },         curve: "spring(377,31,0.50)",         time: .2     })     Tab_Bar.animate({         properties: {             y: Tab_Bar.originalFrame.y         },         curve: "spring(477,41,1)",         delay: .1,         time: .2     })        Bullets.animate({         properties: {             opacity: 1         },         delay: .2,         time: .1     }).on("end", function(){         Active.animate({             properties: {                 opacity: 1,                 scale: 1             },             curve: "spring",             time: .1         })     }) }) 

If you’ve really been paying attention then you’ll notice a few extra lines of code that I didn’t cover, the .originalFrame, delay and curve properties.

• .originalFrame refers to an elements initial state or the end state that I mentioned above
• The curve property configures the type of animation used by the object
• The delay sets the amount of seconds to delay the animation before start

Wrapping things up

I think it’s pretty safe to say, that’s a lot of words. Over the course of this series, we’ve:

• Covered a proposed RAD flow
• Used the DevRocket Photoshop plug-in
• Setup a GhostLab site
• Briefly addressed why designers should code
• Created app icons using the Ben Markowitz method
• Used those icons and adjusted the screen to accommodate screen size
• Made the app full screen by adding it to the home screen
• Used Fastclick to make things feel quick-fast
• Checked out a new version of Framer
• Created global variables for our views
• Added sound effects
• Configured our view states
• Animated our views

We’re really just scratching the surface of what’s possible with Framer—there’s so much one can do. I highly recommend visiting the example library and spending some time digging into the samples. Staggering, dragging, chaining, snaps, states and more all nicely organized and commented for your educational needs.

Check out the entire Get RAD series below!

• Get RAD, Part I: DevRocket + Prototyping
• Get RAD, Part II: App Icons