Quick Tip: How to Communicate Between Flash and HTML

In this Quick Tip, we’ll look at how to use the ExternalInterface class. This allows us to write AS3 which can run JavaScript code, and vice-versa. That means you can use Flash to alter parts of the webpage in which it’s running!

Step 1: Set up the Flash Document
Create a new Flash ActionScript 3 document. Resize the stage to be 600×300. With the rectangle tool, draw out a rectangle that is the size of the stage. Give it a color of #CCCCCC. Also, give it a black stroke of 2px.

Step 2: Set up the Flash UI
Here’s the layout we’ll be working towards:

Open the Components Panel (Window > Components) and, from the User Interface folder, drag a ColorPicker component onto the stage. Give it an instance name of ‘cp’.
Next create a dynamic text field called ‘resizeText’; place and size it however you please (you can’t see the…

You Might Also Like...

  • Quick Tip: How to Build a Frame Rate Counter in ActionScript 3.0

    1839 readersIn this Quick Tip you’ll learn how to measure the current frame rate of your Flash application using ActionScript 3, and display the FPS on screen. The Importance of Frame Rate Frame Rate, or Frames per Second (fps), is the frequency at which an imaging device produces unique consecutive images called frames. The term applies equally well to computer graphics, video

  • Flash and ExternalInterface don’t follow the same security rules

    235 readersI spent a large portion of yesterday caught up in a bug. Basically, Flash would make a call to Javascript, and a while later, get a call back. It worked something like this: ExternalInterface.addCallback("callback", function ():void { ... }); ExternalInterface.call("doSomething"); Unfortunately it didn’t work. I thought I did everything right, I set allowScriptAccess to “always”, and

  • Quick Tip: How to Detect Mouse Direction Using ActionScript

    1956 readersIn this Quick Tip you will learn how to get the mouse’s current direction in your Flash application using AS3. You could use this to create an interesting control method for a game, using a mouse like a joystick, for example. For now we will just display the direction on screen. Preview Here’s a quick example to

  • View Demo

    Swinging Image Effect with AS3

    1142 readers

  • Create a Password Masking Class in ActionScript 3.0

    2027 readers

  • Quick Tip: How to Automatically Resize an Image to Fit the Screen

    1403 readersThis Quick Tip explains how to use an image as a website background and scale it proportionally to the stage size. It’s great for when you’re using a SWF that’s full-height and full-width inside a webpage. iMac icon by bobbyperux. Final Result Preview Take a look at what we’ll be working on. Resize your browser window and click

  • View Demo

    Change the Text Column Layout with Flash CS5 and AS3

    2546 readers

  • View Demo

    Colorful Animated Menu with AS3

    2181 readers

  • Quick Tip: Detect User Inactivity in a Flash Movie

    1514 readersIn this Quick Tip, you’ll learn how to detect when the user has been inactive for a determined time. Keep reading to find out how! Final Result Preview Let’s take a look at the final result we will be working towards: Step 1: Brief Overview We’ll detect users interaction using Keyboard and Mouse Events, checking for recent activity

  • Quick Tip: Create a Basic Google Search App in Flash

    2121 readersIn this Quick Tip, I will show you how to create a basic search application featuring the Google search engine. Final Result Preview Let’s take a look at the final result we will be working towards: Step 1: Brief Overview Using a TextField and some Events, we’ll send the search terms to Google and display

'>Photoshop CS5 Cutout Video Tutorial â Russell Brown
  • PR: Recosoft PDF2ID 3.0 Released Today
  • Resurrect the Extract Command
  • Subscribe to RSS headline updates from: GurusUnleashed
    Powered by FeedBurner

  • Design & Career Resources

    Open design job and RFQ/RFP listings for Friday, 10 September Courtesy of Design Jobs Live!

    We are professionally laid-back and know that above all else, our staff is what makes our company great.  Working at (mt) Media Temple is more than just a change; it’s a lifestyle.

    Benefits:



    Please take some time to do your homework on us first. When you're convinced we're a match, send us your resume, along with samples of your awesome design abilities, preferably via online portfolio, blog, or website. While you’re at it, tell us a little bit about yourself and why you are passionate about working at (mt).

    This is a full time, on-site position at our Los Angeles headquarters.
    No consideration will be given to contract or telecommute arrangements.  
    Compensation commensurate with experience.




    To apply: jobs@mediatemple.net

    '>(mt) Media Temple: Creative Director
  • need a residence illustrated in digital. â Architectural Illustration Freelance Job
  • Would like a digital cartoon of a wolf climbing a tree. â Caricature Illustration Freelance Job
  • Illustrator â Entertainment Industry Employer â California
  • Subscribe to RSS headline updates from: Design Jobs & Projects
    Powered by FeedBurner

    The latest resources and free stuff (like textures, fonts, Photoshop brushes, scripts, plug-ins, and much more!) from workflowFreelance.com. Read more!
    The latest headlines from workflowFreelance.com. Read more!
  • Popular Search Terms

    Curious what others are searching for? Below are the most popular search terms over the last 30 days.