Image Upload ... 2
Known Issues ...3
Implementing the Block ...4
Using Adobe SWC files ...4
Configuring in Flash ...5
Image Upload
The Image Upload Block enables advertisers to engage users with the brand, by letting them upload and display their own images to the ad. After the user uploads the image to the banner, it can be resized, rotated, and panned before being merged with the creative.
If users want to share their images, they can download the final images and send them to friends by email.
Use Case
Let’s say you want to create an ad where users can place a picture of themselves near the advertiser’s brand mascot and share it with their friends. With the Image Upload block, users can upload their own picture and adjust the size and orientation of the image to fit the image in the ad, for example, Raffaello Sanzio's painting of a cherub.
Users can upload a picture with a face and scale and reposition it so that the face appears within the cutout of the painting.
Users can then email the finished picture.
Demos/Downloads
To view a technical demo in AS3: click here
(http://demo.mediamind.com/blocks/image_upload/index.html -
http://creativezone.mediamind.com/blocks.aspx#ItemName=Image Upload). To download this block and start using it now, click here
(https://platform.mediamind.com/eyeblaster.acm.web/creative/workshop/blocks/downloadblock.aspx?id= 6036).
Known Issues
Implementing the Block
Before you Begin
Make sure you have the following resources available:
Notes:
The template and Block are only compatible with CS5, ActionScript 3.0, and Flash Player 10 or higher.
Using Adobe SWC files
An Adobe SWC file is an archive of pre-compiled Flash symbols, ActionScript code, and other assets that allows a Flash or Flex developer to distribute components and assets easily in a single packaged file. SWCs are sometimes referred to as class libraries because they are typically used to package all the assets used by a class, such as ActionScript code and graphics. They cannot be directly executed by the Flash Player. Instead, they must be added to a Flash project’s library path.
Blocks that use SWCs have the SWC file in the root folder of the downloaded files. You can choose to add them on the application level, where Flash will automatically recognize them for use in any project, or to add them on the document level, where only your current Flash project will recognize them.
1. Copy the SWC file to your Flash components folder. The file path is typically:
Windows XP: Primary Disk\Documents and Settings\user\Local Settings\Application Data\Adobe\ Flash Version\language\Configuration\Components
Windows Vista: Primary Disk\Users\user\Local Settings\Application Data\Adobe\ Flash Version\language\Configuration\Components
Windows 7: Primary Disk\Users\user\AppData\Local\Adobe\Flash Version\language\Configuration\Components
Macintosh: Primary Disk\Users\user\Library\Application Support\Adobe\Flash Version\language\Configuration\Components
Note: Primary Disk, user, Flash Version, and language vary depending on your Flash installation. 2. If you had Flash open during the previous step, then restart Flash.
1. Open your Flash project.
2. In the menu bar, go to File > Publish Settings.... 3. Click ActionScript Settings or the icon.
Note: The actual UI text and graphics may vary by Flash and ActionScript version. 4. In the Library path tab, click to add a new path.
5. Click the new path to select it, and then click to browse to the location of the SWC file.
6. Click OK to confirm.
7. In the Flash project’s ActionScript, import the classes as normal with the #import directive. Refer to the proprietary documentation for the correct class names and usage.
Configuring in Flash
Graphic Elements
In Image_Upload_AS3.fla, there are graphic elements in mc_main that can be edited to customize the creative. You can edit the graphic elements as necessary to customize your creative's look and feel.
1. Go to the graphics layer in the second key frame of the timeline. 2. Find the mc_main movie clip and edit the following objects as required:
Instance Name Description Screen capture mainError_mc This movie clip displays error
messages
mc_controls The UI for rotating, zooming and panning the uploaded image mc_upload_btn The button that opens the upload
dialog for selecting the image to upload
mc_send_btn The button that displays the movie clip mc_email that allows sending the image by email mc_back_btn The button that resets the
feature, allowing the user to upload a new image
mc_save_btn The button that saves the image on the user's machine
mc_mainPostcard Inside this movie clip, you’ll find the mc_postcardFront movie clip. The content of the
mc_postcardFront can be replaced by the relevant advertiser creative.
mc_email This movie clip contains the Send form.
The three input fields and the submit button must remain and keep their instance names, but you can change the colors, positions. etc., as needed. You can also customize the content and add graphic elements.
mc_thankYou This movie clip is displayed after the user has sent or saved the image. You can add and modify the content according to your creative needs.
Code Implementation
In the code, you can configure the text displayed upon certain messages and the name of the Data Capture form.
1. In the as layer, in the third key frame of the timeline, open the Actions panel.
3. In line 760, you can change the name of the Data Capture component form as follows:
Setting Up in the Sizmek MDX Platform
The Data Capture form needs to be set up when using the Upload Image Block. For a more detailed guide on the DataCapture component: click here
(https://platform.mediamind.com/OnLineHelp/MediaMind/FlashAPI/eyeblaster/data/DataCapture.html). During the ad creation process, you will receive notification that your asset contains a Data Capture component. A wizard will guide you through the set-up process.
1. Upload the ad to the Sizmek MDX platform.
2. When the platform detects the Data Capture component in the ad assets, click Yes to confirm the dialog.
If you are creating a new form, choose Creating a New Form and do not edit the fields.
4. Expand the Outgoing Email Settings section and enter the following information:
Email Address: The advertiser’s email address as it will appear in the recipient's inbox (e.g., "noreply@<advertizer>.com").
Body > HTML format: Paste the content of the file
DataCapture_Content\email_for_datacapture.txt in this field. This is the content of the email that the recipient will receive. This is an HTML template.
Note: The sent email will be opened by the recipient email client. There may be differences in the interpretation of the HTML according to the email client, therefore it is recommended to test it by opening the email with different email clients.
