Posts tagged with ‘AS3 code Snippet’

  • Supporting Multiple Screen Sizes with AS3

    I have been so busy lately, but I am still here, creating content for my ScaleViz blog, redrawing and re-sizing the artwork for ScaleViz, designing and planning out a new App, keeping up with my guitar practice, studying programming, spending quality time with the misses, oh and occasionally loosing it in between, I even had my first hypnotherapy client in a while, so had a quick swat on that and spent a good couple of days writing a specific script, anyway, I thought I’d take a break and post what I’m up to, I hope you find the information useful.

    Firstly it’s not just me that’s having to rework my app, it’s every app designer, obviously companies have a much greater advantage over lone developers, but were all having to deal with the same issues, currently there are a 4 screen sizes to support for, the original iPad/iPhone, which is 480×320, then the iPhone 4 and iPod Retina’s which are 960×640, then we have the iPad 1 and 2 which are 1024×768 and now the iPad 3 as well, which is 2048×1536, I also hear there’s going to be an Mini-iPad soon, then the iPhone 5, which I’m hoping, even though it’s reported to have a 5 inch screen, will still be 960×640 (oh well it’s not 960×640, more work, iPhone 5 res is 1136 x 640).

    To give non-programmers some idea of what were all up against, here’s the Shape Trainer button from my app ScaleViz, designed for the 480×320 screen.

    Now here’s the same button sized up for the iPad 3.

    Now if your app was originally designed for the iPad and your trying to make your app universal, then your in a much better position that those of us that designed for the original iPhone/iPod, because you will already have all of your 1024×768 images, and because of the way Apple designed the Retina screens 1024×768 apps still look OK at the 2048×1536 resolution, and sizing them down to get lower screen res images will not affect the quality.

    However, those of use that designed for the original screen size are having to size up all our graphics to support the various screen sizes, which in most cases means having to re-draw, scale up and re-export all of the graphics that your app uses, this could, and usually does mean, hundreds and hundreds of graphics.

    Anyway, while researching how to make universal apps, chapter 8 of the iOS Apps Cook Book I mentioned in this post, was very helpful and as usual Google is your friend when it comes to researching new stuff and I found the following link very useful as well.

    So from all the information I learned, I came up with this code;

    function checkRes():void {
    //trace(“Hello”);
    if (yRes >= 1024 && xRes >= 768) {
    //this is the screen res on my laptop which I use for testing
    //if (xRes == 1366 && yRes == 768) {
    trace(Capabilities.screenResolutionX);
    trace(Capabilities.screenResolutionY);
    box = new iPad;
    addChild(box);
    }
    else if (yRes == 960 && xRes == 640) {
    trace(Capabilities.screenResolutionX);
    trace(Capabilities.screenResolutionY);
    box = new iPhoneRetina;
    addChild(box);
    }
    else if (yRes == 480 && xRes == 320) {
    trace(Capabilities.screenResolutionX);
    trace(Capabilities.screenResolutionY);
    box = new iPhone;
    addChild(box);
    }

    What I am doing is setting the variable box, which is of type MovieClip, to load a different MovieClip, for each of the different resolutions, I have three MovieClips in my library all linked for ActionScript with linked AS3 names of iPad, iPhoneRetina and iPhone (inventive aren’t I), obviously each of the movie clips is set to the correct resolution for each device and each MovieClip contains an image which is also equal to the appropriate device resolution, I set my stage size at 1024×768 and set Flash to target iPhone/iPad, in other words universal, by the way I am using Flash CS5.

    This way, I can in theory anyway, attach the same class file (as a sub-class to each MovieClip), and have one for the main stage, which is where the above function would live, and I can use it to call the other MovieClips, Images or whatever I need to call dependent on device resolution.

    Now, inside each MovieClip I drew out simple text boxes containing the text, iPhone, iPhone Retina & iPad, so when i run the app, I can see whats going on, now when I run this on a standard device, what you would expect to happen, happens, the app loads up and it says iPhone, sweet, same expected result on the iPad, the app runs and reports back that it’s an iPad, cool, now when I run this code on the iPhone Retina, something strange happens, the standard resolution MovieClip loads, it still looks good as do most 480×320 apps on a 960×640 device, because, as mentioned above, of the way Apple designed the Retina Screen’s, but hey that’s not the point on a Retina device I want to see my iPhone Retina text shown on the screen.

    So, what to do?, scream or keep going, i think you know what I choose, so after a bit more research I found this post, where it’s mentioned that you can scale down a 960×640 MovieClip or Image to fit a 480×320 screen, so I came up with this code.

    function checkRes():void
    {
    //trace(“Hello”);
    //if (xRes == 1366 && yRes == 768) {
    //Landscape iPad Res
    if (yRes >= 1024 && xRes >= 768) {
    deviceID = “iPad”;
    deviceFork();
    }
    else if (yRes == 960 && xRes == 640)
    {
    deviceID = “iPhoneRetina”;
    deviceFork();
    }
    else if (yRes == 480 && xRes == 320)
    {
    this.scaleX = 0.5;
    this.scaleY = 0.5;
    deviceID = “iPhone”;
    deviceFork();
    }
    }

    The code now works on all three device’s, as if the device has a standard resolution the Retina MovieClip still loads but is scaled by half, so now my iPad says iPad, my Retina iPod says Retina, and my standard iPod also says Retina because it’s my perfectly scaled 960×640 MovieClip, as you will notice i have also split up the checkRes function, and added a string variable called deviceID, which if I need to, I can use for repositioning elements, or for telling my code to do something different depending on the device, of course I could have used an integer, but strings are much more readable.

    Next I created a new function called deviceFork, which uses the deviceID string to load one of three functions dependent on the device, which was originally determined by checking the screen resolution, and inside each of the three device dependent functions, I now load the appropriate MovieClip. I am still in the very early stages of testing, however initial tests are proving to be working, long, long way to go yet though, as mentioned above I first need to re-size all of my App images so I can test on ScaleViz 😉

    So that’s what I’m up to, hope that helps, got to sleep now.

    ———————————————– Edit ————————————————

    Seeing as there has been a request for the deviceFork function, here is a paste of the complete class, you can also download the fla at the end of this post, password is the same as usual so if you’ve already subscribed, you know what to do.

    package
    {

    import flash.display.StageAlign;
    import flash.display.StageScaleMode;
    import flash.system.Capabilities;
    import flash.display.MovieClip;

    public class MultipleDisplay3 extends MovieClip
    {

    var xRes:Number;
    var yRes:Number;
    var box:MovieClip;
    var deviceID:String;

    public function MultipleDisplay3()
    {

    stage.scaleMode = StageScaleMode.NO_SCALE;
    stage.align = StageAlign.TOP_LEFT;
    xRes = Capabilities.screenResolutionX;
    yRes = Capabilities.screenResolutionY;

    checkRes();
    }

    function checkRes():void
    {
    //trace(“Hello”);
    //my laptop res unrem for testing
    //if (xRes == 1366 && yRes == 768) {
    //Landscape iPad Res
    if (yRes >= 1024 && xRes >= 768) {
    deviceID = “iPad”;
    deviceFork();
    }
    else if (yRes == 960 && xRes == 640)
    {
    deviceID = “iPhoneRetina”;
    deviceFork();
    }
    else if (yRes == 480 && xRes == 320)
    {
    //stage.scaleMode = StageScaleMode.SHOW_ALL;
    //stage.scaleMode = StageScaleMode.NO_SCALE;
    this.scaleX = 0.5;
    this.scaleY = 0.5;
    deviceID = “iPhone”;
    deviceFork();
    }
    }

    function deviceFork():void
    {
    if (deviceID == “iPad”)
    {
    trace(“woohoo iPad”);
    deviceIsAn_iPad();
    }
    else if (deviceID == “iPhoneRetina”)
    {
    trace(“woohoo iPhone Retina”);
    deviceIsAn_iPhoneRetina();
    }
    else if (deviceID == “iPhone”)
    {
    trace(“woohoo iPhone”);
    deviceIsAn_iPhone();
    }

    }

    function deviceIsAn_iPad():void
    {
    //do stuff
    trace(Capabilities.screenResolutionX);
    trace(Capabilities.screenResolutionY);
    trace(deviceID);
    box = new iPad;
    addChild(box);

    }

    function deviceIsAn_iPhoneRetina():void
    {
    //do stuff
    trace(Capabilities.screenResolutionX);
    trace(Capabilities.screenResolutionY);
    trace(deviceID);
    box = new iPhoneRetina;
    addChild(box);

    }

    function deviceIsAn_iPhone():void
    {
    //do stuff
    trace(Capabilities.screenResolutionX);
    trace(Capabilities.screenResolutionY);
    trace(deviceID);
    box = new iPhoneRetina;
    //box = new iPhone;
    addChild(box);

    }

    }

    }

    The images i’m using are some dude with a guitar that I drew in Illustrator, wishing he had ScaleViz ;-), these are available in the library in the Fla, and in the Zip.

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

    Contents of Archive (5 Files)
    MultipleDisplay.fla (No comments, See Post)
    MultipleDisplay3.as (ActionScript Class)
    MultipleDisplay.txt (Package Info)
    Guitarman-hd.png (960 x 640 png, for Retina & Standard Displays)
    Guitarman-ipad.png (1024×768 png, for iPad)

    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.

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

  • Adding swipes to your App

    The sample code in this tutorial shows you how to add swipe gestures to your app, it is the same test app from the last tutorial, however this time we call the function showTxt() by swiping right, clear the text field with an instance name of “outputTxt”, by swiping left, change the Click Me buttons label by swiping up and change it back again by swiping down.

    Here’s the skeleton swipe code;

    function swipeMe (e:TransformGestureEvent) :void {
    if (e.offsetX == 1) {
    //Do stuff on swipe right
    }
    else if (e.offsetX == -1) {
    //Do stuff on swipe left
    }
    else if (e.offsetY == -1) {
    //Do stuff on swipe up
    }
    else if (e.offsetY == 1) {
    //Do stuff on swipe down
    }
    }

    See sample code comments for more information, of course we could have set any of the swipes to do anything we liked, for example, we could have used gotoAndStop(x) or gotoAndPlay(x) where (x) is a frame number, to jump to another frame, which could contain a help screen with different graphics or MovieClips, or use, nextFrame() and prevFrame(), to cycle through frames consecutively.

    For example, to create a book type app from a Flash AS3 document with 3 frames, (Add in some “Variables”, “Conditional Statements”, “Buttons” , some fancy graphics and a good story line and you could easily create an interactive point and touch type game).

    The swipe code could look like this:

    function swipeMe (e:TransformGestureEvent) :void {
    if (e.offsetX == 1) { // swipe right
    nextFrame() ;
    }
    else if (e.offsetX == -1) { // swipe left
    prevFrame();
    }
    else if (e.offsetY == -1) { // swipe up
    gotoAndStop(1);
    }
    else if (e.offsetY == 1) { // swipe down
    gotoAndStop(3);
    }
    }

    We can target an individual “MovieClip’s” Properties using dot syntax, type your instance name followed by a period and Flash will display a list of available options (note: if nothing happens after you have typed the period, press Ctrl+Space on a PC or Cmd +Spacebar on a Mac, or press the icon that looks like a speech bubble at the top of the Actions Panel to bring up Code Hinting (Note: if you can’t see the Actions Panel, press F9 to show it), here’s some examples.

    tutorialTxt.y = 40;
    Will move the “tutorialTxt” MovieClip, to the top of our test App.

    Some of the other properties you can set are alpha, rotation, rotationX, rotationY, x, y, z, visible, enabled, here’s how to disable the button with the instance name of clickBtn.

    clickBtn.enabled = false;

    Or we could completely remove the button:

    removeChild(clickBtn);

    Why not change the button so that it hides the ScaleViz logo on touch, you now have more than enough knowledge to achieve this
    Note: The Adobe Flash help files are there if you need them and are quite detailed, also most topics include example code, press F1 for help.
    Hint: remember the object you are targeting with ActionScript 3.0 should have an instance name, see previous tutorial for details.

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

    Contents of Archive (6 Files)
    swipe.fla: non commented version.
    swipeC.fla: commented version.
    hideLogo_start.fla: skeleton code for swipe
    hideLogo_complete.fla: non commented version.
    hideLogo_completeC.fla: commented version.
    swipe.txt:Contents.
    // ====================================
    // AS3 Swipe Tutorial code sample
    // Downloaded from http://mds.scaleviz.com
    // Copyright © 2011 Shane Hogan
    // Developer of ScaleViz – A Theory App Designed for Guitarists.
    // http://www.scaleviz.com
    // Coded in Flash with ActionScript 3.0
    // =====================================

    if you Study the code comments, you can find out how to;
    Run a function with a swipe.
    Clear a text field with a swipe.
    Modify a buttons label with a swipe.
    Use swipes to navigate the frames in your timeline.
    Toggle an items visibility with a button.

    Note:swipeC.fla: Shows our test app with the swipe code added.
    hideLogo_start.fla: Contains a skeleton of the swipe code, so
    you can experiment, (there is no commented version of this file).
    hideLogo_completeC.fla contains the swipe timeline navigation
    as discussed in the tutorial, and the code snippet to
    toggle visibility, note: 2 more frames have been added.

    Copyright © Shane Hogan
    Do not copy this article.

  • Click to Go to Web Page

    Making an object go to a web page when clicked, pressed or touched is fairly straight forward, in this “Code Snippet Example Tutorial” we are going to be working with the same test app as in the previous tutorial, however, this time we call the “showTxt()” function with no parameters, use the “Click Me!”, button to load a Web Page, add a Mouse Listener to a MovieClip with an instance name of “tutorialTxt” to make it clickable and point both the button and the MovieClip Listeners to the same function. Check the code comments in the tutorial files for more details.

    Note: Flash will automatically convert clicks to touches when you compile your app.

    You must be a registered Apple Developer to build your app for iOS device testing.

    To make an object go to a Web Page the target object must be a MovieClip and it must have an instance name, in fact anything you want to control with ActionScript must have an instance name, so you can target the object specifically.

    Note: I have set the objects button mode (which in this case is a “MovieClip” that contains some text, with an instance name of “tutorialTxt”), to true, this assigns the hand cursor when you mouse over the object, “Button Mode” is irrelevant on an iOS or other mobile device.

    Here’s the code to use to make a click, press or a touch go to a webpage:

    // add event to listen for mouse click
    tutorialTxt.addEventListener(MouseEvent.CLICK, goToWebPage);

    // enable hand cursor
    tutorialTxt.buttonMode = true;

    // function to handle the button click
    function goToWebPage(event:MouseEvent):void
    {
    navigateToURL(new URLRequest(“http://www.scaleviz.co.uk”), “_blank”);
    }

    Note: You can also use the code snippets panel to add this code automatically, just select an object on the stage, open the code snippets panel by going to “Window – Code Snippets”, open up the “Actions Folder” and double click the “Click to Go to Web Page” Snippet, Flash will do the rest for you.


    If your object is not already a MovieClip, Flash will convert it for you and give your object an instance name, although I recommend that you perform these steps yourself, this way you can give your objects meaningful names that actually represent what the object is, or does instead of using the automatically generated names which will be in the following form, Symbol 1 for the movieClip and movieClip_1 for the instance name, taking this step will make your code a lot easier to manage later on.


    If your object is already a movieClip and but doesn’t have an instance name, Flash will generate an instance name for you.

    To convert an object to a movieClip, select it and press F8, make sure the type is set to movieClip and not, Graphic or Button, set the registration point (used for alignment), then give your new symbol a name. The Symbol name is for your reference and doesn’t have to be the same as the instance name, so you can call it whatever you like, just remember to use a descriptive name.


    The Symbol name you chose will be displayed in the Library, next to the Symbol.


    To give your new symbol an instance name select it on the stage, then type the name into the properties panel, if the properties panel is not visible press “Ctrl+F3” on a PC or “Cmd+F3” on a Mac, or select it from “Window – Properties”, the instance name is usually written with all words but the first capitalized, if you like you can also add a suffix to describe the object ( Txt, Btn, MC, etc), but this is not necessary.


    Once you have created your MovieClip and set the instance name, you can use the code snippets panel to add the “Click to go to Web Page” Code Snippet (as directed above), and flash will use the descriptive names that you have chosen for your objects in the code it creates for the Snippet.

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

    Contents of Archive (3 Files)
    clicktogotowebpage.fla: non commented version.
    clicktogotowebpageC.fla: commented version.
    clicktogotowebpage.txt:Contents.
    // ====================================
    // AS3 Click to Go to Web Page tutorial
    // Downloaded from http://mds.scaleviz.com
    // Copyright © 2011 Shane Hogan
    // Developer of ScaleViz – A Theory App Designed for Guitarists.
    // http://www.scaleviz.com
    // Coded in Flash with ActionScript 3.0
    // =====================================

    In this “Code Snippet Example Tutorial”, I teach you how to use the “Go to Web Page Code Snippet”.

    Also, if you Study the code comments, you can find out how to;
    call a function with no parameters.
    Use a button to load a Web Page.
    Make a MovieClip clickable.
    Point multiple Listeners to the same function.

    Note: You will find two versions of each file in the archive
    the file that has a “C” on the end is fully commented.

    Copyright © Shane Hogan
    Do not copy this article.