• 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.

  • Looping frames with currentFrame & totalFrames AS3 Snippet

    In this tutorial we modify our swipe code so that, a left swipe on our last frame will loop to the first frame and a right swipe on our first frame will loop to the last frame.

    I’m using the hideLogo_completeC.fla file from the previous tutorial sample files and have added a conditional statement inside our swipe code, in which we use the “currentFrame” and “totalFrames” properties to loop through the frames.

    Note: Directions are reversed on a mobile device, so a swipe left would go to the next page and a swipe right would go to the previous page.

    I have added the following conditional statement to our swipe right code.

    if(currentFrame == 1)
    {
    gotoAndStop(totalFrames);
    }
    else
    {
    prevFrame();
    }

    Above we are asking Flash to check if the play head is on the first frame, if so, then move the play head to the very last frame, otherwise move to the previous frame.”

    Here’s the code snippet for swipe left:

    if(currentFrame == totalFrames)
    {
    gotoAndStop(1);
    }
    else
    {
    nextFrame();
    }

    Here we are asking flash to check if the play head is on the last frame, if so then go to the first frame, otherwise go to the next frame.

    Note: Because we used the “currentFrame” and “totalFrames” properties, and not specific frame numbers, we can add as many frames as we like to our test app, and the code will always work, check out the sample code for more info.

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

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

    Copyright © Shane Hogan
    Do not copy this article.

  • ScaleViz Update 1.3.1

    I am currently working on an update for ScaleViz, which you can read more about here, although I’m taking a break this evening as my brain is in need of some down time, I am so passionate about ScaleViz and programing in general that when I get into developer mode, anyone or anything else around me become insignificant, the primal need to create kicks in and all rules go out the window, including, personal hygiene, food and sleep, sleep whats that then, it makes me laugh when people tell me they can’t sleep, I say, ‘get up and do something useful’.

    Here’s the code snippet for looping through frames, which updates our current swipe code, and I’ve now finished the new AS3 tutorial that shows you an easy way to Simulate Swipes in AS3 to help you increase your mobile development workflow, and it’s a lot easier than you may think.

    Buy ScaleViz To help you Master the Modes, Nail the CAGED system, learn all Major, Minor and Dominant, Chords, Arpeggios, Pentatonics and Modal Shapes in all positions, go from From Cowboy Chords to Soloing and become a Fretboard Master with ScaleViz today!

  • Adding a Web App to your iOS Home Screen

    To add a Web App or Web Clip to your home screen.

    Open Safari and browse to the URL of your choice, for this demo I’m going to use the test app, which you can find here:

    This version has the added icon and start screen that we created in the last tutorial.

    Once the page is loaded, press the middle button on your Safari “button bar”.

    Now press “Add to Home Screen”.

    Type a name for your App and press the “Add button”

    You can now use your Web App from your home screen.

    If you’ve made any changes to your app and your pages still look the same, you may need to clear you browsers cache.

    To clear your Mobile Safari cache, goto: Settings > Safari > Clear Cache.

    Copyright © Shane Hogan
    Do not copy this article.

  • Adding an Icon and Startup Screen to your iOS Web App

    For this tutorial we will be using a Photoshop template available from Cocoia, to add an icon to our Web App, this is the Icon the users see when they add your app to their iOS home screen.

    Here’s what the template looks like.


    If you want to create your own icon from scratch, create an image in the PNG 24 format at 57×57 pixels, name it “apple-touch-icon.png” and place it in the root directory of your Web App.

    When your icon is displayed on an iPhone Home screen, iOS automatically adds rounded corners, a drop shadow, and a reflective shine.

    If you don’t want iOS to add these effects, or if your icon already has style applied, you can name your icon “apple-touch-icon-precomposed.png”, and iOS will not apply any effects.

    Once you have the template open in Photoshop, turn off all layers apart from the one called “57 Pixels (iPhone home screen)”, expand that layer, then use the magnifier tool to zoom into the icon and make your changes.

    As you can see, I have changed the base shape’s color to black, turned off the star layer and pasted in my own icon.

    When you are happy with your handy work, go to “Select – All”, then choose “Edit – Copy Merged”, then “File – New”.

    Make sure your width and height are both set to 57 pixels, and then click OK.

    Go to “Edit – Paste”, (if needed nudge your icon around with the arrow keys), here’s what mine looks like pasted from the template using copy merged.

    When you are happy with your result, choose “File – Save for Web & Devices”, making sure you select PNG-24 as the Preset.

    Now click save & name your icon (I called mine icon.png).

    Here is our finished Icon.

    As you can see I have left the “Apple’s Pre-Supplied Gloss” layer turned on, so we could name the icon “apple-touch-icon-precomposed.png” and place it in the root directory of our Web App and it would show up when the App was added to the iOS Home Screen.

    Although, this time we are going to add a link to the icon in the “index.html” file’s <HEAD> tag.
    Add the following line just below your closing </title> tag, replacing “icon.png” with your icons filename.

    <link rel=”apple-touch-icon-precomposed” href=”icon.png” />

    To add a splash/start-up screen to your Web App, create a portrait image at 320 x 460 pixels, save it as PNG-24 or JPG format then add the following link to your head tag just after the previous link, replacing “splash.png” with the name of your start-up image.

    <link rel=”apple-touch-startup-image” href=”splash.png”>

    As you can see, I’ve added some text, a logo and the available on the App Store badge to a black-white gradient background, obviously you can put whatever you like on your own splash screen. Or, if you prefer you can take a screen shot of your web app and use that for the splash screen.

    To take a screen shot of your app on your iOS device, hold down the power button and press your home button (round middle button), then use Photoshop to re size your image to 320 x 460 pixels.

    Finally to get your Web App to run in full screen mode, add the following tag your index.html file’s <HEAD> tag.

    <meta name=”apple-mobile-web-app-capable” content=”yes” />

    You can find lots more information on Apple specific tags, in the Safari HTML reference guide.

    Our index.html file’s <head> tag should now look like this.

    <head>
    <meta charset=”utf-8″>
    <title>jQuery Mobile Web App</title>
    <link rel=”apple-touch-icon-precomposed” href=”icon.png” />
    <link rel=”apple-touch-startup-image” href=”splash.png”>
    <meta name=”apple-mobile-web-app-capable” content=”yes” />
    <link href=”jquery-mobile/jquery.mobile-1.0a3.min.css” rel=”stylesheet” type=”text/css”/>
    <link href=”zrss/jquery.zrssfeed.css” rel=”stylesheet” type=”text/css” />
    <script src=”jquery-mobile/jquery-1.5.min.js” type=”text/javascript”></script>
    <script src=”jquery-mobile/jquery.mobile-1.0a3.min.js” type=”text/javascript”></script>
    <script src=”zrss/jquery.zrssfeed.min.js” type=”text/javascript”></script>
    </head>

    You can find the live version of our updated Web App here, this version includes all the changes mentioned in this post.

    If you add the app to your Home Screen you can check out your new Icon, Start-up image, and see your Web App Full screen.

    Copyright © Shane Hogan
    Do not copy this article.