There are currently two types of flash event boxes, one's that we add in the layout file that call their data from page content similar to the flash rotating images header, and one's that are added by the client through perpetua in the Add Items menu.

First, we will discuss how to create the page content version.

Hopefully by now you have already created the flash event box background. If you have not, then you need to do that before continuing. Cut the image with a transparent background (if there is a drop shadow for instance) and save for web as a png-24 file. If there is no transparency needed you may save as a web jpg.

Make sure to write down the dimensions of the background - you will need that when its time to go into flash.

This part can be complicated so make sure you follow closely. 

Under where the pictures rotate in and out are the counter boxes that go: 1 2 3 4 5....

First, we need to change the color of these to match the colors in the concept. Even though there are two colors, the active and inactive state, we need to change three color boxes. To do this, we need to go three layers deep into the counter. We can do this by double-clicking on the counter box to move one layer. Do that three times and you should be at this screen:

Double click on the counter box to pull up its properties panel. Once you are here you should see the bakground color of the box down at the bottom bar. If you don't see this, just double click on the counter box one time to make your screen look similar to the one below:

Click on the Paint Bucket's Color and choose or enter in the correct color. 

*Note: You can find the hexadecimal color number in photoshop by using the eyedropper tool, clicking on the color and then clicking on the new top layer color you've selected in the tool bar on the left. The number we will need is at the bottom of the color picker window that pops up.

After changing the color of the background layer, we need to change the first frame of hover layer's to be the same color as the background. To go back to the button's animation timeline, click button_mc below the timeline. Click on the following keyframe then double click on the button on the stage of this layer to pull up it's properties and change it's color to be the inactive state color.

To change the active state/hover color, click on the following keyframe to select the hover's color.

Now change the hover color the same way you changed the background color with the proper color from the concept.

Next, we need to position the counter boxes in the correct position. Click on the numbered counter box and move it within the stage to where the first box starts according to the concept. The boxes will automatically number themselves and multiply according to how many events are submitted by the client. The numbers are set to be aligned left starting at the initial position and moving over 18 pixels to the right for every new button that is created. 

If in the concept, the buttons are aligned to the left, you are done with this step.

If in the concept, the buttons are aligned to the right, move the button to where the last button should go (i.e. the furthest one to the right). Then click on this frame in the actions layer:

Open up your actions window by going to the menu and select Window > Actions. Change the code here from this:

...to this:

So, what we did was added these three lines of code in between the "i" variable declaration and the "z" variable declaration:

zOrig = this.buttonloop_mc._x;
button1x = zOrig-((ChildPageTotal-1)*18);
this.buttonloop_mc._x = button1x;

So we have the counter box colors set up, now we want to make sure that any pictures that load in this flash box only load where we want them to and not over the entire background.

In order to do this, we need to modify the mask, which controls the dimensions of the images that show up.

To modify the mask's dimensions, we need to load the mask layer. We can do this by going to the layers on the bottom right in flash and double-clicking on action-sequential.

Now you should be at the action sequential movie clip which loads into the loadactions layer of the root timeline. It looks like this:

The orange box is the mask. The image is loaded dynamically to the 0,0 point of this movie clip and only shows where the mask is. The dotted line box is the text box. We wil get to it in a little bit.

