• How to add an RSS Feed to your Web App using a Plug-in

    To add an RSS feed to page three of our Web App, i’ve used a jQuery plug-in called “zRSSFeed”, which you can get from here, this plugin reads RSS feeds from any website URL using the Google Feed API, it also produces structured HTML with built-in CSS styling and is very easy to use.

    Here’s how to add some content to your jQuery-Mobile Web App with an RSS feed reader jQuery Plug-in.

    Once you have downloaded “RSS Feeds Reader Plugin for jQuery”, make a new directory in the webApp site folder created in the previous tutorial and name it “zrss”, of course you can call it anything you like, now copy the “jquery.zrssfeed.min.js”, and the “jquery.zrssfeed.css” files from the “zrssfeed archive download” into the “zrss”, folder created above.

    Note: We could have put the plug-in files in the “jquery-mobile” folder that Dreamweaver created when the index.html file was saved, but keeping everything separate helps your site stay organized, makes individual plug-ins easier to update, and is much better for debugging, for example if something is not working as expected, you could just rename your plug-in folder to stop your page from loading any CSS or JavaScript without changing any of your code.

    Your folder structure should now look like this:

    Folder Structure

    Using your preferred text editor (I’m using Notepad), we now link to the CSS and .js files from the “zRSS plug-in”.

    Change the code in the <head> tag of “index.html” from this :

    <head>
    <meta charset=”utf-8″>
    <title>jQuery Mobile Web App</title>
    <link href=”jquery-mobile/jquery.mobile-1.0a3.min.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>
    </head>

    To this (Code changed/added is in bold):

    <head>
    <meta charset=”utf-8″>
    <title>jQuery Mobile Web App</title>
    <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>

    Notice: The link to include the “zRSS feed plug-in” JavaScript file is added after jQuery and jQuery-mobile. If loaded before you may see unexpected results, for example if “zRSS” was loaded before both jQuery and jQuery mobile, the plug-in would not work, if loaded after jQuery but before jQuery-mobile, you would lose the back button.

    Now we add the following JavaScript to the page with an id of “page3” replacing the Content placeholder inside the div with a data-role of “content” (the place holder is the word “Content”)

    Change this:

    <div data-role=”page” id=”page3″>
    <div data-role=”header”>
    <h1>Page Three</h1>
    </div>
    <div data-role=”content”>
    Content
    </div>
    <div data-role=”footer”>
    <h4>Page Footer</h4>
    </div>
    </div>

    To this (Code changed/added is in bold):

    <div data-role=”page” id=”page3″>
    <div data-role=”header”>
    <h1>ScaleViz VIP RSS Feed</h1>
    </div>
    <div data-role=”content”>
    <script type=”text/javascript”>
    $(document).ready(function () {
    $(‘#vipfeed’).rssfeed(‘http://scaleviz.co.uk/feed/’, {
    limit: 5
    });
    });
    </script>
    <div id=”vipfeed”></div>
    </div>
    <div data-role=”footer”>
    <h4>Page Footer</h4>
    </div>
    </div>

    Notice: In the code above I changed the title, and in page one I also changed the “page 3 link” in the unordered list, from this:

    <li><a href=”#page3″>Page Three</a></li>

    To this (Code changed/added is in bold):

    <li><a href=”#page3″>RSS  Feed</a></li>

    Here is our result:

    Here's the home pageHere's the RSS Feed

    Screenshots were captured directly from an iPod Touch, here’s a live version of our Web App so far.

    To change the feed link, change the text in bold from the following line of code, from this:

    $(‘#vipfeed’).rssfeed(‘http://scaleviz.co.uk/feed/‘, {

    To this:

    $(‘#vipfeed’).rssfeed(‘http://www.yourblog.com/feed/‘, {

    The variable passed to the feed, is the ID of the Div used to place the feed in your page.

    $(‘#vipfeed‘).rssfeed(‘http://scaleviz.co.uk/feed/’, {

    <div id=”vipfeed“></div>

    To change the amount of results returned change this line:

    limit: 5

    To This:

    limit: x
    Where “x” is the number of feeds to return.
    Note: If the blog owner has set the limit on feeds, changing this number will make no difference and you will need to go into your blog’s reading settings to change the limit, in WordPress you can find a setting called “Syndication feeds show the most recent”, under “Settings – Reading”.

    Copyright © Shane Hogan
    Do not copy this article.

  • Creating a jQuery-Mobile Web App with Dreamweaver CS5.5

    Creating a skeleton four page jQuery-Mobile Web App with Dreamweaver CS5.5 in under 3 minutes without writing a single line of code:

  • App Development in AS3, Objective C, SpriteKit, Swift & HTML5.

    100322_N90_BOW_PF_#1Band_no_pings_FL_PHO-10-0110 001

    Hello I am the developer behind ScaleViz – A Theory App designed for Guitarists available on the Apple App Store. If you are looking for my blog on music theory, you can find it here.

    Since starting this blog I have developed in many different programming languages including AS3, Objective C, Unity (C#), Cocos2d-X (C++), Cocos2d & the relatively new SpriteKit & Swift from Apple, which is what ScaleViz Universal is currently being developed in.

    So you can expect to find, HTML5 & AS3 code snippets, hints, tips and tutorials covering subjects learned whilst developing ScaleViz, and check out my Apps on the Apple App Store & Google Play Store along with some other stuff that interests me, like building arcade machines & Studying hypnotherapy, Kung Fu, Vaping and all that comes with it, like making juice, coils etc…

    So, Enjoy your stay and thanks for looking 🙂

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

  • ArgumentError: Error #1063

    ArgumentError: Error #1063: Argument count mismatch on error_1063_fla::MainTimeline/showTxt(). Expected 0, got 1.

    Whilst developing your app you may come across this error, the app will compile fine but as soon as you go to press the button “Click Me”, Flash will give you the error code shown above.

    OK, for this tutorial I have put together an AS3 document at 320 x 480 pixels, it contains a button, which I dragged in from the components pallet (Ctrl+F7 on a PC, or Cmd+F7 on a mac, or you can choose “Window – Components” ), and set the button label under the “Component Parameters” in the properties panel to  Click Me, I then dragged out a dynamic text field and set the instance name to “outputTxt”, added some background graphics and we have our test app.

    Note: everything is on it’s own layer, which is good practice and makes the file easier to edit, also when you start animating, the object you’re animating needs to be on it’s own layer.

    When you press the “”Click Me” button the dynamic text field should show, “ScaleViz Rocks!”.

    So, whats this all about then, well this one is a simple fix, Flash is telling you that the event listener for the button doesn’t match the event handler in the function, all you need to do is add the correct event to the event handler for the function, and the code will work.

    Here’s the non-working code:

    import flash.events.MouseEvent;

    clickBtn.addEventListener(MouseEvent.CLICK, showTxt);

    function showTxt(): void {
    outputTxt.text = “ScaleViz Rocks!”;
    }

    Here’s the fixed code with the correct event assigned to the event handler, the added code is in bold:

    import flash.events.MouseEvent;

    clickBtn.addEventListener(MouseEvent.CLICK, showTxt);

    function showTxt(e:MouseEvent): void {
    outputTxt.text = “ScaleViz Rocks!”;
    }

    This may seem like an easy mistake to make but if you are just beginning and have lots of different functions, handlers and listeners it is quite easy to overlook, and errors of any kind can be a bit overwhelming at first, however, as you can see it is easily fixed.

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

    Contents of Archive (5 Files)
    error_1063.fla: non commented version showing fixed code.
    error_1063C.fla: commented version showing fixed code.
    error_1063_Wrong.fla: non commented version showing wrong code.
    error_1063_WrongC.fla: commented version showing wrong code.
    error#1063.txt:Contents.
    // ====================================
    // AS3 fix error # 1063 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
    // =====================================

    ArgumentError: Error #1063: Argument count mismatch on error_1063_WrongC_fla::MainTimeline/showTxt(). Expected 0, got 1.

    Note: You will find two versions of each file in the archive.
    The file that has a “C” on the end is fully commented,
    the other file, is the code with no comments.
    The file with the suffix _Wrong has the code that will
    generate the error.

    The best way to learn AS3 is to dive in at the deep end.
    The comments I have written in the .fla files will help you
    decipher what’s going on in the code, once you grasp
    the concept of event handlers and listeners, you will
    be well on your way to creating your first App.

    Copyright © Shane Hogan
    Do not copy this article.