O'Reilly logo

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Flash with Drupal

Book Description

Build dynamic, content-rich Flash CS3 and CS4 applications for Drupal 6

  • Learn to integrate Flash applications with Drupal CMS

  • Explore a new approach where Flash and HTML components are intermixed to provide a hybrid Flash-Drupal architecture

  • Build a custom audio and video player in Flash and link it to Drupal

  • Build a Flash driven 5-star voting system for Drupal at the end of the book

In Detail

Due to its power and expandability, Drupal has become one of the most popular open source content management systems. At the same time, Flash has been adopted for its ability to create beautiful and dynamic web applications. By combining these technologies, you can create Flash applications that are both visually stunning and rich in content.

This book is an in depth discussion and tutorial on how to integrate Flash applications with Drupal CMS. It will describe the best techniques and practices for integrating Flash technology with the power and flexibility of Drupal by building real-life Flash applications.

Within this book, you will learn how to build Flash applications that show text from within Drupal and also present images, music, and video within a single Flash application. You will also be able to take advantage of the expandable fields and content filtering provided from the CCK and Views modules to add flexibility and power to your Flash applications. Finally, you will learn how to add your own custom functionality to Drupal and then utilize that from within your Flash applications leaving you with a world of possibilities.

This book starts out with a simple introduction to Flash and Drupal technology where you will create a simple Flash application and then embed that within Drupal. From there, each subsequent chapter builds on the previous chapters tackling a new and challenging task.

For each new task, you will take a step-by-step approach to building a real-life application that utilizes the feature introduced within that chapter. You will also explore alternative design approaches that will eliminate the current design challenges that developers face when building Flash-driven Drupal sites; and all this while staying true to the Object Oriented Principles that govern the foundation of the ActionScript 3 language. By the end of this book, you will be able to apply all the lessons learned from this book to any other use case you may encounter.

