• Web App Splash Screen created with Adobe Edge

    The latest update for my app ScaleViz has been approved and I’ve finally had a chance to play with Adobe’s new HTML5 motion and interaction tool called “Edge“, and after playing with it for a little while yesterday I can see why they call it Edge.

    I’ve only really just touched the surface and have already created this cool splash screen and added it to the front page of our test mobile web app, you can find it here if you want to check it out: Test Mobile Web App with Adobe Edge Splash Screen added to first page.

    (Don’t press the animations background (the stage) as I’ve linked it to ScaleViz.com and you will be swift-ed away, you can however drag the animation up and down without activating the link).

    Edge is a seriously awesome development tool, especially if you’re used to timeline animation using similar development tools like, Flash.

    When I get a bit of time I will definitely be doing a screen cast tutorial on how to animate stuff using Adobe Edge, however in the mean time here’s an Edge tutorial from Adobe.

    I can see complete apps being developed with Edge and packaged up for the Apple Store or Android Market place using Dreamweaver and Phone Gap.

    As mentioned I’ve only just scratched the surface and I’m also not one for reading instructions, but if you check out the Edge animation in my test web app, you can see that the animation reverses itself when it gets to the end then plays again, this functionality was added with a few clicks, also if you click the background, it links to my App site ScaleViz.com, again this was added with two clicks and a URL change.

    Edge makes motion graphics available to everybody and because Edge is based on HTML5 and JavaScript your animations can be embedded into your web page and you can now target browsers like Safari with Flash type animation, how cool is that.

    Edge is now called Edge Animate, go check it out here:

  • xCode 4.2.1 targeting an older armv6 device

     The new Mac mini

    Now includes fourth-generation Intel Core processors, With Intel Iris Graphics or Intel HD Graphics 5000.
    High-speed Thunderbolt 2 . It’s mini in size only.

    Now Features OS X Yosemite.

    Being a long time Windows user I’ve been pondering on the idea of getting a Mac for a while now, and considering I’ve been a registered Apple Developer for nearly a year now, I thought it was about time to take the plunge, and I’m so glad I did, after playing around with Mission Control and finding out all the keyboard shortcuts, I thought to myself, I should have got one of these a long time ago, being able to have multiple desktops is an awesome feature and is probably my favourite so far.

    I was also very pleased when I logged into the Mac App Store, which comes pre installed with OS X Lion as I found Garage Band, iPhoto & iMovie, the three Apps from Apple that make up the iLife suite, sitting there waiting for me to accept as a freebie, sweet, thanks Apple.

    xCode4.2.1 is installed along with Cocos2d and I’m looking forward to adding Objective C to my collection of programming languages and getting stuck in to some coding.

    xCode 4.2.1 targeting an older armv6 device

    One problem I came across is that the new xCode (4.2.1), does not support older devices (armv6) out of the box, I have a second Gen 8GB iPod Touch, and when I tried to build directly to my device, xCode would say finished running app on target device but nothing would happen.

    The solution is to add the armv6 architecture to your build settings, by double clicking on standard armv7, clicking the +, then typing in armv6, once you have done this make sure you delete armv7 from the ‘Required device capabilities’.

    I’ve take some screen shots (Cmd-Shft+4 to get a selection, cmd-shft+3 for a full screen screenshot), to show you exactly what to change and where to change it.

    Your app should now compile and run fine on an older arm6 device, if not check your projects deployment target and drop it down to 4.2, and you should be good to go.

    Copyright © Shane Hogan
    Do not copy this article.

  • Adobe Actionscript 3 samples for Flash CS5 CS6 & CC

    I found these links a few weeks ago and wish I had found them a lot earlier, some really good sample code across categories that include interactivity, transition effects, image loading, masking and even some sample games.

    Here’s what it says on Adobes sample page

    One of the quickest ways to learn Flash Professional is to look at existing sample files to see how they are built. This page contains links to several Flash samples, with instructions on how to use them.

    Here’s the link to the AS3.0 samples page on Adobe’s site.

  • Simulating Swipes in ActionScript 3.0 to increase development workflow

    The sample code in this tutorial shows you how to simulate swipes to accelerate your mobile development. It sounds complicated but in reality is as simple as duplicating your swipe code so that it works with either button or keyboard presses, the arrow keys are the perfect candidate.

    The swipe code in ScaleViz is quite complex and this technique has saved me lots of time and headaches, so I thought I would share it with you, I’m using the test app from our last tutorial.

    As mentioned above all we need to do is simulate our swipes with the arrow keys, there are many different ways you can do the same thing in AS3, here I have chosen to use a case statement, which takes a value passed to it through a function from an event listener and compares it with the conditionals inside the case statement.

    To add this function to our test app we first add an event listener to the stage, which listens for a keyboard press and then passes the pressed key to the function called “swipeSimHandler”:

    stage.addEventListener(KeyboardEvent.KEY_DOWN, swipeSimHandler);

    Then we add the handler function that receives the pressed key from the above listener and passes it to the case statement inside the handler, which then does something depending on which key was pressed, in this case I have added in a trace statement that writes out which arrow key was pressed to your output window.

    A trace statement is an awesome feature of AS3 that you can use to write out the value of variables and messages to your output window so you know that your code is working.

    If your output window is not open then press F2 or go to “Window – output”, although it will usually open itself if there’s a message to show you.

    Here is our skeleton case statement.

    function swipeSimHandler(event:KeyboardEvent):void
    {
    switch( event.keyCode )
    {
    case Keyboard.RIGHT:
    trace(“Right Arrow Key Pressed!”)
    break;

    case Keyboard.LEFT:
    trace(“Left Arrow Key Pressed!”)
    break;

    case Keyboard.UP:
    trace(“Up Arrow Key Pressed!”)
    break;

    case Keyboard.DOWN:
    trace(“Down Arrow Key Pressed!”)
    break;
    }
    }

    Note: We can listen for any keys, they don’t necessarily have to be the arrow keys.

    For example: We could change the above case statement from Keyboard.Right, Keyboard.LEFT,  Keyboard.UP and Keyboard.DOWN to keyboard.R, keyboard.L, keyboard.U and keyboard.D , this would control our swipe code with the R, L, U and D keys, you can find the other key codes in Flash’s help, just highlight the word keyboard and press F1 while in your actions panel (F9), this will show you which other keys are available.

    Now all we need to do is copy our current swipe code and paste it into the correct place within the case statement, remembering that the swipes will be reversed on a Mobile device so we need to swap them round again. So, we paste the conditional statement from the right swipe into the keyboard left conditional and the left swipe into the keyboard right conditional, see previous tutorial for details.

    Here’s our new swipe code with the added code in bold:

    function swipeSimHandler(event:KeyboardEvent):void
    {
    switch( event.keyCode )
    {
    case Keyboard.RIGHT:
    trace(“Right Arrow Key Pressed =, Simulate Swipe Left!”)
    if(currentFrame == totalFrames)
    {
    gotoAndStop(1);
    }
    else
    {
    nextFrame();
    }
    break;

    case Keyboard.LEFT:
    trace(“Left Arrow Key Pressed – Simulate Swipe Right!”)
    if(currentFrame == 1)
    {
    gotoAndStop(totalFrames);
    }
    else
    {
    prevFrame();
    }
    break;

    case Keyboard.UP:
    trace(“Up Arrow Key Pressed!”)
    gotoAndStop(1);
    break;

    case Keyboard.DOWN:
    trace(“Down Arrow Key Pressed!”)
    gotoAndStop(3);
    break;

    case Keyboard.V:
    showTxt();
    break;
    }
    }

    We could also add another conditional inside the case statement, which as you can see I have done above, this adds a listener for the letter V which runs the function “showTxt”, when the “V” key is pressed, which toggles the visibility of text “ScaleViz Rocks!” to either on or off, so not only can you use this technique for simulating your swipes you can also use it to add in keys to work various parts of your app that could rely on the swipes performing a certain function.

    You can now run your test app within flash using the arrow keys to simulate your swipes and you know that when you are ready to deploy your app for testing on your device everything will work as you expected, just remember to swap the left and right code back again.

    As you can see this is a massive time saver when your app relies on swipes as you don’t have to keep deploying it to your device to test if your latest code change is working as it should.

    To access code samples, Click Here.
    Tutorial files were created using Flash CS5 Professional version 11.0.2.489.

    Contents of Archive (2 Files)
    simulateSwipe.fla (fully commented test app)
    simulateSwipe.txt (info)

    Copyright © Shane Hogan
    Do not copy this article.