To make sure the mask is sized in the right dimensions, we simply can drag the background image we imported earlier into a new layer (put the new background layer below the mask's layer). For this example, our background layer is called flash_event_box_bg.png

Once dragged in the layer should look like this:

Now we want to make the mask layer fit into the area in which we want the pictures to show up. DO NOT MOVE THE MASK. Resize the orange mask shape keeping the top left at the 0,0 point and dragging the lower right corner of the mask (you may need to hold the option key down while resizing to keep the top left in a fixed position) to cover the area where you want your image to show using the Free Transform Tool: You may need to zoom in all the way (2000% magnification) to make sure the mask and the image area are right on the 0,0 point and that they cover the entire image background area properly.

An example of how it should look so far is show below:

Once you have done that, the mask is ready, but we're not done yet. There is a transition animation that plays in between each event labeled in the timeline as "wipeoff." This is simply a white box that moves and fades in and out over the loaded image. We may or may not need to adjust its size and positioning.

The wipeoff's starting point is just to the left of the mask like this:

The animation after this frame moves the white box over the image and fades out in the process. We simply need to make sure that it completely covers the mask when it gets to the end of the animation. You can resize the box on this frame using the Free Transform Tool :

You may need to hold the option key if it tries to resize all four sides instead of just the two you want. Finally, the white box does a flash on the next frame and we just have to do the same resize if does not cover the whole mask.

The last step to this section is to resize the hotspot. This is an empty button that will be a client updatable link for each event. Select the hotspot layer on the first frame the button is on. Then click on the blue image (the hotspot button) on the stage and resize it to the height and width of your event box using the Free Transform Tool , or in it's properties window, and position it over the whole event box area. It should look like this:

Alright so some flash event boxes show a some text under the rotating images. This is already set up for us, all we need to do is format the box to make sure the text does not show up in a random spot. This part is actually very easy.

Select the text layer and it will bring the text box into a transformation mode where you can resize it. Just make sure you are using the Selection Tool  not the Free Transform Tool . Using the Free Transform Tool will squish or expand the actual text instead of just adjusting the size of the text box. You can now move and resize the text box. Once you have finished it should look like below:

Now type some default text into the text box to make sure the font, color and size of the text match the concept. If they do not, style them accordingly using the properties window at the bottom. 

If you change the styling you must then click the embed button on the right of the properties window. In the popup, hold the shift key and select Uppercase, Lowercase, Numerals, and Punctuation. Then click OK.

This will make sure every computer will display the fonts properly regardless of if the viewer has them installed.

After double checking that the mask and text area are in the right place, you should now delete the layer you dragged the background image into in this action_sequential movie clip. This was only used for us to line everything up properly and we no longer need this since it is on our main timeline in scene 1.

First, do a save as into your project's HTML folder within a new folder called Flash if it doesn't already exist. Also within this folder, copy 749.xml (for testing purposes only) and XMLtoObject.as (needed for exporting—this is used to parse the xml file properly) from the Flash Templates folder.

Then in your flash file. You can do the keyboard shortcut: command + return, or select Control > Test Movie from the menu.

Make sure your numbers, text, image and mask are all showing up properly with the right spacing.

So now were just about done in flash. All we need to do now is publish what we have done. We do this by going to: File > Publish. Your file will be outputted wherever you originally opened/saved your flash file.

Upload the file to the images/layouts folder of the site.

Since the file calls from page content we need to add this to our layout file and add it to our page content config file.

First add this node to the _default_"pageID # Here".xml file in the config > pagecontent folder:

<content name="Event Box" action="sequential" flashfile="eventBox_home.swf" count="dyn" mincount="2" maxcount="10" type="image,link,header_text" />

Obviously replace "pageID # Here" and "eventBox_home.swf" with the proper file names. Then make note of what number in the list of nodes you inserted this (should either be the first or near the top).

Upload the config folder to the server and then go to the site and save page content for your event box. You may need to do this twice since it may only give you the option to do one event at the start. If that is the case, just save it once then go back in and add a "New Event Box" image and resave. You need at least 2 events for it to function properly.

Next, add this line in your layout file as the div where you are placing your event box file:

<div id="eventBox">
      <cfoutput>
      <script type="text/javascript">
      // <![CDATA[
            var flashvars = {xmlFile:"#regionXmlLocation_1#", xmlNode: "#regionXmlNode_1#"};
            var params = {quality: "high", wmode: "transparent"};
            var attributes = {};
            swfobject.embedSWF("/images/layouts/#regionFlashFile_1#", "eventBox", "412", "218", "9.0.0", "/includes/flashdetect2/expressInstall.swf", flashvars, params, attributes);
      // ]]>
      </script>
      </cfoutput>
</div>

Replace the div's id with your own if needed, input the proper dimensions (width and height) to the red areas, then change the three "#regionXmlLocation_1# numbers to the numbered node you placed the previous line in your _default xml file (i.e. if it's first in the list is should stay as 1, if it's second, change it to 2, etc.). Upload your layout file and you should be good to go.

The Perpetua Event box is easier to modify since we don't have to deal with page content and everything we need to edit is all in one place.

If you have not cut the background of the event box from the photoshop concept file, then you need to do that before continuing. Cut the image with a transparent background (if there is a drop shadow for instance) and save for web as a png-24 file. If there is no transparency needed you may save as a web jpg.

Make sure to write down the dimensions of the background - you will need that when its time to go into flash.

Now go to: Artserv > ITWeb Production > Flash Templates
open up flashbox_small.fla

Now we will begin making the Perpetua flash event box!

What we need to do first is delete the current background. Do this by clicking on it on the stage and hitting delete. Next we need import the background we made in photoshop in it's place by going to File > Import > To Stage.

Remember where we needed to know what size the backgorund was? We will re-size the stage by clicking on size in the properties bar at the bottom of the screen and modifying them there.

After you select the image, import it and resize the stage, we need to make sure it's centered. In the menu, go to Window > Align. This should bring up your align panel. Select your background image on the stage, click the "To Stage" button in the align panel, and then click the Align Horizontal Center button (first row, 2nd button from left) and the Align Vertical Center button (first row, 5th button from left).

This part can be complicated so make sure you follow closely. 

Under where the pictures rotate in and out are the counter boxes that go: 1 2 3 4 5....

First, we need to change the color of these to match the colors in the concept. Even though there are two colors, the active and inactive state, we need to change three color boxes. To do this, we need to go three layers deep into the counter. We can do this by double-clicking on the counter box to move one layer. Do that three times and you should be at this screen:

Double click on the counter box to pull up its properties panel. Once you are here you should see the bakground color of the box down at the bottom bar. If you don't see this, just double click on the counter box one time to make your screen look similar to the one below:

Click on the Paint Bucket's Color and choose or enter in the correct color. 

*Note: You can find the hexadecimal color number in photoshop by using the eyedropper tool, clicking on the color and then clicking on the new top layer color you've selected in the tool bar on the left. The number we will need is at the bottom of the color picker window that pops up.

After changing the color of the background layer, we need to change the first frame of hover layer's to be the same color as the background. To go back to the button's animation timeline, click button_mc below the timeline. Click on the following keyframe then double click on the button on the stage of this layer to pull up it's properties and change it's color to be the inactive state color the same way we changed the color of the background layer.

To change the active state/hover color, click on the following keyframe to select the hover's color.

Now change the hover color the same way you changed the background color with the proper color from the concept.

Next, we need to position the counter boxes in the correct position. Click on the numbered counter box and move it within the stage to where the first box starts according to the concept. The boxes will automatically number themselves and multiply according to how many events are submitted by the client. The numbers are set to be aligned left starting at the initial position and moving over 18 pixels to the right for every new button that is created. 

If in the concept, the buttons are aligned to the left, you are done with this step.

If in the concept, the buttons are aligned to the right, move the button to where the last button should go (i.e. the furthest one to the right). Then click on this frame in the actions layer:

Open up your actions window by going to the menu and select Window > Actions. Change the code here from this:

...to this:

So, what we did was added these three lines of code in between the "i" variable declaration and the "z" variable declaration:

zOrig = this.buttonloop_mc._x;
button1x = zOrig-((ChildPageTotal-1)*18);
this.buttonloop_mc._x = button1x;

So we have the counter box colors set up, now we want to make sure that any pictures that load in this flash box only load where we want them to and not over the entire background.

In order to do this, we need to modify the mask, which controlls the dimensions of the images that show up.

The orange box on the stage is the mask. The image is loaded dynamically to the image1 movie clip which is behind the mask and only shows where the mask is.

Now we want to make the mask layer fit into the area in which we want the pictures to show up. Resize and position the orange mask shape (you may need to hold the option key down while resizing to keep the top left in a fixed position) to cover the area where you want your image to show using the Free Transform Tool: You may need to zoom in all the way (2000% magnification) to make sure the mask covers the entire image background area properly.

An example of how it should look so far is show below:

Once you have done that, the mask ready, but we're not done yet. There is a transition animation that plays in between each event labeled in the timeline as "wipeoff." This is simply a white box that moves and fades in and out over the loaded image. We may or may not need to adjust its size and positioning.

Make sure the starting point is just to the left of the mask like this:

The animation after this frame moves the white box over the image and fades out in the process. We simply need to make sure that it completely covers the mask when it gets to the end of the animation. You can resize the box on this frame using the Free Transform Tool :

You may need to hold the option key if it tries to resize all four sides instead of just the two you want. Finally, the white box does a flash on the next frame and we just have to do the same resize if does not cover the whole mask.

Next we need to adjust the position of the image that gets loaded. The image also has a fade in/fade out animation that plays each time is it loaded or going to the next event. We need to move the image to the top left point of the mask on each of these keyframes. Because the movie clip is empty and the images are loaded dynamically, this is difficult to do by eye. The easiest way to do this is select the orange box (our mask layer) and find it's x and y coordinates in the properties window at the bottom of the screen. 

Then select the first keyframe in your timeline in the image1 layer that has content:

Next put your mouse over the stage and scroll with the scroll wheel on your mouse. This brings up the properties window of the image1 movie clip. Now type in the same x and y coordinates for this image1 movie clip as the mask (orange box).

Now repeat this step for the next three keyframes in this layer. If you do not do this for all four keyframes in the image1 layer, the image will move around while it fades in and out. We do not want that.

The last step to this section is to resize the hotspot. This is an empty button that will be a client updatable link for each event. Select the hotspot layer on the first frame the button is on. Then click on the blue image (the hotspot button) on the stage and resize it to the height and width of your event box using the Free Transform Tool  and position it over the whole event box area. It should look like this:

Select the text box on the stage (the dotted line rectangle) and it will bring the text box into a transformation mode where you can resize it. Just make sure you are using the Selection Tool  not the Free Transform Tool . Using the Free Transform Tool will squish or expand the actual text instead of just adjusting the size of the text box. You can now move and resize the text box. Once you have finished it should look like below:

Now type some default text into the text box to make sure the font, color and size of the text match the concept. If they do not, style them accordingly using the properties window at the bottom. 

After styling you must then click the embed button on the right of the properties window. In the popup, hold the shift key and select Uppercase, Lowercase, Numerals, and Punctuation. Then click OK.

This will make sure every computer will display the fonts properly regardless of if the viewer has them installed.

First, do a save as into your project's HTML folder within a new folder called Flash if it doesn't already exist. Also within this folder, copy xml_flashbox.xml (for testing purposes only) and XMLtoObject.as (needed for exporting—this is used to parse the xml file properly) from the Flash Templates folder.

Then in your flash file you can do the keyboard shortcut: command + return, or select Control > Test Movie.

Make sure your numbers, text, image and mask are all showing up properly with the right spacing.

So now were just about done in flash. All we need to do now is publish what we have done. We do this by going to: File > Publish. Your file will be outputted wherever you originally opened/saved your flash file.

Within your HTML folder go to xml > defaults > eventbox and there should be a mod_flashbox.xml flie in there. If none of this exists, create it. The mod_flashbox.xml file is where we tell Perpetua the flash file to use, the flash dimensions, its name and the size of the client's images. Here's an example of what should be in it:

<?xml version="1.0" encoding="UTF-8"?>
<flashbox>
      <flashoption>
            <basename>small</basename>
            <displayname><![CDATA[Small]]></displayname>
            <width>223</width>
            <height>184</height>
            <image_width>209</image_width>
            <image_height>86</image_height>
            <bgcolor><bgcolor>
            <bgimage repeat="" position=""></bgimage>
      </flashoption>
</flashbox> 

You should adjust the basename node to be what comes after flashbox_ in the .swf file name. In this example the .swf file we exported was called "flashbox_small.swf" so we put small in the basename node. The displayname node can be whatever you want but this is what is shown to select between multiple event boxes, just make sure you only change what is between the CDATA brackets. Generally we use terms such as Small, Medium, Large, etc. Change the width and height nodes to be the width and height of your whole flash file. Change the image_width and image_height to be the height and width of your mask in your flash file.

You may add additional flash .swf files by duplicating the flashoption node and adjusting the same content between accordingly for a different event box you have created. Just make sure is is still within the flashbox node and either before or after your first entry. The entries will show up in order in the list from top to bottom.

Next, copy all your event box .swf files to the xml > defaults > eventbox folder. Remove any others that are not going to be used.

Finally, transfer all the files in this folder to the server in the same folder directory. (i.e. HTML > xml > defaults > eventbox)

Now test it on a hidden page of the site. Go to the perpetua menu while logged in. Under Add Items, select Event Box. Upload images, links and text and click save. Make sure everything works and make adjustments if something does not work.