Skip navigation
Currently Being Moderated

Flash-Based Help System

Apr 4, 2013 5:42 AM

Hi,

 

I have been searching without success for examples of Flash-based help files: using Flash and AS3 to create a help file (similar to CHM or WinHelp style help authoring).

 

I'd like to build a small, very basic help file into a Flash AS3 project, with the look/feel of a Windows style help file. Maybe, there are some examples, sample FLA's that can help me avoid "reinventing the wheel."

 

Any leads would be appreciated.

 

saratogacoach

 
Replies
  • Currently Being Moderated
    Apr 4, 2013 8:27 AM   in reply to saratogacoach

    Target AIR.

    In CS 6 Under File>New>Templates>Examples there is an AIR-Window Example that gives a basic idea of how to access the NativeWindow class.

    With AIRs ability to directly load HTML it should be pretty simple to fake the basic functionalities of a CHM file

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 4, 2013 11:45 PM   in reply to saratogacoach

    I have far too less facts about your project to give you solid advise. Search the web and try to come up with some key phrases that tackle your problem one point at a time.

    I gave you the two Hints I could think of right out of the box. If you have sth cooked up and ran into "specific" problems, report back to this forum.

    I have an HTML help file that I created. I could re-compile it as web help. Could I somehow run it in the AIR window?

    Again, it depends how "complex your helpfiles are, if you talking about linking to anchors or using full css you will probably have to add javascript  to the mix.

    AIR is using the webkit engine to render html.

    Look here for more info.

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 5, 2013 6:41 AM   in reply to saratogacoach

    OK, I made a little demo, based on the Template I suggested in post 1 of this thread.

     

    0. import the necessary stuff at the beginning of your Actionscriptlayer

    import flash.html.HTMLLoader;

     

    1.Simply put these lines at the end (after...

    stage.nativeWindow.startMove();

    })

     

    var _html:HTMLLoader = new HTMLLoader();

    _html.width = _cont.width;

    _html.height = 200;

    _cont.addChild(_html);

     

    for (var i:int = 1; i<=2;i++){

        MovieClip(_cont.getChildByName("page"+i)).mouseChildren = false;

        MovieClip(_cont.getChildByName("page"+i)).buttonMode = true;

        MovieClip(_cont.getChildByName("page"+i)).txt.text = i;

        _cont.getChildByName("page"+i).addEventListener(MouseEvent.CLICK, loadHtml);

    }

     

    function loadHtml(e:MouseEvent):void{

        //load a html based on the name of the clicked button

        trace("CLICKED:"+e.currentTarget.name);

        _html.load(new URLRequest(e.currentTarget.name + ".html"));

    }

     

    2.make an empty symbol which you call "_content" and drag it from the library to the highest Layer of your stage.

    Name it "_cont"

     

    3.Double click this "_cont" symbol and put two buttons, one named "page1" the other "page2" inside

     

    4.put two html-files page1.html and page2.html into the same folder where you publish to (where the swf of the published fla ends up)

     

    5.Compile and see that when you press the buttons the html-files will be loaded into your AIR app.

     

    Here is a picture how that might look:

     

    HelpfileDemo.PNG

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 5, 2013 6:53 PM   in reply to saratogacoach

    1.remove this line from the code:

    MovieClip(_cont.getChildByName("page"+i)).txt.text = i;

    2.change the type of B1&B2 from Button to MovieClip (on stage & in the library)

    3.make sure the registration point of _cont is on the left upper corner of your window

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 6, 2013 5:06 AM   in reply to saratogacoach

    don`t scale cont, otherwise your _html will inherit the distortion.

    _cont is merely a way to position your loaded html (_html) easily.

    You could also load _html above _cont

    with

    addChild(_html) //instead of _cont.addChild(_html)

    and position _html`s left upper corner where you need it

    with

    _html.x = 50

    _html.y = 80

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 7, 2013 11:46 PM   in reply to saratogacoach

    defining the size:

     

    _html.width=400;

    _html.height=250;

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points