Table of Contents

  1. Flash with Drupal
    1. Flash with Drupal
    2. Credits
    3. About the Author
    4. About the Reviewer
    5. Preface
      1. What this book covers
      2. What you need for this book
      3. Who this book is for
      4. Conventions
      5. Reader feedback
      6. Customer support
        1. Downloading the example code for the book
        2. Errata
        3. Piracy
        4. Questions
    6. 1. Flash with Drupal
      1. Why Flash with Drupal?
      2. Who is this book for?
      3. Getting started with Drupal
        1. Installing Drupal
          1. Installing Apache-MySQL-PHP (AMP)
          2. Creating the Drupal database
          3. Creating a database user
          4. Increasing PHP memory
          5. Installing Drupal
        2. Adding content to Drupal
      4. Getting started with Flash
        1. Creating a new Flash project
          1. Setting up the workspace
          2. A: The Stage
          3. B: The Toolbar
          4. C: The Timeline
          5. D: The Properties panel
          6. E: The Color Palette
          7. F: The Library
      5. Creating a Flash application
        1. Creating a background
          1. Rectangle properties
          2. Adding a gradient
        2. Adding text to a Flash application
          1. Text properties
        3. Compiling our Flash application (making a SWF)
          1. Publish Settings
      6. Adding Flash content to Drupal
        1. Installing a contributed Drupal module
        2. Adding Flash!
      7. Summary
    7. 2. Building a "Hello World" Application
      1. How Flash and Drupal communicate
        1. Understanding web services
          1. Synchronous versus asynchronous programming
        2. Setting up Drupal for web services
          1. Installing and configuring the Services module
          2. Servers and Services
          3. Installing AMFPHP
          4. Services configuration
          5. Creating a Services key
          6. Services settings
          7. Service Permissions
        3. Building a web service-driven "Hello World" application in Flash
          1. Step 1: Creating our Flash application
          2. Step 2: Creating a main.as ActionScript file
          3. Step 3: Connecting to Drupal
            1. Using the NetConnection class
            2. Connecting to a remote gateway
            3. Using the NetConnection call routine
          4. Step 4: Session handling
          5. Connecting to Drupal using system.connect
          6. Step 5: Drupal says "Hello World"
          7. Loading a node in Flash
            1. Programming without race conditions
          8. Step 6: Hooking up the text
          9. Step 7: Passing the node ID using FlashVars
            1. Using FlashVars in a Flash application
          10. Step 8: Adding it to Drupal
      2. Summary
    8. 3. Flash and CCK
      1. Overview of a typical recipe web site
      2. Using Drupal's Content Construction Kit
        1. Creating a new content type
        2. Adding custom fields to your Recipe content type
          1. Adding a new field
          2. Changing the default Body field
      3. Showing CCK fields in Flash
        1. Building a Recipe widget in Flash
        2. Adding dynamic TextFields for Drupal content
        3. Using ActionScript to show Drupal CCK fields
          1. Using the Services Administrator
          2. Showing CCK information in ActionScript
            1. Showing the node description
            2. Showing the ingredients and instructions CCK field
          3. Adding ScrollBars to our TextFields
      4. Creating a Drupal node template for Flash
        1. Using the Content Template module (Contemplate)
      5. Summary
    9. 4. Drupal Images in Flash
      1. Image handling in Drupal
        1. ImageField for CCK
        2. Installing the ImageField module
          1. Adding an Image field to our Recipe content type
          2. Adding an image to our Recipe node
          3. Verifying that the image is attached
        3. Adding an image to our Recipe Flash application
          1. Adding a MovieClip container for our image
          2. Using ActionScript to load the Recipe image
            1. Working with the Image path
            2. Creating a loadImage function
            3. Loading an Image
        4. Resizing an image
        5. Preserving the width and height ratio (scaling)
        6. Using Drupal's ImageCache with Flash
          1. Creating an ImageCache preset
          2. Adding an ImageCache image in Flash
            1. Changing our ActionScript for ImageCache
        7. Adding the new Recipe Flash application to Drupal
      2. Summary
    10. 5. Drupal Audio in Flash
      1. Working with audio in Drupal
        1. Installing the getID3 library
        2. Setting up the Audio content type
        3. Creating an Audio node
        4. How our player will be different (and better)
      2. Building a custom audio player for Drupal
        1. Examining the Audio node using Services Administrator
        2. Referencing the audio file path
        3. Writing a custom AudioPlayer class
        4. Playing audio in Flash
        5. Using our AudioPlayer class to play audio
      3. Adding controls to your custom audio player
        1. Adding a play and pause button
          1. Creating a base button MovieClip
          2. Adding the PlayButton movie clip
            1. Drawing a play icon
        2. Creating a pause button from the play button
        3. Linking MovieClips to ActionScript
        4. Adding the AudioPlayer to the stage
        5. Modifying the AudioPlayer class to use play and pause
          1. Step 1: Adding the SoundChannel
          2. Step 2: Adding load, play, and pause functions
          3. Step 3: Reference the mcAudioPlayer MovieClip
          4. Step 4: Hooking up our buttons!
            1. Declaring playButton and pauseButton as buttons
        6. Modifying our main.as file to use our new AudioPlayer
      4. Summary
    11. 6. Flash Video in Drupal
      1. Working with video in Drupal
        1. Creating a video content type
          1. Adding a video file field
        2. Installing and configuring the jQuery Media module
          1. Configuring the jQuery Media module
          2. Installing a media player
        3. Creating a video node
        4. Building a custom video player in Flash
          1. Creating a MediaPlayer base class
          2. Adding play and pause button instances to MediaPlayer
          3. Removing uncommon code from MediaPlayer
          4. Modifying the AudioPlayer class to derive from MediaPlayer
          5. Extending and overriding base (super) class functionality
          6. Creating a VideoPlayer class
          7. Working with Video, NetStream, and NetConnection
          8. Initializing our video variables
          9. Creating the video object
        5. Adding video functionality
          1. Adding video load
          2. Adding play and pause functionality
        6. Creating a new VideoPlayer MovieClip
        7. Linking the VideoPlayer to Drupal
          1. Loading and playing our Drupal video
        8. Adding our custom media player to Drupal
      2. Summary
    12. 7. The Hybrid Approach Part 1: Componentization
      1. What is the hybrid approach?
      2. Creating a media player control bar
        1. Creating a ControlBar class
        2. Removing the ControlBar dependency from MediaPlayer
        3. Adding the ControlBar to the stage
        4. Communication between ControlBar and MediaPlayer
      3. Creating a communication gateway
        1. Using static functions
          1. Using the this pointer
          2. Making the connections
        2. Adding the ControlBar to our Flash project
          1. Removing the control bar from the MediaPlayer
      4. Summary
    13. 8. The Hybrid Approach Part 2: Remote Control
      1. Client-side Flash communication
        1. Flash to JavaScript communication
          1. Calling a JavaScript function from Flash
          2. Calling a Flash function from JavaScript
          3. Initializing the ExternalInterface
          4. Adding the MediaGateway initialization to main.as
          5. Adding outgoing messages to the MediaGateway
          6. Adding remote or local functionality
        2. Building a JavaScript Gateway
          1. Locating a Flash application using JavaScript
          2. Creating the gateway functions between two Flash applications
        3. Flash and JavaScript synchronization
          1. Step 1: Create an array of communicating Flash applications
          2. Step 2: Flash calls to see if the JavaScript Gateway is ready
          3. Step 3: Flash application registers with JavaScript
          4. Step 4: JavaScript initializes our Flash when all have registered
        4. Using our remote control within Drupal
          1. Adding the JavaScript Gateway to Drupal
          2. Adding our Media Player to Drupal
          3. Changing our Content Template
          4. Adding the Remote Control
            1. Adding block visibility for video and audio node types
          5. Creating a FlashNode template
      2. Summary
    14. 9. Flash with Drupal Views
      1. Using the Drupal Views module
        1. Views: Installation and Configuration
        2. Setting up a view
          1. Creating a new page view
          2. Adding fields to a view
          3. Adding a Filter to our view
      2. Using the Views Service
        1. Step 1: Install the Views Service
        2. Step 2: Configure user permissions
        3. Step 3: Verify it works
      3. Building a Flash Playlist using Drupal
        1. Creating a node teaser
          1. Creating a teaser background
          2. Using the timeline to add different teaser states
          3. Adding a title to the teaser
        2. Creating a Teaser class
        3. Building a ListView class
          1. Adding our ListView to Flash
        4. Adding the ListView to our Media Player
          1. Creating a Media Region
          2. Populating the list view
      4. Summary
    15. 10. User Management
      1. Drupal user management
        1. Adding new user roles
        2. Adding permissions to a user role
        3. Creating new users and assigning them roles
      2. The User Service module
          1. Installing the User Service
          2. Configuring permissions
          3. Configuring the User Service module
      3. Building a Flash user login block
        1. Welcoming our logged-in users
        2. Creating a login button
        3. Adding some status text
        4. Creating a mcLogin movie clip
      4. User handling within Flash
        1. Hooking up our login button
        2. Checking for a username and password
      5. Logging into Drupal
        1. Adding a user responder
        2. Logging in
        3. Logging out
      6. Summary
    16. 11. Adding Content to Drupal
      1. Drupal Services security
        1. The API key
          1. API key configuration
          2. The allowed domain and crossdomain.xml
          3. How to use the API key
        2. Building a Drupal service in Flash
        3. The DrupalService class
          1. Adding the API key to our DrupalService
          2. Adding arguments to the service call
            1. Adding the base URL
            2. Adding the TimeStamp
            3. Adding the nonce
            4. Adding a hash
        4. Adding DrupalService functionality to main.as
      2. Building a node editor in Flash
        1. Creating view, edit, and add tabs
          1. Adding normal, hover, and selected states
          2. Duplicating the mcView for the edit and add tabs
        2. Adding a background to our node
        3. Changing the node view
        4. Creating a node edit form
      3. Adding content to Drupal from Flash
        1. Adding tab functionality
        2. Saving a node from Flash
      4. Editing existing content in Drupal
      5. Summary
    17. 12. Build a Drupal Five-star Voter in Flash
      1. Building a custom Voting Service for Drupal
        1. The module info file
        2. Voting Service module
          1. Installing the Voting Service module
        3. Building a Custom Service
          1. Registering external web services using hook_service
          2. Defining web service callback functions
          3. Adding arguments and voting logic using Voting API
            1. The Voting API module
      2. Building a five-star voter in Flash
        1. Voter design
          1. Making some stars
          2. Adding different vote types
          3. Adding the vote layers to the mask layer
          4. Adding vote hit regions
            1. Using name conventions
      3. Creating a Voter class in ActionScript
        1. Initializing the voter
        2. Adding the event handlers
        3. Handling the voting hover events
        4. Getting a vote from Drupal
        5. Setting a vote in Drupal
        6. Adding the voters to main.as
      4. Summary