All posts by Joseph Labrecque

PhoneGap and HTML5SQL.JS

Mobile, , ,

I’ve been doing a lot of digging around in PhoneGap lately. This dovetails nicely with my Edge Animate and Edge Reflow work – but I also see it as an extension of my work with Adobe AIR and Flash Player on mobile.

One of the interesting things about working in web technologies with modern browsers (including mobile), is that we have so many choices due to fragmentation or simply because of competing ideas. I’ve found many of the solutions for web storage on mobile to be either lacking or frustratingly complex. A few weeks back, I rand across a nice solution to simply all of this and have adopted it into my workflow.

HTML5SQL.JS makes working with local databases in a PhoneGap app super easy. This video demonstrates how to use it within a project.

Also – you can check out my progress for this app on the project Github repository.

Adobe MAX is almost here… I’m Speaking on Edge Animate!

Community, Presentation, , ,

I’ll be happily speaking at Adobe MAX again this year on one of my favorite new topics: Edge Animate! Specifically: Using Edge Animate to Create a Reusable Component Set.


Title: Using Edge Animate to Create a Reusable Component Set

Description: This session will examine the Adobe Edge Animate Symbol structure and demonstrate a number of ways to achieve functional results similar to ActionScript using jQuery and JavaScript APIs. Learn these valuable techniques from Joseph Labrecque, senior interactive software engineer at the University of Denver.

In this session, we will:
• Provide an overview of the Edge Animate Symbol structure
• Demonstrate how to accomplish “component” creation
• Show how to reuse these components in projects

Location: Monday 3:30 PM – 511B

Track: Design and Creativity

Audience Type: Application Developer, Educator, Graphic Designer, Motion Graphics/Visual Effects Artist, Web Designer, Web Developer

Product Type: CSS, Creative Cloud, Edge Animate, Flash Professional, HTML5, JavaScript, jQuery

Register for Adobe MAX 2013

 

And be sure to check out my latest book – Learning Adobe Edge Animate!
Learning Adobe Edge Animate

PhoneGap Starter (for PhoneGap Build)

JavaScript, Tutorials, , ,

Most PhoneGap “Hello World” examples make you go through the task of configuring PhoneGap on your system and making sure your system PATH is set with Android Virtual Device support and a bunch of command line interfacing… and it is CONFUSING for newcomers!

What if you just want to write your code… test your code in browser… then compile everything with PhoneGap Build services?

Well, then you read this tutorial!

ripple

To complete this example, you will need:

  1. Be sure you have some sort of web server running locally. I recommend XAMPP as it is cross-platform and has probably more than you need to get started. Install it and make sure it is all working. The reason you will want this is that you can better test via browser emulation in this way and will avoid XMLHttpRequest cross-origin issues.
  2. http://localhost/ in the browser should pull up a page. Make sure this is working.
  3. Install an IDE. It can truly be any IDE that can edit HTML/CSS/JS. I’m using Dreamweaver in this example. Honestly – any IDE – Notepad works.
  4. Create a new directory within your local web files. For me, this is C:\xampp\htdocs\phonegap and this will map to http://localhost/phonegap/ in the browser.
  5. Have a look at the zip package I have provided. You will find index.html and cordova-2.6.0.js and a config.xml– this is ALL YOU NEED! Place these files within your phonegap directory.
  6. Run this within the Chrome Ripple emulator. You’ll see an alert fire.
  7. Feel free and play with any other API’s or CSS styling or whatnot.
  8. You can package these files up in a zip and send them up to PGP to compile.
  9. EASY!

pgbuild

Not bad, right? :)

Here’s the index.html code:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="format-detection" content="telephone=no" />
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
        <title>Hello World</title>
        <script type="text/javascript" src="cordova-2.6.0.js"></script>
		<script type="text/javascript">
			var showMessageBox = function() {
				navigator.notification.alert("Hello");
			}
			function init(){
				document.addEventListener("deviceready", showMessageBox, true);
			}
        </script>
    </head>
    <body onload="init();">
        <p>content</p>
    </body>
</html>

Adobe and the Flash Gaming Landscape

Presentation, , , ,

I had the opportunity this month to speak at the Rocky Mountain Adobe User Group about gaming, Flash, Adobe, et cetera alongside Jun Heider who talked about Apache Flex. Here are my slides:

There have been a lot of changes with the Flash Platform over the past year or two  plus a lot of changes in the web landscape in general. The role of Flash is shifting and Adobe is adapting to this shift by focusing engineering efforts, tooling, and community library support to the two areas in which Flash really excels: gaming and premium video experiences. In this session, we’ll have a look at the momentum behind Flash Gaming and see how Flash Builder 4.7, Flash Professional CS6, and Adobe Scout contribute to this momentum while taking advantage of the new Adobe Gaming SDK and the support of Stage3D libraries like Starling, Away3D, and Feathers. Interested in how to get started in game development with the Flash Platform? Don’t miss this session!

The recordings of both my talk and Jun’s Introduction to Apache Flex 4.9 can be accessed as well.

Windows 8 “Modern UI” Flash Player BLACK-list

Flash

So… remember back in September of 2011 when Microsoft declared that Flash Player and other “plugins” would be barred from Internet Explorer in the Modern UI version of the browser?

Remember in May of 2012 when Microsoft relented and in place of an all-out ban, devised a troublesome whitelist which developers had to submit requests to Microsoft to be included upon? What a mess, right?

Well, starting tomorrow – the whitelist becomes a blacklist – essentially freeing up almost all Flash Player content on the web when viewed in Internet Explorer 10 on all platforms which support IE10.

Excellent news!